Problème de saut en javascript

Fermé
Ludo57440 - Modifié le 29 avril 2018 à 15:28
 Ludo57440 - 29 avril 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>


A voir également:

1 réponse

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
29 avril 2018 à 15:53
Bonjour,

Regarde la console de ton navigateur....
tu devrais y voir un message d'erreur t'indiquant qu'il manque une accolade fermante
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
29 avril 2018 à 15:55
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
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