<!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>
【贪吃蛇游戏实现的关键知识点】
1. **HTML5 Canvas**: 贪吃蛇游戏的主要图形界面是通过HTML5的`<canvas>`元素构建的。`<canvas>`提供了一个二维绘图表面，允许开发者使用JavaScript进行图形绘制。在这个案例中，`<canvas>`元素用于在网页上画出游戏界面，包括蛇、食物以及边界。
2. **CSS样式设计**: 通过CSS定义了游戏界面的整体布局，如页面背景色、游戏容器样式、状态栏样式、按钮样式等，以提高游戏的视觉效果。
3. **变量和常量定义**: 定义了游戏的重要参数，如`time`代表游戏的刷新间隔，`t`表示蛇的身长，`snakeMap`用于存储蛇的坐标历史，`direction`记录蛇的移动方向，以及`x`和`y`记录蛇的当前位置。
4. **函数封装**:
- `showBestScore()`: 显示历史最高分，利用`localStorage`存储并读取用户的历史最高记录。
- `Gamestart()`: 初始化游戏，包括设置初始位置、食物位置和游戏速度。
- `gameRefresh()`: 游戏画面刷新函数，负责更新蛇的位置、绘制蛇、检测碰撞以及处理吃到食物的情况。
- `drawSnake()`: 绘制蛇的函数，用于画出蛇的各个部分。
- `detectCollision()`: 碰撞检测函数，判断蛇是否撞到墙壁或自身。
- `drawFood()`: 绘制食物的函数，随机生成新的食物位置。
- `document.onkeydown`: 监听键盘事件，根据用户输入改变蛇的移动方向。
5. **JavaScript事件处理**:
- `onclick`事件用于在“重新开始”按钮被点击时重新加载游戏。
- `onkeydown`事件监听用户键盘输入，根据键盘事件改变蛇的移动方向。
6. **游戏逻辑**:
- 蛇的位置通过在每个游戏周期内更新其头部坐标并移除旧的尾部坐标实现。
- 吃到食物后，蛇的分数增加，蛇身长度增加，同时在新的位置生成食物。
- 碰撞检测分为撞到墙壁和撞到自身两种情况，撞到任何一种都会导致游戏结束。
7. **localStorage使用**:
- 利用`localStorage.getItem()`获取存储的历史最高分，如果不存在则初始化为0。
- 当游戏结束且当前分数高于历史最高分时，使用`localStorage.setItem()`更新最高分。
总结来说，这个贪吃蛇游戏案例展示了如何结合HTML5 Canvas、CSS样式和JavaScript实现一个简单的交互式游戏。通过封装不同的函数，实现了游戏的核心功能，包括游戏初始化、游戏逻辑、图形绘制以及用户交互。
评论0