ENTER를 누를 때 게임을 다시 시작할 수 있습니까?

Question

나는 단순한 게임을 만들었고 거의 끝났습니다. 내가 남긴 유일한 것은 누를 때 게임을 다시 시작하는 것입니다. 을 입력하십시오. 이제 게임을 시작합니다. 을 입력하십시오. 그러나 다시 시작하지 않습니다.

누군가 나를 도와 줄 수 있습니까?

이

는 데모) (링크를 DEMO

유출을 클릭 볼 게임

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

} 

을 시작하는 코드; 기능은

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

내가 무슨 일이 일어나고 있는지 생각 당신이 새로운 requestAnimationFrame 루프를 시작하고 spill()을 누를 때마다입니다. 따라서 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; 
    } 
}