2017-08-30 7 views
-1

私が遭遇したバグは、プレイヤーとfor文を使って描かれた四角形の衝突を検出するための衝突検出システムを作成したときです。これは、コリジョンが検出されるたびにコンソールにログを記録し、衝突が発生した側と一緒に記録するためです。しかし、コンソールログの後に、私は10から0への移動に使用している変数を設定することでプレーヤーの動きを止めるべきですが、そうではありません、すべてのコードを追加して申し訳ありません。最初の場所私は単純なゲームのためのjavascriptにバグを持っています

var frame = setInterval(draw,10); 
 
var canvas = document.getElementById('Canvas'); 
 
var ctx = canvas.getContext('2d'); 
 
var pos = [[300,250],[500,250],[700,250]] 
 
var height = 150; 
 
var width = 150; 
 
var plyr = {pos:[0,0],width: 50,height: 50}; 
 
var a = {up: 10, down:10, left:10, right:10}; 
 

 
function draw(){ 
 
canvas.width = canvas.width 
 

 
for(var i=0;i < pos.length;i++){ 
 
    ctx.rect(pos[i][0],pos[i][1],height,width); 
 
    ctx.stroke(); 
 
} 
 
ctx.rect(plyr.pos[0],plyr.pos[1],plyr.width,plyr.height); 
 
ctx.stroke(); 
 
} 
 

 
document.onkeydown = checkKey; 
 

 
function checkKey(e) { 
 
    e = e || window.event; 
 
    if (e.keyCode == '38') {/*up*/plyr.pos[1] -= a.up;} 
 
    else if (e.keyCode == '40') {/*down*/plyr.pos[1] += a.down;} 
 
    else if (e.keyCode == '37') {/*left*/plyr.pos[0] -= a.left;d=1;} 
 
    else if (e.keyCode == '39') {/*right*/plyr.pos[0] += 
 
    a.right;d=0;} 
 

 
    for(var c=0;c < pos.length;c++){ 
 
    touch(plyr.pos[0],plyr.pos[1],plyr.width,plyr.height,pos[c] 
 
    [0],pos[c][1],height,width); 
 
    } 
 
} 
 

 

 
function touch(x1,y1,width1,height1,x2,y2,width2,height2){ 
 
    if(x1 + width1 > x2 && x2 + width2 > x1 && y1 + height1 > y2 && 
 
    y2 + height2 > y1){ 
 
    if(y1 + height1 > y2 && y2 + 20 > y1 + height1) 
 
    {console.log('touch down');a.down = 0;} 
 
    else if(y2 + height2 > y1 && y1 + 20 > y2 + height2) 
 
    {console.log('touch up');a.up = 0;} 
 
    else if(x1 + width1 > x2 && x2 + 20 > x1 + width1) 
 
    {console.log('touch right');a.right = 0;} 
 
    else if(x2 + width2 > x1 && x1 + 20 > x2 + width2) 
 
    {console.log('touch left');a.left = 0;} 
 
    } 
 
    else{ 
 
    a.up = 10; 
 
    a.down = 10; 
 
    a.left = 10; 
 
    a.right = 10; 
 
    } 
 
}
<!doctype html> 
 
    <html> 
 
     <head> 
 
     <title>Testing</title> 
 
     </head> 
 
     
 
     <body> 
 
     <canvas id="Canvas" width="1000" height="500"></canvas> 
 
     </body> 
 
    </html>

+0

多くの条件文。 –

+0

これは私の最初のJavaスクリプトでの実際の試みです。もしあなたがそれをやっている別の方法を示せば、それは非常に高く評価されるでしょう – stu17079

答えて

0

これを解決するために、おそらくより良い方法は、衝突上のオブジェクトのエッジに選手の位置を設定することです。

 function touch(x1,y1,width1,height1,x2,y2,width2,height2){ 
     if(x1 + width1 > x2 && x2 + width2 > x1 && y1 + height1 > y2 && 
     y2 + height2 > y1){ 
      if(y1 + height1 > y2 && y2 + 20 > y1 + height1) 
      {console.log('touch down');plyr.pos[1] = y2-plyr.height;} 
      else if(y2 + height2 > y1 && y1 + 20 > y2 + height2) 
      {console.log('touch up');plyr.pos[1] = y2+height2;} 
      else if(x1 + width1 > x2 && x2 + 20 > x1 + width1) 
      {console.log('touch right');plyr.pos[0] = x2-plyr.width;} 
      else if(x2 + width2 > x1 && x1 + 20 > x2 + width2) 
      {console.log('touch left');plyr.pos[0] = x2+plyr.width;} 
     } 
     } 
関連する問題