0

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.

3
  • Creo que se trata de que lo defines como calculardesplazamiento() en minúsculas, pero entonces lo invocas como CalcularDesplazamiento() capitalizado. Ten en cuenta que JavaScript y la mayoría de lenguajes de programación son sensibles a mayúsculas / minúsculas
    – Héctor M.
    Commented el 11 ene. 2023 a las 2:09
  • Motivo por el cual yo copio y pego todas las variables, solo escribo el nombre la primera vez
    – Yussef
    Commented el 11 ene. 2023 a las 2:37
  • Eso era!! muchas gracias enserio, seguire adelante con mi proyecto ahora que pude salir de ese pequeño problema jaja, no saben la cantidad de tiempo que estuve buscando la respuesta
    – Leo Godoy
    Commented el 11 ene. 2023 a las 17:24

1 respuesta 1

0

Es solo un error en la forma en la que se define el método tal y como lo mencionan en un comentario, el código con el ajuste compila correctamente.

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;

}
* {
  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;
  }
}
<!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>
</head>

<body>
  <div class="contenedor">
    <div class="suelo"></div>
    <div class="dino dinocorriendo"></div>
    <div class="score">0</div>

  </div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.