首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于javascript实现贪吃蛇经典小游戏

Posted in Javascript onApril 10, 2020

本文实例为大家分享了JS实现贪吃蛇小游戏的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 *{
 margin:0px;
 padding:0px;
 }
 #board{
 width:300px;
 height:500px;
 border:5px solid #000;
 margin:50px auto 0px;
 position: relative;
 background: #cccccc91;
 }
 li:first-child{
 position: absolute;
 width: 10px;
 height:10px;
 left: 100px;
 top: 200px;
 background:cornflowerblue;
 z-index: 1;
 }
 li{
 position: absolute;
 width: 10px;
 height:10px;
 background: pink;
 
 list-style: none;
 }
 li:nth-child(2){
 left: 100px;
 top: 210px;
 }
 li:nth-child(3){
 left: 100px;
 top: 220px;
 }
 p{
 width: 10px;
 height: 10px;
 position: absolute;
 box-shadow: 0px 0px 2px 2px #000;
 border-radius: 50%;
 
 }
 #menu{
 width:300px;
 height:30px;
 border:5px solid #000;
 border-top:none;
 margin:0px auto;
 position: relative;
 }
 #menu>button{
 border: 0px; 
 width: 75px; 
 display: block;
 float: left; 
 height: 30px;
 cursor: pointer;
 outline: none;

 }
 button:nth-child(1){
 background: pink;
 }
 button:nth-child(2){
 background: skyblue;
 }
 button:nth-child(3){
 background: orange;
 }
 button:nth-child(4){
 background: rgb(25, 230, 6);
 }
 button:hover{
 font-size: 18px;
 color: white;
 font-weight: bold;
 }
 dl{
 width: 75px;
 position: absolute;
 right:0;
 bottom:30px; 
 cursor:pointer;
 display: none;
 height: 90px;
 }
 dl>dd{
 display: block;
 cursor:pointer;
 text-align: center;
 line-height: 30px;
 
 }
 dl>dd:nth-child(1){
 height: 30px;
 background: rgba(212, 118, 9, 0.527);
 }
 dl>dd:nth-child(2){
 height: 30px;
 background: rgb(142, 6, 253);
 }
 dl>dd:nth-child(3){
 height: 30px;
 background: rgb(205, 9, 231);
 }
 </style>
</head>
<body>
 <div id="board"> 
 <li></li>
 <li></li>
 <li></li> 
 </div>
 <div id="menu">
 <button>开始游戏</button>
 <button>暂停游戏</button>
 <button onclick="afresh()">重新开始</button>
 <button>游戏难度</button>
 <dl>
 <dd>菜鸟级</dd>
 <dd>大师级</dd>
 <dd>魔鬼级</dd>
 </dl>
 </div>
 <script>
 var ele = document.querySelectorAll("li")
 var board = document.getElementById("board")
 var menu = document.querySelectorAll("button")
 var ddDom = document.querySelectorAll("dd")
 var locLogLeft = [] 
 var locLogTop = []
 var dir = "up"
 var upLock = true; //让定时器不能连开
 var downLock = true;
 var leftLock = true;
 var rightLock = true;
 var level = 200;
 var count = 0;
 menu[0].onclick = function(){var result = game(dir,level);} //开始游戏
 menu[1].onclick = function(){clearInterval(timer)} //暂停游戏
 menu[3].onclick = function(){ //设置难度的函数
 count++;
 if(count%2!=0){
 document.getElementsByTagName("dl")[0].style.display="block"}
 else{
  document.getElementsByTagName("dl")[0].style.display="none"
 }
 ddDom[0].onclick =function() {
 count++
 level = 200;
 document.getElementsByTagName("dl")[0].style.display="none"
 }
  ddDom[1].onclick =function() {
 count++
 level = 100;
 document.getElementsByTagName("dl")[0].style.display="none"
 }
  ddDom[2].onclick =function() {
 count++
 level = 50;
 document.getElementsByTagName("dl")[0].style.display="none"
  }
 }
 
 function afresh(){ //重新开始函数
 ele[0].style.left = "100px"
 ele[0].style.top = "200px"
 ele[1].style.left = "100px"
 ele[1].style.top = "210px"
 ele[2].style.left = "100px"
 ele[2].style.top = "220px"
 ele = document.querySelectorAll("li")
 for(var i = 3;i<ele.length;i++){
  board.removeChild(ele[i]) 
 }
 clearInterval(timer)
 locLogLeft = [] 
 locLogTop = [] 
 }
 var timer;
 foodFun() //游戏开始先生成一食物 
 document.onkeydown = function(e){ //方向控制函数
 var e = e||window.event;
 var foodDom = document.getElementsByTagName("p")[0]
  var ele = document.querySelectorAll("li")
 if(e.keyCode == 87 && ele[0].offsetTop<=ele[1].offsetTop ){
  rightLock = true;
  leftLock = true;
  if(!upLock == true){  
  return;
  }
  upLock = false; 
  
  // clearInterval(timer)
  game("up",level)
  }
 if(e.keyCode == 83 && ele[0].offsetTop>=ele[1].offsetTop){
  rightLock = true;
  leftLock = true
  if(!downLock == true){  
  return;
  }
  downLock = false; 
  
  // clearInterval(timer)
  game("down",level)
  }
  if(e.keyCode == 68 && ele[0].offsetLeft>=ele[1].offsetLeft){
  upLock = true
  downLock = true;
  if(!rightLock == true){  
  return;
  }
  rightLock = false; 
  // clearInterval(timer)
  game("right",level)
  }
  if(e.keyCode == 65 && ele[0].offsetLeft<=ele[1].offsetLeft){ 
  upLock = true;
  downLock = true;
  if(!leftLock == true){  
  return;
  }
  leftLock = false; 
  // clearInterval(timer)
  game("left",level)
  }
 }
 function game(direction,speed){ //控制蛇身转弯函数
 clearInterval(timer) 
 timer = setInterval(function(e){
  var e = e||window.event;
  var foodDom = document.getElementsByTagName("p")[0]
  var ele = document.querySelectorAll("li")
  if(direction == "down"){
  dir = "down"
  locLogLeft = [] 
  locLogTop = [] 
  for(var i=0;i<ele.length;i++){
  locLogLeft[i] = ele[i].offsetLeft;
  locLogTop[i] = ele[i].offsetTop;
  }
  ele[0].style.top = 10+ele[0].offsetTop + "px";
  for(var i=1;i<ele.length;i++){
  ele[i].style.left = locLogLeft[i-1]+"px";
  ele[i].style.top = locLogTop[i-1]+"px";
  }
  } 
  if(direction == "up"){
  dir = "up"
  locLogLeft = [] 
  locLogTop = [] 
  for(var i=0;i<ele.length;i++){
  locLogLeft[i] = ele[i].offsetLeft;
  locLogTop[i] = ele[i].offsetTop;
  }
  ele[0].style.top = ele[0].offsetTop - 10 + "px";
  for(var i=1;i<ele.length;i++){
  ele[i].style.left = locLogLeft[i-1]+"px";
  ele[i].style.top = locLogTop[i-1]+"px";
  }
  }
  if(direction == "left"){
  dir = "left"
  locLogLeft = [] 
  locLogTop = [] 
  for(var i=0;i<ele.length;i++){
  locLogLeft[i] = ele[i].offsetLeft;
  locLogTop[i] = ele[i].offsetTop;
  }
  ele[0].style.left = ele[0].offsetLeft - 10 + "px";
  for(var i=1;i<ele.length;i++){
  ele[i].style.left = locLogLeft[i-1]+"px";
  ele[i].style.top = locLogTop[i-1]+"px";
  }
  }
  if(direction=="right"){
  dir = "right"
  locLogLeft = [] 
  locLogTop = [] 
  for(var i=0;i<ele.length;i++){
  locLogLeft[i] = ele[i].offsetLeft;
  locLogTop[i] = ele[i].offsetTop;
  }
  ele[0].style.left = 10+ele[0].offsetLeft + "px";
  for(var i=1;i<ele.length;i++){
  ele[i].style.left = locLogLeft[i-1]+"px";
  ele[i].style.top = locLogTop[i-1]+"px";
  }
  }
  isLost()
  if(parseInt(foodDom.style.left) == ele[0].offsetLeft && parseInt(foodDom.style.top) == ele[0].offsetTop ){
  board.removeChild(foodDom)
  foodFun()
  var snakeBody = document.createElement("li")
  board.appendChild(snakeBody) 
  ele = document.querySelectorAll("li")
  // console.log(ele,ele.length) 
  ele[ele.length-1].style.left = ele[ele.length-2].offsetLeft+"px";
  ele[ele.length-1].style.top = ele[ele.length-2].offsetTop+"px";  
  }
  
 },speed)

  
 }
 
 function foodFun(e){ //生成食物函数
 var e = e||window.Element;
 var foodColorR = Math.floor((Math.random()*256))
 var foodColorG = Math.floor((Math.random()*256))
 var foodColorB = Math.floor((Math.random()*256))
 var randomFoodX = Math.floor(Math.random()*(board.clientWidth/10)-1)
 var randomFoodY = Math.floor(Math.random()*(board.clientHeight/10)-1); 
 var food = document.createElement("p")
 board.appendChild(food)
 var foodDom = document.getElementsByTagName("p")[0]
 foodDom.style.left=(randomFoodX+1)*10 +"px"
 foodDom.style.top=(randomFoodY+1)*10 +"px";
 foodDom.style.backgroundColor = "rgb("+foodColorR+","+foodColorG+","+foodColorB+")" 
 if(parseInt(foodDom.style.left) == ele[0].offsetLeft && parseInt(foodDom.style.top) == ele[0].offsetTop ){
  foodFun()
 }
 }
 function isLost(){ //判定胜负
 ele = document.querySelectorAll("li")
 if(ele[0].offsetLeft<0 || ele[0].offsetLeft>= board.clientWidth || ele[0].offsetTop<0||ele[0].offsetTop+10>board.clientHeight){
  bump = false;
  alert("你失败了！")
  afresh()
 } 
 for(var i=1;i<ele.length;i++){
  if(ele[0].offsetLeft == ele[i].offsetLeft && ele[0].offsetTop == ele[i].offsetTop){
  alert("你失败了！")
  afresh()
  }
 }
 }
 </script>
</body>
</html>

小编还为大家准备了精彩的专题：javascript经典小游戏汇总

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

基于javascript实现贪吃蛇经典小游戏

- Author -

曲径通幽~

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
js仿苹果iwatch外观的计时器代码分享
Aug 26 Javascript
理解AngularJs指令
Dec 10 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 #Javascript
微信小程序日历插件代码实例
Dec 04 #Javascript
微信小程序request请求封装，验签代码实例
Dec 04 #Javascript
vue中使用极验验证码的方法（附demo）
Dec 04 #Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 #Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 #Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
Dec 04 #Javascript
发报机(1) SONY(15) 天线(6) ICF-7600(1) 电台(1) PL-880(1) 电路图(1) 索尼(5) 德劲(5) 短波(1)
You might like
php与php MySQL 之间的关系
2009/07/17 PHP
php中mysql连接和基本操作代码（快速测试使用，简单方便）
2014/04/25 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
laravel学习教程之存取器
2016/07/30 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
JavaScript实现基于十进制的四舍五入实例
2015/07/17 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
微信小程序 弹幕功能简单实例
2017/02/14 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
[00:37]2016完美“圣”典风云人物：rOtk宣传片
2016/12/09 DOTA
TensorFlow实现模型评估
2018/09/07 Python
python画图常规设置方式
2020/03/05 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
日本快乐生活方式购物网站：Shop Japan
2018/07/17 全球购物
商场消防演习方案
2014/02/12 职场文书
2014年教师工作总结
2014/11/10 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
2014司机年终工作总结
2014/12/05 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
JavaScript组合继承详解
2021/11/07 Javascript
HTML中的表格元素介绍
2022/02/28 HTML / CSS
Oracle 多表查询基本语法实例
2022/04/18 Oracle
Golang Elasticsearches 批量修改查询及发送MQ
2022/04/19 Golang