JavaScript 贪吃蛇
自己用js写的贪吃蛇小游戏
一、制作游戏界面
1 定义游戏中需要的变量
//定义变量
var rowNum = 25; //列
var colNum = 25; //行
var arr = []; //定义数组 装画布内的每个小方格
var snakeArry =[]; //定义数组 用来装蛇的身体
var speedTime = 100; //蛇身移动一次的时间
var moveTimer = null; // 计时器
var X = 2; //蛇身初始位置的X坐标
var Y = 0; //蛇身初始位置的Y坐标
var score = 0; //分数
var dec = 'right'; //蛇的初始方向2 定义两个变量控制界面的布局
将建好的小方块放入arr数组中
function makePenal(){
//生成行元素
for(i=0; i<rowNum; i++){
var rowDiv = document.createElement('div');
wrap.appendChild(rowDiv);
var arrArry = [];
//在每行中插入列元素
for(j=0; j<colNum; j++){
var colDiv = document.createElement('div');
colDiv.className = 'col';
rowDiv.appendChild(colDiv);
arrArry.push(colDiv);
}
arr.push(arrArry);
}
}3 初始化蛇身
将arr数组中的前三个放入snakeArray数组中 完成蛇身初始化
//初始化蛇身
function snakeBody(){
for(i=0; i<3; i++){ //蛇身长度为 3
arr[0][i].className = 'col col1';
snakeArry.push(arr[0][i]);
}
}二、蛇身开始移动
1 添加计时器
添加计时器 通过改变 蛇头方向 改变蛇移动的方向
moveTimer = setInterval(function(){
switch(dec){
case 'right'://右移
X ++;
break;
case 'left': //左移
X --;
break;
case 'up': //上移
Y --;
break;
case 'down': //下移
Y ++;
break;
}2 键盘事件
键盘监听事件 根据键盘输入的键值 改变蛇移动的方向 当蛇在移动时 按下相反方向的键时 不执行当前操作 还有添加一个开关 当蛇身完全移动一个方格后才可以执行操作 否则不执行
//键盘事件 改变蛇的方向
var aa = true;
document.onkeydown = function(){
var ev = window.event || event;
if(!aa){
return;
}
//蛇在移动的时候 不能向相反的方向移动
if(ev.keyCode == 37 && dec == 'right'){
return;
}
if(ev.keyCode == 38 && dec == 'down'){
return;
}
if(ev.keyCode == 39 && dec == 'left'){
return;
}
if(ev.keyCode == 40 && dec == 'up'){
return;
}
//根据键盘 按下的上下左右键 改变蛇移动的方向
switch (ev.keyCode){
case 37:
dec = 'left';
break;
case 38:
dec = 'up';
break;
case 39:
dec = 'right';
break;
case 40:
dec = 'down';
break;
}
//蛇身移动后才可以执行下一个操作 否则不能
aa = false;
setTimeout(function(){
aa = true;
},speedTime);
}3 生成食物
先产生两个随机数 foodX foodY 来确定食物在界面上的位置 确定后改变它的样式 特别注意食物的位置不能够和蛇身重复
//随机数 并传入最大值作为参数
function rand(max){
var ran = Math.floor(Math.random() * max);
return ran;
}
//产生蛇要吃的食物
function snakeFood(){
foodX = rand(colNum);
foodY = rand(rowNum);
//蛇身所在的区域内不能出现食物
if(arr[foodY][foodX].className == 'col col1'){
snakeFood();
}else{
arr[foodY][foodX].className = 'col food';
}
}三、蛇吃食物
1 蛇碰到四面墙壁
当蛇头碰到界面边界是 结束游戏 注意 要清空计时器
//判断蛇头是否碰到四面墙壁
if(X < 0 || X >= colNum || Y<0 || Y >= rowNum){
clearInterval(moveTimer); //清楚计时器
alert('game over');
return;
}2 蛇头碰到蛇身
在蛇移动过程中 蛇头是不能碰到自己身体的 否则结束游戏 并清空计时器
//循环遍历 蛇头是否碰到自己的的身体
for(i=0; i<snakeArry.length; i++){
if(snakeArry[i] ==arr[Y][X]){
clearInterval(moveTimer); //清楚计时器
alert('game over');
return;
}
}3 蛇碰到食物
当蛇吃到食物后 积分器 加 1 ， 当前位置的方格样式给变为蛇身的样式 并放入到蛇身的数组中，当蛇移动是没有食物时， 将它当前的方格加入蛇身 ，并删除数组中的第0个元素（即蛇尾）
//判断蛇是否到达食物位置
if(X == foodX && Y == foodY){
arr[foodY][foodX].className = 'col col1';//改变食物的样式
snakeArry.push(arr[foodY][foodX]); //蛇身长度加一个
score ++;
scoreDiv.innerHTML = "得分： " + score;
snakeFood();
}else{
snakeArry[0].className = 'col'; //改变蛇尾的样式（蛇尾即蛇身数组内的第一个元素）
snakeArry.shift(); //从蛇身尾部删除一个方块
arr[Y][X].className = 'col col1'; //改变蛇头到达位置元素的样式
snakeArry.push(arr[Y][X]); //将蛇头到达位置的元素添加入蛇身
}
},speedTime);
}效果图：
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>贪吃蛇</title>
<style type="text/css">
.wrap{border: 1px solid black; margin: auto; font-size: 0;}
.scoring {width: 100%; border-bottom: 1px solid black; font-size: 2rem; text-align: right;}
.scoring div{padding: 10px; }
.col {width: 30px; height: 30px; display: inline-block; border: 1px solid blanchedalmond; background: wheat;}
.col1 {background: black;}
.food {background: brown;}
</style>
</head>
<body>
<div class="wrap">
<div class="scoring">
<div>得分： 0</div>
</div>
</div>
</body>
<script type="text/javascript">
//定义变量
var rowNum = 25; //列
var colNum = 25; //行
var arr = []; //定义数组 装画布内的每个小方格
var snakeArry =[]; //定义数组 用来装蛇的身体
var speedTime = 100; //蛇身移动一次的时间
var moveTimer = null; // 计时器
var X = 2; //蛇身初始位置的X坐标
var Y = 0; //蛇身初始位置的Y坐标
var score = 0; //分数
var dec = 'right'; //蛇的初始方向
//获取元素
var wrap = document.querySelector('.wrap');
wrap.style.width = colNum * (30 + 2) + 'px'; //重新定义wrap的宽度
var scoreDiv = document.querySelector('.scoring div');
//制作画布
function makePenal(){
//生成行元素
for(i=0; i<rowNum; i++){
var rowDiv = document.createElement('div');
wrap.appendChild(rowDiv);
var arrArry = [];
//在每行中插入列元素
for(j=0; j<colNum; j++){
var colDiv = document.createElement('div');
colDiv.className = 'col';
rowDiv.appendChild(colDiv);
arrArry.push(colDiv);
}
arr.push(arrArry);
}
}
makePenal();
//初始化蛇身
function snakeBody(){
for(i=0; i<3; i++){ //蛇身长度为 3
arr[0][i].className = 'col col1';
snakeArry.push(arr[0][i]);
}
}
snakeBody();
//蛇身开始移动
function snakeMove(){
//打开计时器 使蛇根据方向移动
moveTimer = setInterval(function(){
switch(dec){
case 'right'://右移
X ++;
break;
case 'left': //左移
X --;
break;
case 'up': //上移
Y --;
break;
case 'down': //下移
Y ++;
break;
}
//判断蛇头是否碰到四面墙壁
if(X < 0 || X >= colNum || Y<0 || Y >= rowNum){
clearInterval(moveTimer); //清楚计时器
alert('game over');
return;
}
//循环遍历 蛇头是否碰到自己的的身体
for(i=0; i<snakeArry.length; i++){
if(snakeArry[i] ==arr[Y][X]){
clearInterval(moveTimer); //清楚计时器
alert('game over');
return;
}
}
//判断蛇是否到达食物位置
if(X == foodX && Y == foodY){
arr[foodY][foodX].className = 'col col1';//改变食物的样式
snakeArry.push(arr[foodY][foodX]); //蛇身长度加一个
score ++;
scoreDiv.innerHTML = "得分： " + score;
snakeFood();
}else{
snakeArry[0].className = 'col'; //改变蛇尾的样式（蛇尾即蛇身数组内的第一个元素）
snakeArry.shift(); //从蛇身尾部删除一个方块
arr[Y][X].className = 'col col1'; //改变蛇头到达位置元素的样式
snakeArry.push(arr[Y][X]); //将蛇头到达位置的元素添加入蛇身
}
},speedTime);
}
snakeMove();
//键盘事件 改变蛇的方向
var aa = true;
document.onkeydown = function(){
var ev = window.event || event;
if(!aa){
return;
}
//蛇在移动的时候 不能向相反的方向移动
if(ev.keyCode == 37 && dec == 'right'){
return;
}
if(ev.keyCode == 38 && dec == 'down'){
return;
}
if(ev.keyCode == 39 && dec == 'left'){
return;
}
if(ev.keyCode == 40 && dec == 'up'){
return;
}
//根据键盘 按下的上下左右键 改变蛇移动的方向
switch (ev.keyCode){
case 37:
dec = 'left';
break;
case 38:
dec = 'up';
break;
case 39:
dec = 'right';
break;
case 40:
dec = 'down';
break;
}
//蛇身移动后才可以执行下一个操作 否则不能
aa = false;
setTimeout(function(){
aa = true;
},speedTime);
}
//随机数 并传入最大值作为参数
function rand(max){
var ran = Math.floor(Math.random() * max);
return ran;
}
//产生蛇要吃的食物
function snakeFood(){
foodX = rand(colNum);
foodY = rand(rowNum);
//蛇身所在的区域内不能出现食物
if(arr[foodY][foodX].className == 'col col1'){
snakeFood();
}else{
arr[foodY][foodX].className = 'col food';
}
}
snakeFood();
</script>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
