版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/HYB2012/article/details/78453006
原生JS版的贪吃蛇
简版效果图
上代码
css
<style>
body, div, p, input{
padding:0;
margin:0;
}
#box{
width:1410px;
height:1005px;
margin:50px auto;
}
#map{
width:1000px;
height:1000px;
background-color:#d1d5d3;
position:relative;
display:inline-block;
}
#panel{
width:400px;
height:1000px;
display:inline-block;
position:relative;
vertical-align:top;
}
#log{
width:100%;
height:90%;
background-color:#d1d5d3;
overflow:auto;
}
#panel .btn{
width:150px;
height:90px;
font-size:30px;
line-height:90px;
text-align:center;
margin:8px 20px;
}
#map .snake{
position:absolute;
background-color:blueviolet;
}
#map .food{
position:absolute;
background-color:#303ad2;
}
#map .head{
background-color:red;
z-index:999;
}
#socre{
font-size:50px;
line-height:100px;
padding-left:20px
}
</style>html
<div id="box">
<div id="map"></div>
<div id="panel">
<div id="log"></div>
<p id="socre">累计分数:</p>
</div>
</div>js
以下为部分代码，完整代码请移步github
class Snake {
constructor(container, oriLenth, size, console){
this.container = container;
this.snake = [];
this.size = size;
this.HeadCorrd = [1, oriLenth];
this.Console = console;
this.Score = 0;
this.InitSnake(oriLenth);
}
get Head(){
return this.snake[0];
}
get Tail(){
return this.snake[this.Length - 1];
}
get Length(){
return this.snake.length;
}
set SetDirection(direction){
this.direct = direction;
}
set SetFood(food){
this.food = food;
}
get GetScore(){
return this.Score;
}
CheckHeadCoord(){
if(this.HeadCorrd[0] === -1 ||
this.HeadCorrd[0] === _map.Max_X ||
this.HeadCorrd[1] === -1 ||
this.HeadCorrd[1] === _map.Max_Y){
document.onkeydown = null;
return false;
}
else
return true;
}
InitSnake(length){
var node;
for(var i = 0; i < length; i++){
node = this.AddNode();
node.style.left = i * this.size + "px";
node.style.top = 0;
this.snake.push(node);
this.container.appendChild(node);
}
this.snake.reverse();
this.snake[0].className += " head";
}
AddNode(){
var node = document.createElement("div");
node.style.width = this.size + 'px';
node.style.height = this.size + 'px';
node.className = 'snake';
return node;
}
Move(){
if(!this.direct){
return;
}
//移动头部
var headCoord = [this.Head.style.top, this.Head.style.left];
var target;
var flag = true;
switch(this.direct){
case 37:
this.direct = 'left';
if(this.CheckHeadCoord()){
target = this.Head.offsetLeft - this.size;
if(target >= 0){
this.Head.style.left = target + "px"
}
this.HeadCorrd[1]--;
}
else flag = false;
break;
case 38:
this.direct = 'up';
if(this.CheckHeadCoord()){
target = this.Head.offsetTop - this.size;
if(target >= 0){
this.Head.style.top = target + "px"
}
this.HeadCorrd[0]--;
}
else flag = false;
break;
case 39:
this.direct = 'right';
if(this.CheckHeadCoord()){
target = this.Head.offsetLeft + this.size;
if(target < _map.Width){
this.Head.style.left = target + "px"
}
this.HeadCorrd[1]++;
}
else flag = false;
break;
case 40:
this.direct = 'down';
if(this.CheckHeadCoord()){
target = this.Head.offsetTop + this.size;
if(target < _map.Width){
this.Head.style.top = target + "px"
}
this.HeadCorrd[0]++;
}
else flag = false;
break;
}
if(flag){
this.Tail.style.top = headCoord[0];
this.Tail.style.left = headCoord[1];
this.snake.splice(1, 0, this.Tail);
this.snake.pop();
this.Eate();
}
else {
this.Console.Log("撞了南墙，游戏结束")
}
// this.Console.Log(`${this.HeadCorrd[0]}_${this.HeadCorrd[1]}`);
//移动尾部
}
Eate(){
if(this.food.Coord[1] + 1 === this.HeadCorrd[0] &&
this.food.Coord[0] + 1 === this.HeadCorrd[1]){
this.food.foodElement.className = "snake";
this.snake.push(this.food.foodElement);
this.container.appendChild(this.food.foodElement);
this.Console.Log(`累计分数:${this.Score++}`);
var food = new Food(this.container, this.Console, _map.Size, _map.Max_X, _map.Max_Y);
food.GenerateFood();
this.food = food;
}
}
}