从零开始：用REACT写一个格斗游戏(一)-CSDN博客

注：本介绍是分享过程并且寻求指点的，希望大家多多建议并参与

最近为了熟悉Bone框架，就准备用react写一个简单的格斗游戏练练手。目前用2天时间完成了游戏的前期准备工作。可以控制人物前进，后退，攻击，跳跃，发动技能等操作，但是总觉得操作起来有一点不流畅。接下来还准备完善人物的更多动作与连招，并且加入2个人物互相攻击后的扣血，僵直等，还有电脑AI的自我行动等等。希望有经验的同学可以多多分享。

前期工作

动画效果虽然看起来是一个整体，但其实就是多个图片一帧一帧切换。所有我们可以切换图片的src地址来实现动画效果。虽然项目是用react写的，但是思路还是和JS一样，操作DOM。利用ref属性获取DOM，然后加以操作。

人物前进

我们在页面上先放上一个人物图片，首先我们先实现这个用键盘控制这个图片的移动。我们先规定一下按键：A是后退，D是前进，S蹲下，空格跳跃。在componentDidMount中，给图片加上keydown事件，当我们按下某个键时，就可以得到按键的code了。知道了这个code，我们就可以选择向哪里移动这个图片了。举个例子，当我们按下D时，得到按键code为68，我们就知道是控制人物前进。接下来我们通过this.refs.xx.offsetLeft可以获取人物的位置，假设我们规定前进一次移动25px，我们就可以这样设置这个IMG的属性：this.refs.xx.style.left = this.refs.xx.offsetLeft+25+"px"; 通过改变图片的left属性改变图片位置。

当然，我们还要加上人物的动作，不然就不像动画了。使用setTimeout设置切换图片的间隔，例如：前进这个动作有5张图片，那么就每隔80毫秒切换一次图片。这样就实现了动画效果。当然，既然每隔80毫秒切换一次图片，那么我们向前移动也不能一下子就移动25px，把25px分到5次图片切换中，每次移动5px，这样就不会突兀了。

这里还有一个问题，就是keydown事件你按着键盘不动的时候，会持续触发这个事件，这样一个前进动作还没有完成又会触发另一个前进动作，这就让人物移动变得很鬼畜。这里我们有2个办法解决。

让keydown事件按下后只触发一次
让人物前进动作结束后再触发另一个前进动作

第一个办法不太适合，因为我们让人物前进的时候就是一直按着D键的，人物的攻击动作到是可以用第一个办法。所以我们这里用第二个办法。大概思路就是我们先加一个lock状态，初始状态为false，每当按下D键时，如果lock为true,就不执行前进操作，当lock为false时，将lock变为true，然后执行前进操作。当人物前进动作没完成时，lock一直都是true并且无法再次进行前进操作。当人物前进动作完成也就是切换到第5张图片时，将lock设为false，人物又可以继续前进了。后退，跳跃，操作大致与前进差不多。

人物攻击

人物的攻击操作与前进有一点区别，就是攻击一直按着J键人物只会攻击一次。这里就需要在图片上增加一个keyup事件，并且lock状态在人物攻击动作完成后不会变为false,必须当触发这个keyup事件后才改变lock状态。

人物蹲下

蹲下操作与前面的操作也不相同，蹲下操作需要一直按着S才会触发，当你松开S键时，人物就会站起来。前面的lock状态在组合键中有用，所以我们这里再加一个keep状态，初始为false，keep为true时不触发操作，当keep为false时触发蹲下动作并且把keep变为true，当keyup事件触发时才让keep变为false。

组合键操作

keydown事件不能同时监听2个按键，你同时按下两个按键，实际上keydown事件只能得到一个code，那这样我们怎么触发组合按键呢？我的思路是用一个状态组解决这个问题。首先声明一个 keyStatus = {},在keydown事件中加上keyStatus[e.keyCode] = true ，然后再keyup事件中加上keyStatus[e.keyCode] = false。举个例子，我们要进行蹲下攻击操作，在我们按下S键并且没有松开时，这时keyStatus[83] = true，接着我们再按下J，这时keyStatus[74] = true。接着我们判断

    if(keyStatus[83]&&keyStatus[74]){
        //添加事件
    }
复制代码

就可以完成组合键操作了，当然我们松开按键时keyStatus[e.keyCode]就会变为false了。

人物技能

这里我们举个波动拳的例子，我的思路是继续创建一个IMG(波动拳图片)，然后将它隐藏。让我们按键触发人物技能时，当人物的技能动作完成后，先获取人物的位置，然后把波动拳位置放在人物位置后并且设置display:block让图片显示出来。然后用setInterval让波动拳自己飞行移动，当波动拳碰撞到边界时，clearInterval清除并且隐藏波动拳图片。

当然，我这里只实现了对一个人物的控制，后面还要完成人物对战，电脑AI等操作，感兴趣的同学可以下载下来一起完成。希望大家多多提出可以改进的地方。附上下载地址github.com/leslie233/r…

GIF演示