纯原生js实现贪吃蛇游戏


Posted in Javascript onApril 16, 2020

本文实例为大家分享了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>

更多有趣的经典小游戏实现专题,分享给大家:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 Javascript
一个简单的jQuery插件制作 学习过程及实例
Apr 25 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
Mar 21 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
Feb 17 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
很棒的js选项卡切换效果
Jul 15 Javascript
详谈$.data()的用法和作用
Feb 13 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
javascript中undefined的本质解析
Jul 31 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 Javascript
js调用刷新界面的几种方式
May 03 #Javascript
JavaScript中双向数据绑定详解
May 03 #Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 #Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 #Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
May 03 #Javascript
Vue实现双向数据绑定
May 03 #Javascript
Angular 4.x 路由快速入门学习
May 03 #Javascript
You might like
php错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
document对象execCommand的command参数介绍
2006/08/01 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
JavaScript中document.forms[0]与getElementByName区别
2015/01/21 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
js实现左右轮播图
2020/01/09 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
Python卸载模块的方法汇总
2016/06/07 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
Python正则表达式和元字符详解
2018/11/29 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
python中的句柄操作的方法示例
2019/06/20 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
群众路线剖析材料(四风问题)
2014/10/08 职场文书
庆六一宣传标语
2014/10/08 职场文书
先进基层党组织材料
2014/12/25 职场文书
项目建议书
2015/02/04 职场文书
独生子女证明范本
2015/06/19 职场文书
导游词之桂林山水
2019/09/20 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang
vue实现在data里引入相对路径
2022/06/05 Vue.js
MySQL事务的隔离级别详情
2022/07/15 MySQL