贪吃蛇游戏的实现
<!--状态信息栏-->
<!--历史最高-->
历史最高分:0
<!--当前分数-->
当前分数:0
<!--设置游戏画布-->
<!--强调重点canvas 网上大量资料,这次的贪吃蛇重点用这个方法。我也没弄的很懂,套用的-->
</body>
[removed]
/***
贪吃蛇游戏的整体思路
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[removed]=bestScore;
}
//三.启动游戏
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(code==1){
//if(x<0 || y<0 || x>39 || y> 39){
alert("撞到了墙壁,游戏失败!当前得分:"+score);
}
//返回值为2表示撞到了自身
else if(code==2){
alert("撞到了蛇身,游戏失败!当前得分:"+score);
}
//重新加载页面
[removed].reload()
}
/*六.吃到食物的判定*/
if(foodX==x && foodY==y){
//吃到一次食物加10分
score+=10;
//更新状态栏中当前的分数
var currentScore=document.getElementById("currentScore");
currentScore[removed]=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);
}
}
/*八改变蛇方向的按键监听*/
document.onkeydown=function(e){
// var e=eve||window.event;
//根据案件更新前进方向code:左37,上38,右39,下40
if(e.keyCode==37||e.keyCode==38||e.keyCode==39||e.keyCode==40)
direction=e.keyCode;
}
/*九碰撞检测函数*/
function detectCollision(){
//蛇头碰到四周的墙壁,游戏失败
if( x<0 || y<0 || x>width || y> height){
// console.log(0)
return 1;
}
//蛇头碰到蛇身,游戏失败
for(var i=0;i
html>