Как перезапустить игру, когда я нажимаю ENTER?

Question

Я сделал простую игру, и это почти сделано, единственное, что у меня осталось - это перезапустить игру, когда я нажимаю . Введите. Теперь игра начинается, когда я нажимаю . Введите, но он не перезагрузится.

Может кто-нибудь помочь мне, пожалуйста?

это код, который начинает игру

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

} 

, чтобы увидеть демо нажмите на ссылку DEMO

разлива(); функция

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

Answer 1

Я думаю, что происходит это каждый раз, когда вы нажимаете spill() вы начинаете новый цикл requestAnimationFrame. Таким образом, каждый раз, когда вы нажимаете spill(), вы эффективны двойной вызов вашей y coordinate преобразования: 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; 
    } 
}