warum verschwindet das zweite Quadrat

Warum verschwindet das zweite Quadrat, wenn ich eine Pfeiltaste drücke? Und anstatt zu verschwinden, soll das zweite Quadrat dem ersten folgen. Ich habe jede Codezeile überprüft und nichts ist falsch, und der Browser, den ich verwende, ist Google Chrome.warum verschwindet das zweite Quadrat

Hier ist mein Code:

<!doctype html> 
    <html> 
    <head> 
    <title></title> 
    </head> 
    <body> 
    <canvas id="canvas" style="border:1px solid #000;"></canvas> 
    <script> 
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 
    var width = 500; 
    var height = 500; 
    var win = false; 
    var player = { 
     x:250, 
     y:250, 
     speed:5, 
     width:100, 
     height:100 
    }; 
    var ai = { 
     x:150, 
     y:150, 
     mox:0, 
     moy:0, 
     speed:1, 
     width:50, 
     height:50 
    }; 
    canvas.width = width; 
    canvas.height = height; 
    ctx.fillRect(player.x, player.y, player.width, player.height); 
    ctx.stroke(); 
    ctx.fillRect(ai.x, ai.y, ai.width, ai.height); 
    ctx.stroke(); 
    function a() { 
     if(player.x < ai.x && win==false) { 
      ai.mox-=ai.speed; 
     } 
     if(player.x > ai.x && win==false) { 
      ai.mox = ai.speed; 
     } 
     if(player.y < ai.y && win==false) { 
      ai.moy -= ai.speed; 
     } 
     if(player.y > ai.y && win==false) { 
      ai.moy = ai.speed; 
     } 
     canvas.width = canvas.width; 
     var ctx = canvas.getContext("2d"); 
     ctx.fillRect(ai.x, ai.y, ai.width, ai.height); 
     ctx.stroke(); 
    } 
function move(e) { 
    // alert(e.keyCode); 
    if(e.keyCode==37) { 
     player.x -= player.speed; 
    } 
    if(e.keyCode==39) { 
     player.x += player.speed; 
    } 
    if(e.keyCode==38) { 
     player.y -= player.speed; 
    } 
    if(e.keyCode==40) { 
     player.y+=player.speed; 
    } 
    ai.x += ai.mox; 
    ai.y += ai.moy; 
    a(); 
    canvas.width = canvas.width; 
    var ctx = canvas.getContext("2d"); 
    ctx.fillRect(player.x, player.y, player.width, player.height); 
    ctx.stroke(); 
} 
document.onkeydown = move; 
</script> 
</body> 
</html>

Bitte sagen Sie mir, was mit meinem Code falsch ist. Auch ein Syntax-Checker hat mir gesagt, dass es syntaktisch korrekt ist.

Quelle

2017-08-06 webguy

Bitte formatieren Sie Ihren Code, so dass es tatsächlich lesbar ist. Dann können wir Ihnen vielleicht helfen. – MarthyM

Es gibt einige Probleme damit, ich werde zu denen später. Um sofort Ihr Problem zu beheben, müssen Sie die Probleme

ctx.fillRect(ai.x, ai.y, ai.width, ai.height);

Unmittelbar nach

ctx.fillRect(player.x, player.y, player.width, player.height);

Okay, zurück hinzuzufügen. Die meisten HTML5-Canvas-Spiele haben eine Tick-Funktion, die alle x MS genannt wird. Sie scheinen das überhaupt nicht zu haben. Es gibt ein paar andere kleinere Probleme mit dem Code, aber ich denke, Sie werden in der Lage sein, diese herauszufinden, wenn Sie mehr lernen. Viel Glück :)

Quelle

2017-08-06 07:53:34

warum verschwindet das zweite Quadrat

Antwort

Verwandte Themen