javascript - JavaScript 中的 2048 : updating the canvas-6ren

javascript - JavaScript 中的 2048 : updating the canvas

转载作者：行者123 更新时间：2023-11-28 18:38:31

25

4

我在高中上计算机科学课，对于我的期末项目，我和我的搭档决定制作 2048。我们不会让瓷砖“移动”，而是 4x4 棋盘会移动。拥有“图 block ”，这些“图 block ”具有棋盘上显示的“图 block ”的数量和颜色属性。我们能够更改图 block 的 x 和 y 坐标，但 Canvas 不会更新。我们已经遇到这个问题两周了，并尝试了一切，但没有任何效果。我们的代码发布在下面。请记住，由于我们只使用了 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>

最佳答案

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

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的使用。

关于javascript - JavaScript 中的 2048 : updating the canvas，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36553052/

25

4

0

文章推荐： iphone - 如何安全地重命名 iOS 分发配置文件？

文章推荐： python - .py 和 .kv 交互中的 Kivy 类

文章推荐： javascript - CodeMirror 自定义 showHint() 调用不起作用

npm-update - 命令 "npm update"与包 "npm-check-updates"
命令 npm update 有什么区别和包裹npm-check-updates ?使用后者是否完全安全？执行后好像是npm update并非所有软件包都已更新，因此似乎不完整。许多其他 popula
node.js - ExpressJS : Sequelize method update need to show updated data as result not num of row updated
我有使用 ExpressJS 和 ORM Sequelize 的 API。我正在尝试使用 Sequelize 中的 update() 方法进行更新。默认情况下，it 方法将返回更新的行数。但我希望结果
ruby-on-rails - "rvm rubygems current"对比 "rvm update --system"对比 "gem update rubygems-update"
关于如何更新 rubygems 有点困惑。过程不断变化(或者至少我从互联网上得到了相互矛盾的信息)。 $ gem outdated rubygems-update (1.8.10 < 1.8.11
javascript - build 目录中的 .hot-update.json、.hot-update.js 和 .hot-update.js.map 文件是什么？
我正在使用 webpack-dev-server处于开发模式( watch )。每次服务器重新加载时，一些 json 和 js 文件都会挤满我的构建目录，如下所示:'hash'.hot-update.
updates - 错误 : Update could not be validated. 确保网络安全并重试。
Mamp Pro 的当前版本是 5.04 (15996)。可用更新窗口显示“Mamp 5.0.0 > 5.1。更新失败，并显示一条消息:错误:无法验证更新。请确保您使用的是安全网络，然后重试。” 更新
MySQL AFTER UPDATE 在特定列中 UPDATE 同一行中的时间戳
我想在浏览量增加时更新时间戳“lastpageview_at”。我想我已经接近了，但我总是遇到语法错误，有人知道为什么或有其他解决方案吗？我的触发器: CREATE TRIGGER Update_l
MySql: SELECT ... FOR UPDATE break before the UPDATE
我正在执行 SELECT ... FOR UPDATE 以锁定一条记录，然后进行一些计算，然后进行实际的 UPDATE。我正在处理 InnoDB 数据库。但是计算可能会以我不想执行 UPDATE 的
sql - 当我在 AFTER UPDATE 触发器中使用 UPDATE 语句时会发生什么？
我需要在表更新时进行一些更新和插入以强制执行正确的数据。将 UPDATE 语句放入触发器中会导致某种“循环”吗？谢谢! 最佳答案更新触发器中的目标表将使触发器再次触发。您可以使用 TRIGGER
JSF + PrimeFaces : `update` attribute does not update component
这是我的布局当我点击链接更新时，该链接应该打开和关闭renderComment bool
AngularJS性能: How to update only the scopes I know need to be updated?
我有一个包含两件事的 Angular 范围: 一个包含 10k 行的巨型表格，需要一秒钟才能渲染一些小的额外信息位于固定的覆盖标题栏中根据您向下滚动页面/表格的距离，我必须更新标题中的小信息位之一
MySQL:我可以在 BEFORE UPDATE 触发器中停止 UPDATE 查询吗？
标题几乎已经说明了一切。 IF NEW.variance <> 0 THEN (kill update) END IF 这可能吗？最佳答案查看手册 (http://dev.mysql.com/do
MySQL 触发器 : turn UPDATE into UPDATE and INSERT?
我有几个表，我想强制执行版本控制，并且有一个生效日期和生效日期。每当应用程序或用户向该表写入更新时，我希望它重定向到两个全新的命令:更新目标记录，以便 EFFECTIVE_TO 日期填充当前日期和时间
mysql - UPDATE row ON UPDATE 触发器，多表条件
我正在使用 Shopware，一件奇怪的事情让我抓狂 :( 所以我将首先解释问题是什么。除了普通商品外，还有多种款式的商品，例如不同尺码的衬衫。这是 XS、S、M、L 和/或不同颜色的同一商品……但
Mysql 在 before update 触发器中发出 update 命令
寻求帮助制作 mysql 触发器。我当前的代码无法按预期工作。我想做的是，如果表A中的字段A被修改，则将字段A复制到表A中的字段B。当前代码如下所示: BEGIN IF new.set_id=301
sql - UPDATE 的 FROM 端如何与 UPDATE 的目标表相关？
以下查询(来自此处Postgres SQL SELECT and UPDATE behaving differently) update fromemailaddress set call =
javascript - d3 : update dataset not updating the DOM
我想使用 D3 使用以下数据创建一个列表: var dataSet = [ { label: 'a', value: 10}, { label: 'b', value: 20},
MySQL:Select then Update 和 UPDATE 哪个更好？
哪个更好，先进行选择，然后进行更新。或者更确切地说，像这样合而为一: UPDATE items set status = 'NEW' where itemid in (1,2,3,
php - Laravel 事件 : updating vs updated?
对于 eloquent model events，updating 和 updated 之间有什么区别？？我的猜测是 updating 在模型更新之前触发，而 updated 在模型更新之后触发。
Angular 2 : *ngFor does not update when array is updated
我有一个对象数组(我们称之为arr)。在我的组件输入之一的 (change) 方法中，我修改了这些对象的属性之一，但在 View (*ngFor) 中没有任何变化。我读到 Angular2 变化检测不
javascript - D3js : data update is not updating right objects
我正在尝试使用 d3.js 构建水平日历时间线。主要目标是突出显示用户的假期和假期。 http://jsbin.com/ceperavu/2/edit?css,js,output 我首先从“开始”日期

首页

博学

6Ren·AI

商城

javascript - JavaScript 中的 2048 : updating the canvas