Ajouter des obstacles au hasard dans un canvas (jeu)

Version imprimable

Bonjour,

J'ai créé un jeu de serpent et je suis bloqué sur une partie code. Je souhaite qu'avant le début du jeu, on puisse ajouter des obstacles aléatoires dans le canvas, j'ai reussi mais il disparaît quand la partie commence (après l'init) :bug:.

Je veux que l'utilisateur ajoute à partir d'un bouton un carré aléatoire (obstacle) qui reste dans le canvas de sorte que, lorsque le serpent se déplace, il évite les carrés.

Voici un extrait du code, la partie onload et init :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
window.onload = function() 
{
 
    var body = document.getElementsByTagName("body")[0];
    var canvasWidth = 900;
    var canvasHeight = 600;
    var blockSize = 30;
 
    var ctx; // contexte
 
    var delay = 100 ; 
    var snakee;
    var applee;
 
    var canvas = document.createElement("canvas");
    canvas.height = 599;
    canvas.width = 899;
    var ctx = canvas.getContext("2d");
    canvas.style.border = "15px solid black";
    canvas.style.margin = "50px auto";
    canvas.style.display = "block";
    canvas.style.backgroundColor = "#ddd";
    body.appendChild(canvas);
 
    var widthInBlocks = canvasWidth/blockSize; 
    var heightInBlocks = canvasHeight/blockSize; 
 
    document.getElementById('init').addEventListener('click', init);
    document.getElementById('buttonRandom').addEventListener('click', create);  
 
    function init()
    {
        document.body.appendChild(canvas);
        ctx = canvas.getContext('2d');
        snakee = new Snake([[7,4],[6,4],[5,4],[4,4],[3,4]], "right");
        applee = new Apple([12,9]);
 
        score = 0;
        refreshCanvas();
    }

La fonction create qui fonctionne mais uniquement avant le jeu :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function create(position) {
        this.body = position;
        this.draw = function()
        {
            ctx.save();
 
            ctx.fillStyle = '#000000';
            ctx.beginPath();
 
        }
 
 
            ctx.fillRect(Math.random()*canvas.width, Math.random()*canvas.width, Math.random()*20+20, Math.random()*20+20);
            ctx.fill(); 
 
    }

Je ne trouve pas comment les faire apparaître dans le canvas lorsque le jeu a commencé sans qu'ils ne disparaissent.

Si quelqu'un pourrait m'aider, ce serait top :)

18/05/2019, 16h12
Sodium

Ca va être compliqué de t'aider si tu ne montres pas ce qu'il se passe après la fonction create ;)

Après la fonction create il y a juste une fonction qui permet de diriger le serpent mais je pense que c'est pas lié a la fonction create.

Je crois qu'il faut ajouter quelques chose dans la fonction refresh canvas et restart mais je ne vois pas comment 8O

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
   function refreshCanvas()
{
    snakee.advance();
    if(snakee.checkCollision())
    {
        gameOver();
 
    }
 
        else 
    {
        if(snakee.isEatingApple(applee))
        {
           score ++;
           snakee.ateApple = true;
            do 
           {
            applee.setNewPosition();
           }
           while(applee.isOnSnake(snakee))
 
        }
 
 
 
        ctx.clearRect(0,0, canvasWidth, canvasHeight);
        drawScore();
        snakee.draw();
        applee.draw();
 
        timeout = setTimeout(refreshCanvas,delay);  
    }
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 function restart()
       {
        snakee = new Snake([[6,4],[5,4],[4,4],[3,4],[2,4]], "right");
        applee = new Apple([10,10]);
 
        score = 0;
        clearTimeout(timeout);
        refreshCanvas();
       }
 
 
       function drawScore()
       {
        ctx.save();
        ctx.font = "bold 80px sans-serif";
        ctx.fillStyle = "black";
        ctx.textAlign = "center";
        ctx.textBaseLine = "middle";
        var centreX = canvasWidth/ 2;
        var centreY = canvasHeight/ 2;
        ctx.fillText(score.toString(),centreX,centreY);
        ctx.restore();
       }

Il faut peut être faire une fonction draw pour que les carré reste fixe dans le canvas

18/05/2019, 18h50
Sodium

C'est justement la fonction refresh qui est intéressante :mouarf:
Dans cette fonction, tu effaces ton canvas, puis tu redessines le score, le serpent, la pomme mais pas l'obstacle, donc forcément il n'est plus là.
Un canvas est... un canvas, c'est une zone qui affiche des pixels. Si tu ne redessines pas manuellement les éléments graphiques après l'avoir effacé il ne réapparaîtront pas tout seuls.
18/05/2019, 18h57
ClarkHDO

Ah d'accord très bien, j'avais essayé un code dans le refresh canvas mais c'était faux et ça a effacé le jeu a l’écran.

As-tu une idée de comment on procédé pour l’écrire dans le refreshcanvas sachant que la position des carrés seront aléatoire ?

J'ai essayé cette fonction mais elle ne fonctionne pas :triste: :arf:

Code:

1
2
3
4
5
6
7
8
9
var drawRectangle = function() {
 
        var length = 1;
        rect = [];
 
        for (var i = length; i>=0; i--) {
            rectangle.push({x:i, y:0});
        }  
    }

18/05/2019, 22h44
Sodium

Il faut que tu redessines tes blocs à chaque frame, donc qu'à chaque fois que tu fasses un clearect sur ton canvas tu appelles la fonction qui dessines tes blocs.
18/05/2019, 23h53
ClarkHDO

Quand tu dis redessiner les blocs à chaque frame c'est comme pour le serpent et la pomme avec une position prédéfinie?

Exemple : dans le windows.onload :

Code:

var obstacleRectangle;

dans la fonction init et restart :

Code:

obstacleRectangle = new Obstacle ([14,10]);

et dans la fonction refreshcanvas après ctx.clearRect :

Code:

obstacleRectangle.draw();
19/05/2019, 12h24
ClarkHDO

J'ai essayé de redessiner comme tu me l'as dit mais il y a des erreurs. Peut-être que j'ai mal compris :?
19/05/2019, 16h01
Sodium

Tu n'as visiblement pas la moindre idée de ce que tu fais et tu colles des bouts de codes trouvés sur Internet sans comprendre ce qui se passe.
Ce que tu as besoin c'est donc d'un cours de programmation pour débutants ou que quelqu'un fasse le travail à ta place. Je ne ferai ni l'un ni l'autre.
Donc si tu as beaucoup de chance, tu trouveras peut-être quelqu'un ayant la patience de faire ça.