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);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
javascript 贪吃蛇实现代码
在习作的过程中尝试着贪吃蛇游戏用JS实现了.竟然成功了. 思路:使用10px*10px的div层担当"像素",然后使用40*40矩阵160个"像素"构成了游戏的界面. 下面是代码: 复制代码 代码如下: // JavaScript Document alert("键盘的方向键控制方向,空格键暂停.\nLIFE制作\nhttp://blog.csdn.net/anhulife"); // 添加基本的图形块,即160个10 * 10的层组成的二维矩阵
-
js贪吃蛇游戏实现思路和源码
本文实例为大家分享了js贪吃蛇游戏的相关代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇小游戏</title> <style> *{margin:0; padding:0;} header { display: block; margin: 0 auto;
-
JS实现的贪吃蛇游戏完整实例
本文实例讲述了JS实现的贪吃蛇游戏.分享给大家供大家参考,具体如下: 思想: 1.设计蛇:属性有宽.高.方向.状态(有多少节),方法:显示,跑 2.设计食物:属性宽.高 3.显示蛇:根据状态向地图里加元素 4.蛇跑起来:下一节到前一节的位置,蛇头根据方向变,删除原来的蛇,新建蛇:当出界时,死亡,初始化:当蛇头吃到自己的时候,死亡,初始化 5.食物被吃掉,蛇加一节,去掉原来的食物,生成新的食物 6.添加定时器,绑定按键 完整示例: <!doctype html> <html lang=&q
-
javascript实现简单的贪吃蛇游戏
javascript实现简单的贪吃蛇游戏,功能很简单,代码也很实用,就不多废话了,小伙伴们参考注释吧. <html> <head> <meta http-equiv='content-type' content='text/html;charset=utf-8'> <title>贪吃蛇</title> <script type="text/javascript"> var map; //地图 var snake;
-
js实现贪吃蛇小游戏（容易理解）
话不多说,请看代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <link rel="stylesheet" href="style.css"> <script src="style.js" >
-
js编写“贪吃蛇”的小游戏
贪吃蛇儿时的回忆,今天刚好学习到这了,就刚好做了一个,也是学习了吧,需要掌握的知识: 1.JS函数的熟练掌握, 2.JS数组的应用, 3.JS小部分AJAX的学习 4.JS中的splice.shift等一些函数的应用, 基本上就这些吧,下面提重点部分: 前端的页面,这里可自行布局,我这边提供一个我自己的布局: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
-
原生js实现的贪吃蛇网页版游戏完整实例
本文实例讲述了原生js实现的贪吃蛇网页版游戏.分享给大家供大家参考.具体实现方法如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生js写的贪吃蛇网页版游戏</title> </head> <body> </body> <sc
-
20行js代码实现的贪吃蛇小游戏
前言 最近在csdn上看到一位大神用20行代码就写出了一个贪吃蛇的小游戏,感觉被惊艳到了,就试着读了一下这段代码,阅读过程中不断为作者写法的巧妙而叫绝,其中我发现自己对运算符优先级和一些js的技巧不是很清楚,所以看完之后决定把思路分享出来,方便和我一样的小白学习. 我对代码稍稍做了些修改,并添加了一些注释,方便理解. 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="
-
javascript贪吃蛇完整版(源码)
javascript贪吃蛇完整版 注释完整,面向对象 复制代码 代码如下: <html><head> <title>贪吃蛇 Snake v2.4</title><style> body{ font-size:9pt; } table{ border-collapse: collapse; border:solid #333 1px; } td{ heigh
-
JS写的贪吃蛇游戏(个人练习)
JS贪吃蛇游戏,个人练习之用,放在这备份一下, 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS贪吃蛇-练习</t