devbox
运维做开发
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【前端笔记】js简单代码实现贪吃蛇~~~_js贪吃蛇代码截图

作者：运维做开发 | 2024-08-19 08:34:16

赞

踩

js贪吃蛇代码截图

贪吃蛇是前端人入门且必须的技能。今天闲下来整理介绍一下~~~

首先，先要确定贪吃蛇小游戏的需求：

  • 背景墙   确定行列
  • 创建蛇头
  • 蛇头移动
  • 蛇头变相
  • 创建实物
  • 碰撞检测
  • 增加身体
  • 食物消失 随机创建新的
  • 身体蛇头一起移动

我们首先通过创建一些div元素来生成网格轨道背景：

然后创建蛇头（我们让蛇头位置是固定的，食物是随机产生的）

接下来是蛇头的自动移动（我们设置一个定时器来实现蛇头的自动移动）：

蛇头的变向操作（使用到了键盘事件 我们使用上下左右键来移动 判断keycode值来改变蛇头位置）

接下来创建随机食物：

食物和蛇头的碰撞检测：

注意食物不能成成在身体上，所以我们需要添加条件判断：

吃掉食物后产生身体块

身体块随着头移动

把创建头 食物 身体 封装到一起（共有的地方）

让几个函数需要的参数是一致的，不一样的在内部实现

接下来还要优化以下~判断蛇头是否碰撞了边界和自己的身体，也要不让蛇可以回退移动；随机产生不同分值的食物，获得一定分值后的速度也要变快

以下是具体代码实现：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>贪吃蛇</title>
  6. 	<style>
  7. 		.out{
  8. 			width: 500px;
  9. 			height: 500px;
  10. 			background: #ccc;
  11. 			border: 1px solid blue;
  12. 			position: relative;
  13. 			overflow: hidden;
  14. 		}
  15. 		p{
  16. 			display: inline-block;
  17. 		}
  18. 		span{
  19. 			display: block;
  20. 		}
  21. 	</style>
  22. </head>
  23. <body>
  24. <div class="out">
  25. </div>
  26. <button onclick="reset()">再玩一局</button>
  27. &nbsp;&nbsp;&nbsp;&nbsp;得分：<p></p>
  28. <span>得分大于等于5，改变速度。得分大于等于10，改变速度。</span>
  29. <script src="./snake.js"></script>
  30. <script>
  31. var col=10;
  32. var row=10;
  33. var w=50;
  34. var h=50;
  35. var out=$('.out')[0];
  36. var score=$('p')[0];
  37. var bodys=[];
  38. var num=0;
  39.  
  40.  
  41. var time=1000;//速度
  42. //背景
  43. createBg(out,col,row)
  44. // 蛇头
  45. var head=createNode(1,out)
  46. // 食物
  47. var food=createNode(2,out)//createFood(out,w,h,col,row,1)
  48. createKeyEvent(head);
  49. //计时器
  50. var timer=setInterval(play,time)
  51. //
  52. function play() {
  53. 	//身体移动
  54. 	moveBody(bodys,head)
  55. 	//头部移动
  56. 	moveHead(head);
  57. 	var checkstate=check(head,food);
  58. 	
  59. 	if(checkstate){
  60. 		//计算分数
  61. 		num+=Number(food.getAttribute('value'));
  62. 		score.innerHTML=num+"分"
  63. 		//判断分数 改变速度
  64. 		if (num>=5&&num<10) {
  65. 			time=600;
  66. 			clearInterval(timer);
  67. 			timer=setInterval(play,time);
  68.  
  69. 		}
  70. 		else if(num>=10){
  71. 			time=300;
  72. 			clearInterval(timer);
  73. 			timer=setInterval(play,time);
  74. 		}
  75.  
  76.  
  77. 		//删除food
  78. 		out.removeChild(food);
  79. 		//创建food(food不能创建在身体上)
  80. 		food=createNode(2,out)
  81. 		//创建身体
  82. 		if (bodys.length>0) {
  83. 			// var body=createBody(out,w,h,bodys[bodys.length-1])
  84. 			var body=createNode(3,out,bodys[bodys.length-1])
  85. 			console.log(body)
  86. 		}else{
  87. 		   // var body=createBody(out,w,h,head)
  88. 		   var body=createNode(3,out,head)
  89. 		   console.log(body)
  90. 		}		
  91. 		bodys.push(body)
  92. 	}
  93.  
  94.     var bodycheckstate=checkbody(head,bodys);
  95. 	if (bodycheckstate==false) {
  96. 		clearInterval(timer);
  97. 		alert("咬到自己了！")
  98. 	}
  99.  
  100.  
  101. 	var borderstate=checkBorder(head,out);
  102. 	if (borderstate==false) {
  103. 		clearInterval(timer);
  104. 		 alert("game over!") 
  105. 	}
  106. }
  107.  
  108. </script>
  109. </body>
  110. </html>
  111. <!-- 
  112. 1.背景墙   确定行列
  113. 2.创建蛇头
  114. 3.蛇头移动
  115. 4.蛇头变相
  116. 5.创建实物
  117. 6.碰撞检测
  118. 7.增加身体
  119. 8.食物消失 随机创建新的
  120. 9身体蛇头一起移动
  122. -------完成-------
  124.  -->

 

  1.  //获取元素方法
  2.  function $(string){
  3.    var tag=string.charAt(0);
  4.    var ele=null;
  5.    switch(tag){
  6.        case ".":
  7.         ele=document.getElementsByClassName(string.slice(1))
  8.         break;
  9.        case "#":
  10.         ele=document.getElementById(string.slice(1))
  11.         break;
  12.        default:
  13.         ele=document.getElementsByTagName(string);
  14.         break;
  15.    }
  16.    return  ele;
  17. }
  18. //创建背景方法
  19. function createBg(parent,col,row){
  20.   //创建表格
  21.   parent.style.width=row*50+"px";
  22.   parent.style.height=col*50+"px";
  23.   for (var i = 0; i < row; i++) {
  24.     for (var j = 0; j < col; j++) {
  25.       var  div =document.createElement('div')
  26.       div.style.width="48px"
  27.       div.style.height="48px"
  28.       div.style.border="1px solid white"
  29.       div.style.float='left'
  30.       parent.appendChild(div);
  31.     }
  32.   }
  33. }
  34.  
  35. //事件监听
  36. function createKeyEvent(head){
  37.   document.onkeyup=function(event){
  38.    console.log(event)
  39.    var event=event||window.event
  40.    var key=event.keyCode;
  41.       if (head.className=='top'&&key==40) {
  42.          return;
  43.        }
  44.        else if (head.className=='right'&&key==37) {
  45.         
  46.           return;
  47.        }
  48.        else if (head.className=='down'&&key==38) {
  49.           return;
  50.        }
  51.        else if (head.className=='left'&&key==39) {
  52.            return;
  53.        }
  54.        switch(key){
  55.           case 40: 
  56.             head.className='down'
  57.           break;
  58.           case 37:
  59.             head.className="left"
  60.           break;
  61.           case 38:
  62.              head.className="top"
  63.           break;
  64.           case 39:
  65.              head.className="right"
  66.           break;
  67.        }
  68. }
  69. }
  70.  
  71. //身体碰撞检测
  72. function checkbody(obj1,arr) {
  73.   for (var i = 1; i < arr.length; i++) {
  74.       if (obj1.offsetTop==arr[i].offsetTop&&obj1.offsetLeft==arr[i].offsetLeft) {
  75.           return false;
  76.       }
  77.   }
  78. }
  79.  
  80.  
  81.  
  82.  
  83. //碰撞检测
  84. function check(obj1,obj2){
  85.   if (obj1.offsetLeft==obj2.offsetLeft&&obj1.offsetTop==obj2.offsetTop) {
  86.     return true;
  87.   }
  88.    return false;
  89. }
  90. //头部移动
  91. function moveHead(head){
  92. var left=0;
  93. var top=0;
  94. switch(head.className){
  95.   case 'left':
  96.   left=head.offsetLeft-50;
  97.   top=head.offsetTop
  98.   break;
  99.   case 'right':
  100.   left=head.offsetLeft+50;
  101.   top=head.offsetTop
  102.   break;
  103.   case 'top':
  104.   left=head.offsetLeft;
  105.   top=head.offsetTop-50
  106.   break;
  107.   case 'down':
  108.   left=head.offsetLeft;
  109.   top=head.offsetTop+50
  110.   break;
  111. }
  112. head.style.left=left+'px'
  113. head.style.top=top+'px'
  114. }
  115. //移动body
  116. function moveBody(array){
  117.   if (array.length>0) {
  118.      for (var i = array.length - 1; i >= 0; i--) {
  119.           switch(array[i].className){
  120.             case 'left':
  121.               x=array[i].offsetLeft-50;
  122.               y=array[i].offsetTop
  123.               break;
  124.               case 'right':
  125.               x=array[i].offsetLeft+50;
  126.               y=array[i].offsetTop
  127.               break;
  128.               case 'top':
  129.               x=array[i].offsetLeft;
  130.               y=array[i].offsetTop-50
  131.               break;
  132.               case 'down':
  133.               x=array[i].offsetLeft;
  134.               y=array[i].offsetTop+50
  135.               break;
  136.          }
  137.           array[i].style.left=x+"px";
  138.           array[i].style.top=y+'px'
  139.           if (i==0) {
  140.                    array[i].className=head.className
  141.           }else{
  142.             array[i].className=array[i-1].className
  143.           }
  144.     
  145.      }
  146.   }
  147. }
  148. /*
  149. 检测坐标是否重合
  150. */
  151.  
  152. function  checkfood(x,y,array){
  153.   console.log(head)
  154.   if (x==head.offsetLeft&&y==head.offsetTop) {
  155.     return false
  156.   }
  157.   for (var i = 0; i < array.length; i++) {
  158.     // 检测到重复
  159.     if (array[i].offsetLeft==x&&array[i].offsetTop==y) {
  160.       return false;
  161.     }
  162.     if (i==array.length-1) {
  163.       return  true;
  164.     }
  165.   }
  166.   return true;
  167. }
  168. /*
  169. 创建节点对象
  170.  type 1  蛇头  2 food  3 身体
  171. */
  172. function createNode(type,parent,preObj){
  173.   var x=0;
  174.   var y=0;
  175.   var w=50;
  176.   var h=50;
  177.   var bgColor;
  178.   var fen;
  179.   var className="";
  180.   var  preObj=preObj?preObj:null
  181.   switch(type){
  182.     case 1:
  183.       bgColor="red"
  184.       className="right"
  185.       break;
  186.     case 2:
  187.        var foodtype=parseInt(Math.random()*10)%3
  188.        var foods=[['yellow',1],['skyblue',2],['pink',3]]
  189.         bgColor=foods[foodtype][0]
  190.         fen=foods[foodtype][1]
  191.           var array=bodys;
  192.           // console.log(array)
  193.         test();
  194.         function test(){
  195.             var a=parseInt(Math.random()*row)*50;
  196.             var b=parseInt(Math.random()*col)*50;
  197.             var state=checkfood(a,b,array)
  198.             if (state) {
  199.               x=a;
  200.               y=b;
  201.             }else{
  202.               test();
  203.             }
  204.         }
  205.         break;
  206.     case 3:
  207.        switch(preObj.className){
  208.           case 'left':
  209.             x=preObj.offsetLeft+50;
  210.             y=preObj.offsetTop
  211.             break;
  212.             case 'right':
  213.             x=preObj.offsetLeft-50;
  214.             y=preObj.offsetTop
  215.             break;
  216.             case 'top':
  217.             x=preObj.offsetLeft;
  218.             y=preObj.offsetTop+50
  219.             break;
  220.             case 'down':
  221.             x=preObj.offsetLeft;
  222.             y=preObj.offsetTop-50
  223.             break;
  224.        }   
  225.         className=preObj.className;
  226.         bgColor='black'
  227.        break ;
  228.     default:
  229.        break
  230.  
  231.   }
  232.   var node=document.createElement('div');
  233.   node.style.background=bgColor;
  234.   node.style.position="absolute";
  235.   node.style.left=x+"px";
  236.   node.style.top=y+"px";
  237.   node.style.width=w+"px";
  238.   node.style.height=h+"px";
  239.   node.style.zIndex=999;
  240.   node.className=className;
  241.   node.setAttribute("value",fen)
  242.   parent.appendChild(node)
  243.   return node;
  244. }
  245.  
  246.  
  247.  
  248. function reset(){
  249.   window.location.reload();
  250. }
  251. //检测碰撞到边界框
  252. function checkBorder(obj1,obj2) {
  253.   if (obj1.offsetLeft>obj2.offsetWidth||obj1.offsetLeft<0||obj1.offsetTop<0||obj1.offsetTop>obj2.offsetHeight) {
  254.     return false;
  255.   }
  256.   return true;
  257. }
'
运行

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/运维做开发/article/detail/1001520
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号