JSFiddle - React, Tailwind, and code Playground

by yunzuomeng

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="snake">
		<table>
		<tr v-for="(col,y) in cols"><td v-for="(row,x) in rows" :class="body(x,y)||showfood(x,y)?'active':''"></td></tr>
		</table>
		<button @click="start()">开始</button>
	</div>

CSS

td{
			border: 1px solid #666;
			width: 10px;
			height: 10px;
		}
		table{
			border-collapse: collapse;
		}
		.active{background: #f60}

JavaScript

let timer=''
		new Vue({
			el:'#snake',
			data(){
				return{
					rows:'',
					cols:'',
					position:[[0,0],[1,0],[2,0],[3,0]],
					direction:1,
					food:[]
				}
			},
			mounted(){
				this.keyboard()
			    this.background() 
			    this.creatfood()
			    console.log(this.food)
			},
			methods:{
				background(){
					this.rows=Array(30)
					this.cols=Array(30)
				},
				keyboard(){
					let _this = this;
				    document.onkeydown = function(e){
				    	if(e.keyCode===37){
				    		_this.change(-1)
				    	}else if(e.keyCode===38){
				    		_this.change(-2)
				    	}else if(e.keyCode===39){
				    		_this.change(1)
				    	}else{
				    		_this.change(2)
				    	}
				    }
				},
				creatfood(){
					this.food[0]=Math.floor(Math.random()*30)
					this.food[1]=Math.floor(Math.random()*30)
				},
				showfood(x,y){
					if(this.food[0]===x&&this.food[1]===y){
						return true
					}
				},
				body(x,y){
					let X,Y
					for(i=0;i<this.position.length;i++){
						if(this.position[i][0]===x&&this.position[i][1]===y){
							return true
						}
					}
				},	
				start(){
					timer=setInterval(()=>this.autorun(),300)
				},			
				change(dir){
					if(Math.abs(dir)===Math.abs(this.direction)){
						return
					}else{
						this.direction=dir
						this.autorun()
					}
				},
				autorun(){					
					let direction=this.direction
					let headX,headY
						headX=this.position[this.position.length-1][0]
						headY=this.position[this.position.length-1][1]
					if(direction===1||direction===-1){						
							direction>0?headX++:headX--										
					}else{
							direction>0?headY++:headY--
					}
					if(headX<0||headX>29||headY<0||headY>29||this.body(headX,headY)){
						alert('Game...