本文实例为大家分享了js实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>H5游戏开发之贪吃蛇</title>
<style>
*{
padding:0px;
margin:0px;
}
.title{
text-align: center;
margin:10px 0px;
}
#main{
width:800px;
height:500px;
border:1px solid red;
margin:0 auto;
}
#main .left{
width:600px;
height:100%;
float:left;
position:relative;
}
#main .right{
width:200px;
height:100%;
background-color: pink;
border-left:1px solid red;
float:left;
box-sizing:border-box;
text-align: center;
}
#main .right h2{
margin:10px auto;
text-align: center;
}
#main .right h2 #fenshu{
color:red;
}
#main .right button{
width:100px;
height:30px;
background-color: #abcdef;
border:0px;
border-radius: 5px;
color:#fff;
font-size: 20px;
outline: 0px;
margin-top:30px;
}
.food{
background-color: red;
}
.snake{
background-color: green;
}
</style>
</head>
<body>
<h2 class="title">在线版贪吃蛇</h2>
<div id="main">
<!-- 屏幕部分 -->
<div class="left" id="pingmu"></div>
<!-- 菜单部分 -->
<div class="right">
<h2>得分：<span id="fenshu">0</span></h2>
<button id="btn">开始</button>
</div>
</div>
</body>
<script>
// 获取变量
var pingmu=document.getElementById('pingmu');
var btn=document.getElementById('btn');
var snakeMove=null;
var fenshuBox=document.getElementById('fenshu');
// 游戏初始化
init();
// 初始化方法
function init(){
// 获取地图的宽度和高度
this.mapW=parseInt(getComputedStyle(pingmu).width);
this.mapH=parseInt(getComputedStyle(pingmu).height);
// 食物的宽度和高度
this.foodW=20;
this.foodH=20;
// 蛇的宽度和高度
this.snakeW=20;
this.snakeH=20;
// 初始化食物的位置
this.foodX=0;
this.foodY=0;
// 初始化一个蛇身数据
this.snakeBody=[[2,0,'head'],[1,0,'body'],[0,0,'body']];
// this.snakeBody=[[3,0,'head'],[2,0,'body'],[1,0,'body']];
// 第一参数 代表水平位置
// 第二参数 代表垂直的位置
// 第三参数 代表位置
// 初始化方向
this.fangxiang="right";
this.left=false;
this.right=false;
this.tops=true;
this.bottom=true;
// 初始成绩变量
this.chengji=0;
// 生成一个食物
food();
// 生成蛇身
snake();
}
// 点击按钮操作游戏开始和暂停
btn.onclick=function(){
// 判断
if (this.innerHTML=="开始") {
// 开始游戏
startGame();
// 内容修改
this.innerHTML="暂停";
}else if(this.innerHTML=="暂停"){
// 暂停游戏
pauseGame();
// 内容修改
this.innerHTML="开始";
}
}
// 开始游戏的方法
function startGame(){
// 定时器
snakeMove=setInterval(move,100);
// 绑定按键事件
bindKeyDown();
}
// 键盘按下的事件
function bindKeyDown(){
window.onkeydown=function(event){
// 获取按键
code=event.keyCode;
// 根据不同的按键进行处理
switch(code){
case 37:
if (this.left) {
this.fangxiang="left";
this.left=false;
this.right=false;
this.tops=true;
this.bottom=true;
};
break;
case 38:
if (this.tops) {
this.fangxiang="tops";
this.left=true;
this.right=true;
this.tops=false;
this.bottom=false;
};
break;
case 39:
this.fangxiang="right";
if (this.right) {
this.fangxiang="right";
this.left=false;
this.right=false;
this.tops=true;
this.bottom=true;
};
break;
case 40:
if (this.bottom) {
this.fangxiang="bottom";
this.left=true;
this.right=true;
this.tops=false;
this.bottom=false;
};
break;
}
}
}
// 暂停游戏的方法
function pauseGame(){
clearInterval(snakeMove);
}
// 蛇移动的方法
function move(){
// 修改snakeBody中的数据
for(var i=this.snakeBody.length-1;i>0;i--){
this.snakeBody[i][0]=this.snakeBody[i-1][0];
this.snakeBody[i][1]=this.snakeBody[i-1][1];
}
// 根据方向操作
// 改变蛇头的位置
switch(this.fangxiang){
// 左
case 'left':
this.snakeBody[0][0]-=1;
break;
// 右
case 'right':
this.snakeBody[0][0]+=1;
break;
// 上
case 'tops':
this.snakeBody[0][1]-=1;
break;
// 下
case 'bottom':
this.snakeBody[0][1]+=1;
break;
}
// 先移除原有的蛇身
clearBox("snake");
// 绘制新的蛇身
snake();
// 进行吃食物
if (this.snakeBody[0][0] == this.foodX && this.snakeBody[0][1] == this.foodY) {
// 移除被吃掉的食物
clearBox("food");
// 生成新的食物
food();
// 成绩增加
this.chengji+=1;
fenshuBox.innerHTML=this.chengji;
// 增加蛇的长度
// 获取最后一个值得x和y
var snakeEndX=this.snakeBody[this.snakeBody.length-1][0];
var snakeEndY=this.snakeBody[this.snakeBody.length-1][1];
// 根据不同的方向增加最后一个字
switch(this.fangxiang){
// 左
case 'left':
this.snakeBody.push([snakeEndX+1,snakeEndY,'body']);
break;
// 右
case 'right':
this.snakeBody.push([snakeEndX-1,snakeEndY,'body']);
break;
// 上
case 'tops':
this.snakeBody.push([snakeEndX,snakeEndY-1,'body']);
break;
// 下
case 'bottom':
this.snakeBody.push([snakeEndX,snakeEndY+1,'body']);
break;
}
}
// 判断蛇是否超出左右边界
if (this.snakeBody[0][0]<0 || this.snakeBody[0][0]>=this.mapW/this.foodW) {
// 调用游戏结束的方法
gameOver();
};
// 判断蛇是否超出上下边界
if (this.snakeBody[0][1]<0 || this.snakeBody[0][1]>=this.mapH/this.foodH) {
// 调用游戏结束的方法
gameOver();
};
// 判断蛇碰到自己的身体
for(var i=1;i<this.snakeBody.length;i++){
if (this.snakeBody[i][0]==this.snakeBody[0][0] && this.snakeBody[i][1]==this.snakeBody[0][1]) {
gameOver();
};
}
}
// 游戏结束的方法
function gameOver(){
alert("游戏结束，当前得分："+this.chengji);
// 清空定时器
clearInterval(snakeMove);
// 移除蛇的位置
clearBox("snake");
this.snakeBody=[[2,0,'head'],[1,0,'body'],[0,0,'body']];
// 初始化方向
this.fangxiang="right";
this.left=false;
this.right=false;
this.tops=true;
this.bottom=true;
// 初始成绩变量
this.chengji=0;
snake();
// 开始按钮的文字
btn.innerHTML="开始";
// 分数清零
fenshuBox.innerHTML=0;
}
// 清除盒子
function clearBox(className){
// 获取类名为
var snakes=document.getElementsByClassName(className);
// 移除蛇身
while(snakes.length){
snakes[0].parentNode.removeChild(snakes[0]);
}
}
// 生成舍身
function snake(){
// for 循环遍历数组
for(var i=0;i<this.snakeBody.length;i++){
// 创建蛇身
var snakeBox=document.createElement("div");
// 设置宽度和高度
snakeBox.style.width=snakeW+"px";
snakeBox.style.height=snakeH+"px";
// 定位
snakeBox.style.position="absolute";
// 位置计算
snakeBox.style.top=this.snakeBody[i][1]*this.snakeW+"px";
snakeBox.style.left=this.snakeBody[i][0]*this.snakeH+"px";
// 设置类名
snakeBox.className="snake";
// 追加到屏幕中
pingmu.appendChild(snakeBox);
}
}
// 生成食物
function food(){
// 计算随机的位置
this.foodX=Math.floor(Math.random()*this.mapW/this.foodW);
this.foodY=Math.floor(Math.random()*this.mapH/this.foodH);
// 创建一个盒子
var foodBox=document.createElement("div");
// 初始化宽度和高度
foodBox.style.width=this.foodW+"px";
foodBox.style.height=this.foodH+"px";
// 需要设置绝对定位
foodBox.style.position="absolute";
foodBox.style.top=this.foodY*this.foodW+"px";
foodBox.style.left=this.foodX*this.foodH+"px";
// 设置类名
foodBox.className="food";
// 将食物追加到屏幕中
pingmu.appendChild(foodBox);
}
</script>
</html>了解更多，学习地址