纯原生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 相关文章推荐
显示、隐藏密码
Jul 01 Javascript
[IE&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
javascript中打印当前的时间实现思路及代码
Dec 18 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
Feb 04 Javascript
JavaScript 学习笔记之数据类型
Jan 14 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 Javascript
JavaScript中undefined和null的区别
May 03 Javascript
详解tween.js的使用教程
Sep 14 Javascript
javascript代码优化的8点总结
Jan 29 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
vue实现购物车选择功能
Jan 10 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 开发工具
2006/12/06 PHP
修改php.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
JS 分号引起的一段调试问题
2009/06/18 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
2018/12/03 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
Python的argparse库使用详解
2018/10/09 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
python FTP编程基础入门
2021/02/27 Python
文体活动实施方案
2014/03/27 职场文书
大学军训决心书
2015/02/05 职场文书
医学生自荐信范文
2015/03/05 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
SQL 聚合、分组和排序
2021/11/11 MySQL
Golang Elasticsearches 批量修改查询及发送MQ
2022/04/19 Golang