<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
background-color:silver;/*设置页面的背景颜色为银色*/
}
/*游戏界面的总体样式*/
#container{
text-align: center;width:600px;margin: auto;padding:10px;background-color:white;box-shadow: 10px 10px 15px gray;
}
/*状态栏样式*/
#status{
padding:10px;width:400px;height:20px;margin:auto;
}
/*状态栏
中栏目的盒子样式*/
。box{
float:left;width:200px;
}
/*设置游戏按钮样式*/
button{
width:200px;height:50px;margin:10px 0;
border:0;
outline: none;
font-size:25px;
font-weight: bold;
color:white;
background-color:lightcoral;
}
/*设置鼠标悬浮时的按钮样式*/
button{
background-color: coral;
}
</style>
</head>
<body>
<div id="container">
<h3>贪吃蛇游戏的实现</h3>
<hr>
<!--状态信息栏-->
<div id="status">
<!--历史最高-->
<div class="box">
历史最高分：<span id="bestScore">0</span>
</div>
<!--
当前分数-->
<div class="box">
当前分数：<span id="currentScore">0</span>
</div>
<!--设置游戏画布-->
<canvas id="myCanvas" width="400" height="400" 1px solid"></canvas>
<!--强调重点canvas 网上大量资料，这次的贪吃蛇重点用这个方法。我也没弄的很懂，套用的-->
<div>
<button
</div>
</div>
</div>
</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<snakeMap.length;i++){
if(snakeMap[i].x==x&&snakeMap;[i].y==y){
return 2;
}
}
return 0;
}
/*十绘制食物
函数*/
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);
}
[removed]
</html>
4009
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
