大佬教程收集整理的这篇文章主要介绍了零基础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,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章 移动的控制全部内容，希望文章能够帮你解决零基础HTML5游戏制作教程 第4章 移动的控制所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。