基于React的贪吃蛇游戏的设计与实现
贪吃蛇小游戏（第二版）
一年半前层用react写过贪吃蛇小游戏https://github.com/caohuilin/Snake_React
那时刚刚学习React的我兴奋的尝试了很久
近些日子比较清闲，想着用学到的东西重新写个版本，于是V2就来了https://github.com/caohuilin/Snake_React_v2
游戏规则
贪吃蛇大家都不陌生了，吃掉一个食物，蛇的身体会变长，食物随机出现在屏幕的另一个位置。碰到自己或者碰到墙壁游戏结束。
注意一点就是设置目前只支持游戏模式的设置。
点击设置按钮后，点击左键或者右键进行模式切换。
项目安装部署
Install
yarn install
Start Serve
It's served in http://localhost:3000 .
yarn run serve
Build
yarn run build
游戏思路介绍
基础项目搭建
采用webpack、gulp构建工具，搭建React开发脚手架
游戏界面划分
- 设计游戏界面（游戏界面分为标题，主界面，按键三部分组成）
- 根据划分的界面构建组件
基础组件界面实现
- Header采用蛇身体部分元素展示
- 主界面分为游戏屏幕界面和游戏过程中信息展示界面
- 按键界面主要为游戏方向控制键，游戏开始键和游戏设置相关键
让蛇动起来
- 定义snake初始值和初始方向
snake初始值为游戏界面随机相邻的两个点
const index = modal === 1 ? 3 : 1;// modal为游戏模式
const x = Math.floor(Math.random() * (column - index)) + 1;// column为根据屏幕大小计算出的游戏界面的高度
const y = Math.floor(Math.random() * (Row - index)) + 1;// Row为游戏界面的宽度
const ISnakeRecord = Immutable.Record({
snake: Immutable.fromJS([
{
x: x,
y: y
}, {
x: x,
y: y - 1
}
])
});
const IDirectionRecord = Immutable.Record({
snake: 3
});
- 定义设置snake的action
export const setSnack = createAction('set snake');export const setSnack = createAction('set snake');
- 开始游戏后，每500ms计算蛇下一个的位置
//goNext函数为计算snake下一个的位置，并触发设置snake的action，组件重新加载，从而模拟蛇前进的动画。
startGame = () => {
if (this.timer ) { clearInterval(this.timer); }
this.timer = setInterval(this.goNext, 500);
}
监听按键，改变蛇的运动方向
- 定义设置snake方向的action
export const setSnackDirection = createAction('set snake direction');
- DOM监听KeyDown事件
<div className='app' onKeyDown={this.keyDown} tabIndex={0}>
...
</div>
- keyDown事件的实现
除了改变蛇的方向的按键之外，还实现了游戏开始，游戏结束，游戏暂停，重新开始游戏，设置游戏模式等按键的监听，实现方式基本差不多，只是触发不同的action，改变不同的reducer
handleKeyDown = (code) => {
// init 为游戏当前所处状态，只有当初始化动画显示完毕开始游戏之后，方向键才起相应作用
const init = this.props.game.get('init');
if (code === 1) {
this.props.actions.setVolume();
} else if (init === 0) {// 初始化完毕
if (code === 2 || code === 0 ) {// 开始游戏
this.props.actions.setGameInit(1);
this.props.actions.clearCode();
this.props.actions.startGame();
} else if (code === 3) {// 设置游戏模式
this.props.actions.setGameInit(-2);
}
} else if (init === 1) {// 游戏中
let direction = this.props.direction.get('snake');
if (code === 38 && direction !== 1) {
direction = 0;
} else if (code === 40 && direction !== 0) {
direction = 1;
} else if (code === 37 && direction !== 3) {
direction = 2;
} else if (code === 39 && direction !== 2) {
direction = 3;
} else if (code === 32) {
this.props.actions.pauseGame();
} else if (code === 4) {
this.props.actions.pauseGame({pause: true});
} else if (code === 2) {
this.props.actions.pauseGame({pause: false});
this.props.actions.startGame();
} else if (code === 0) {
this.props.actions.endGame();
this.props.actions.setGameInit(-1);
this.props.actions.initSnack();
setTimeout(this.handleKeyDown.bind(null, 2), 0);
}
this.props.actions.setSnackDirection(direction);
} else if (init === -2) {// 设置游戏模式
if (code === 37 || code === 39) {
this.props.actions.setModal();
} else if (code === 2) {
this.props.actions.setGameInit(1);
this.props.actions.startGame();
}
} else if (init === -1 && code === 2) {// 初始化中
setTimeout(this.handleKeyDown.bind(null, 2), 0);
}
}
keyDown = (event: any) => {
const code = event.nativeEvent.keyCode;
this.handleKeyDown(code);
}
食物的产生
- 初始化食物的位置
const index = modal === 1 ? 3 : 1;
const x = Math.floor(Math.random() * (column - index)) + 1;
const y = Math.floor(Math.random() * (Row - index)) + 1;
const IFoodRecord = Immutable.Record({
food: Immutable.fromJS(
{
x: x,
y: y
}
)
});
- 定义重新设置食物位置的action
export const setFood = createAction('set food');
- 让食物闪动起来
每隔200ms改变食物是否显示的样式，制造食物闪动的效果
this.foodTimer = setInterval(this.setFoodShowOrHide, 200);
setFoodShowOrHide = () => {
this.setState({ showFood: !this.state.showFood});
}
<div className={`cell ${showFood ? 'food-o-cell' : 'food-cell'}`}></div>
- 判断snake头部下一个位置是否为食物的位置，若为食物的位置，蛇的长度+1，出发重新设置食物位置的action
if (next.x !== currentFood.x || next.y !== currentFood.y) {
currentSnake.pop();
} else {
this.props.actions.getCode();
this.props.actions.setFood();
}
分数展示
初始设置分数为0，每一次判断到snake头部下一个位置是否为食物时，分数+1
模式选择
在设置模式下，左右按键实现模式切换
试玩
https://caohuilin.github.io/Snake_React_v2/
补充
基本功能已经实现，难免有处理不当或者没有考虑到的界限问题，欢迎提Issue，https://github.com/caohuilin/Snake_React_v2
祝大家玩的愉快！
附项目文件截图
基于React的贪吃蛇游戏的设计与实现
注：本文著作权归作者，由demo大师代发，拒绝转载，转载需要作者授权
