react 写一个贪吃蛇
示例：
全部代码如下：
snake.jsx
import React, { Component } from 'react';import PropTypes from 'prop-types';
import { is, fromJS } from 'immutable';
import "./snake.less";
const TYP = {
normal:1,
head:2,
body:3,
food:4
};
const DIRCTION = {
top:1,
bottom:2,
left:3,
right:4
}
export default class Snake extends Component{
constructor(props){
super(props);
this.state = {
count:0
}
}
componentWillMount(){
var n = 20;
var arr = [];
for(var i = 0; i < n; i++ ){
var temp = [];
for(var j = 0; j < n; j++){
temp[j] = TYP.normal;
}
arr.push(temp);
}
var body = [
{r:6,c:10},
{r:7,c:10},
{r:8,c:10},
{r:9,c:10}
];
var food = {r:14,c:14};
this.conf = {
run:true,
n:n,
dirction:DIRCTION.top,
arr:arr,
body:body,
food:food
};
this.renderSake();
window.addEventListener("keydown",this.keydown.bind(this));
}
componentWillUnmount(){
window.removeEventListener("keydown",this.keydown);
}
keydown=(event)=>{
var key = event.key;
if(!this.conf.run && this.conf.timer){
return ;
}
if(key === "w" && this.conf.dirction !== DIRCTION.top){
//上
this.conf.dirction = DIRCTION.top;
}else if(key === "s" && this.conf.dirction !== DIRCTION.bottom){
//下
this.conf.dirction = DIRCTION.bottom;
}else if(key === "a" && this.conf.dirction !== DIRCTION.left){
//左
this.conf.dirction = DIRCTION.left;
}else if(key === "d" && this.conf.dirction !== DIRCTION.right){
//右
this.conf.dirction = DIRCTION.right;
}
}
mainTimer =()=>{
var me = this;
if(me.conf.timer){
return ;
}
me.conf.timer = setInterval(function(){
if(me.conf.dirction === DIRCTION.top){
//上
me.move(-1,0);
}else if(me.conf.dirction === DIRCTION.bottom){
//下
me.move(1,0);
}else if(me.conf.dirction === DIRCTION.left ){
//左
me.move(0,-1);
}else if(me.conf.dirction === DIRCTION.right ){
//右
me.move(0,1);
}
},360);
}
moveCheck(r,c){
//校验
var body = this.conf.body;
var head = body[0];
var food = this.conf.food;
var n = this.conf.n;
var nextHead = {
r:head.r + r,
c:head.c + c
}
//检查出界
if((nextHead.r >= n) || (nextHead.r < 0 ) || (nextHead.c >= n) || (nextHead.c < 0) ){
return false;
}
//检查咬自己,没有咬到就运动
for(var i = body.length-1; i >= 1; i--){
var item = body[i];
if(item.r === nextHead.r && item.c === nextHead.c ){
return false;
}
item.r = body[i-1].r;
item.c = body[i-1].c;
}
//检查吃食物
if(food.r === nextHead.r && food.c === nextHead.c){
//吃东西
body.push({
r:food.r,
c:food.c
});
//记录分数
this.setState({
count:this.state.count + 1
});
//重新创建食物
this.conf.food = this.createFood();
}
body[0] = nextHead;
return true;
}
move(r,c){
//上下
if(this.moveCheck(r,c)){
//可以下一步
this.renderSake();
}else{
//游戏结束
this.conf.run = false;
clearInterval(this.conf.timer);
this.conf.timer = null;
alert("游戏结束");
}
}
renderSake(){
//渲染蛇的身体
var config = JSON.parse(JSON.stringify(this.conf.arr));
var body = this.conf.body;
var food = this.conf.food;
this.setFood(config,food);
this.setBody(config,body);
this.setState({
config:config
});
}
createFood(){
//创建食物
var food = this.validFood();
var max = 30;
while(!food && max > 0){ //防止死循环和获取的食物坐标在蛇的身体上
food = this.validFood();
max--;
}
return food;
}
validFood(){
//校验食物坐标是否可用
var body = this.conf.body;
var n = this.conf.n;
var r = Math.floor(Math.random()* n);
var c = Math.floor(Math.random()* n);
for(var i = 0,len = body.length; i < len; i++){
var item = body[i];
if(item.r === r && item.c === c){
return false;
}
}
return {r,c};
}
setBody(config,body){
//设置蛇身体
for(var i = 1,len = body.length; i < len; i++){
var item = body[i];
config[item.r][item.c] = TYP.body;
}
config[body[0].r][body[0].c] = TYP.head;
}
setFood(config,food){
//设置食物
config[food.r][food.c] = TYP.food;
}
getClass=(item)=>{
if(item === TYP.head){
return "head";
}else if(item === TYP.body){
return "body";
}else if(item === TYP.food){
return "food";
}
}
render(){
return (
<div className="Snake">
<button className="start" onClick={this.mainTimer}> 点击开始</button>
<p>分数：{this.state.count}</p>
<div className="box">
{
this.state.config.map((item,index)=>{
return <div className="cols" key={index} >
{
item.map((itm,idx)=>{
return <div className={ this.getClass(itm) } key={index + '-'+ idx} ></div>
})
}</div>
})
}
</div>
</div>
);
}
}
snake.less
#root{ height: 100%;
}
.Snake{
width: 100%;
height: 100%;
text-align: center;
background: #fff;
overflow: hidden;
button{
width: 100px;
height: 30px;
}
.box{
width: 400px;
margin: 10px auto;
div.cols{
overflow: hidden;
>div{
float: left;
width: 20px;
height: 20px;
box-sizing: border-box;
border: 1px solid #dedede;
border-inline-start-style: unset;
}
div.body{
background: blueviolet;
}
div.head{
background: red;
}
div.food{
background: gold;
}
}
}
}
以上是 react 写一个贪吃蛇 的全部内容， 来源链接： utcz.com/z/381975.html
