JS实现简单贪吃蛇小游戏
编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章为大家详细主要介绍了JS实现简单贪吃蛇小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS实现简单贪吃蛇游戏的具体代码，供大家参考，具体内容如下
1、使用语言 HTML+CSS+JavaScript
2、使用工具 visual studio code
3、GitHub项目地址：
4、项目运行截图：
5、项目功能分析：主要使用数组来存储蛇的位置，地图和蛇都是一个二维数组，对于有蛇的地方，地图的CSS就会发生改变，同时添加了添加了一个音乐播放按钮，通过CSS动画实现旋转。
6、项目代码：（项目代码有详细的注释）
snake.html
<!--
* @Author: CSU_XZY
* @Date: 2020-10-13 22:06:51
* @LastEditors: CSU_XZY
* @LastEditTime: 2020-10-18 17:08:54
* @FilePath: \第二天\贪吃蛇\snake.html
* @Description: just to play
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>eatSnake</title>
<head>
<style type="text/css">
*{
margin:0;
padding:0;
border: 0px;
}
body{
background: #444;
}
table{
border-collapse:collapse;
overflow: hidden;
border:1px solid #ddd;
margin:10px auto 10px auto;
}
td{
display: table-cell;
width:20px;
height:20px;
background: #fff;
border:1px #eeeeee solid;
}
.snake{
background: #3388ee;
}
.notsnake{
background: #fff;
}
.food{
background: #33aa33;
}
.snake_head{
background: #dd4444;
}
.notice{
width:450px;
text-align: center;
margin:50px auto;
color:#fff;
font-size: 14px;
}
</style>
</head>
<body>
<p class="notice">提示：空格键控制开始/ 暂停，方向键控制蛇的移动方向，F5刷新</p>
<script type="text/javascript" src="snake.js"></script>
</body>
</html>
snake.js
/*
* @Author: CSU_XZY
* @Date: 2020-10-17 12:38:26
* @LastEditors: CSU_XZY
* @LastEditTime: 2020-10-18 22:40:24
* @FilePath: \第二天\snake\snake.js
* @Description: just to play
*/
window.onload = function(){
var snake = function(width,height,snakeId,speed){
this.width = width || 10;
this.height = height || 10;
this.snakeId = snakeId || "snake";
this.goX = 0;
this.goY = 0;
this.speed = this.oldSpeed = speed || 10;
this.Grid = []; //存放td的二维数组
this.snakeGrid = []; //存放蛇的数组
this.foodGrid = [];
this.snakeTimer = null;
this.derectkey = 39;
this.stop = true;
this.init();
document.getElementById("myAudio").play();
box.style.animationPlayState = 'running'
}
snake.prototype = {
//创建二维数组
multiArray : function(m , n)
{
var array = new Array(m); //长
for(let i = 0; i < m; i++)
{
array[i] = new Array(n); //宽
}
return array;
},
//函数修正this
bind : function(fn,context)
{
return function(){
return fn.apply(context,arguments);
}
},
//移动的主函数
move:function(){
var _this = this;
if(_this.snakeTimer){clearInterval(_this.snakeTimer);}
_this.snakeTimer = setInterval(_this.bind(_this.main,_this),Math.floor(3000/this.speed));
},
//重来
reset()
{
this.goX = 0;
this.goY = 0;
this.speed = this.oldSpeed;
this.derectkey = 39;
this.stop = true;
this.init();
},
//确定键盘事件
keyDown : function(e)
{
var e = e || window.event;
var keycode = e?e.keyCode:0;
if(keycode == 116 )
window.location.reload();
if(keycode == 32)
{
if(this.stop)
{
this.move();
this.stop = false;
}
else{
if(this.snakeTimer)
clearInterval(this.snakeTimer);
this.stop = true;
}
}
if(keycode>=37 && keycode <= 40)
{
if(!this.stop)
this.derectkey = keycode;
}
return false;
},
//创建地图
creatMap : function()
{
var table = document.createElement("table");
var tbody = document.createElement("tbody");
for(let i = 0; i < this.width; i++)
{
var tr = document.createElement("tr");
for(let j = 0; j < this.height; j++)
{
var td = document.createElement("td");
this.Grid[i][j] = tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
table.id = this.snakeId;
document.body.appendChild(table);
},
//产生随机点
randomPoint : function(initX,initY,endX,endY)
{
var p = []; //用来存放产生的随机点的数组
var initX = initX || 0;
var initY = initY || 0;
var endX = endX || this.width;
var endY = endY || this.height;
p[0] = Math.floor(Math.random()*(endX - initX)) + Math.floor(initX);
p[1] = Math.floor(Math.random()*(endY - initY)) + Math.floor(initY)
return p;
},
//初始化食物的位置
initFood : function()
{
this.foodGrid = this.randomPoint();
if(this.isInSnake(this.foodGrid))
{
this.initFood();
return false;
}
this.Grid[this.foodGrid[0]][this.foodGrid[1]].className = "food";
},
//判断点是否在蛇身上
isInSnake : function(point,pos)
{
var snakeGrid = this.snakeGrid;
if(point instanceof Array)
{
let n = snakeGrid.length;
for(let i = pos || 0; i < n; i++)
{
if(point[0] == snakeGrid[i][0] && point[1] == snakeGrid[i][1])
return true;
}
}
return false;
},
//给蛇涂颜色
paintSnake : function(){
var snakeGrid = this.snakeGrid;
for(let i = 0; i < snakeGrid.length; i++)
{
this.Grid[snakeGrid[i][0]][snakeGrid[i][1]].className = "snake_body";
}
},
//初始化蛇的位置
initSnake : function()
{
this.snakeGrid = [];
this.snakeGrid.push([1,3]);
this.snakeGrid.push([1,2]);
this.snakeGrid.push([1,1]);
this.paintSnake();
this.Grid[this.snakeGrid[0][0]][this.snakeGrid[0][1]].className = "snake_head";
this.Grid[this.snakeGrid[this.snakeGrid.length-1][0]][this.snakeGrid[this.snakeGrid.length-1][1]].className = "snake_tail";
},
//判断蛇是否撞墙
isInWall : function(point){
if(point instanceof Array){
if(point[0] < 0 || point[0] > this.width1 - 1 || point[1] < 0 || point[1] > this.height - 1)
return true;
}
return false;
},
//初始化条件
//控制函数运行的主函数
main : function(){
var snakeGrid = this.snakeGrid;
var temp = snakeGrid[snakeGrid.length-1],
isEnd = false;
headX = snakeGrid[0][0];
headY = snakeGrid[0][1];
msg = "";
switch(this.derectkey)
{
case 37:
if(this.goY!=1){this.goY=-1;this.goX=0} //防止控制蛇往相反反方向走
break;
case 38:
if(this.goX!=1){this.goX=-1;this.goY=0}
break;
case 39:
if(this.goY!=-1){this.goY=1;this.goX=0}
break;
case 40:
if(this.goX!=-1){this.goX=1;this.goY=0}
}
headX += this.goX;
headY += this.goY;
if(headX == this.foodGrid[0] && headY == this.foodGrid[1])
{
this.snakeGrid.unshift(this.foodGrid);
this.initFood();
if(this.snakeGrid.length>4){ //控制蛇加速
if(this.snakeGrid.length==5){
this.speed += 5;
}
else if(this.snakeGrid.length==10){
this.speed += 3;
}
else if(this.snakeGrid.length==20){
this.speed += 3;
}
else if(this.snakeGrid.length==30){
this.speed += 3;
}
this.move();
}
}
else
{
for(var i=this.snakeGrid.length-1;i>0;i--){
this.snakeGrid[i] = this.snakeGrid[i-1] ;
}
this.snakeGrid[0] = [headX,headY];
if(this.isInSnake(this.snakeGrid[0],1)){
isEnd=true;
msg = "哈皮，吃到自己啦！！";
}
//判断是否撞墙
else if(this.isInWall(this.snakeGrid[0])){
isEnd =true;
msg = "撒比伟哥，撞墙了！！";
}
if(isEnd)
{
if(this.snakeTimer)
clearInterval(this.snakeTimer);
var score;
let len = this.snakeGrid.length;
if(len <= 5)
score = len-3;
else if(len>5 && len<=10)
{
score = 2 + 2*(len-5)
}
else if(len>10 && len <= 20)
score = 12 + 3*(len-10);
else
score = 27 + 5*(len - 15);
if(confirm(msg+"你的分数是："+score+"！ 是否重新开始？")){
this.reset();
}
return false;
}
this.Grid[temp[0]][temp[1]].className = "notSnake";
}
this.paintSnake();
this.Grid[headX][headY].className = "snake_head";
this.Grid[this.snakeGrid[this.snakeGrid.length-1][0]][this.snakeGrid[this.snakeGrid.length-1][1]].className = "snake_tail";
},
init : function(){
var _this = this;
snake_id = document.getElementById(_this.snakeId)||0 ;
if(snake_id){
document.body.removeChild(snake_id);
}
_this.Grid = _this.multiArray(_this.width,_this.height);
_this.creatMap();
_this.initSnake();
_this.initFood();
document.onkeydown = _this.bind(_this.keyDown,_this);
}
}
new snake(20,20,"snake",10);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
上一篇：JS实现多功能计算器
下一篇：VUE和Antv G6实现在线拓扑图编辑操作