纯原生js实现贪吃蛇游戏
程序员文章站
2023-01-07 21:32:21
本文实例为大家分享了js实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下
本文实例为大家分享了js实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gbk">
<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;
}
.egg {
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"> score:<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">
//获取分数标签
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 = [];
// 固定蛇身起始长度为3个div
for ( var i = 0; i < 3; i++) {
// 为蛇身设置不同颜色的div
snakedivposition[0][i].classname = 'col activesnake';
// 存储在蛇身数组中
snake[i] = snakedivposition[0][i];
}
// 定义变量来控制蛇
var x = 2;
var y = 0;// 蛇头的起始位置偏移量
var scorecount = 0;// 分数计数器,即吃了多少个蛋
var eggx = 0;// 记录蛋所在的行位置
var eggy = 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;
}, 300);
};
// 开始设置蛇移动逻辑
// 蛇移动函数
function snakemove() {
// 根据上面设置的方向来设置蛇头的位置
switch (direction) {
case 'left':
x--;
break;
case 'right':
x++;
break;
case 'up':
y--;
break;
case 'down':
y++;
break;
};
// 判断是否游戏结束
if (x < 0 || y < 0 || x >= columnnumber || 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;
};
}
// 判断蛇头移动的位置是否有蛋
if (eggx == x && eggy == y) {
snakedivposition[eggy][eggx].classname = 'col activesnake';
snake.push(snakedivposition[eggy][eggx]);// 加入蛇身
scorecount++;// 记录分数
// 更新当前的分数
score.innerhtml = scorecount;
// 随机产生一个新的蛋
createnewegg();
} else {
// 设置蛇碰不到蛋的逻辑
// 让蛇移动
// 蛇尾去掉蛇自身的颜色,变成格子的颜色
snake[0].classname = 'col';
// 将蛇尾div从数组中移除
snake.shift();
// 定位到的新的蛇头加入到蛇数组中
snakedivposition[y][x].classname = 'col activesnake';
snake.push(snakedivposition[y][x]);
};
};
var movetimer = setinterval('snakemove()', 300);
// 定义一个生成min,max之间的随机数函数
function random(min, max) {
return math.floor(math.random() * (max - min + 1) + min);
};
function createnewegg() {
// 随机出新的egg的下标的x和y值
eggx = random(0, columnnumber - 1);
eggy = random(0, rownumber - 1);
// 判断如果随机产生的蛋与蛇身重合,就重新随机产生一个蛋
if (snakedivposition[eggy][eggx].classname == 'col activesnake') {
createnewegg();// 重新随机新的egg
} else {
snakedivposition[eggy][eggx].classname = 'col egg';
}
};
createnewegg();// 在游戏开始的时候生成新的egg
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() {
speed1 -= 20;
clearinterval(movetimer);
movetimer = setinterval('snakemove()', speed1);
};
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。