首页 > 代码库 > 零基础HTML5游戏制作教程 第4章 移动的控制

零基础HTML5游戏制作教程 第4章 移动的控制

第4章 移动的控制

一,捕获键盘击键的原理

有很多种方法可以控制游戏中图形的移动,常用的有键盘控制、鼠标控制以及屏幕上的按钮控制等。其中键盘控制比较简单,比较适合初学者,我们先来讲这种方法。

其实键盘上的每一个按键,在我们按下去的时候,会向电脑中传送一个编号。比如A的编号是65,B是66。在这一章里,我们只需要记住4个键就可以了,她们是光标的上下左右键。向上的编号是38,向下是40,向左是37,向右是39。

所以键盘捕获的原理其实很简单,就是读取键盘传到电脑中的编号,然后根据这个编号来判断哪个键被按下了。

我们需要“onkeydown"属性来完成这个操作。格式一般可以这样:

<body onkeydown="functionkeydown(event)">

比如我们需要判断是哪个按键被按下了,我们可以用下面的代码:

<head><script>function functionkeydown(dir){if (dir==38) alert("up"); else if (dir==40) alert("down"); else if (dir==37) alert("left") else if (dir==39) alert("right");}    </script></head>    <body onkeydown="functionkeydown(event)"></body>

二,利用键盘的光标来移动图形

既然我们已经学会了键盘击键的捕获,那么我们现在可以用它来移动屏幕上的图形啦!

基本的方法是这样的:就是通过键盘的按键来改变坐标,比如是向右的话,就让x坐标变大一些,如果是向下,就让y坐标变大一点。是不是很简单?

下面是一个完整的画一个方块,用键盘来控制它移动的例子。

<html><head><title>movement</title><script>var x=0;var y=0;function goup(){y-=50;}function godown(){y+=50;}function goleft(){x-=50;}function goright(){x+=50;}function direction(dir){if (dir==38) goup(); else if (dir==40) godown(); else if (dir==37) goleft(); else if (dir==39) goright();}function refresh(){ctx.clearRect(0,0,cvs.width,cvs.height); ctx.fillRect(x,y,50,50);}</script></head><body onkeydown="direction(event)"><canvas id="can" width="400" height="400"></canvas><script>var cvs=getElementById("can");var ctx=cvs.getContext("2d");ctx.fillStyle="red";var setint=setInterval("refresh()",100);</script></body></html>

好了,试一下,用手按键盘的上下左右键,看方块是不是动起来了呢?是不是有一点成绩感呢?原来做游戏一点也不复杂,对不对?

 

零基础HTML5游戏制作教程 第4章 移动的控制