Problème de saut en javascript

Ludo57440 -
Ludo57440 - 29 avr. 2018 à 16:15

Bonjour, j'ai un problème pour le jeu que je souhaite créer, j'ai créé un personnage que j'ai réussi à animer mais en ajoutant let bohnomme pour permettre d'intégrer les différentes fonctions dans un "objet", le personnage disprait et je ne peux pas conséquent pas faire fonctionner mon jeu.

Pouvez-vous m'aider s'il vous plait ?

Merci d'avance !

<html>

    <head>

<meta charset= "utf=8"/>

 <title> BODYJUMPER </title>

        </head>

<body style="margin: 0; java-script: hidden">

<canvas id="bonhomme"></canvas>

<script>

var canvas = document.getElementById("bonhomme"),

    context = canvas.getContext("2d");

let bonhomme = {

jumpHeight = 100

var r = 1000,

    step = 0;

var width = window.innerWidth,

height = window.innerHeight;

canvas.width = width;

canvas.height = height;

context.imageSmoothingEnabled= false;

position: {

   x: width/4,

    y: height-200,

}, 

        PARTIE ANIMATION

    var sprites = new Image();

sprites.onload = animate;

sprites.src = "spritesbj.png"; //  stickman à 2 étapes : 1e sprite pied en avant (0) / 2e sprite pied en arrière (1) => effet de course

function animate() {

    draw();

    update();

    requestAnimationFrame(animate); // on appelle périodiquement la fonction animate

}

function draw() {

    context.clearRect(0, 0, width, height); 

    drawBonhomme(x, height, r, Math.floor(step));

}

function drawBonhomme() {

    var s = r/3000;

    context.drawImage(sprites, 306*step, 0, 306, 578, x-120*s, y-600*s, 306*s, 578*s); // dimensions de l'images = 612 x 578

                                                                                       // s est le facteur de rétrecissement

                                                                                       // j'ai utilisé r car l'animation ne se lancait pas si je marquais s = 1/3

}

function update() {

    step += 0.09;

    if (step >= 2) { // animation à 2 étapes donc step doit être inférieur à 2 ( step = 0 -> 1e sprite / step = 1 -> 2e sprite )

        step -= 2; // quand step = 2 on la décrémente de 2 pour recommencer l'animation

    }

}

    PARTIE SAUT

    jumpEventActive: false,

jumpHeight=100;

function jump(){

if (bonhomme.position.y < bonhomme.jumpHeight) {

bonhomme.position.y++;

else

bonhomme.jumpEventActive = false;

}

}

let jumpEvent = e => {

if (e.keyCode == 32 && bonhomme.position.y == 0) // 32 = espace

bonhomme.jumpEventActive = true;

if (bonhomme.jumpEventActive)

bonhomme.jump();

// Gravity

if (bonhomme.position.y > 0 && bonhomme.jumpEventActive == false)

bonhomme.position.y--;

    };

</script> 

    </body>

</html>

Afficher la suite

1 réponse

Réponse 1 / 1
jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830

Bonjour,

Regarde la console de ton navigateur....
tu devrais y voir un message d'erreur t'indiquant qu'il manque une accolade fermante
0
1. jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
  
  Je te conseille, au passage, d'appliquer la norme PSR-2 concernant l'écriture de tes blocs IF / ELSE...
  if ($a === $b) { bar(); } elseif ($a > $b) { $foo->bar($arg1); } else { BazClass::bar($arg2, $arg3); }
  
  0
2. Ludo57440
  
  J'ai rajouté les accolades fermantes manquantes non ?
  
  <html>
  <head>
  <meta charset= "utf=8"/>
  <title> BODYJUMPER </title>
  </head>
  <body style="margin: 0; overflow: hidden">
  
  <canvas id="bonhomme"></canvas>
  
  <script>
  
  canvas = document.getElementById("bonhomme"),
  context = canvas.getContext("2d");
  
  bonhomme1 = {
  jumpHeight = 100
  r = 1000,
  step = 0;
  
  width = window.innerWidth,
  height = window.innerHeight;
  
  canvas.width = width;
  canvas.height = height;
  context.imageSmoothingEnabled= false;
  
  position: {
  x: width/4,
  y: height-200,
  
  },
  
  var sprites = new Image();
  sprites.onload = animate;
  sprites.src = "spritesbj.png"; // stickman à 2 étapes : 1e sprite pied en avant (0) / 2e sprite pied en arrière (1) => effet de course
  
  function animate() {
  draw();
  update();
  requestAnimationFrame(animate); // on appelle périodiquement la fonction animate
  }
  
  function draw() {
  context.clearRect(0, 0, width, height);
  drawBonhomme(x, height, r, Math.floor(step));
  }
  
  function drawBonhomme() {
  var s = r/3000;
  context.drawImage(sprites, 306*step, 0, 306, 578, x-120*s, y-600*s, 306*s, 578*s); // dimensions de l'images = 612 x 578
  // s est le facteur de rétrecissement
  // j'ai utilisé r car l'animation ne se lancait pas si je marquais s = 1/3
  }
  
  function update() {
  step += 0.09;
  if (step >= 2) { // animation à 2 étapes donc step doit être inférieur à 2 ( step = 0 -> 1e sprite / step = 1 -> 2e sprite )
  step -= 2; // quand step = 2 on la décrémente de 2 pour recommencer l'animation
  }
  }
  
  jumpEventActive: false,
  jumpHeight=100;
  function jump(){
  if (bonhomme1.position.y < bonhomme1.jumpHeight) {
  bonhomme1.position.y++;
  else
  bonhomme1.jumpEventActive = false;
  }
  }
  
  let jumpEvent = e => {
  if (e.keyCode == 32 && bonhomme1.position.y == 0) { // keyCode 32 is spacebar
  bonhomme1.jumpEventActive = true;
  }
  }
  
  if (bonhomme1.jumpEventActive) {
  bonhomme1.jump();
  }
  
  // Gravity
  if (bonhomme1.position.y > 0 && bonhomme1.jumpEventActive == false) {
  bonhomme1.position.y--;
  }
  };
  
  0

Problème de saut en javascript

1 réponse

Discussions similaires

Newsletters