Javascript - =すべてのループに掛ける命令

私は初めてのチュートリアル以外のゲームを作っている新しいプログラマーです。ゲーム内の敵に問題があります。相続人スクリプト：敵を動かし行でJavascript - =すべてのループに掛ける命令

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Square</title> 
    <style> 
      * { padding: 0; margin: 0; } 
      canvas { background: #000; display: block; margin: 0 auto; } 
     </style> 
</head> 
<body bgcolor="#000111"> 

<canvas id="myCanvas" width="480" height="320"></canvas> 

<div id="nocursor"><!-- some stuff --></div> 

<form name="Show"> 
<input type="text" name="MouseX" value="0" size="4"> X<br> 
<input type="text" name="MouseY" value="0" size="4"> Y<br> 
</form> 

<script language="JavaScript1.2"> 

    document.getElementById('nocursor').style.cursor = 'none'; 

    var canvas=document.getElementById("myCanvas"); 
    var ctx = canvas.getContext("2d"); 

    var x=canvas.width/2; 
    var y=canvas.height-30; 
    var playerHeight = 100; 
    var playerWidth = 20; 
    var enemyHeight = 10; 
    var enemyWidth = 10; 
    var IE = document.all?true:false 
    var enemyXPos = 470; 
    var rand = Math.random(); 
    var left = 0; 
    var right = 0; 
    var up = 0; 
    var down = 0; 
    var lefta = 0; 
    var rightd = 0; 
    var upw = 0; 
    var downs = 0; 
    var space = false; 
    var playerColor="#ffffff"; 
    var score = 0; 


function click() { 
document.addEventListener("click", startEnemy); 
} 

//Check for keydown arrows 
document.onkeydown = function(event) { 
    if (!event) 
      event = window.event; 
    var code = event.keyCode; 
    if (event.charCode && code == 0) 
      code = event.charCode; 
    switch(code) { 
      case 37: 
     left-=20; 
       break; 
      case 38: 
     up+=20; 
       break; 
      case 39: 
     right+=20; 
       break; 
      case 40: 
     down-=20; 
       break; 
     case 65: 
     lefta-=10; 
       break; 
      case 87: 
     upw+=10; 
       break; 
      case 68: 
     rightd+=10; 
       break; 
      case 83: 
     downs-=10; 
       break; 
     case 32: 
     space=true; 
       break; 

    } 
    event.preventDefault(); 
}; 
document.onkeydown = function(event) { 
    if (!event) 
      event = window.event; 
    var code = event.keyCode; 
    if (event.charCode && code == 0) 
      code = event.charCode; 
    switch(code) { 
      case 37: 
     left+=20; 
       break; 
      case 38: 
     up+=20; 
       break; 
      case 39: 
     right+=20; 
       break; 
      case 40: 
     down+=20; 
       break; 
     case 65: 
     lefta+=10; 
       break; 
      case 87: 
     upw+=10; 
       break; 
      case 68: 
     rightd+=10; 
       break; 
      case 83: 
     downs+=10; 
       break; 
    } 
    event.preventDefault(); 
}; 

if (!IE) document.captureEvents(Event.MOUSEMOVE) 


document.onmousemove = getMouseXY; 


var tempX = 0 
var tempY = 0 

// Main function to retrieve mouse x-y pos.s 

function getMouseXY(e) { 
    if (IE) { 
    tempX = event.clientX + document.body.scrollLeft 
    tempY = event.clientY + document.body.scrollTop 
    } else { 
    tempX = e.pageX 
    tempY = e.pageY 
    } 

    if (tempX < 0){tempX = 0} 
    if (tempY < 0){tempY = 0} 

    document.Show.MouseX.value = tempX 
    document.Show.MouseY.value = tempY 
    return true 
} 

function drawScore() { 
    ctx.font = "16px Arial"; 
    ctx.fillStyle = "#0095DD"; 
    ctx.fillText("Score: "+score, 410, 20); 
} 

function collision() { 
    if (enemyXPos<=20 && downs-upw >= down-up && downs-upw <= down-up+playerHeight && enemyXPos >= 0) { 
     playerColor="#FF0000"; 
     setTimeout(gameOver, 100); 
    } 
} 

function gameOver() { 
    console.log("COLLISION"); 
    alert("GAME OVER, YOUR SCORE WAS: " + score + "!"); 
    document.location.reload(); 
} 

function checkSpace() { 
    if (space=true) { 
     startEnemy(); 
     space=false; 
    } 
} 

function drawPlayer() { 

    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.beginPath(); 
    ctx.rect(0, down-up, playerWidth, playerHeight);  
    ctx.fillStyle=playerColor; 
    ctx.fill(); 
    ctx.closePath(); 

} 

function drawEnemy() { 

    ctx.beginPath(); 
    ctx.rect(enemyXPos-=1, downs-upw, enemyWidth, enemyHeight); 
    ctx.fillStyle="#ffffff"; 
    ctx.fill(); 
    ctx.closePath(); 

    if (enemyXPos<0) { 
     startEnemy(); 
    } 


} 

function placePlayer() { 
    drawPlayer(); 
    requestAnimationFrame(placePlayer); 
} 
function startEnemy() { 
    console.log("enemy shot"); 
    enemyXPos = 470; 
    placeEnemy(); 
    score+=1; 
} 
function placeEnemy() { 
    drawEnemy(); 
    collision(); 
    drawScore(); 
    requestAnimationFrame(placeEnemy); 
} 

function draw() { 
click(); 
placePlayer(); 
} 
draw(); 


</script> 
</body> 
</html>

は、敵respawnsたびに、それのスピードが速くなり、そして私はそれはしたくありません。問題はdrawEnemy機能である：

function drawEnemy() { 

    ctx.beginPath(); 
    ctx.rect(enemyXPos-=1, downs-upw, enemyWidth, enemyHeight); 
    ctx.fillStyle="#ffffff"; 
    ctx.fill(); 
    ctx.closePath(); 

    if (enemyXPos<0) { 
     startEnemy(); 
    } 


}

出典

2016-05-24 Dimbledorp

あなたの機能placeEnemyは（経由で）それが実行されるたびに自分自身を呼び出して、無限ループを形成しています。

startEnemy実行するたびにplaceEnemyが呼び出されます。これは、各 "再スポーン"が新しい無限ループを開始し、古いものを取り消さずにを開始することを意味します。

placeEnemyループでは、反復ごとに1を減算して「敵」の位置（enemyXPos）を変更します。複数のループが同時に実行されている場合、新しい「アニメーションフレーム」が起動するたびに1が複数回減算されます。

startEnemyにplaceEnemyを呼び出さずに修正できます：敵の位置をリセットして、同じアニメーションループを続行してください！

出典

2016-05-24 21:29:50

THAAAAANKKKK YOUUUUU !!! – Dimbledorp

これで問題は解決しました。これが正しい解決策であれば、そのようにマークする必要があります。 –

一般的に言えば、アプリケーションで実行されるアニメーションループは1つだけです。より多くの制御を追加するには、条件付きの内部に再帰呼び出しを置くことができます。 'if（running）{requestAnimationFrame（placeEnemy）;} } 'そうすることで、' running'を 'false'に設定することでアニメーションを一時停止することができ、アニメーションを再起動する前に' running'が 'false'であることを確認できます。 'cancelAnimationFrame'という関数もあり、より正確な制御に使用できます。基本的な例[here]（https://css-tricks.com/using-requestanimationframe/#article-header-id-2）を見ることができます。 –

Javascript - =すべてのループに掛ける命令

答えて

関連する問題