Discussion :

[ClarkHDO]

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) .

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Sodium]

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

[ClarkHDO]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Sodium]

C'est justement la fonction refresh qui est intéressante
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.

[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 ?

[ClarkHDO]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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});
        }  
    }

[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.

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

 var obstacleRectangle;

dans la fonction init et restart :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 obstacleRectangle.draw();

[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

[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.