界面设置
/***body**/
<body>
<h1>贪吃蛇游戏</h1>
/***score记录成绩**/
<p id="score">0</p>
/***地图**/
<div id="snake_map">
/***地图的绘制通过js实现**/
</div>
/***三个按钮**/
<div class = "box">
<button type="button" name="button" id="reset">重新开始</button>
<button type="button" name="button" id="createSpeed">升速</button>
<button type="button" name="button" id="stop">暂停</button>
</div>
</body>
/***body部分结束**/
/***style**/
<style>
* {
margin: 0;
padding: 0;
}
h1 {
text-align: center;
}
#score {
text-align: center;
font-size: 2em;
}
#snake_map {
/***宽和高通过js实现**/
margin: 0 auto;
border: 1px solid rgb(196, 231, 232);
background: rgb(31, 169, 156);
}
/***路径地图的行样式**/
.row {
height: 20px;
}
.cell {
height: 20px;
width: 20px;
box-sizing: border-box;
border: 1px solid lightgray;
float:left;
}
/***蛇身的样式**/
activeSnake {
/***蛇身和随机出现的小方块通过js实现**/
background: rgb(10, 75, 70);
}
.mask {
background: rgb(106, 249, 184);
}
.box {
width: 300px;
margin: auto;
margin-top: 15px;
}
.box button {
border: 1px solid blue;
width: 80px;
height: 30px;
background: rgb(31, 169, 156);
}
</style>
/***style部分结束**/
/***javascript**/
<script type="text/javascript" > //或者外部导入
/***获取标签元素**/
var score = document.getElementById(‘score‘);
var map = document.getElementById(‘snake_map‘);
/***为了动态改变地图的大小，以下设置两个变量，用于存储行数和列数（即方格的个数）**/
var rowNumber = 30;//行数
var cellNumber = 20;//列数
/***设置地图的宽和高**/
var mapWidth = cellNumber * 20;
var mapHeight = rowNumber * 20;
map.style.width = mapWidth + ‘px‘;
map.style.height = mapHeight + ‘px‘;
/***speed为定时器中的时间参数**/
var speed = 300;
/***创建一个二维数组，用来记录地图上的所有div的位置**/
var snakeDivPosition = [];
/***通过双层for循环来创建地图元素**/
for(var i = 0; i < rowNumber; i++) {
/***创建行div**/
var rowDiv = document.createElement(‘div‘);
/***css样式设置**/
rowDiv.className = ‘row‘;
/***将行div添加到路径地图中**/
map.appendChild(rowDiv);
/***创建一个行级数组，用来存储当前行中的每个div方块**/
var rowArray = [];
for(var j = 0; j < cellNumber; j++) {
/***创建每一行中的列元素**/
var cellDiv = document.createElement(‘div‘);
/***css样式设置**/
cellDiv.className = ‘cell‘;
/***将列元素添加到当前行中**/
rowDiv.appendChild(cellDiv);
/***同时将方块添加到行数组中**/
rowArray.push(cellDiv);
}
/***当前内层循环结束，将行数组添加到二维数组中**/
snakeDivPosition.push(rowArray);
}
/***创建蛇身模型**/
/***创建一个一维数组，用来存储蛇身的长度**/
var snake = [];
/***固定蛇身的起始长度**/
for(var i = 0; i < 3; i++) {
/***为蛇身设置颜色样式**/
snakeDivPosition[0][i].className = ‘cell activeSnake‘;
/***存储在蛇身数组中**/
snake[i] = snakeDivPosition[0][i];
}
/***定义变量来控制蛇身**/
/***蛇头的起始位置偏移量**/
var x = 2;
var y = 0;
/***分数计时器**/
var scoreCount = ‘0‘
/***记录随机出现的小方块所在的位置**/
var maskX = 0;
var maskY = 0;
/***记录蛇身移动的方向，初始为向右**/
var direction = ‘right‘;
/***用来判断是否需要改变蛇的移动方向**/
var changeDir = true;
/***延迟定时器**/
var delayTimer = null;
/***添加键盘事件监听方向键来改变蛇的移动方向**/
document.onkeydown = function(event){
/***判断是否需要改变方向true(需要)false(不需要)**/
if(!changeDir) {
return;//return空表示直接结束函数，后续代码不执行
}
/***获取事件**/
event = event||window.event;
/***为了合理处理蛇的移动，需要判断蛇头和蛇身*
*假设蛇向右移动，则左键、右键无效*/
if(direction == ‘right‘ && event.keyCode == 37) {
return;
}
if(direction == ‘left‘ && event.keyCode == 39) {
return;
}
if(direction == ‘up‘ && event.keyCode == 40) {
return;
}
if(direction == ‘down‘ && event.keyCode == 38) {
return;
}
/***通过keyCode确定蛇的移动方向**/
switch(event.keyCode) {
case 37:
direction = ‘left‘;
break;
case 38:
direction = ‘up‘;
break;
case 39:
direction = ‘right‘;
break;
case 40:
direction = ‘down‘;
break;
}
changeDir = false;
delayTimer = setTimeout(function() {
/***设置是否需要改变方向**/
changeDir = true;
},speed);
}
/***moveTimer获取定时器**/
var moveTimer;
/***游戏开始运行**/
function change() {
moveTimer = setInterval(function() {
/***关闭延迟定时器*
*根据direction设置的方向来设置蛇头的位置**/
switch(direction) {
case ‘left‘:
x--;
break;
case ‘right‘:
x++;
break;
case ‘up‘:
y--;
break;
case ‘down‘:
y++;
break;
}
/***判断是否游戏结束**/
if(x < 0|| x >= cellNumber || y < 0|| y >= rowNumber) {
alert(‘game over‘);
/***结束蛇移动的定时器**/
clearInterval(moveTimer);
return;/***终止键盘事件**/
}
/***判断是否触碰到自身**/
for(var i = 0; i < snake.length; i++) {
/***将此时蛇头移动的位置与之前所有的组成蛇的div的位置进行比较，如果相同，游戏结束**/
if(snake[i] == snakeDivPosition[y][x]) {
alert(‘game over‘);
clearInterval(moveTimer);
return;
}
}
/***判断蛇头移动的位置是否有mask**/
if(maskX == x && maskY == y) {
snakeDivPosition[maskY][maskX].className = ‘cell activeSnake‘;
/***蛇头添加div**/
snake.push(snakeDivPosition[maskY][maskX]);
/***记录分数**/
scoreCount++;
/***更新当前分数**/
score.innerHtML = scoreCount;
/***随机生成新的mask**/
createMask();
} else {
/***让蛇移动，蛇尾去掉自身的颜色，变成格子的颜色**/
snake[0].className = ‘cell‘;
/***将蛇尾div从数组中移出**/
snake.shift();
/***定位到的新的蛇头加入到蛇数组中**/
snakeDivPosition[y][x].className = ‘cell activeSnake‘;
snake.push(snakeDivPosition[y][x]);
}
},speed);
}
/***定义随机函数**/
function random(min,max) {
return Math.floor(Math.random()*(max-min+1) + min);
}
function createMask() {
/***随机产生新的mask的x值和y值**/
maskX = random(0,cellNumber - 1);
maskY = random(0,rowNumber - 1);
/***如果随机产生的mask的坐标在蛇身上**/
if(snakeDivPosition[maskY][maskX].className == ‘cell activeSnake‘) {
/***重新生成**/
createMask();
} else {
snakeDivPosition[maskY][maskX].className = ‘cell mask‘;
}
}
change();
createMask();
</script>