H5 canvas控制坦克移动

接着上一篇（http://www.cnblogs.com/zhouhuan/p/H5_tankgame.html），这一篇研究一下怎么响应玩家的操作让坦克进行相应的移动。

1. 了解keydown事件

keydown这一键盘事件的触发条件为按下键盘上的任意键，如果按住不放，则会重发触发。

示例：

window.onkeydown = function(){alert("Merry Christmas！");
};

此时载入页面之后，无论按下哪个键，都会弹出“Merry Christmas！”的弹窗。

2. 了解键码和字符编码

① 键码

在发生keydown和keyup事件时，event对象的keyCode（键码）属性会包含一个代码，与键盘上一个特定的键对应。对于数字字母字符集，keyCode属性的值与ASCII码中对应小写字母或数字的编码相同。字母中的大小写不影响。

window.onkeydown = function(eve){alert(eve.keyCode);
};

此时按键盘上的任意键，便可得到所按键对应的keyCode

② 字符编码

发生keypress事件时，event对象的charCode属性会包含一个值，这个值就是按下的那个键所代表字符的ASCII编码，并且，同一个字母的大小写对应的字符编码也是不一样的。

要注意的是，keypress事件只有在按下字符键时才会触发，并不是所有的按键，像Ctrl, Alt之类的就不会触发该事件。

3. 热身环节

① 获取玩家的指令

我们先看看怎么获取到玩家的操控指令，这里我们写一段代码：

window.onkeydown = function(eve){alert("所按键对应的键码是： " + eve.keyCode);
};

大家运行一下就可以知道键盘上每一个按键所对应的键码是多少了，然后取自己需要的按键继续编写程序。这里需要的是方向键的上下左右，当然这个在网上可以查到，也非常方便。

我们运行了之后会发现，上下左右对应的键码分别是38, 40, 37, 39。考虑到有些玩家习惯于使用W A S D来操作，那我们把这几个键也做进去，这几个键对应的键码分别是87, 65, 83, 68。

OK，知道了上面这些东西之后我们就可以写出下面这段代码了：

window.onkeydown = function(eve){                                                if(eve.keyCode == 38 || eve.keyCode == 87){alert("上");}else if(eve.keyCode == 40 || eve.keyCode == 83){alert("下");}else if(eve.keyCode == 37 || eve.keyCode == 65){alert("左");}else if(eve.keyCode == 39 || eve.keyCode == 68){alert("右");}
};

此时，根据玩家的操作便能弹出相应方向的文字。

鉴于上面if语句的条件分支数量略多，我们最好用switch语句改写一下上面的代码，这样可以提高性能，如下：

window.onkeydown = function(eve){                                                switch(eve.keyCode){case 38:case 87:alert("上");break;case 40:case 83:alert("下");break;case 37:case 65:alert("左");break;case 39:case 68:alert("右");}
};

② 封装画坦克的函数

前面我们写的画坦克的代码其实是面向过程的，我们将它拿过来改巴改巴做以封装：

function drawTank(x,y){var myCanvas = document.getElementById('floor');var cxt = myCanvas.getContext('2d');cxt.fillStyle = "#542174";cxt.fillRect(x,y,20,65);                cxt.fillRect(x+70,y,20,65);                cxt.fillRect(x+23,y+10,44,50);                cxt.fillStyle = "#FCB827";cxt.beginPath();cxt.arc(x+45,y+35,16,0,2*Math.PI,false);        cxt.closePath();cxt.fill();cxt.strokeStyle = "#FCB827";cxt.lineWidth = "8.0";cxt.moveTo(x+45,y+35);                        cxt.lineTo(x+45,y-25);                        cxt.stroke();
}

这个函数调用的时候传两个参数(x, y)，分别代表坦克左上角的X坐标，Y坐标。

封装好之后，在任何地方只要一调用，便可以造出一个坦克了：

drawTank(150,200);        //以(150,200)的点为坦克的左上角（左边履带的左上角）造一个坦克

③ 了解clearRect()方法

有一个前面遗漏掉的知识点clearRect()方法，这个方法是做游戏的关键，用来清空指定矩形内的所有像素，传四个参数(x, y, width, height)，前两个参数表示要清除的矩形的左上角坐标，后两个参数表示要清除的矩形的宽高。

比如我们先画一个矩形：

var myCanvas = document.getElementById('floor');
var cxt = myCanvas.getContext('2d');
cxt.fillStyle = "orange";
cxt.fillRect(50,50,300,80);

得到：

我们再加上下面这句代码运行一下：

cxt.clearRect(0,0,800,500);

此时会发现整个画布又空空如也了，因为我们把整个画布的像素都清除掉了。

4. 热身完毕，正式开始

前面热身热了这么久，相信大家已经可以写出一个根据玩家的操作移动的坦克了。

我们尽量以面向对象的思想来写每一个过程，代码如下：

//封装一个获取绘图环境的函数
function getCxt(){var myCanvas = document.getElementById('floor'),myContext = myCanvas.getContext('2d');return myContext;
}//封装一个画坦克的函数，传两个参数x,y,分别代表左上角的横纵坐标
function drawTank(x,y){var cxt = getCxt();cxt.fillStyle = "#542174";cxt.fillRect(x,y,20,65);                cxt.fillRect(x+70,y,20,65);                cxt.fillRect(x+23,y+10,44,50);                cxt.fillStyle = "#FCB827";cxt.beginPath();cxt.arc(x+45,y+35,16,0,2*Math.PI,false);        cxt.closePath();cxt.fill();cxt.strokeStyle = "#FCB827";cxt.lineWidth = "8.0";cxt.moveTo(x+45,y+35);                        cxt.lineTo(x+45,y-25);                        cxt.stroke();
}//初始化一个对象myTank,用来存储一些属性和方法
var myTank = {};
myTank.x = 350;
myTank.y = 400;
myTank.step = 3;        //设置步长，步长越大那么坦克运动的速度越快//先画一个坦克出来
drawTank(myTank.x,myTank.y);//封装一个更新战场的函数
function updateFloor(){var cxt = getCxt();cxt.clearRect(0,0,800,500);            //更新之前先清除画布drawTank(myTank.x,myTank.y);        //清除完之后重新造坦克，坦克要移动就必须实时地根据坐标重新来造
}//设置一个间歇调用的函数，每隔100ms更新一下战场
setInterval(function(){updateFloor();
},100);//响应玩家的操作指令
window.onkeydown = function(eve){                                                switch(eve.keyCode){case 38:case 87:myTank.y -= myTank.step;    //Y坐标减小向上移动break;case 40:case 83:myTank.y += myTank.step;    //Y坐标增加向下移动break;case 37:case 65:myTank.x -= myTank.step;    //X坐标减小向左移动break;case 39:case 68:myTank.x += myTank.step;    //X坐标增加向右移动
    }
};

所有必要的说明都已经写在了注释中。这样写出来之后，我们发现坦克已经可以随着玩家的按键上下左右移动了，但是还存在一点问题，坦克运动起来非常的生硬，不管向哪个方向动它的头一直都是朝上的，我们必须在这个基础上做以修改，下篇待续...

转载于:https://www.cnblogs.com/zhouhuan/p/H5_tankgame2.html

H5 canvas控制坦克移动相关推荐

[初学]H5+PHP 在线坦克开发日记
着手开始写原计划php小组项目的网络坦克对战.当时决定做游戏的原因是猫哥有h5开发能力,但现在自己做,自己要去学h5的东西.现在记录下学习和开发的过程. 2016.7.26 实现了坦克在空白地图上的移 ...
h5 Canvas矩形的绘制
h5 Canvas矩形的绘制 1.绘制矩形api 在Canvas中提供了绘制矩形的API: fillRect(x, y, width, height):绘制一个填充的矩形 strokeRect(x, ...
H5 Canvas下雨特效
模仿下雨的特效,雨点从空中随机飘落. 这个特效使用了H5的新特性Canvas. 效果演示代码展示 body代码 <!DOCTYPE html> <html lang="e ...
matlab控制树莓派3b,树莓派3B+ 手机h5网页控制GPIO
ezgif-4-5d181e9b42.gif 本文介绍如何在H5页面控制树莓派GPIO 仅实现以BCM编码方式控制GPIO,其他方式未做. 演示地址:http://gpio.exmll.cn/ 点击B ...
html验证码图片,js+h5 canvas实现图片验证码
本文实例为大家分享了js+h5 canvas实现图片验证码的具体代码,供大家参考,具体内容如下实现效果一.使用技术原生js技术+html5 canvas画图利用Math.random()函数随 ...
H5 Canvas实现荣誉证书生成器
H5 Canvas实现荣誉证书生成器没人跟我颁奖,那就自己给自己颁一个吧~ 预览在线链接 https://linyisonger.github.io/H5/22.证书生成器.html 源码地址 h ...
H5 Canvas绘制三角函数图像
三角函数sin.cos.tan.sinh.cosh.tanh js 的Math库,自带了许多常见函数方法,其中关于三角函数的求解还是很齐全的,于是想到,利用canvas 绘制一个比较准确的 sin. ...
用H5 canvas实现唯美渐变色块的绘制
随着Web前端的不断发展,我们已经可以使用H5+js+css做出很多复杂而优美的视觉效果.一幕幕的视觉盛宴背后是网页设计人员精巧的构思和前端开发人员的精湛技能.今天我们来讲述一下简单H5 canvas ...
绘制六芒星战斗力属性图 —— h5 canvas 初体验
在黄金的沙滩上安息着远古的悲剧在深绿的波涌中停着灵魂的船 --<眼睛>,顾城最近用MUI做Web app时想实现一个六芒星战斗力图的(类似LPL赛前战队实力分析图)效果,由于正多边 ...

H5 canvas控制坦克移动

H5 canvas控制坦克移动相关推荐

最新文章

热门文章