本文共 2804 字,大约阅读时间需要 9 分钟。
用户提问
为了用DOM做2D游戏,你基本上要动态地调整元素风格,以便在页面上移动它。虽然有些时候DOM修改是很好的,但这一次我将重点介绍使用HTML5 Canvas来制作图像,因为对于现代浏览器,它是最灵活的。 页面设置 首先,你要创建一个HTML页面,其中包含...
推荐答案
为了用DOM做2D游戏,你基本上要动态地调整元素风格,以便在页面上移动它。虽然有些时候DOM修改是很好的,但这一次我将重点介绍使用HTML5 Canvas来制作图像,因为对于现代浏览器,它是最灵活的。
页面设置
首先,你要创建一个HTML页面,其中包含如下canvas标签:
如果你载入以上代码,当然什么也不会出现。那是因为虽然我们有一个canvas标签,但我们还没在上面绘制任何东西。我们来添加一些简单的canvas命令来绘制小箱子吧。
var canvas = null;
function onload() {
canvas = document.getElementById(‘gameCanvas’);
var ctx = canvas.getContext(“2d”);
ctx.fillStyle = ‘#000000′;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = ‘#333333′;
ctx.fillRect(canvas.width / 3, canvas.height / 3, canvas.width / 3,
canvas.height / 3);
}
在这个例子中,我已经在body标签中添加了一个onload事件,然后执行功能获得画布元素,并绘制几个箱子。非常简单。
这个箱子不错,但你会注意到,画布没有铺满整个浏览器窗口。为了解决这个问题,我们可以增加画布的宽度和高度。我是指根据画布所包含的文件元素的大小来灵活地调整画布尺寸。
var canvas = null;
function onload() {
canvas = document.getElementById(‘gameCanvas’);
canvas.width = canvas.parentNode.clientWidth;
canvas.height = canvas.parentNode.clientHeight;
…
加载后,你会看到画布铺满整个屏幕了。太好了。
再进一步,如果浏览器窗口大小是由用户调整的,我们还要重置画布的尺寸。
var canvas = null;
function onload() {
canvas = document.getElementById(‘gameCanvas’);
resize();
}
function resize() {
canvas.width = canvas.parentNode.clientWidth;
canvas.height = canvas.parentNode.clientHeight;
var ctx = canvas.getContext(“2d”);
ctx.fillStyle = ‘#000000′;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = ‘#333333′;
ctx.fillRect(canvas.width/3, canvas.height/3, canvas.width/3, canvas.height/3);
}
添加onresize命令到body标签。
现在,如果你调整浏览器的大小,矩形应该如下图所示。
载入图像
大部分游戏都需要动画的子画面,所以我来添加一些图像吧。
首先,你需要图像资源。因为我们要用javascript绘制它,所以我觉得先声明图像然后设置它的src属性为你想载入的图像的URL,比较合理。
var img = null;
function onload() {
…
img = new Image();
img.src = ‘simba.png’;
}
然后你可以通过添加这个到resize方法中来绘制图像:
ctx.drawImage(img, canvas.width/2 – (img.width/2), canvas.height/2 – (img.height/2));
如果你重新载入页面后,在大部分情况下,你会看到图像出现了。不过我说的是大部分情况下,因为这取决于你的机器跑得有多快、浏览器是否已经缓存了图像。那是因为resize方法的调用时间介于你开始载入图像(设置它的src属性)的时间到浏览器准备好的时间之间。对于一两张图像,这个方法可能不错,但当你的游戏开始变大时,你就必须等到所有图像加载完才能执行活动。
给图像添加一个通知监听器,这样当图像准备就绪时你就会收到回叫信号。我得重新整理一下,以下是更新过的代码:
var canvas = null;
var img = null; var ctx = null;
var imageReady = false;
function onload() {
canvas = document.getElementById(‘gameCanvas’);
ctx = canvas.getContext(“2d”);
img = new Image();
img.src = ‘images/simba.png’;
img.onload = loaded();
resize();
}
function loaded() {
imageReady = true; redraw();
}
function resize() {
canvas.width = canvas.parentNode.clientWidth;
canvas.height = canvas.parentNode.clientHeight; redraw();
}
function redraw() {
ctx.fillStyle = ‘#000000′;
ctx.fillRect(0, 0, canvas.width, canvas.height);
if (imageReady)
ctx.drawImage(img, canvas.width/2 – (img.width/2), canvas.height/2 – (img.height/2));
}
结果应该是:
这个图像显示了一只吸血鬼猫(好吧,是我自己觉得像)的6个奔跑帧。为了把这个子画面做成动画,我们必须每次绘制一个帧。
辅助答案
用户:超级猪猪侠
2016年11月01日
去w3cschoocl 看看
转载地址:https://blog.csdn.net/weixin_33073525/article/details/117881250 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!