html代码
<style>
</style>
<div class="map"></div>
<button class="start">开始</button>
<button class="stop">停止</button>
<script src="./map.js"></script>
<script src="food.js"></script>
<script src="she.js"></script>
<script src="./game.js"></script>
<script>
const g = new Game('.map')
const start = document.querySelector('.start')
const stop = document.querySelector('.stop')
start.addEventListener('click', () => g.start())
stop.addEventListener('click', () => g.stop())
</script>
map.js代码
function Map(ele){
this.ele = ele
this.h = 400
this.w = 800
}
Map.prototype.dt = function(){
this.ele.style.background = 'url(bg.png)'
this.ele.style.height = this.h+'px'
this.ele.style.width = this.w+'px'
this.ele.style.border = '10px solid #ccc'
this.ele.style.position = 'relative'
}
she.js代码
function She(ele) {
this.ele = ele
this.len = 20//一段长度
//存蛇
this.snakeObj = [
{ x: 3, y: 2, color: 'red', ele: null }, //蛇头
{ x: 2, y: 2, color: 'blue', ele: null }, // 蛇的身体
{ x: 1, y: 2, color: 'blue', ele: null } // 蛇的身体
]
this.fangx = 'right'
}
She.prototype.remove = function () {
for (let i = 0; i < this.snakeObj.length; i++) {
if (this.snakeObj[i].ele) {
// console.log(this.snakeObj[i].ele)
this.ele.removeChild(this.snakeObj[i].ele)
this.snakeObj[i].ele = null
}
}
}
//创建蛇
She.prototype.set = function () {
this.remove()
let snakeObj = this.snakeObj
for (let i = 0; i < snakeObj.length; i++) {
let divObj = document.createElement('div')
divObj.style.width = this.len
divObj.style.height = this.len
divObj.style.position = 'absolute'
divObj.style.left = snakeObj[i].x * this.len
divObj.style.top = snakeObj[i].y * this.len
divObj.style.background = snakeObj[i].color
snakeObj[i].ele = divObj
this.ele.appendChild(divObj)
}
}
She.prototype.pand = function () {
document.addEventListener('keydown', (e) => {
console.log(1)
var e = e || which.event
console.log(e.keyCode)
// switch (e.keyCode, this.fangx) {
// case 38, 'botton':
// return;
// break;
// case 39,'left':
// return;
// break;
// case 40, 'top':
// return;
// break;
// case 37,'right':
// return;
// break;
// }
switch (e.keyCode) {
case 38:
this.fangx = 'top'
break;
case 39:
this.fangx = 'right'
break;
case 40:
this.fangx = 'botton'
break;
case 37:
this.fangx = 'left'
break;
}
})
}
She.prototype.zzdong = function () {
let snakeObj = this.snakeObj
// snakeObj[0].ele
// snakeObj[0].ele.style.left=snakeObj[0].x*this.len
for (let i = snakeObj.length - 1; i > 0; i--) {
snakeObj[i].x = snakeObj[i - 1].x
snakeObj[i].y = snakeObj[i - 1].y
}
if (this.fangx == 'right') {
snakeObj[0].x += 1
}
if (this.fangx == 'top') {
snakeObj[0].y -= 1
}
if (this.fangx == 'left') {
snakeObj[0].x -= 1
}
if (this.fangx == 'botton') {
snakeObj[0].y += 1
}
// divObj.style.top=snakeObj[i].y*this.len
this.set()
}
function Food(ele){
this.sw = 20
this.ele = ele
}
food.js代码
Food.prototype.chuangj = function(){
this.divObj = document.createElement('div')
this.divObj.style.height=this.sw
this.divObj.style.width=this.sw
this.divObj.style.background='#0f4'
this.ele.appendChild(this.divObj)
this.wz()
}
Food.prototype.wz = function(){
this.wzX=(Math.floor(Math.random()*this.ele.clientWidth/this.sw))*this.sw
this.wzY=(Math.floor(Math.random()*this.ele.clientHeight/this.sw))*this.sw
this.divObj.style.position = 'absolute'
// console.log(this.ele.clientWidth/this.sw)
this.divObj.style.left=this.wzX
this.divObj.style.top=this.wzY
}
game.js代码
function Game(ele) {
//游戏目录
this.ele = document.querySelector(ele)
this.t;
this.bool = true;
this.map = new Map(this.ele) //地图
this.map.dt()
this.food = new Food(this.ele)//食物
this.food.chuangj()
this.she = new She(this.ele)//蛇
this.she.set()
this.she.pand()
}
Game.prototype.stop = function () {
clearInterval(this.t)
}
Game.prototype.stop = function () {
alert('暂停')
}
Game.prototype.start = function () {
// var _this = this
if (this.bool) {
this.bool == false
this.t = setInterval(() => {
this.she.zzdong()
let foodY = this.food.wzY
let foodX = this.food.wzX
let mapX = this.map.w
let mapY = this.map.h
let sheX = this.she.snakeObj[0].x * 20
let sheY = this.she.snakeObj[0].y * 20
if (foodY == sheY && foodX == sheX) {
let xing = this.she.snakeObj[this.she.snakeObj.length - 1]
this.she.snakeObj.push({
x: xing.x,
y: xing.y,
color: xing.color,
ele: null
})
this.food.wz()
this.she.set()
}
console.log(sheX)
console.log(mapX)
if (sheX == mapX || mapY == sheY || sheX < 0 || sheY < 0) {
alert('你死了')
clearInterval(this.t)
location.reload()
}
for(var i = 1 ; i <this.she.snakeObj.length ; i++){
if((sheX==this.she.snakeObj[i].x*20)&&(sheY==this.she.snakeObj[i].y*20)){
alert('你死了')
clearInterval(this.t)
location.reload()
}
}
}, 150)
}
}