说明：
- 游戏可以选择不同的难度
- 贪吃蛇吃到一个食物计分为一
- 初始长度为三，分别代表贪吃蛇的头尾巴身体
- 撞到自己或者撞到墙壁就结束
js代码如下：
class Map{//地图类
constructor(){
this.w=600;//动态生成地图的长宽
this.h=400;
this.num=0;//记录分数
this.init();
}
init(){
this.map=document.createElement("div");
this.map.style.cssText=`width:${this.w}px;height:${this.h}px;margin:20px auto;background:#eee;border:1px solid #000;position:relative`;
document.body.appendChild(this.map);
}
grade(){//记录分数
this.gradeBox=document.createElement("div");
this.gradeBox.className="grade";
this.map.appendChild(this.gradeBox);
var str=`
分数：
<span class="num">0</span>
`;
this.gradeBox.innerHTML=str;
this.gradeBox.children[0].innerHTML=this.num;
}
}
class Food{//食物类
constructor(){
this.w=20;
this.h=20;
this.c=randomColor();
}
init(){
this.food=document.createElement("div");
this.food.style.cssText=`width:${this.w}px;height:${this.h}px;background:${this.c};position:absolute`;
this.left=random(0,(map.w-this.w)/this.w);
this.top=random(0,(map.h-this.h)/this.h);
this.food.style.left=this.left*this.w+"px"
this.food.style.top=this.top*this.h+"px"
map.map.appendChild(this.food);
}
}
class Snake{//贪吃蛇
constructor(){
this.w=20;
this.h=20;
this.d="right";
this.position=[
{
ele:null,
x:3,
y:2,
c:randomColor()
},
{
ele:null,
x:2,
y:2,
c:randomColor()
},
{
ele:null,
x:1,
y:2,
c:randomColor()
}
]
}
init(){
for(var i=0;i<this.position.length;i++){
if(!(this.position[i].ele)){
this.position[i].ele=document.createElement("div");
map.map.appendChild(this.position[i].ele);
}
this.position[i].ele.style.cssText=`width:${this.w}px;height:${this.h}px;background:${this.position[i].c}; position:absolute;left:${this.position[i].x*this.w}px;top:${this.position[i].y*this.h}px`;
}
this.t=setTimeout(()=>{
this.move();
},parseInt(select.dif)*100);
}
move(){//贪吃蛇的移动
//所有元素跟随蛇头移动
for(var i=this.position.length-1;i>0;i--){
this.position[i].x=this.position[i-1].x;
this.position[i].y=this.position[i-1].y;
}
switch(this.d){//判断蛇的移动方向
case "left":this.position[0].x-=1;break;
case "top":this.position[0].y-=1;break;
case "right":this.position[0].x+=1;break;
case "bottom":this.position[0].y+=1;break;
}
// 吃到食物
if(this.position[0].x==food.left&&this.position[0].y==food.top){
this.position.push({
ele:null,
x:this.position[2].x,
y:this.position[2].y,
c:randomColor()
})
map.num++;
map.gradeBox.children[0].innerHTML=map.num;
food.food.remove();
food.init();
}
if(this.position[0].x<0||this.position[0].x>((map.w-this.w)/this.w)||this.position[0].y<0||this.position[0].y>(map.h-this.h)/this.h){
alert("撞墙了");
return;
}
for(var i=1;i<this.position.length;i++){
if(this.position[0].x==this.position[i].x&&this.position[0].y==this.position[i].y){
alert("撞到自己了");
return;
}
}
this.init();
}
direct(code){//蛇头的移动方向不允许立即改变
switch(code){
case 37:
if(this.d=="right") break;
this.d="left";break;
case 38:
if(this.d=="bottom") break;
this.d="top";break;
case 39:
if(this.d=="left") break;
this.d="right";break;
case 40:
if(this.d=="top") break;
this.d="bottom";break;
}
}
}
class Select{//选择难度界面
constructor(){
this.w=300;
this.h=400;
setTimeout(() => {
this.sbox.style.opacity=1;
}, 200);
this.init();
}
init(){
this.sbox=document.createElement("div");
this.sbox.style.cssText=`width:${this.w}px;height:${this.h}px;position:absolute;top:0;left:150px;display:flex;justify-content:space-around;flex-direction:column;align-items:center;transition:all 0.6s; opacity:0`;
map.map.appendChild(this.sbox);
var str=`
<div class="inner" id="title">请选择难度</div>
<div class="inner difficult" index="3">简单</div>
<div class="inner difficult" index="2"> 一般</div>
<div class="inner difficult" index="1">困难</div>
`
this.sbox.innerHTML=str;
this.addEvent();
}
addEvent(){
var that=this;
this.sbox.onclick=function(eve){
var e=eve||window.event;
var target=e.target||e.srcElement;
if(target.className=="inner difficult"){
that.dif=target.getAttribute("index");//设置难度
this.style.opacity=0;
food.init();
snake.init();
map.grade();
}
}
}
}
var map=new Map();
var food=new Food();
var snake=new Snake();
var select=new Select();
document.onkeydown=function(eve){
var e=eve||window.event;
var code=e.keyCode||e.which||e.charCode;
snake.direct(code);
}
//封装食物的随机位置和蛇节的随机颜色值
function random(min,max){
return Math.floor(Math.random()*(max-min+1)+min);
}
function randomColor(){
return `rgba(${random(0,255)},${random(0,255)},${random(0,255)}) `;
}
以下为css代码：
由于地图食物和蛇都是动态生成，这里的css代码是选择难度界面以及计算分数界面
#title{
width:150px;
}
.inner{
width: 100px;
height: 40px;
background: #999;
border-radius:10px;
line-height: 40px;
text-align: center;
font-weight: bold;
cursor: pointer;
/* opacity: 0; */
}
.grade{
width:60px;
height:40px;
position:absolute;
top:2px;left:2px;
font-size:14px;
color:#666;
}
.num{
color:#000;
}
不足之处请大家留言，谢谢O(∩_∩)O~
