2048 in javascript：キャンバスを更新する

私は高校でコンピューターサイエンスクラスに勤務しています。私の最終的なプロジェクトでは、私のパートナーと私は2048年にすることに決めました。タイルを移動するつもりはありません。代わりに、4x4ボードには、ボードに表示される「タイル」の数と色のプロパティを持つ「タイル」があります。変更するタイルのx座標とy座標を取得できますが、キャンバスは更新されません。私たちは2週間この問題を抱え、すべてを試しましたが、何も効果がありませんでした。私たちのコードは以下の通りです。数ヶ月間javascriptを使用しており、非常に簡単なことしか行っていないので、私たちの理解は限られています。ご協力ありがとうございました。2048 in javascript：キャンバスを更新する

<!DOCTYPE html> 
<html lang = "en"> 
<body style="background-color:lightgrey;"> 
<title>2048</title> 
<canvas id="myCanvas" width="410" height="410" style="border:1px solid #d3d3d3;"> 
</canvas> 
<script> 
var x = 10; 
var y = 10; 
document.addEventListener('keydown', function(event) 
{ 
    if(event.keyCode == 37)//left 
    { 
     x -= 100; 
     console.log("x:"+ x); 
    } 
    else if(event.keyCode == 38)//up 
    { 
     y -= 100; 
     console.log("y:"+ y); 
    } 
    else if(event.keyCode == 39)//right 
    { 
     x += 100; 
     console.log("x:"+ x); 
    } 
    else if(event.keyCode == 40)//down 
    { 
     y += 100; 
     console.log("y:"+ y); 
    } 
}); 
var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 

// grey rectangle 
ctx.beginPath(); 
ctx.lineWidth = "2"; 
ctx.strokeStyle = "grey"; 
ctx.rect(5, 5, 400, 400); 
ctx.stroke(); 

// blue rectangle 
ctx.beginPath(); 
ctx.lineWidth = "5"; 
ctx.strokeStyle = "blue"; 
ctx.rect(x, y, 100, 100); 
ctx.stroke(); 
ctx.fillStyle = "blue"; 
ctx.fill(); 
</script> 

</body> 
</html>

出典

2016-04-11 itsthetbone

ペイントコードをもう一度呼び出す必要があります。関数を追加することを検討してください。 :) –

F12を押してみましたか？ –

あなたのゲームにはゲームループが必要です。したがって、図面は継続して発生する必要があります。冒頭には1つの時間しか描かない瞬間です。

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

function draw() { 
    // clear the canvas so the old rectangles are gone 
    ctx.clearRect(0, 0, c.width, c.height); 

    // grey rectangle 
    ctx.beginPath(); 
    ctx.lineWidth = "2"; 
    ctx.strokeStyle = "grey"; 
    ctx.rect(5, 5, 400, 400); 
    ctx.stroke(); 

    // blue rectangle 
    ctx.beginPath(); 
    ctx.lineWidth = "5"; 
    ctx.strokeStyle = "blue"; 
    ctx.rect(x, y, 100, 100); 
    ctx.stroke(); 
    ctx.fillStyle = "blue"; 
    ctx.fill(); 
} 

// repeat game loop function forever, 30 times per second 
window.setInterval(draw, 1000.0/30.0)

はwindow.setIntervalとctx.clearRectの使用を注意してください。

出典

2016-04-11 15:43:22 stefreak

の外になければなりません。これは私の答えよりも優れています。なぜなら、 'draw'を呼び出すときに心配する必要がないからです。 – IrkenInvader

@stefreakありがとうございます！今次の問題に... – itsthetbone

キャンバスに表示されているものを更新するたびに、再度「描画」する必要があります。ページが読み込まれたときにコードが1回実行されますが、再度描画されることはありませんので、xとyへの変更は見られません。

ここでは、起動時と各キーダウン後に呼び出される描画関数を追加しました。

<!DOCTYPE html> 
<html lang = "en"> 
<body style="background-color:lightgrey;"> 
<title>2048</title> 
<canvas id="myCanvas" width="410" height="410" style="border:1px solid #d3d3d3;"> 
</canvas> 
<script> 
var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
var x = 10; 
var y = 10; 

document.addEventListener('keydown', function(event) 
{ 
    if(event.keyCode == 37)//left 
    { 
     x -= 100; 
     console.log("x:"+ x); 
    } 
    else if(event.keyCode == 38)//up 
    { 
     y -= 100; 
     console.log("y:"+ y); 
    } 
    else if(event.keyCode == 39)//right 
    { 
     x += 100; 
     console.log("x:"+ x); 
    } 
    else if(event.keyCode == 40)//down 
    { 
     y += 100; 
     console.log("y:"+ y); 
    } 
    draw(); 
}); 

function draw(){ 
    ctx.clearRect(0, 0, c.width, c.height); 
    // grey rectangle 
    ctx.beginPath(); 
    ctx.lineWidth = "2"; 
    ctx.strokeStyle = "grey"; 
    ctx.rect(5, 5, 400, 400); 
    ctx.stroke(); 

    // blue rectangle 
    ctx.beginPath(); 
    ctx.lineWidth = "5"; 
    ctx.strokeStyle = "blue"; 
    ctx.rect(x, y, 100, 100); 
    ctx.stroke(); 
    ctx.fillStyle = "blue"; 
    ctx.fill(); 
} 

draw(); 

</script> 

</body> 
</html>

出典

2016-04-11 15:37:19 IrkenInvader

cとctxは関数 – thangngoc89

2048 in javascript：キャンバスを更新する

答えて

関連する問題