首页 > 分享 > 贪吃蛇案例详解

贪吃蛇案例详解

萌宠菠菠乐园
2024-11-29 02:36

贪吃蛇游戏的实现

历史最高分： 0

当前分数： 0

重新开始

</div> </div> 12

/***
贪吃蛇游戏的整体思路

1。显示历史最高分记录，（网上查的没有做出来）
2.启动游戏
3.游戏画面刷新函数
记录小蛇的位置
绘制贪吃蛇
根据方向移动蛇头的下一个
碰撞检测，返回值0表示没有撞到障碍物
吃到食物判定
4.绘制贪吃蛇函数
5.改变蛇方向的按键监听
6.碰撞检测函数
7.绘制食物函数

****/

//一 var游戏参数设置

//游戏界面刷新的间隔时间（数字越大蛇的速度越慢）
var time=200;
//蛇的身长
var t=3;
//记录蛇的运行轨迹，并用数组记录每一个坐标点
var snakeMap=[];
//蛇的单元大小
var w=10;
//方向代码：左37，上38，右39，下40
var direction=37;
//蛇的初始坐标
var x=0;
var y=0;
//食物的初始化坐标
var foodX=0;
var foodY=0;
//当前的分
var score=0;
//历史最高分记录
var bestScore=0;
//画布的宽高
var width=400;
var height=400;
//获取画布的节点
var c=document.getElementById(‘myCanvas’);
//创建context对象
var ctx=c.getContext(“2d”);
/*Canvas元素
在新的HTML标准HTML5中Canvas 元素用于在网页上绘制图形，
该元素标签强大之处在于可以直接在HTML上进行图形操作，具
有极大的应用价值。

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的
方法，可以创建丰富的图形引用。

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:
var c=document.getElementById(“myCanvas”);
var cxt=c.getContext(“2d”);//创建对象
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

JavaScript 使用 id 来寻找 canvas 元素:
var c=document.getElementById(“myCanvas”);然后，创建 context 对象:
var cxt=c.getContext(“2d”);getContext(“2d”) 对象是内建的 HTML5 对象，
拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
*/

//获取历史最高分记录
showBestScore();
//开始游戏
Gamestart();

//二显示历史最高分记录
function showBestScore(){
bestScore=localStorage.getItem(“bestSore”);//localStorage.getItem(key):获取指定key本地存储的值
//在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储
//空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

//如果没有记录最高分，将最高分设置为0； if(bestScore==null) bestScore=0; //将历史最高分更新到状态栏中 var best=document.getElementById('bestScore'); best.innerHTML=bestScore; 123456

}

//三.启动游戏
function Gamestart(){
//调用drawFood()函数，在随机位置绘制第一个食物
drawFood();
//随机生成贪吃蛇的蛇头坐标
x=Math.floor(Math.random()*width/w)*w;
y=Math.floor(Math.random()*height/w)*w;
//随机生成蛇的前进方向
direction=37+Math.floor(Math.random()*4);
//每隔time毫秒刷新一次游戏内容
setInterval(“gameRefresh()”,time);
}

//主要函数
/四游戏画面刷新函数/
function gameRefresh(){
//将当前坐标数据添加到贪吃蛇的运动轨迹坐标组中
snakeMap.push({
‘x’:x,
‘y’:y
})
//绘制贪吃蛇
drawSnake();//191行
//根据方向移动蛇头的下一个位置
switch(direction){
case 37://左
x-=w;
break;
case 38://上
y-=w;
break;
case 39://右
x+=w;
break;
case 40://下
y+=w;
break;
}
/五。碰撞检测，返回值0表示没有撞到障碍物/
var code=detectCollision();//215行
// console.log(code);
//如果返回值为0，表示游戏失败
if(code!=0){
//如果当前分数高于历史最高分，则更新历史最高分
if(score>bestScore)
localStorage.setItem(“bestScore”,score);
//返回值为1表示撞到墙
if(code1){
//if(x<0 || y<0 || x>39 || y> 39){
alert(“撞到了墙壁，游戏失败！当前得分：”+score);
}
//返回值为2表示撞到了自身
else if(code2){
alert(“撞到了蛇身，游戏失败！当前得分：”+score);
}
//重新加载页面
window.location.reload()
}

/六.吃到食物的判定/
if(foodXx && foodYy){
//吃到一次食物加10分
score+=10;
//更新状态栏中当前的分数
var currentScore=document.getElementById(“currentScore”);
currentScore.innerHTML=score;
//在随机位置绘制下一个食物
drawFood();
//蛇身长度加1
t++;
}
}

/七绘制贪吃蛇的函数/
function drawSnake(){
//设置蛇身内部的填充颜色
ctx.fillStyle=“lightblue”;
//绘制最新位置的舍身矩形
ctx.fillRect(x,y,w,w);

//数组只保留蛇身长度数据，如果蛇前进了则删除最旧的坐标数据 if(snakeMap.length>t){ //删除数组的第一项，即蛇的尾部的最后一个位置的坐标记录 var lastBox=snakeMap.shift(); //清楚蛇的尾部的最后一个位置，从而实现移动效果 ctx.clearRect(lastBox['x'],lastBox['y'],w,w); } 1234567

}

/八改变蛇方向的按键监听/
document.οnkeydοwn=function(e){
// var e=eve||window.event;
//根据案件更新前进方向code:左37，上38，右39，下40
if(e.keyCode37||e.keyCode38||e.keyCode39||e.keyCode40)
direction=e.keyCode;
}

/九碰撞检测函数/
function detectCollision(){
//蛇头碰到四周的墙壁，游戏失败
if( x<0 || y<0 || x>width || y> height){
// console.log(0)
return 1;
}

//蛇头碰到蛇身，游戏失败 for(var i=0;i<snakeMap.length;i++){ if(snakeMap[i].x==x&&snakeMap[i].y==y){ return 2; } } return 0; 1234567

}

/十绘制食物函数/

function drawFood(){
foodX=Math.floor(Math.random()*width/w)*w;
foodY=Math.floor(Math.random()*height/w)*w;
//内部填充颜色
ctx.fillStyle=’#FF0000’;
//绘制矩阵
ctx.fillRect(foodX,foodY,w,w);
}