說明：
- 游戲可以選擇不同的難度
- 貪吃蛇吃到一個食物計分為一
- 初始長度為三护蝶，分別代表貪吃蛇的頭尾巴身體
- 撞到自己或者撞到墻壁就結(jié)束
js代碼如下：
class Map{//地圖類
constructor(){
this.w=600;//動態(tài)生成地圖的長寬
this.h=400;
this.num=0;//記錄分數(shù)
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(){//記錄分數(shù)
this.gradeBox=document.createElement("div");
this.gradeBox.className="grade";
this.map.appendChild(this.gradeBox);
var str=`
分數(shù)：
<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");//設(shè)置難度
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);
}
//封裝食物的隨機位置和蛇節(jié)的隨機顏色值
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代碼：
由于地圖食物和蛇都是動態(tài)生成混坞，這里的css代碼是選擇難度界面以及計算分數(shù)界面
#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~
