小時候懷念的貪吃蛇游戲~~啦啦啦 ...
小時候懷念的貪吃蛇游戲~~啦啦啦
<!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>貪吃蛇</title>
<style>
body,
html {
margin: 0;
height: 100%;
overflow: hidden;
background-color: #89ecb6;
}
.container {
width: 800px;
border: 4px solid #000;
margin: 40px auto 0;
}
.container .map {
width: 500px;
margin: 20px auto;
}
.container .map div {
height: 25px;
}
.container .map div span {
float: left;
width: 25px;
height: 25px;
background-color: #ffffff;
box-sizing: border-box;
border: 0.5px solid #4ec4d4;
}
.container .map div span.snake {
background-color: black;
}
.container .map div span.food {
background-color: red;
}
.container .map div span.head {
border-radius: 50%;
background-color: #d0ff00;
}
.container .footer {
border-top: 2px solid #000;
padding: 20px 0;
display: flex;
align-items: center;
justify-content: space-around;
}
.container .footer .startBtn {
cursor: pointer;
}
.container .footer .startBtn:hover {
color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="map">
</div>
<div class="footer">
<div class="startBtn">開始游戲</div>
<div class="coins">得分:<span class="score">0</span>分</div>
</div>
</div>
</body>
<script>
//單列模式
const RetroSnaker = {
x:20,//地圖X大小
y:20,//地圖Y大小
snake:[],//蛇的數據
snakeLen:4,
viewMap:[],//用來繪製蛇以及其他物品的 其實就是所有span 地圖
dataMap:[],//存放所有的數據
direction:39,//存儲方向
changeDirAble:true,//能否改變方向
speed:200,
score:0,
scoreInfo:document.querySelector('.score'),
initMap(){
this.createMap();;
},
initGame(){
this.initSnake();
this.addObject('food');
this.changeDir();
this.walk();
},
createData(){
let {x,y} = this;
let map =new Array(y);
for (let i = 0;i<map.length;i++){
map[i] = new Array(x).fill(false);
}
return map;
},
createMap(){
let gameMap = document.querySelector('.map');
window.removeEventListener('keydown',this.changeDir.fn);
clearInterval(this.gameTimer);
this.scoreInfo.innerHTML = this.score = 0;
gameMap.innerHTML ='';
this.changeDirAble =true;
this.direction=39;
this.snake =[];
this.viewMap = this.createData();
this.dataMap = this.createData();
let{x,y,viewMap,dataMap} = this;
for(let i =0;i<y;i++){
const row = document.createElement('div');
for(let j = 0;j<x;j++){
const col= document.createElement('span');
viewMap[i][j] = row.appendChild(col);
}
gameMap.appendChild(row);
}
},
createPoint(startX,startY,endX,endY){
let{x,y,dataMap} = this;
// startX = startX ||0;
// startY = startY ||0;
let p = [];
let X = this.rp([startX,endX]);
let Y =this.rp([startY,endY]);
//這個點不能生成到蛇身上
if(dataMap[Y][X]){
return this.createPoint(startX,startY,endX,endY);
}
p.push(Y,X)
return p ;
},
//隨機數
rp(arr){
const min = Math.min(...arr);
const max =Math.max(...arr);
return Math.round(Math.random()*(max - min) + min)
},
initSnake(){
let {snake,snakeLen,x,y,viewMap,dataMap} = this;
let p= this.createPoint(snakeLen-1,0,x-snakeLen,y-1);
for(let i=0;i<snakeLen;i++){
let x = p[1] -i;
let y = p[0];
snake.push([y,x]);
viewMap[y][x].className = !i?'head':'snake';
dataMap[y][x] = 'snake';
}
},
addObject(name){
let {x,y,viewMap,dataMap} =this;
let p =this.createPoint(0,0,x-1,y-1);
viewMap[p[0]][p[1]].className = name;
dataMap[p[0]][p[1]]= name;
},
walk(){
clearInterval(this.gameTimer);
this.gameTimer = setInterval(this._walk.bind(this),this.speed);
},
_walk(){
let {snake,viewMap,dataMap} = this;
let headX = snake[0][1];
let headY = snake[0][0];
viewMap[headY][headX].className = 'snake';
//檢測方向
switch(this.direction){
case 37:
headX -=1;
break;
case 38:
headY -=1;
break;
case 39:
headX +=1;
break;
case 40:
headY +=1;
break;
}
//如果不是食物就不增加長度
//判斷下一個格子是不是牆壁或者自己
if(headY>19||headY<0||headX>19||headX<0){//是牆壁
this.endFn('撞牆啦！');
return;
}
if(dataMap[headY][headX]!=='food'){
let lastIndex = snake.length-1;
let lastX= snake[lastIndex][1];
let lastY= snake[lastIndex][0];
snake.pop();
viewMap[lastY][lastX].className = '';
dataMap[lastY][lastX] = false;
if(viewMap[headY][headX].classList.contains('snake')){
this.endFn('吃了自己啦！');
}
}else{
this.addObject('food');
this.scoreInfo.innerHTML = ++this.score;
}
snake.unshift([headY,headX]);
viewMap[headY][headX].className = 'snake head';
dataMap[headY][headX] = 'snake';
this.changeDirAble =true;
},
changeDir(){
const fn = this.changeDir.fn = this._changeDIr.bind(this);
window.addEventListener('keydown',fn);
},
_changeDIr(e){
if(!this.changeDirAble) return;
const {keyCode} = e;
if(keyCode >36 && keyCode <41 &&Math.abs(this.direction-keyCode)!==2){
this.direction = keyCode;
this.changeDirAble =false;
}
},
endFn(text){
this.initMap();
alert(text+' '+'游戲結束');
}
}
var start = document.querySelector('.startBtn');
RetroSnaker.initMap();
start.onclick = function(){
RetroSnaker.initMap();
RetroSnaker.initGame();
}
</script>
</html>
