javascript中的2048：更新画布_Javascript_Html_Canvas

javascript中的2048：更新画布

javascript html canvas

javascript中的2048：更新画布,javascript,html,canvas,Javascript,Html,Canvas,我在高中上计算机科学课，为了我的最后一个项目，我的搭档和我决定做2048。我们不打算让瓷砖“移动”，而是4x4电路板将有“瓷砖”，其属性与电路板上显示的“瓷砖”的数量和颜色相同。我们可以获得要更改的磁贴的x和y坐标，但画布不会更新。我们已经有这个问题两个星期了，已经尝试了所有的方法，但是没有任何效果。我们的代码发布在下面。请记住，由于我们只使用javascript几个月，而且只做非常简单的事情，我们的理解是有限的。谢谢你的帮助 <!DOCTYPE html> <html la

我在高中上计算机科学课，为了我的最后一个项目，我的搭档和我决定做2048。我们不打算让瓷砖“移动”，而是4x4电路板将有“瓷砖”，其属性与电路板上显示的“瓷砖”的数量和颜色相同。我们可以获得要更改的磁贴的x和y坐标，但画布不会更新。我们已经有这个问题两个星期了，已经尝试了所有的方法，但是没有任何效果。我们的代码发布在下面。请记住，由于我们只使用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>


2048
var x=10；
变量y=10；
document.addEventListener（'keydown'，函数（事件）
{
if（event.keyCode==37）//左
{
x-=100；
控制台日志（“x:+x”）；
}
else if（event.keyCode==38）//向上
{
y-=100；
控制台日志（“y:+y”）；
}
else if（event.keyCode==39）//正确
{
x+=100；
控制台日志（“x:+x”）；
}
否则如果（event.keyCode==40）//关闭
{
y+=100；
控制台日志（“y:+y”）；
}
});
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
//灰色矩形
ctx.beginPath（）；
ctx.lineWidth=“2”；
ctx.strokeStyle=“灰色”；
ctx.rect（5,5400400）；
ctx.stroke（）；
//蓝色矩形
ctx.beginPath（）；
ctx.lineWidth=“5”；
ctx.strokeStyle=“蓝色”；
ctx.rect（x，y，100100）；
ctx.stroke（）；
ctx.fillStyle=“蓝色”；
ctx.fill（）；

每次您想要更新画布上显示的内容时，都必须再次“绘制”。当页面加载时，您的代码将运行一次，但不会再次绘制，因此您对

和

的更改将永远不会被看到

我在这里添加了一个draw函数，它在启动时和每次按下键后都被调用

<!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>


2048
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var x=10；
变量y=10；
document.addEventListener（'keydown'，函数（事件）
{
if（event.keyCode==37）//左
{
x-=100；
控制台日志（“x:+x”）；
}
else if（event.keyCode==38）//向上
{
y-=100；
控制台日志（“y:+y”）；
}
else if（event.keyCode==39）//正确
{
x+=100；
控制台日志（“x:+x”）；
}
否则如果（event.keyCode==40）//关闭
{
y+=100；
控制台日志（“y:+y”）；
}
draw（）；
});
函数draw（）{
ctx.clearRect（0，0，c.宽度，c.高度）；
//灰色矩形
ctx.beginPath（）；
ctx.lineWidth=“2”；
ctx.strokeStyle=“灰色”；
ctx.rect（5,5400400）；
ctx.stroke（）；
//蓝色矩形
ctx.beginPath（）；
ctx.lineWidth=“5”；
ctx.strokeStyle=“蓝色”；
ctx.rect（x，y，100100）；
ctx.stroke（）；
ctx.fillStyle=“蓝色”；
ctx.fill（）；
}
draw（）；

每次您想要更新画布上显示的内容时，都必须再次“绘制”。当页面加载时，您的代码将运行一次，但不会再次绘制，因此您对

和

的更改将永远不会被看到

我在这里添加了一个draw函数，它在启动时和每次按下键后都被调用

<!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>


2048
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var x=10；
变量y=10；
document.addEventListener（'keydown'，函数（事件）
{
if（event.keyCode==37）//左
{
x-=100；
控制台日志（“x:+x”）；
}
else if（event.keyCode==38）//向上
{
y-=100；
控制台日志（“y:+y”）；
}
else if（event.keyCode==39）//正确
{
x+=100；
控制台日志（“x:+x”）；
}
否则如果（event.keyCode==40）//关闭
{
y+=100；
控制台日志（“y:+y”）；
}
draw（）；
});
函数draw（）{
ctx.clearRect（0，0，c.宽度，c.高度）；
//灰色矩形
ctx.beginPath（）；
ctx.lineWidth=“2”；
ctx.strokeStyle=“灰色”；
ctx.rect（5,5400400）；
ctx.stroke（）；
//蓝色矩形
ctx.beginPath（）；
ctx.lineWidth=“5”；
ctx.strokeStyle=“蓝色”；
ctx.rect（x，y，100100）；
ctx.stroke（）；
ctx.fillStyle=“蓝色”；
ctx.fill（）；
}
draw（）；

您的游戏需要的是一个游戏循环。因此，绘图需要连续进行，此时您在开始时只绘制一次

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

的使用，您的游戏需要的是一个游戏循环。因此，绘图需要连续进行，此时您在开始时只绘制一次

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

您需要再次调用绘制代码。考虑添加一个函数。你试过按F12吗？你需要再次调用油漆代码。考虑添加一个函数。你试过按F12吗？c和ctx应该在函数c和ctx之外这也有效，可能比我的答案更好，因为你不必担心何时调用

draw

。这也有效，可能比我的答案更好，因为你不必担心何时调用

draw

。