H5坦克大战之玩家控制坦克移动

Posted 2020-08-25 边城少年

　　接着上一篇（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坐标增加向右移动
    }
};    

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