首页
所有分类
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 相关文章推荐
JavaScript分页功能的实现方法
Apr 25 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
JS验证码实现代码
Sep 14 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
详解vue 项目白屏解决方案
Oct 31 Javascript
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 Javascript
小程序实现上下移动切换位置
Sep 23 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) Vue3(1) HDR(1) kafka(2) 数据加密(1) axios(1) 连接器(1) InputStream(1) 曝光融合(1) shell脚本(1)
You might like
《逃离塔科夫》——“萌新劝退，老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
php下实现折线图效果的代码
2007/04/28 PHP
PHP设置图片文件上传大小的具体实现方法
2013/10/11 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
jQuery的$.extend 浅拷贝与深拷贝
2017/03/08 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
Python编程之属性和方法实例详解
2015/05/19 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
Python 如何展开嵌套的序列
2020/08/01 Python
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
国际知名军事风格休闲装品牌：Alpha Industries（阿尔法工业）
2017/05/24 全球购物
美国半成品食材配送服务商：Home Chef
2018/01/25 全球购物
Nip + Fab官网：英国美容品牌
2019/08/26 全球购物
几道PHP面试题
2013/04/14 面试题
听课评语大全
2014/04/30 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
python 批量压缩图片的脚本
2021/06/02 Python
如何利用python实现Simhash算法
2022/06/28 Python