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

浏览数：12 / 时间：2015年06月11日

第4章移动的控制

一，捕获键盘击键的原理

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

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

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

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

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

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