原生JS实现贪吃蛇

"en">

"UTF-8">
"X-UA-Compatible" cOntent="IE=edge">
"viewport" cOntent=">




class="start">start
class="stop">stop
class="restart">restart
"text" value=‘0‘ class=‘score‘ disabled>

import Food from ‘./food.js‘
import Snake from ‘./snake.js‘
export default class GreedySnake{
constructor(elem,score,popup){
this.map=document.querySelector(elem)
this.timer=null
this.level=1
this.food=new Food(this.map)
this.snake=new Snake(this.map)
this.score=document.querySelector(score)
this.count=0
this.steer()
this.popup=document.querySelector(popup)
this.flag=true
}
start(){
this.timer=setInterval(()=>{
this.alert()
this.snake.motion()
let flag=this.snake.achieve(this.food)
// console.log(‘this.food‘,this.food,this.food.food.offsetLeft,this.food.food.offsetTop)
if(flag){
this.updateScore()
this.snake.defineHead()
this.food.generator()
}
if(this.snake.termination()){
clearInterval(this.timer)
// window.alert(‘Game Over!!!‘)
if(window.confirm(‘Oops! Game Over! Do you want to restart ?‘)){
this.restart()
}
}
},400-this.level*50)
}
stop(){
window.clearInterval(this.timer)
}
restart(){
window.location.reload()
}
steer(){
document.addEventListener(‘keydown‘,e=>{
e.preventDefault()
// console.log(e.key)
switch(e.key){
case ‘ArrowUp‘: this.snake.bearing=‘top‘;break
case ‘ArrowDown‘: this.snake.bearing=‘bottom‘;break
case ‘ArrowLeft‘: this.snake.bearing=‘left‘;break
case ‘ArrowRight‘: this.snake.bearing=‘right‘;break
}
})
}
alert(){
if(this.count%1===0 && this.flag){
if(this.count !== 0){
this.popup.innerHTML=`^_^ Congratulations, promote to level: ${this.level}`
}else{
this.popup.innerHTML=`^_^ level: ${this.level}`
}
this.popup.style.display=‘block‘;
this.flag=false
setTimeout(()=>{
this.popup.style.display=‘none‘
},1500)
}
}
updateScore(){
this.count++
// console.log(‘count: ‘,this.count,typeof this.score.value,this.score.value)
this.score.value=parseInt(this.score.value)+this.level*10
if(this.count%1===0){
this.flag=true
this.level++
this.stop()
this.start()
}
}
}

export default class Snake{
constructor(map){
this.map=map
this.snake=[]
this.bearing=‘right‘
this.initialize()
}
getBearing(){
const head=this.snake[0]
if(!head) return {left:0,right:0}
const bearing={left:head.offsetLeft,top:head.offsetTop}
switch(this.bearing){
case ‘top‘: bearing.top-=20;break
case ‘right‘: bearing.left+=20;break
case ‘bottom‘: bearing.top+=20;break
case ‘left‘: bearing.left-=20;break
}
// console.log(‘getBearing‘,bearing)
return bearing
}
defineHead(){
const position=this.getBearing()
// console.log(‘defineHead‘,position)
const head=this.snake[0]
if(head) head.className=‘body‘
const div=document.createElement(‘div‘)
div.className=‘head‘
div.style.left=position.left+‘px‘
div.style.top=position.top+‘px‘
this.snake.unshift(div)
this.map.appendChild(div)
}
initialize(){
const num=3;
for(let i=0;ii){
this.defineHead()
}
}
motion(){
const body=this.snake.pop()
body.remove()
this.defineHead()
}
termination(){
const head=this.snake[0]
const x=head.offsetLeft
const y=head.offsetTop
if(x<0 || y<0 || x>this.map.clientWidth || y>this.map.clientHeight){
return true
}else{
let flag=false
const body=this.snake.slice(1)
body.forEach((value,index,array)=>{
if(value.offsetLeft === x && value.offsetTop === y) flag=true
})
return flag
}
}
achieve(food){
const x=this.snake[0].offsetLeft
const y=this.snake[0].offsetTop
if(x === food.food.offsetLeft && y === food.food.offsetTop) return true
return false
}
}

export default class Food{
constructor(map){
this.map=map
this.food=document.createElement(‘div‘)
this.food.className=‘food‘
this.map.appendChild(this.food)
this.x=0
this.y=0
this.generator()
}
generator(){
const numberX=this.map.clientWidth/this.food.clientWidth
const numberY=this.map.clientHeight/this.food.clientHeight
const x=Math.floor(Math.random()*numberX)
const y=Math.floor(Math.random()*numberY)
this.food.style.left=x*20+‘px‘
this.food.style.top=y*20+‘px‘
// console.log(‘food‘,x,y,this.food.offsetLeft,this.food.offsetTop)
}
}

import GreedySnake from ‘./greedysnake.js‘
const pastime=new GreedySnake(‘.map‘,‘.score‘,‘.popup‘)
const startButton=document.querySelector(‘.start‘)
startButton.addEventListener(‘click‘,()=>pastime.start())
const stopButton=document.querySelector(‘.stop‘)
stopButton.addEventListener(‘click‘,()=>pastime.stop())
const restartButton=document.querySelector(‘.restart‘)
restartButton.addEventListener(‘click‘,()=>pastime.restart())