从零开始:用REACT写一个格斗游戏(二)

1,990 阅读3分钟

今天也没什么事,所以就准备继续完善这个小游戏。第一次点进来的同学可以看看上篇。今天给人物增加了攻击扣血,被击打僵直等,顺便还给人物增加了一个转转转的技能,不过可能图没有扣好,转转转显得有点鬼畜。

怎么实现人物攻击让敌人掉血呢,首先我们先要判断攻击究竟有没有打在敌人身上。当人物攻击时,判断两个DIV之间有没有碰撞就行了。

移动碰撞

首先我们先实现不攻击,当人物前进撞到敌人时,让敌人被自己推着移动。这里就需要用到DIV的碰撞检测了。目前这个游戏很简单,所以我就只考虑了水平的碰撞,忽略了垂直碰撞,这两者之间其实原理是一样的。我是用offsetLeft属性检测碰撞的。当我们按D前进时,在keydown中监听人物之间的距离,当this.refs.player2.offsetLeft - this.refs.player1.offsetLeft小于等于player1人物图片的宽度时,就认为两个人物之间碰撞了。当检测到碰撞后,给player2人物加上后退行动,这样碰撞后每次player1人物前进的时候,player2人物就会后退。

攻击碰撞检测

攻击检测和移动检测其实差不多,当人物按J,K等键攻击的时候,keydown事件中检测2个人物有没有碰撞。如果碰撞了,就给被攻击的人加上一个被击中的状态,并且加上一个被击中的行动。那么怎么把攻击和扣血联系起来呢,其实也很简单。首先我们定义一个全局变量Blood,初始血量设为100。我们假设每次被拳头攻击扣10点血量,就在J的keydown中让Blood - 10。接下来我们还要把血量的变化直观的显示在页面上,加一个血量的图片,然后利用clip属性改变图片的可见尺寸来表示血量的多少。举个例子,假设血量图片宽度是100px,最开始显示的是完整的图片,当player2被拳头击中,血量减少时,图片相应的也只会显示90px的尺寸。用这个办法把攻击和血量显示联系起来。

        Blood = Blood - 10
        this.refs.blood.style.clip = `rect(0 ${Blood}px 50px 0)`

当血量变为0时,游戏结束。

移动攻击检测

移动攻击其实就是2个技能了,波动拳和新增的飞毛腿。在飞行过程中实时检测技能与人物间有没有碰撞,当第一次碰撞时,扣除相应的血量并且移除技能。

今天大概就完成了这些,主要是抠图太麻烦了。现在游戏还没有加入对战功能,后面准备增加一个电脑AI对战,顺便把游戏页面美化一下,毕竟现在的画面实在是有点丑。再次附上下载地址github.com/leslie233/r…

GIF演示