<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <script> // 地图 function Map(){ this.w = 800; this.h = 400; this.display(); // 创建元素功能 } Map.prototype.display = function(){ this.ele = document.createElement('div'); this.ele.style.cssText = `width:${this.w}px;height:${this.h}px;background: #ccc;background-size:width:800px;height:400px;margin: 0 auto;position:relative;`; document.body.appendChild(this.ele); // 插入页面 } // 食物 function Food(){ this.w = 20; this.h = 20; this.c = 'black'; this.x = 0; this.y = 0; this.display(); } Food.prototype = { constructor: Food, display:function(){ this.ele = document.createElement('div'); this.ele.style.cssText = `width:${this.w}px;height:${this.h}px;background:${this.c};border-radius:50%;position:absolute;`; m.ele.appendChild(this.ele); this.randomPos(); }, randomPos:function(){ this.x = this.random(0,(m.w - this.w)/ this.w );// (800-20)/20 this.y = this.random(0,(m.h - this.h)/ this.h ); this.ele.style.left = this.x*this.w+'px'; this.ele.style.top = this.y*this.h+'px'; }, random:function(a,b){ return Math.round(Math.random()*(a-b)+b); } } // 蛇 class Snake{ constructor(){ this.w = 20; this.h = 20; this.body = [{c:"green",x:3,y:2},{c:"red",x:2,y:2}, {c:"yellow",x:1,y:2}]; this.direction = 'right'; // 方向朝右 this.display(); } display(){ for(var i=0;i<this.body.length;i++){ if(!this.body[i].ele){ this.body[i].ele = document.createElement('div'); m.ele.appendChild(this.body[i].ele); this.body[i].ele.style.cssText = `width:${this.w}px;height:${this.h}px;border- radius:40%;position:absolute;`; } this.body[i].ele.style.background = this.body[i].c; this.body[i].ele.style.left = this.body[i].x * this.w + 'px'; this.body[i].ele.style.top = this.body[i].y * this.h + 'px'; } this.body[0].ele.style.background = 'blue'; setTimeout(()=>{ this.move(); },100) } move(){ for(var i= this.body.length-1;i>0;i--){ this.body[i].x = this.body[i-1].x; this.body[i].y = this.body[i-1].y; } switch(this.direction){ case 'left': this.body[0].x -= 1; break; case 'right': this.body[0].x += 1; break; case 'top': this.body[0].y -= 1; break; case 'bottom': this.body[0].y += 1; } if(this.body[0].x < 0|| this.body[0].y < 0 || this.body[0].x > 39 || this.body[0].y > 19){ alert('撞墙了'); return; } if(this.body[0].x == f.x && this.body[0].y == f.y){ f.randomPos(); this.body.push({ x:this.body[this.body.length-1].x, y:this.body[this.body.length-1].y, c:randomColor() }) } for(var i=1;i<this.body.length;i++){ if(this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y){ alert("撞到自己了") return; } } this.display(); } direct(val){ switch(val){ case 37: this.direction = "left"; break; case 38: this.direction = "top"; break; case 39: this.direction = "right"; break; case 40: this.direction = "bottom"; break; } } } function randomColor(){ return `rgb(${f.random(0,255)},${f.random(0,255)},${f.random(0,255)})` } var m = new Map(); var f = new Food(); var s = new Snake(); document.onkeydown = function(eve){ var e = eve || window.event; var code = e.keyCode || e.which; s.direct(code); } </script></body></html>
