How can I restart my game when I press ENTER?

Question

I have made a simple game and it's almost done, the only thing I have left is to make the game restart when I press Enter. Now the game starts when I press Enter but it doesn't restart.

Can someone help me please?

this is the code that starts the game

document.onkeydown = function tast (e) {
        if (e.keyCode == 39) {  // høyre
            høyre = 1;  
        } 
        if (e.keyCode == 37) {  // venstre
            venstre = 1;  
        } 
        if (e.keyCode == 38) {  // opp 
            opp = 1; 
        } 
        if (e.keyCode == 40) {  // ned
            ned = 1;              
        } 
        if(e.keyCode == 32) {
            newskudd();
            snd.play();
            console.log("hit space")
        }
        if(e.keyCode == 13){
            spill();
        }

}

to see a demo click the link DEMO

the spill(); function is

function spill() {

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (var i = 0; i < kuler.length; i++) { 
        kuler[i].x += 0;
        kuler[i].y += kuler[i].dy;


        ctx.fillStyle = kuler[i].f;
        ctx.beginPath();
        ctx.arc(kuler[i].x, kuler[i].y, kuler[i].r, 2*Math.PI, 0);
        ctx.closePath();
        ctx.fill();

        if (venstre == 1){
            kuler[0].x -= 4;
        }
        if (høyre == 1){
            kuler[0].x += 4;;
        }
        if (opp == 1){
            kuler[0].y -= 4;
        }
        if (ned == 1){
            kuler[0].y += 4;
        }


        if (kuler[0].x >= canvas.width-kuler[0].r) {
            kuler[0].x = canvas.width-kuler[0].r
        };
        if (kuler[0].x <= 0+kuler[0].r) {
            kuler[0].x = 0+kuler[0].r
        };
        if (kuler[0].y >= canvas.height-kuler[0].r) {
            kuler[0].y = canvas.height-kuler[0].r
        };
        if (kuler[0].y <= 0+kuler[0].r) {
            kuler[0].y = 0+kuler[0].r
        };



    for (var j = 0; j < fiender.length; j++) { 
        ctx.fillStyle = "blue";
        ctx.beginPath();
        ctx.arc(fiender[j].x, fiender[j].y, fiender[j].r, 2*Math.PI, 0);
        ctx.closePath();
        ctx.fill();

        fiender[j].y += fiender[j].vy;

        if (fiender[j].x >=  canvas.width -fiender[j].r) {
            fiender[j].x =canvas.width - fiender[j].r;
        };
        if (fiender[j].x  <= 0 + fiender[j].r) {
            fiender[j].x =0 + fiender[j].r;
        };  

        if (fiender[j].vy >= 2) {
            fiender[j].vy = 2;  
        };


        /*if (fiender[j].y + fiender[j].r >= kuler[i].y && fiender[j].x + fiender[j]. == kuler[i].x) { // remove kuler[i] and fiender[j] } 
            fiender.splice(j, 1);
            kuler.splice(i,1);
        };*/

        var distanceFromCenters = Math.sqrt(Math.pow(Math.abs(fiender[j].x - kuler[i].x),2) + Math.pow(Math.abs(fiender[j].y - kuler[i].y),2 )); // you have a collision
        if (distanceFromCenters <= (fiender[j].r + kuler[i].r)) {
            fiender.splice(j, 1);
            kuler.splice(i,1);
            poeng += 1;
        } else if (fiender[j].y > canvas.height) {
            fiender.splice(j,1)
        }

        if(j > 1){ 
            fiender.splice(j,1)

        }       

        tekst.innerHTML = ( "Poeng: " + poeng  )
    }
}
    requestAnimationFrame(spill);
}

Are you sure that name `høyre` will be supported everyhwere? — u_mulder, Dec 11 '14 at 15:16
I had a quick look at your demo, `spill()` is called as expected every time enter is pressed. This causes the game to speed up before it ends, and seemingly has no effect afterwards. Either way, it would seem the problem is not in the code you've posted here. — Adam H, Dec 11 '14 at 16:07
@morten as adam said, `enter` key works just fine, but has unintended effects. You need to post the `spill()` function so we can take a look. Most likely you need to reset variables and `clearTimeouts()` so timers are reset. — user3871, Dec 11 '14 at 16:23
i have now edited the post so you can see the spill(); function at the bottum — morten, Dec 11 '14 at 16:28

score 0 · Answer 1 · edited May 23 '17 at 11:56

I think what's happening is each time you press spill() you're starting a new requestAnimationFrame loop. Therefore, each time you press spill(), you're effectively double calling your y coordinate transformation: fiender[j].y += fiender[j].vy;

Read here on how to properly start/stop a window.requestAnimationFrame

var requestId;

function loop() {
    ...
    // do stuff
    ...
    requestId = window.requestAnimationFrame(loop, canvas);
}

function start() {
    if (!requestId) {
       loop();
    }
}

function stop() {
    if (requestId) {
       window.cancelAnimationFrame(requestId);
       requestId = undefined;
    }
}

How can I restart my game when I press ENTER?

1 Answers1