JS实现简单贪吃蛇小游戏
程序员文章站
2022-03-14 22:17:05
本文实例为大家分享了js实现简单贪吃蛇游戏的具体代码，供大家参考，具体内容如下1、使用语言 html+css+javascript2、使用工具 visual studio code3、github项目...
本文实例为大家分享了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);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。