js小游戏之经典炸弹人（2）--玩家的移动

在js小游戏之经典炸弹人（1）--地图实现这篇文章中，我们已经实现了地图的绘制，接下来就来谈谈玩家是如何移动的呢？

实现玩家的移动主要依靠的是键盘事件onkeypress，我们要通过操作键盘控制玩家的移动，例如常用的W，A，S，D键，操作的就是上、左、下、右。但实际上，它们是有对应的字符代码的。

• 字符代码 - 表示 ASCII 字符的数字
• 键盘代码 - 表示键盘上真实键的数字

那么，问题来了，如何获取键盘上的字符代码keyCode呢？其实很简单，通过下面的方法点击键盘字符后就可以直接在控制台得到对应的字符代码。

document.onkeypress=function (ev) {
        console.log(ev.keyCode);
    }

好了，现在我们已经获得了字符代码，接下来，就开始声明我们所要用到的变量：

至于图片为什么是一个数组呢？这是因为我们为了让玩家看起来真的是在走，所以需要用到多张图片，图片来源的话可以自己搜素材，然后切割一下就好。

    //创建玩家
    var player;
    //移动速度
    var speed = 3;
    //玩家的坐标
    var playerX = 40;
    var playerY= 40;
    //图片的宽高
    var playerW = 30;
    var playerH = 30;

    //向下移动的动画图片
    var playerDown = ['img/players/down_01.png', 'img/players/down_02.png', 'img/players/down_03.png', 'img/players/down_04.png'];
    //向上移动的动画图片
    var playerUp = ['img/players/up_01.png', 'img/players/up_02.png', 'img/players/up_03.png', 'img/players/up_04.png'];
    //向左移动的动画图片
    var playerLeft = ['img/players/left_01.png', 'img/players/left_02.png', 'img/players/left_03.png', 'img/players/left_04.png'];
    //向右移动的位置
    var playerRight = ['img/players/right_01.png', 'img/players/right_02.png', 'img/players/right_03.png', 'img/players/right_04.png'];

    var paint;
    //图片的下标
    var index = 0;

接下来，我们在最开始获得的keyCode就派上用场了，这里为了代码看起来美观，我们还是做单独声明：

    var PLAYER_UP = 119;
    var PLAYER_DOWN = 115;
    var PLAYER_LEFT = 97;
    var PLAYER_RIGHT = 100;

想必，代码表示的意思已经很明显了吧，分别代表的上、下、左、右的字符代码，也就是键盘上的W、S、A、D键；

对于键盘事件onkeypress，我们要定义一个方法，判断它到底按的是哪个键，执行的是什么操作：

    //键盘事件
    this.onkeypress = function (keyCode) {
        switch (keyCode) {
            case PLAYER_UP:
                //向上移动
                this.moveUp();
                break;
            case PLAYER_DOWN:
                //向下移动
                this.moveDown();
                break;
            case PLAYER_LEFT:
                //向左移动
                this.moveLeft();
                break;
            case PLAYER_RIGHT:
                //向右移动
                this.moveRight();
                break;
        }
    }

moveup()、moveDown()、moveLeft()、moveRight()四个方法是控制玩家移动具体方法，通过改变玩家的坐标来改变玩家的位置，实现移动的效果。

上下移动改变纵坐标playerY，左右移动改变横坐标playerX；

if 判断条件的目的是为了设置玩家的移动范围内，免得移动到屏幕外的区域，这个就根据自己的需要设置了；

图片处理是为了使移动动画更流畅，当下标达到最后一张时，就重新置0，继续循环。

    //向上移动
    this.moveUp = function () {
        //处理图片位移
        playerY = playerY - speed;
        if (playerY < 40)
            playerY = 40;
        player.style.top = playerY + "px";

        //处理图片的动画
        index++;
        if(index>=4)
            index=0;
        player.src=playerUp[index];
    }

    //向下移动
    this.moveDown = function () {
        playerY = playerY + speed;
        if (playerY > 480 - playerH)
            playerY = 480 - playerH;
        player.style.top = playerY + "px";

        //处理图片的动画
        index++;
        if(index>=4)
            index=0;
        player.src=playerDown[index];
    }

    //向左移动
    this.moveLeft = function () {
        playerX = playerX - speed;
        if (playerX < 40)
            playerX = 40;
        player.style.left = playerX + "px";

        //处理图片的动画
        index++;
        if(index>=4)
            index=0;
        player.src=playerLeft[index];
    }

    //向右移动
    this.moveRight = function () {
        playerX = playerX + speed;
        if (playerX > 640 - playerW)
            playerX = 640 - playerW;
        player.style.left = playerX + "px";

        //处理图片的动画
        index++;
        if(index>=4)
            index=0;
        player.src=playerRight[index];
    }

实现玩家移动的大概逻辑思想就是这样，具体的源码已上传至GitHub地址：https://github.com/Violet-coco/Bomber，当然，还有一个es6版本的，有兴趣的小伙伴可以看看。有兴趣的小伙伴可以看看。