首页
所有分类
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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
javascritp实现input输入框相关限制用法
Jun 29 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
js动画效果制件让图片组成动画代码分享
Jan 14 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
手机开发必备技巧：javascript及CSS功能代码分享
May 25 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
js如何找出字符串中的最长回文串
Jun 04 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
浅谈js中的bind
Mar 18 Javascript
几款主流好用的富文本编辑器（所见即所得常用编辑器）介绍
Mar 17 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
cypress(1) ant design(2) 缓冲区(1) json_extract(1) 弹窗(1) JOIN(1) NoSQL(1) form表单(1) netty(1) 变量提升(1)
You might like
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
php addslashes和mysql_real_escape_string
2010/01/24 PHP
php 在文件指定行插入数据的代码
2010/05/08 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
eclipse php wamp配置教程
2016/06/30 PHP
基于jQuery的倒计时实现代码
2012/05/30 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
Angularjs 基础入门
2014/12/26 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
理解javascript中的闭包
2017/01/11 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
Python3读取文件常用方法实例分析
2015/05/22 Python
Python写入数据到MP3文件中的方法
2015/07/10 Python
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
python3实现飞机大战
2020/11/29 Python
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
聘用意向书
2014/07/29 职场文书
个人职业及收入证明
2014/10/13 职场文书
化工见习报告范文
2014/10/31 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
2015年远程教育工作总结
2015/05/20 职场文书
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers