HTML5 Canvas游戏教程:制作一个可控制移动的物体

这个教程是无聊之作,内容不详细尽请谅解.

DEMO

按键盘上的方向键即可控制物体移动,并伴 随行走动作.

PS:该”物体”为魔法少女小圆中的传销神兽QB.

接下来我说明一下制作过程以及代码功能.

首先你需要新建一个HTML文件,内容很简单,就一行(如果你有代码洁癖,请加上HTML 所需的剩余部分):

<canvas id="canvas" width="480" height="272" style="background:green">  

这行代码中定义一个canvas元素,id为canvas,宽度为480px,高度为272px,背景色 为绿色.

然后下载这张图片到你的电脑:

QB

这张图片包括了物体朝4个方向行走以及行走的动作.

由于这张图片我之前已经将位置修改好,所以省去了你们修改的工作.

每个小图片的尺寸为20px*20px,第一行为向后走,第二行为向右走,第三行为向前走,第 四行

为向左走,中间一列为停止姿态.

在HTML文件中输入以下代码:

var LEFT=37,UP=38,RIGHT=39,DOWN=40;//KeyCodevar  
var isKeyDown=false;  
var speed=2;  
var ctx;  
var sx=[0,20,40],sy=[0,20,40,60];  
var sWidth=20,sHeight=20;  
var x=240,y=135;  
var dx=10,dy=10;  
var s={  
    Back:[[0,0],[1,0],[2,0]],
    Right:[[0,1],[1,1],[2,1]],
    Front:[[0,2],[1,2],[2,2]],
    Left:[[0,3],[1,3],[2,3]]
};
var i=1;  
var c=s.Front;  

这里定义的是整个脚本需要使用到的变量.

LEFT,UP,RIGHT,DOWN为键盘事件中的KeyCode常量,即键盘码,对应4个方向键.

isKeyDown用于判断方向键是否已经按下.

speed控制人物的移动速度,单位为像素点,数值越大,单位时间的移动就越远.

ctx用于存储Canvas的Context2D接口,用于在Canvas元素上进行绘图,非常重要.

sx,sy用于设置图片的切片起始坐标,[0,20,40]对应三列的x坐标,[0,20,40,60]对应四行的y坐标.

sWidth,sHeight用于设置图片的切片大小,即刚刚说的小图片尺寸20px*20px.

x,y用于设置图片的显示坐标.

dx和dy设置显示坐标的偏移,这里设置为10px,把坐标变为图片的中心点.

s是一个JSON对象,定义了Back,Right,Front,Left四个状态时物体使用的图片,比如[0,0]表示第一行的第一张图片,[0,1]表示第一行的第二个图片.

变量i用于设置当前物体移动时的图片,0表示左数第一个图片,1表示左数第二个图片,2表示左数第三个图片.

变量c用于设置当前物体方向,默认设置为前方.

在刚才的代码后面加入这两行代码:

var img=new Image();  
img.src="qb.png";  

创建一个变量img,用于存储Image对象.

img.src设置图片的来源路径,这里设置为qb.png,即之前下载的那个图片文件.

现在我们把图片载入了这个网页,还设置了各种变量准备完成我们所需的效果.

现在开始利用这些变量!

在刚刚写进的代码后面加入这段代码:

var draw=function(){  
    ctx.clearRect(0,0,480,272);
    ctx.drawImage(img,sx[c[i][0]],sy[c[i][1]],sWidth,sHeight,x-dx,y-dy,sWidth,sHeight);
};

这段代码创建了一个函数draw.

该函数的作用是清除canvas元素上的内容,然后立即绘制图片.

drawImage方法中的参数,img为图片,sx[0]]和sy[1]]为切片坐标,sWidth和sHeight为切片大小,x-dy和y-dy为坐标.

是不是很眼熟?这就是刚刚我们定义的变量中的一部分.

为什么sWidth和sHeight出现了两次?因为sWidth和sHeight的数值为20px,而drawImage的第8,9个参数为显示图片的大小,这里已经做过切片,所以显示的大小和切片的大小一致.

是不是还有几个变量被遗忘了?没关系,现在 马上动用它们,写入下面的代码:

document.onkeydown=function(e){  
    isKeyDown=true;
    if(e.keyCode===UP){
        c=s.Back;
        y-=speed;
    }
    if(e.keyCode===DOWN){
        c=s.Front;
        y+=speed;
    }
    if(e.keyCode===LEFT){
        c=s.Left;
        x-=speed;
    }
    if(e.keyCode===RIGHT){
        c=s.Right;
        x+=speed;
    }
};
document.onkeyup=function(e){  
    isKeyDown=false;
    i=1;
    draw();
};

我们给document绑定了onkeydown和onkeyup事件,当键盘按下或弹起时,这两个事件就会被触发.

在down事件中,我们设置了x,y坐标以及物体方向.并给isKeyDown赋值true;

在up事件中,我们给isKeyDown赋值false,并给i变量设置为1表示物体停止运动变为站立状态,调用一次draw()函数立即将站立状态绘制在屏幕上.

接下来就是最后一段代码了,准备好了吗?

window.onload=function(){  
    ctx=document.getElementById("canvas").getContext("2d");
    setInterval(draw,1000/30);
    setInterval(function(){
        if(isKeyDown){
            i+=2;
            if(i>2)i=0;
        }
    },500);
};

为window.onload绑定事件,获取Context2D.

用setInterval定时调用两个函数.

每1000/30毫秒调用一次draw函数,也就是说1秒绘图30次,你可以调整这个数值,只要你的浏览器速度够快.

每500毫秒运行一次函数,这个函数是为了让物体移动时带有动作而设定的,代码内容很简单.

代码敲完了,运行你的现代浏览器,看看效果如何?