<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.t2 {
background-color: black;
}
.t1 {
background-image: url("images/R-C\ \(1\).jfif");
background-size: 650px 600px;
}
.btn {
position: absolute;
top: 11px;
left: 320px;
border: 4px solid black;
}
#sore {
margin: 0 auto;
width: 505px;
height: 60px;
background-color: black;
border: 3px solid rgb(93, 170, 170);
}
.mibtn {
height: 150px;
width: 60px;
background-color: yellowgreen;
font-size: large;
cursor: pointer;
}
/* 地图设计 */
#map {
/* 让地图居中显示 */
margin: 0 auto;
padding: 10px;
width: 485px;
height: 485px;
background-color: black;
border: 3px solid rgb(93, 170, 170);
}
/* 蛇身设计 */
.snake {
width: 20px;
height: 20px;
margin: 2px;
background-color: brown;
float: left;
}
/* 食物设计 */
.food {
width: 20px;
height: 20px;
margin: 2px;
background-color: greenyellow;
float: left;
}
.stone {
width: 20px;
height: 20px;
margin: 2px;
background-color: gray;
float: left;
}
/* 地图小格子设计 */
.ditu {
width: 20px;
height: 20px;
margin: 2px;
background-color: pink;
float: left;
}
#ss {
font-size: 24px;
text-align: center;
color: wheat;
line-height: 10px;
}
.deng {
position: absolute;
top: 250px;
}
.open {
width: 50px;
height: 50px;
cursor: pointer;
border: 5px solid black
}
.close {
width: 50px;
height: 50px;
cursor: pointer;
border: 5px solid black;
}
</style>
<script>
// 地图数组
var arr = new Array();
// 横向和纵向小格子的数量
var X = 20;
var Y = 20;
//蛇身数组
var snakeX = [4, 5, 6];
var snakeY = [2, 2, 2];
//判断蛇身的标记数组
var st = new Array();
for (var i = 0; i < X; i++) {
st[i] = new Array();
for (var j = 0; j < Y; j++) {
st[i][j] = 0;
}
}
//石头数组,碰到石头会死
var stoneX = [1, 6, 12, 2, 6, 18];
var stoneY = [19, 4, 6, 2, 6, 9];
//食物坐标
var foodX = 9;
var foodY = 3;
//方向坐标
var direct = 39;//方向 1-4对应上下左右四个方向
//记录分数
var sor = 0;
var maxsor = 0;
//创建地图
function create() {
var map = document.getElementById("map");
//这里原本使用的是class，但是因为getElementsByClassName获取的到的是数组的形式，无法准确定位，所以改成ID；
for (var y = 0; y < Y; y++) {
arr[y] = new Array();
for (var x = 0; x < X; x++) {
var mi = document.createElement("div");//创建一个div小格子;
mi.className = "ditu";
arr[y][x] = mi;
map.appendChild(mi);
}
}
}
// 创建蛇
function createSnake() {
var flag;
for (var i = 0; i < snakeX.length; i++) {
arr[snakeY[i]][snakeX[i]].className = "snake";
}
}
function createStone() {
for (var i = 0; i < stoneX.length; i++) {
arr[stoneY[i]][stoneX[i]].className = "stone";
}
}
function createFood() {
flag = false;
do {
//math.random()随机返回一个float类型介于[0,1)的数
foodX = parseInt(Math.random() * X);
foodY = parseInt(Math.random() * Y);
for (var i = 0; i < snakeX.length; i++) {
if (snakeX[i] == foodX && snakeY[i] == foodY) {//判断food和snake是否重合
flag = true;//如果重合需要重新随机生成一个food
break;
}
}
} while (flag);
arr[foodY][foodX].className = "food";
}
function ini() {
direct = 39;
sor = 0;
snakeX = [4, 5, 6];
snakeY = [2, 2, 2];
document.getElementById("ss").innerHTML = "当前得分：" + sor + " 最高分：" + maxsor;
}
//清除蛇，恢复原始状态
function clearSnake() {
for (var i = 0; i < snakeX.length; i++) {
arr[snakeY[i]][snakeX[i]].className = "ditu";
}
}
//蛇的运动
function snakeMove() {
//先清除再移动
clearSnake();
for (var i = 0; i < snakeX.length - 1; i++) {
//蛇整体移动
snakeX[i] = snakeX[i + 1];
snakeY[i] = snakeY[i + 1];
}
//snakeX[]
switch (direct) {
case 37:
snakeX[snakeX.length - 1]--;
break;
case 38:
snakeY[snakeY.length - 1]--;
break;
case 39:
snakeX[snakeX.length - 1]++;
break;
case 40:
snakeY[snakeY.length - 1]++;
break;
}
//先判断有没有撞到自己，然后再判断是否吃到了食物，否则食物会被误判成身体的一部分
for (var i = 0; i < X; i++) {
for (var j = 0; j < Y; j++) {
st[i][j] = 0;
}
}
for (var i = 0; i < snakeX.length - 1; i++) {
console.log(i + " " + st[snakeX[i]][snakeY[i]] + " " + snakeX.length);
if (st[snakeX[i]][snakeY[i]] == 1) {
arr[foodY][foodX].className = "ditu";
if (sor > maxsor) {
maxsor = sor;
document.getElementById("ss").innerHTML = "当前得分：" + sor + " 最高分：" + maxsor;
}
clearInterval(move); //停止移動
alert("啊哦！撞到自己了！游戏结束");
return;
}
st[snakeX[i]][snakeY[i]] = 1;
}
//如果吃到食物了
if (snakeX[snakeX.length - 1] == foodX && snakeY[snakeY.length - 1] == foodY) {
//那么食物就成为了身体的一部分
snakeX[snakeX.length] = foodX;
snakeY[snakeY.length] = foodY;
//分数改变
sor++;
sorr = sor + "";
maxsorr = maxsor + "";
document.getEleme
贪吃蛇源代码-包括代码+图片
需积分: 0 113 浏览量
2023-02-27
18:25:06
上传
评论 1
收藏 10.58MB ZIP 举报
贪吃蛇源代码-来源咸蛋dd.zip （32个子文件） 
test1.html 7KB main.html 3KB diyv.html 11KB
lun.css 1KB lun.js 1KB putong.html 10KB
images 
教程2.png 200KB 格子3.jfif 63KB 立即注册.png 4KB 格子2.jfif 454KB
教程5.jpg 41KB 教程4.jpg 81KB 教程1.png 119KB 头像1.jfif 16KB 星空3.jpg 350KB 背景1.jpg 80KB 像素蛇.jfif 104KB
星空.gif 3.7MB 教程3.jpg 73KB 蛇_副本.png 260KB 背景2.jfif 81KB R-C.jfif 24KB 格子4.jfif 60KB 0112405c64832ca801203d22b64ff1.jpg@2o.jpg 507KB 星空2.gif 3.94MB R-C (1).jfif 77KB 背景3.jpg 142KB 格子.png 24KB QQ图片20221211211210_副本.png 260KB 背景5.jpg 46KB 地狱教程.jpg 63KB 背景4.jpg 142KB资源评论
咸蛋_dd
- 粉丝: 79
- 资源: 2
最新资源
- 优先编码器除法电微分运算电路 全加器函数发生电路等电路经典Multisim仿真实验源文件合集（25个）.zip
- 2331308JS课堂案例.zip
- STM32H750VBT6单片机最小系统开发板AD设计硬件（原理图+PCB+3D封装库）工程文件.zip
- 基于74LS161+ 74LS192芯片实现倒计时定时器Multisim仿真源文件，Multisim10以上版本可打开运行
- 科大讯飞语音引擎 jar包 demo,科大讯飞语音合成引擎3.0，支持4.0系统以上，文字转语音输出.zip
- Java架构面试笔试专题资料及经验（含答案）SpringBoot面试Linux面试专题及答案 合集.zip
- 头歌c语言实验答案tion-model-for-ne开发笔记
- docker配置使用-model-for-networK开发demo
- docker配置使用vaWeb-mas笔记
- c语言连接两个字符串-mas开发笔记
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
