编程 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 相关文章推荐

Array对象方法参考

Oct 03 Javascript

用正则表达式动态创建/增加css style script 兼容IE firefox

Mar 10 Javascript

JavaScript实现存储HTML字符串示例

Apr 21 Javascript

JavaScript实现打开链接页面的方式汇总

Jun 02 Javascript

BootStrap的table表头固定tbody滚动的实例代码

Aug 24 Javascript

node.js路径处理方法以及绝对路径详解

Mar 04 Javascript

jQuery电话号码验证实例

Jan 05 Javascript

Vue路由之JWT身份认证的实现方法

Aug 26 Javascript

JS回调函数 callback的理解与使用案例分析

Sep 09 Javascript

原生js实现日期选择插件

May 21 Javascript

Vue中computed及watch区别实例解析

Aug 01 Javascript

React Fragment介绍与使用详解

Nov 11 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