mettre en pause mon jeu

Sujet résolu

AndyRoland1

7 août 2020 à 15:34:28

Bonjour,

j'ai un jeu, et j'essaye de mettre en pause le personnage quand on appuie sur la barre espace ou sur F12,

voila le snake.js

window.onload = function() {

var pause = 0;

canv = document.getElementById("gc");

ctx = canv.getContext("2d");

document.addEventListener("keydown", keyPush);

callGame(pause);

}

function getWidth() {

var w = window.innerWidth;

return w;

}

function getHeight() {

var h = window.innerHeight;

return h;

}

console.log(getWidth());

console.log(getHeight());

ax = ay = 0;

var xv = 10;

var yv = 10;

let b = 1;

var firstactualisation = 0;

var xGoes = 0;

var yGoes = 0;

score = 0;

function callGame (PauseParameter) {

if (PauseParameter == 0) {

setInterval(game, 1000/15);

}

function getRAX () {

return Math.floor(Math.random() * 20);

}

function getRAY () {

return Math.floor(Math.random() * 20);

}

function game() {

ctx.fillStyle = "black";

ctx.fillRect(0, 0, canv.width, canv.height);

ctx.fillStyle = "lime";

ctx.fillRect(xv, yv, 20, 20);

if (xv > canv.weight && xv < -canv.weight) {

xv = 0;

alert('perdu');

}

if (yv > canv.height && yv < -canv.height) {

yv = 0;

alert('perdu');

}

if (ax * 20 == xv && ay * 20 == yv) {

score += 5;

ax = getRAX();

ay = getRAY();

}

if (firstactualisation == 0) {

ax = getRAX();

ay = getRAY();

firstactualisation++;

}

ctx.fillStyle = "red";

ctx.fillRect(ax * 20, ay * 20, 20, 20);

if (xGoes == 1) {

xv += 1;

} else if (xGoes == -1){

xv -= 1;

} else {

pause = 1;

}

if(yGoes == 1) {

yv += 1;

} else if (yGoes == -1){

yv -= 1;

} else {

pause = 1;

}

function keyPush(evt) {

switch (evt.keyCode) {

case 9: {

pause = 1;

xGoes = 0;

yGoes = 0;

}

case 37:

xv -= 2;

xGoes = -1;

yGoes = 0;

break;

case 38:

yv -= 2;

xGoes = 0;

yGoes = -1;

break;

case 39:

xv += 2;

xGoes = 1;

yGoes = 0;

break;

case 40:

yv += 2;

xGoes = 0;

yGoes = 1;

break;

}

le snake.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Premier jeu en js pur</title>
        <style>
            button {
                position: absolute;
                left: auto;
                right: 70%;
                background-color: #714cfe;
                border: none;
                border-radius: 3px;
                box-shadow: 6px 6px 20px 4px rgba(0, 0, 0, 0.2);
                color: aliceblue;
                font-size: 5em;
                font-family: monospace;
                transition: 0.6s;
            }
            button:hover {
                box-shadow: 6px 6px 25px 5px rgba(0, 0, 0, 0.18);
                transform: scale(1.03);
            }
            body {
                background-color: black;
                color: aliceblue;
            }
            canvas {
                box-shadow: 6px 6px 25px 7px aliceblue;
                position: absolute;
                left: 40%;
                right: 40%;
            }
        </style>
    </head>
    <body>
        <div id="GameZone">
            <canvas id="gc" width="400" height="400">
                votre navigateur est incompatible au site
            </canvas>
            <script src="js/snake.js"></script>
        </div>
        <button onclick="printScore(score);">score</button>
        <script type="text/javascript">
        var printScore = (ScoreToPrint) => {
            setInterval(document.querySelector("b").innerText = `${ScoreToPrint}`, 10);
        }
        </script>
        <span>score:</span> <b></b>
    </body>
</html>

Merci D'avance!

-
Edité par AndyRoland1 7 août 2020 à 16:06:04

AbcAbc6

7 août 2020 à 15:57:06

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Merci de colorer votre code à l'aide du bouton Code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton Code de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: jscript;">Votre code ici</pre>.

Merci de modifier votre message d'origine en fonction.

Liens conseillés

Règles générales du forum

NadfriJS

7 août 2020 à 19:16:06

Salut,

une solution simple est d'ajouter un Evénement sur le document si on presse la touche espace et afficher un alert(); ca mettra le code en pause.

Par exemple (testé ici ca fonctionne)

https://jsbin.com/loyihebuno/edit?js,console

-
Edité par NadfriJS 14 août 2020 à 13:53:41

La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]

AndyRoland1

13 août 2020 à 21:06:15

Ca marche merci!

AbcAbc6

14 août 2020 à 1:21:29

Bonjour,

Sujet résolu

Tu peux passer le sujet à "résolu" (bouton en haut à droite du sujet) et cliquer sur les pouces levés des messages qui t'ont aidé⋅e