Soy principiante en programación y estoy intentando seguir un tutorial para un juego sencillo, el del dinosaurio de Chrome. Llevo toda la tarde tratando de descifrar porqué el suelo de mi juego no se mueve.
Este es el error que me aparece (Opera GX):
"Uncaught ReferenceError ReferenceError: CalcularDesplazamiento is not defined"
No sé a que se deba el problema, es mi primera vez preguntando en el sitio y una de mis primeras experiencias escribiendo código.
Intenté repetir el video tutorial varias veces para encontrar el origen del problema, pero realmente no encuentro la razón por la que el suelo anteriormente mencionado no se mueve.
Este es mi código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dinosaurio</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
height: 100vh;
background: #584040;
display: flex;
align-items: center;
}
.contenedor{
width: 920px;
height: 280px;
margin: 0 auto;
position: relative;
background: linear-gradient(#B7D6C7, #FFe2d1);
}
.dino{
width: 84px;
height: 84px;
position: absolute;
bottom: 22px;
left: 42px;
z-index: 2;
background: url(dino.png)repeat-x 0px 0px;
background-size: 336px 84px;
background-position-x: 0px;
}
.dinocorriendo{
animation: animarDino 0.25s steps(2) infinite;
}
.dino-estrellado{
background-position-x: -252px;
}
.suelo{
width: 200%;
height: 42px;
position: absolute;
bottom: 0;
left: 0;
background: url(suelo.png) repeat-x 0px 0px;
background-size: 50% 42px;
}
.score{
width: 100px;
height: 30px;
position: absolute;
top: 5px;
right: 15px;
z-index: 10;
color: #d48871;
font-family: Verdana;
font-size: 30px;
font-weight: bold;
text-align: right;
}
@keyframes animarDino{
from{
background-position-x: -84px;
}
to{
background-position-x: -252px;
}
}
</style>
</head>
<body>
<div class="contenedor">
<div class="suelo"></div>
<div class="dino dinocorriendo"></div>
<div class="score">0</div>
</div>
<script>
var time = new Date ();
var deltaTime=0;
if(document.readyState === "complete" || document. readyState ==="interactive"){
setTimeout (Init, 1);
}
else{
document.addEventListener("DOMContentLoaded", Init)
}
function Init(){
time=new Date();
start ()
loop ()
}
function loop(){
deltaTime =(new Date() - time) /1000;
time = new Date ();
update()
requestAnimationFrame(loop);
}
var sueloY=22;
var velY=0;
var impulso=900;
var gravedad=2500;
var dinoposX=42;
var dinoposY=sueloY
var sueloX=0;
var VelEscenario=1280/3;
var GameVel=1;
var score=0;
var parado=false;
var saltando=false
var contenedor;
var dino;
var textoscore;
var suelo;
var gameover;
function start (){
gameover=document.querySelector(".Game-Over");
suelo=document.querySelector(".suelo");
contenedor=document.querySelector(".contenedor");
textoscore=document.querySelector(".score");
dino=document.querySelector(".dino");
}
function update(){
MoverSuelo();
}
function MoverSuelo() {
sueloX += CalcularDesplazamiento();
suelo.style.left = -(sueloX % contenedor.clientWidth) + "px";
}
function calculardesplazamiento(){
return VelEscenario * deltaTime * GameVel;
}
</script>
</body>
</html>
por adelantado muchas gracias, realmente me estoy pegando un gran problema con esto.
calculardesplazamiento()
en minúsculas, pero entonces lo invocas comoCalcularDesplazamiento()
capitalizado. Ten en cuenta que JavaScript y la mayoría de lenguajes de programación son sensibles a mayúsculas / minúsculas