Problème clearRect et aléatoire

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Pandore_Origin
Messages : 1
Enregistré le : 12 juin 2019, 15:33

Problème clearRect et aléatoire

Message par Pandore_Origin » 12 juin 2019, 19:03

Salut, j'aurais besoin d'aide : Je crée un "jeu" pour m'entrainer à coder en JS (je suis débutant). Le problème est le suivant : j'ai créé des ennemis, mais comme ils sont tous pareils au lieu de les dessiner un par un j'ai fait une boucle for. Pour pas qu'ils soient tous au même endroit, j'ai utilisé Math.random pour leur coordonnée X. Le soucis, c'est que j'ai utilisé clearRect pour effacer les déplacements de mon personnage, mais il efface à chaque fois les "méchants" ce qui les pousse à redéfinir leur position avec Math.random. Au final, tout ce que ça rend c'est des balles qui s'effacent et se créent très vite. Je vous donne mon code, si quelqu'un à une solution ou des conseils à m'apporter, n'hesitez pas :
<<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>BouBoul Adventure</title>
<style>* { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; }</style>
</head>

<body>
<canvas id="myCanvas" width="960" height="640"></canvas>
<script>

function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min +1)) + min;
}

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var droiteP = false;
var gaucheP = false;
var hautP = false;
var basP = false;

var balleR = 20;

var balleX = (canvas.width - balleR)/2;
var balleY = (canvas.height - balleR)/2;

var mX = getRandomIntInclusive(0, canvas.width);
var mY = 0;
var mR = 10;

var m = [1,2,3,4,5];
var nbM = 5;

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {

if(e.keyCode == 39) {
droiteP = true;
}
else if(e.keyCode == 37) {
gaucheP = true;
}
else if(e.keyCode == 40) {
basP = true;
}
else if(e.keyCode == 38) {
hautP = true;
}
}

function keyUpHandler(e) {
if(e.keyCode == 39) {
droiteP = false;
}
else if(e.keyCode == 37) {
gaucheP = false;
}
else if(e.keyCode == 40) {
basP = false;
}
else if(e.keyCode == 38) {
hautP = false;
}
}

function dessinMieux() {
for(var i=0;i<nbM;i++) {
// if (m.status == 1) {
var mieuxX = getRandomIntInclusive(1,canvas.width);
var mieuxY = 0;
m.x = mieuxX;
m.y = mieuxY;

ctx.beginPath();
ctx.arc(mieuxX, mieuxY, mR, 0, Math.PI*2);
// ctx.arc(0, 0, 10, 0, Math.PI*2);
ctx.fillStyle = "red";
ctx.fill();
ctx.closePath();

// }
}
}

function avancer(a) {
a++;
}

function trajectoireM() {

for (var i = 0;i<nbM;i++){
while (m.y < canvas.height) {
setInterval(avancer(m.y), 5);
}
}
}

function letest() {
var i = 1;
alert(m);
}

function dessinM() {

ctx.beginPath();
ctx.arc(mX, mY, mR, 0, Math.PI*2);
ctx.fillStyle = "#1123CC";
ctx.fill();
ctx.closePath();
}
function balleOPif() {
mX += getRandomIntInclusive(-20,20);
mY += getRandomIntInclusive(0,20);
}
function dessinR() {
ctx.beginPath();
ctx.arc(balleX, balleY, balleR, 0, Math.PI*2, false);
ctx.fillStyle = "#9745EE";
ctx.fill();
ctx.closePath();
}
// setInterval(balleOPif, 10);

function dessin() {
// letest();
ctx.clearRect(0, 0, canvas.width, canvas.height);

dessinR();
if(balleX > canvas.width-balleR || balleX < 0+balleR) {
document.location.reload();
alert("Perdu lol");
}
if(balleY > canvas.height-balleR || balleY < 0+balleR) {
document.location.reload();
alert("Perdu lol");
}
if (droiteP && balleX < canvas.width-balleR) {
balleX += 3;
}
else if (gaucheP && balleX > 0) {
balleX -= 3;
}
if (hautP && balleY < canvas.height-balleR) {
balleY -= 3;
}
else if (basP && balleY > 0) {
balleY += 3;
}
// dessinM();
dessinMieux();
trajectoireM();
/* if(mX > canvas.width || balleX < 0) {
mX = getRandomIntInclusive(1,canvas.width);
mY = -mY;
}
if(mY > canvas.height) {
mY = -mY;
}*/



}

setInterval(dessin, 20);

</script>
</body>
</html>

PS : faites pas gaffe, j'ai laissé plein de fonctions test qui ne sont pas appelées dans le main, elles ne servent à rien.
Merci d'avance :)

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Problème clearRect et aléatoire

Message par webmaster » 14 juin 2019, 14:16

Bonjour,

Cela me semble être le fonctionnement normal de la fonction clearRect.
Il faut redessiner tous les objets à chaque mouvent à l'écran.
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Répondre