首页
所有分类
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 相关文章推荐
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
jquery中输入验证中一个不错的效果
Aug 21 Javascript
JS构建页面的DOM节点结构的实现代码
Dec 09 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 Javascript
理解Koa2中的async&amp;await的用法
Feb 05 Javascript
JS实现的3des+base64加密解密算法完整示例
May 18 Javascript
详解React 条件渲染
Jul 08 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) 陨石(1) 毅力号(1) DNA(2) 火星(2) RNA(2) 数据(1) 大脑(1) 嘧啶碱基(2) 富碳陨石(1)
You might like
php 获取客户端的真实ip
2009/11/30 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
jQuery的三种$()
2009/12/30 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
深究AngularJS如何获取input的焦点（自定义指令）
2017/06/12 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
2018/06/02 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
《javascript设计模式》学习笔记四：Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
python中实现指定时间调用函数示例代码
2017/09/08 Python
python实现定时提取实时日志程序
2018/06/22 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
python判断单向链表是否包括环，若包含则计算环入口的节点实例分析
2019/10/23 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
美国最大的珠宝首饰网上商城：Jewelry.com
2016/07/22 全球购物
迪拜航空官方网站：flydubai
2017/04/20 全球购物
英国最出名高街品牌：Forever Unique
2018/02/24 全球购物
Brasty罗马尼亚：购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
西式婚礼证婚词
2014/01/12 职场文书
竞聘上岗演讲
2014/05/19 职场文书
怎么写工作检讨书
2014/11/16 职场文书
个人租房协议书
2014/11/28 职场文书
初中教务主任竞聘演讲稿（范文）
2019/08/20 职场文书
导游词之无锡古运河
2019/11/14 职场文书