当前位置:Gxlcms > JavaScript > 纯js和css完成贪吃蛇小游戏demo

纯js和css完成贪吃蛇小游戏demo

时间:2021-07-01 10:21:17 帮助过:24人阅读

本文实例为大家分享了js贪吃蛇小游戏demo,纯js和css完成,供大家参考,具体内容如下

  1. <!doctype html>
  2. <html>
  3. <meta charset="utf-8">
  4. <head>
  5. <style>
  6. *{
  7. margin: 0;
  8. padding:0;
  9. }
  10. .content{
  11. position: absolute;
  12. width: 500px;
  13. height: 500px;
  14. background-color: #212121;
  15. }
  16. .colo{
  17. width: 48px;
  18. height: 48px;
  19. background-color: #E6E6E6;
  20. border: 1px solid #466F85;
  21. float: left;
  22. }
  23. .head{
  24. /*background-color: #49DF85;*/
  25. background-image: url(./img/22.jpg);
  26. border-radius: 10px;
  27. background-size: 100%;
  28. position: absolute;
  29. height: 48px;
  30. width: 48px;
  31. }
  32. .fruit{
  33. /*background-color: #49DF85;*/
  34. background-image: url(./img/fruit.jpg);
  35. background-size: 100%;
  36. position: absolute;
  37. height: 48px;
  38. width: 48px;
  39. }
  40. .score{
  41. font-family: '黑体';
  42. left:600px;
  43. position: absolute;
  44. height: 50px;
  45. width: 200px;
  46. background-color: #212121;
  47. color: #FFF;
  48. }
  49. .newbody{
  50. position: absolute;
  51. width: 48px;
  52. height: 48px;
  53. background-image: url(./img/33.jpg);
  54. background-size: 100%;
  55. }
  56. .btn{
  57. font-family: '黑体';
  58. left:600px;
  59. top: 100px;
  60. position: absolute;
  61. height: 50px;
  62. width: 100px;
  63. background-color: #1193FF;
  64. color: #FFF;
  65. text-align: center;
  66. line-height: 50px;
  67. font-size: 20px;
  68. cursor: pointer;
  69. border-radius: 15px;
  70. }
  71. </style>
  72. </head>
  73. <body>
  74. <div class="content" id="content">
  75. </div>
  76. <div class="btn" id="stop">停止游戏</div>
  77. <div class="btn" style="top:180px" id="start">开启游戏</div>
  78. <div class="btn" style="top:380px" id="gameWay">游戏状态:</div>
  79. <div class="score" id="score" >分数:<p></p></div>
  80. <script type="text/javascript" >
  81. //添加状态
  82. var stop=document.getElementById('stop');
  83. var start=document.getElementById("start");
  84. var gameWay=document.getElementById('gameWay');
  85. start.onclick=function(){
  86. head.value='2';
  87. incident=setInterval(move,200);
  88. }
  89. stop.onclick=function(){
  90. clearInterval(incident);
  91. }
  92. //
  93. var content=document.getElementById("content");
  94. for(var i=0;i<100;i++){
  95. var div=document.createElement("div");
  96. div.className="colo";
  97. content.appendChild(div);
  98. }
  99. var scoreId=document.getElementById("score");
  100. var scoreNum=0;
  101. var scoreCon=document.createElement("p");
  102. // var scoreText=document.createTextNode(scoreNum);
  103. // scoreCon.appendChild(scoreText);
  104. scoreId.appendChild(scoreCon);
  105. var head=null; //保存蛇头
  106. var fruit=null; //保存果实
  107. var dir=null; //保存蛇的方向
  108. var body=new Array(); //保存蛇身体增加的部分
  109. var bodyNum=0; //记录创建了多少个body
  110. //随机创建head和fruit到content里面
  111. function createType(type){
  112. if(type==1){
  113. //创建随机数
  114. var row = parseInt(Math.random() * 6 +2);
  115. var col = parseInt(Math.random() * 6 +2);
  116. head=document.createElement("div");
  117. head.className="head";
  118. head.style.top=row*50+"px";
  119. head.style.left=col*50+"px";
  120. content.appendChild(head);
  121. // head.style.top=;
  122. // head.style.left=;
  123. }
  124. if(type==2){
  125. //创建随机数
  126. var row = parseInt(Math.random() * 6 +2);
  127. var col = parseInt(Math.random() * 6 +2);
  128. fruit=document.createElement("div");
  129. fruit.className="fruit";
  130. fruit.style.width="50";
  131. fruit.style.height="50";
  132. fruit.style.backgroundColor="#EA2000";
  133. fruit.style.top=row*50+"px";
  134. fruit.style.left=col*50+"px";
  135. content.appendChild(fruit);
  136. }
  137. }
  138. //调用创建的道具方法
  139. createType(1);
  140. createType(2);
  141. //蛇头移动函数
  142. var direction=new Array; //存每个新建Body的方向
  143. //转换数
  144. var numss=0;
  145. //自动滑动事件
  146. function move(){
  147. if(head.value!=""){
  148. switch(head.value){
  149. case '1':
  150. head.style.top=head.offsetTop-50+"px";
  151. break;
  152. case '2':
  153. head.style.top=head.offsetTop+50+"px";
  154. break;
  155. case '3':
  156. head.style.left=head.offsetLeft-50+"px";
  157. break;
  158. case '4':
  159. head.style.left=head.offsetLeft+50+"px";
  160. break;
  161. }
  162. }
  163. console.log(head.offsetTop);
  164. if(head.offsetTop>500){
  165. alert("超出边界!请重新游戏");
  166. }
  167. // if(head==null){
  168. // if(head.style.top<0||head.style.top>500||head.style.left<0||head.style.left>500){
  169. // alert("超出边界!请重新游戏");
  170. // }
  171. if(body.length!=0){
  172. for(var i=body.length-1;i>=0;i--){
  173. if(i==0){
  174. body[0].value=head.value;
  175. }else{
  176. body[i].value=body[i-1].value;
  177. }
  178. }
  179. }
  180. //转换方向
  181. //如果成功吃掉果实后事件
  182. if(head.style.top==fruit.style.top&&head.style.left==fruit.style.left){
  183. var row = parseInt(Math.random() * 6 +2);
  184. var col = parseInt(Math.random() * 6 +2);
  185. fruit.style.top=row*50+"px";
  186. fruit.style.left=col*50+"px";
  187. //记录分数
  188. scoreNum=scoreNum+1;
  189. document.getElementsByTagName('p')[0].innerText="";
  190. document.getElementsByTagName('p')[0].innerText=scoreNum;
  191. //创建body部分
  192. bodyAdd(head.style.top,head.style.left,head.value);
  193. }
  194. //控制body跟随head运动部分
  195. //有身体的时候要动态改变body的值
  196. if(body.length>0){
  197. var body01=document.getElementById('body01');
  198. body01.style.top=head.offsetTop+"px";
  199. body01.style.left=head.offsetLeft+"px";
  200. switch(head.value){
  201. case '1':
  202. body01.style.top=head.offsetTop+50+"px";
  203. body01.style.left=head.offsetLeft+"px";
  204. break;
  205. case '2':
  206. body01.style.top=head.offsetTop-50+"px";
  207. body01.style.left=head.offsetLeft+"px";
  208. break;
  209. case '3':
  210. body01.style.left=head.offsetLeft+50+"px";
  211. body01.style.top=head.offsetTop+"px";
  212. break;
  213. case '4':
  214. body01.style.left=head.offsetLeft-50+"px";
  215. body01.style.top=head.offsetTop+"px";
  216. break;
  217. }
  218. }
  219. if(body.length>1){
  220. body[bodyNum-1].value=body[bodyNum-2].value;
  221. for(var i=1;i<body.length;i++){
  222. var nu=i+1;
  223. var bodyId=document.getElementById('body0'+nu);
  224. var body_Id=document.getElementById('body0'+i);
  225. bodyId.style.top=body_Id.offsetTop+"px";
  226. bodyId.style.left=body_Id.offsetLeft+"px";
  227. switch(body[bodyNum-(body.length-i)].value){
  228. case '1':
  229. bodyId.style.top=body_Id.offsetTop+50+"px";
  230. bodyId.style.left=body_Id.offsetLeft+"px";
  231. break;
  232. case '2':
  233. bodyId.style.top=body_Id.offsetTop-50+"px";
  234. bodyId.style.left=body_Id.offsetLeft+"px";
  235. break;
  236. case '3':
  237. bodyId.style.left=body_Id.offsetLeft+50+"px";
  238. bodyId.style.top=body_Id.offsetTop+"px";
  239. break;
  240. case '4':
  241. bodyId.style.left=body_Id.offsetLeft-50+"px";
  242. bodyId.style.top=body_Id.offsetTop+"px";
  243. break;
  244. }
  245. }
  246. }
  247. }
  248. //创建按钮时间
  249. document.onkeydown=function(){
  250. var code=event.keyCode;
  251. switch (code){
  252. //向上
  253. case 38:
  254. head.value='1';
  255. break;
  256. //向下
  257. case 40:
  258. head.value='2';
  259. break;
  260. //向左
  261. case 37:
  262. head.value='3';
  263. break;
  264. //向右
  265. case 39:
  266. head.value='4';
  267. break;
  268. console.log(head.value);
  269. }
  270. }
  271. //身体增加事件
  272. function bodyAdd(top,left,dir){
  273. if(dir!=""){
  274. dir=dir;
  275. }
  276. else{
  277. dir=head.value;
  278. }
  279. //首次创建body
  280. if(bodyNum==0){
  281. var newbody=document.createElement('div');
  282. newbody.className="newbody";
  283. newbody.id="body01";
  284. switch (dir){
  285. case '1':
  286. newbody.style.top=head.offsetTop-50+'px';
  287. newbody.style.left=head.offsetLeft+"px";
  288. break;
  289. case '2':
  290. newbody.style.top=head.offsetTop+50+'px';
  291. newbody.style.left=head.offsetLeft+"px";
  292. break;
  293. case '3':
  294. newbody.style.left=head.offsetLeft-50+'px';
  295. newbody.style.top=head.offsetTop+"px";
  296. break;
  297. case '4':
  298. newbody.style.left=head.offsetLeft+50+'px';
  299. newbody.style.top=head.offsetTop+"px";
  300. break;
  301. }
  302. content.appendChild(newbody);
  303. bodyNum=bodyNum+1;
  304. body.push(newbody);
  305. }else{
  306. //第二次及多次创建
  307. var newbody=document.createElement('div');
  308. newbody.className="newbody";
  309. newbody.id="body0"+(body.length+1);
  310. switch (dir){
  311. case '1':
  312. newbody.style.top=body[body.length-1].offsetTop-50+'px';
  313. newbody.style.left=body[body.length-1].offsetLeft+"px";
  314. break;
  315. case '2':
  316. newbody.style.top=body[body.length-1].offsetTop+50+'px';
  317. newbody.style.left=body[body.length-1].offsetLeft+"px";
  318. break;
  319. case '3':
  320. newbody.style.left=body[body.length-1].offsetLeft-50+'px';
  321. newbody.style.top=body[body.length-1].offsetTop+"px";
  322. break;
  323. case '4':
  324. newbody.style.left=body[body.length-1].offsetLeft+50+'px';
  325. newbody.style.top=body[body.length-1].offsetTop+"px";
  326. break;
  327. }
  328. content.appendChild(newbody);
  329. bodyNum=bodyNum+1;
  330. body.push(newbody);
  331. }
  332. // body.push(content);
  333. }
  334. //超出边界,重置信息事件
  335. function initialize(){
  336. //重置果实
  337. var row = parseInt(Math.random() * 6 +2);
  338. var col = parseInt(Math.random() * 6 +2);
  339. fruit.style.top=row*50+"px";
  340. fruit.style.left=col*50+"px";
  341. //记录分数
  342. document.getElementsByTagName('p')[0].innerText="";
  343. //重置贪食蛇
  344. }
  345. var incident;
  346. incident=setInterval(move,200);
  347. //附加操作
  348. // var btn=document.getElementById('btn');
  349. // btn.onclick=function(){
  350. // clearInterval(incident);
  351. // }
  352. //
  353. </script>
  354. </body>
  355. </html>

还在不断完善中,希望对大家的学习有所帮助。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

人气教程排行