<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>---贪吃蛇---</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.wrap {
width: 600px;
margin: 0 auto;
position: relative;
}
p {
position: absolute;
left: 65%;
top: 10%;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
#score {
text-align: center;
font-size: 20px;
}
#snake_map {
margin: 0 auto;
border: 1px solid skyblue;
}
/*行样式*/
.row {
height: 20px;
}
/*列样式*/
.col {
height: 20px;
width: 20px;
box-sizing: border-box;
border: 1px solid lightgray;
background: rgb(250, 250, 250);
float: left;
}
.activeSnake {
background: black;
}
.food {
background: red;
}
#Pause {
margin-left: 18%;
border: 1px solid skyblue;
color: white;
background: skyblue;
width: 50px;
height: 30px;
margin-bottom: 10px;
border-radius: 5px;
}
#Start,#Refresh,#Speed {
border: 1px solid skyblue;
background: skyblue;
color: white;
width: 50px;
height: 30px;
border-radius: 5px;
margin-left: 15px;
}
</style>
</head>
<body>
<div class="wrap">
<h1>贪吃蛇游戏</h1>
<!-- 记录吃了多少个蛋 -->
<p style="font-size:20px;color:red"> snakeScore:<span id="score" style="color:black">0</span> </p>
<!-- 暂停按钮 -->
<input id="Pause" type="button" name="name" value="Pause">
<!-- 开始按钮 -->
<input id="Start" type="button" name="name" value="Start">
<!-- 刷新(重新开始游戏) -->
<input id="Refresh" type="button" name="name" value="Refresh">
<!-- 加速按钮 -->
<input id="Speed" type="button" name="name" value="Speed">
<!-- 贪吃蛇的行走路径地图 -->
<div id="snake_map">
</div>
</div>
</body>
<script type="text/javascript" language="JavaScript">
//获取分数标签
var score = document.getElementById('score');
// 获取路径地图标签
var map = document.getElementById('snake_map');
// 为了灵活的设置地图的大小,以下设置两个变量
// 用于存储行数和列数(即方格的个数)
var rowNumber = 25;// 行数
var columnNumber = 20;// 列数;
var mapWidth = columnNumber * 20 + 'px';// 地图的宽
var mapHeight = rowNumber * 20 + 'px';// 地图的高
map.style.width = mapWidth;
map.style.height = mapHeight;// 设置地图宽高
// 创建一个二维数组,用来记录地图上的所有div的位置
var snakeDIVPosition = [];
// 通过双层for循环来创建地图元素
for ( var i = 0; i < rowNumber; i++)
{
// 创建行div
var rowDIV = document.createElement('div');
// 设置div样式
rowDIV.className = 'row';
// 将行div添加到路径地图map中
map.appendChild(rowDIV);
// 创建一个行级数组,用来存储当前行中的每个方块div
var rowArray = [];
for ( var j = 0; j < columnNumber; j++)
{
// 创建每一行中的方块div
var columnDIV = document.createElement('div');
// 设置css样式
columnDIV.className = 'col';
// 将方块DIV添加到当前行中
rowDIV.appendChild(columnDIV);
// 同时将方块添加到行数组中
rowArray.push(columnDIV);
}
// 当前内层循环结束,将行数组添加到二维数组中
snakeDIVPosition.push(rowArray);
}
//创建一个蛇,用数组来存储蛇本身所占的div
var snake = [];
//设置蛇的长度
for (var i = 0; i < 3; i++)
{
//给蛇设置了颜色
snakeDIVPosition[0][i].className = 'col activeSnake';
//颜色设置完后,放在蛇身数组中
snake[i] = snakeDIVPosition[0][i];
}
//控制蛇的变量
var snakeX = 2;
var snakeY = 0; //蛇的初始位置
var snakeScore = 0; //分数
var foodX = 0;
var foodY = 0;//食物的初始位置
var isSnakeDir = true;// true表示改变蛇的方向
var snakeDirection = 'right';//蛇的初始移动向左
var delayTimer = null;//延迟定时器
//添加键盘事件监听方向来改变蛇的移动方向
document.onkeydown = function (event)
{
//刚开始,蛇自动行走,也就是不改变方向
if (!isSnakeDir)
{
return;
}
event = event || window.event;
//当用户输入后,蛇的逻辑
if (snakeDirection == 'up' && event.keyCode == 40)
{
return;
}
if (snakeDirection == 'down' && event.keyCode == 38)
{
return;
}
if (snakeDirection == 'left' && event.keyCode == 39)
{
return;
}
if (snakeDirection == 'right' && event.keyCode == 37)
{
return;
}
switch (event.keyCode)
{
case 37:
snakeDirection = 'left';
break;
case 38:
snakeDirection = 'up';
break;
case 39:
snakeDirection = 'right';
break;
case 40:
snakeDirection = 'down';
break;
}
isSnakeDir = false;
delayTimer = setTimeout(function ()
{
isSnakeDir = true;
}, 300);
}
//蛇移动坐标
function snakeMove()
{
//根据上面的设置来设置蛇头的位置
switch (snakeDirection)
{
case 'left':
snakeX--;
break;
case 'right':
snakeX++;
break;
case 'up':
snakeY--;
break;
case 'down':
snakeY++;
break;
}
//判断游戏是否结束
if(snakeX < 0 || snakeY < 0 || snakeX >= columnNumber || snakeY >= rowNumber)
{
alert("游戏结束！");
//结束蛇移动的定时器
clearInterval(moveTimer);
return;
}
//如果蛇吃到自己,游戏也结束
for(var i = 0; i < snake.length; i++ )
{
if(snake[i] == snakeDIVPosition[snakeY][snakeX])
{
alert("蛇吃到自己,游戏结束！！");
clearInterval(moveTimer);
return;
}
}
//判断是否吃到食物
if(foodX == snakeX && foodY == snakeY)
{
snakeDIVPosition[foodY][foodX].className = 'col activeSnake';
snake.push(snakeDIVPosition[foodY][foodX]); //蛇身体变长
snakeScore++; //分数加一
score.innerHTML = snakeScore;
createNewFood();
}
//蛇没有吃到食物
else
{
snake[0].className = 'col';
snake.shift();
snakeDIVPosition[snakeY][snakeX].className = 'col activeSnake';
snake.push(snakeDIVPosition[snakeY][snakeX]);
}
}
var moveTimer = setInterval('snakeMove()', 300);
//定义一个生成Min,Max之间的随机数
function random(min, max)
{
return Math.floor(Math.random() * (max - min + 1) + min);
};
function createNewFood()
{
//随机出现新的食物的坐标
foodX = random(0, columnNumber - 1);
foodY = random(0, rowNumber - 1);
//加个判断,如果随机产生的食物和蛇的身体重合,就重新产生一个食物
if(snakeDIVPosition[foodY][foodX].className == 'col activeSnake')
{
createNewFood(); //重新产生一个食物,这里用了递归
}
else
{
snakeDIVPosition[foodY][foodX].className = 'col food';
}
}
createNewFood(); //在游戏开始的时候生成新的食物
var pause = document.getElementById('Pause');
var start = document.getElementById('Start');
var refresh = document.getElementById('Refresh');
var speed = document.getElementById('Speed');
//添加暂停按钮
pause.onclick = function ()
{
clearInterval(moveTimer);
}
//添加开始按钮
start.onclick = function ()
{
clearInterval(moveTimer);
moveTimer = setInterval('snakeMove()', speed1);
}
//添加刷新按钮
refresh.onclick = function ()
{
window.location.reload();
}
//添加加速按钮
var speed1 = 300;
speed.onclick = function ()
{
speed -= 20;
clearInterval(moveTimer);
moveTimer = setInterval('snakeMove()', speed1);
}
</script>
</html>
js----贪吃蛇游戏
猜你喜欢
转载自blog.csdn.net/qq_36818386/article/details/80207450
今日推荐
周排行