// 食物类 class Food { constructor(selector) { // 获取地图 this.map = document.querySelector(selector) this.init() } // 初始化 init() { const food = document.querySelector('.food') if (food) { food.remove() } this.getPosition() } // 获取 food 位置 getPosition() { // 地图的宽高 const mapW = this.map.offsetWidth const mapH = this.map.offsetHeight const _size = 20 // 随机坐标 const x = Math.floor(Math.random() * mapW / _size) * _size const y = Math.floor(Math.random() * mapH / _size) * _size this.x = x this.y = y const foodStr = `

` this.map.insertAdjacentHTML('beforeend', foodStr) } } // 蛇类 class Snake { constructor(selector) { // 初始化地图和食物位置 this.selector = selector this.startBtn = document.querySelector('button') this.init(selector) } // 初始化 init(selector) { // 初始化头部x，y的坐标 this.x = 100 this.y = 100 // 获取当前地图 this.map = document.querySelector(selector) // 置空地图内容 this.map.innerHTML = '' // 初始化食物 this.food = new Food(selector) // 当期等级 this.level = 1 // 当前分数 this.score = 0 // 长度加几个升一级 this.levelStep = 5 // 行动步幅 this.step = 20 // 头部和身体的字符串 const head = `

` const body = `

` // score dom this.scoreDom = document.querySelector('.score') // scoreDom内容重置为0 this.scoreDom.innerHTML = this.score // level dom this.levelDom = document.querySelector('.level') // level dom的内容重置为1 this.levelDom.innerHTML = this.level // 预行动方向，提前记录的行动方向，判断一些内容，在下次定时器的回调函数里给this.direction 赋值用 this.preDirection = 'right' // 行动方向 this.direction = 'right' // 横向运动方向 this.rowDirections = ['left', 'right'] // 纵向运动方向 this.colDirections = ['top', 'bottom'] // 行动速度 this.speed = 500 this.mapOffsetWidth = this.map.offsetWidth this.mapOffsetHeight = this.map.offsetHeight // 追加蛇到地图里 this.map.insertAdjacentHTML('beforeend', head + body) // 获取蛇的头部 this.head = document.querySelector('.snake_head') // 获取蛇的身体 this.body = document.querySelectorAll('.snake_body') document.onkeydown = e => { const { key } = e this.changePreDirection(key) } // 开始游戏按钮 this.startBtn.style.display = 'block' const that = this this.startBtn.onclick = function() { this.style.display = 'none' that.run() } } run() { this.intervel = setTimeout(() => { this.changeDirection() const { style, offsetLeft, offsetTop } = this.head this.updatePosition({ offsetLeft, offsetTop }) switch (this.direction) { case 'left': this.x = offsetLeft - this.step break case 'right': this.x = offsetLeft + this.step break case 'top': this.y = offsetTop - this.step break case 'bottom': this.y = offsetTop + this.step } if (this.checkDead()) { clearInterval(this.intervel) this.init(this.selector) return } // 判断是否吃到了食物 if (this.x === this.food.x && this.y === this.food.y) { this.eat() } style.left = this.x + 'px' style.top = this.y + 'px' this.run() }, this.speed) } // 更新body位置 updatePosition({ offsetLeft, offsetTop }) { // 获取所有body，并且更改顺序 const bodys = [...this.body].reverse() this.lastBodyX = bodys[0].offsetLeft this.lastBodyY = bodys[0].offsetTop // 从身体的最后一个开始遍历，依次把当前的身体放到上一个身体的位置，也就是从最后开始往前更新 bodys.forEach((item, index, array) => { // 如果是body中的第一个，则跟着head的位置走 if (index === (array.length - 1)) { item.style.left = offsetLeft + 'px' item.style.top = offsetTop + 'px' } else { array[index].style.left = array[index + 1].offsetLeft + 'px' array[index].style.top = array[index + 1].offsetTop + 'px' } }) } // 检测是否结束 checkDead() { // 头部的坐标 const { x, y } = this // 是否结束的标识 let isDead = false // 获取所有的身体的坐标 const positions = ([...this.body]).map(item => { const { left, top } = item.style return { left, top } }) // 判断身体和头部是否有坐标重合 isDead = positions.some(item => { const { left, top } = item // left和top带有'px'，x和y为纯数字 return (x == left.slice(0, -2) && y == top.slice(0, -2)) }) // 判断是否撞墙 if (x > this.mapOffsetWidth - this.step || x < 0 || y > this.mapOffsetHeight - this.step || y < 0 ) { isDead = true } if (isDead) { alert('游戏结束！') } return isDead } // 改变预方向 changePreDirection(key) { switch (key) { case 'ArrowUp': this.preDirection = 'top' break case 'ArrowDown': this.preDirection = 'bottom' break case 'ArrowLeft': this.preDirection = 'left' break case 'ArrowRight': this.preDirection = 'right' break } } // 改变方向 changeDirection() { switch (this.preDirection) { case 'top': // 如果当前不是纵向运动，则给赋值为top，因为如果是纵向运动，赋值top无意义 if (!this.colDirections.includes(this.direction)) { this.direction = 'top' } break case 'bottom': // 如果当前不是纵向运动，则给赋值为bottom，因为如果是纵向运动，赋值bottom无意义 if (!this.colDirections.includes(this.direction)) { this.direction = 'bottom' } break case 'left': // 如果当前不是横向运动，则给赋值为left，因为如果是横向运动，赋值left无意义 if (!this.rowDirections.includes(this.direction)) { this.direction = 'left' } break case 'right': // 如果当前不是横向运动，则给赋值为right，因为如果是横向运动，赋值right无意义 if (!this.rowDirections.includes(this.direction)) { this.direction = 'right' } break } } // 吃食物 eat() { this.food = new Food(this.selector) this.map.insertAdjacentHTML('beforeend', `

`) this.body = document.querySelectorAll('.snake_body') this.score += 10 this.scoreDom.innerHTML = this.score this.changeLevel() } // 更改等级 changeLevel() { const level = this.level this.level = Math.floor(this.score / 10 / this.levelStep) + 1 this.levelDom.innerHTML = this.level if (this.level < 10 && this.level !== level) { this.speed -= (100 - this.level * 10) } } } // 初始化 new Snake('.map')

作品「贪吃蛇游戏」预览