web小游戏-贪吃蛇.zip 听说刚学完JavaScript的你，找不到demo来练手？ 这里有个demo使用html+css+js（jQuery框架）实现web版简易贪吃蛇 这是本蒟蒻这周的web作业，开始觉得选贪吃蛇可能会有点小难，但是自己看了看网站的一些视频后，发现似乎还是挺有意思的，于是打算出来，希望对刚学完JavaScript基础知识，正愁没有demo来练手的小伙伴有些许帮助。 资源位置 前言中也提了句，这是一个web版的低配版贪吃蛇单机小游戏 既然选好目标后，我们首先当然是得确定布局： 那么怎么实现呢： 2.得分显示区域： 3.改变速度按钮区域： 4.游戏说明区域： 于是html文件和css文件就出来了： 命名需要为：index.css，而且需要和html在同一目录下，不然html无法调用 我们可以对这个操作用一函数封装。 我们可以对我们新产生的div的value值，表示方向，然后对于游戏开始时对蛇头设置一个默认的移动方向，通过对div的位置，来实现蛇头的移动，具体见代码： -分别存身体和整个蛇，在后面蛇的移动有需要 直接改变span标签的值即可（每吃一个+10） 于是基本上这个demo所有功能都实现了 同样需要注意下命名： 大佬不妨留个赞再走呗。
前言：
文件资源：
因为比较简单，所以没有设置c币，只希望大佬留个赞再走呗；demo的简单介绍：
（看到前面那么多前缀，就知道，这真的只是一个demo，因为实在是太低配了）
这是的蛇头，食物、身体都是通过div实现，所以就比较简单了。
这里的JavaScript用的是jquery框架，因为还是可以稍微少点代码量（哈哈哈）布局：
效果图：
这是最终需要的效果图。具体实现：
1.地图：
身体，食物都要大小一致，我们还是比较容易想到用table标签，但是table下面不能创建div，这是我们需要注意的。所以我们需要另外开一个div表示真正的地图：这样就可以在地图开生成食物和蛇头了。
但是我们会发现table标签和真正表示地图的div不能重合，于是我们可以用绝对定位，使其重合
直接用一个div下面封装一个span标签即可，方便之后修改它的值
直接用四个buton标签即可
一个p标签即可
这里对于table的创建，就别一个个cv…
vscode下直接table>tr20>td40按回车即可，
其他操作可以看下面博客：
https://www.cnblogs.com/summit7ca/p/6944215.htmlhtml文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <link type="text/css" rel="stylesheet" href="index.css"/> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="index.js" type="text/javascript"></script> </head> <body> <!-- 地图500*1000 每个单元格为25*25 (20行，40列）--> <table> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> <!-- 真正的地图 因为table里面不能加div--> <div id="map"></div> <div id="scoreDiv"> Score：<span id="score">0</span> </div> <div id="buttonGroup"> <button id="quickBtn">快</button> <button id="midBtn">中</button> <button id="slowBtn">慢</button> <button id="restart">重新开始</button> </div> <p> 游戏说明：<br> 红色方块表示：蛇头，蓝色方块表示：食物，黄色方块表示：身体。<br> 通过键盘的上、下、左、右键来移动贪吃蛇 </p> </body> </html> css文件：
（这是讲给像我一样的蒟蒻的，大佬勿喷）* { margin: 0; padding: 0; } #scoreDiv { font-size: 30px; } #map { width: 1000px; height: 500px; background-color: black; } table { border: 0; position: absolute; left: 0; top: 0; } td { width: 25px; height: 25px; } button{ width: 25px; height: 25px; } #restart{ background-color: red; width:100px; height: 25px; } p{ font-size:20px; } 相关功能实现：
1.产生蛇头、食物div
//刷新页面时，不仅要产生地图，而且还要产生 蛇头 和 一个食物 //封装一个方法，用于创建div元素 放入地图 function createDiv(color) { var div = document.createElement("div"); //创建一个div节点 div.style.width = "25px"; div.style.height = "25px"; div.style.position="absolute"; //为了改变位置，并不独立成行 //位置是随机的 使用js随机数 //Math.random() 产生一个[0,1)的随机数 div.style.left=parseInt(Math.random()*10)*25+"px"; div.style.top=parseInt(Math.random()*10)*25+"px"; div.style.backgroundColor=color; $("#map").append(div); //JQuery操作 //返回创建出的div return div; }
2.使用定时器让蛇头动起来
//判断当前蛇头的移动方向 switch(headNode.value){ case "左": headNode.style.left=parseInt(headNode.style.left)-25+"px"; break; case "右": headNode.style.left=parseInt(headNode.style.left)+25+"px"; break; case "上": headNode.style.top=parseInt(headNode.style.top)-25+"px"; break; case "下": headNode.style.top=parseInt(headNode.style.top)+25+"px"; break; } 3.通过键盘的上下左右键，实现蛇头的移动
//通过键盘的按键，来改变蛇头的移动方向 //不同的键值对应不同的键 $(document).keydown(function(e){ //e表示事件对象 //console.log(e.keyCode); switch(e.keyCode){ case 37: headNode.value="左" break; case 39: headNode.value="右" break; case 38: headNode.value="上" break; case 40: headNode.value="下" break; } }) 4.定义两个数组
//放所有身体的数组 var bodyarr=[]; //放整个蛇的数组 var nodes=[]; 5.碰撞检测：以改变食物的位置
//碰撞检测 即：两个元素重合 //吃到食物,身体加一 if(headNode.style.left==foodNode.style.left&&headNode.style.top==foodNode.style.top){ var bodyNode=createDiv("yellow"); var lastNode; if(bodyarr.length>0){ lastNode=bodyarr[bodyarr.length-1]; } else{ lastNode=headNode; } switch(lastNode.value){ case "左": bodyNode.style.left=parseInt(lastNode.style.left)+25+"px"; bodyNode.style.top=lastNode.style.top; break; case "右": bodyNode.style.left=parseInt(lastNode.style.left)-25+"px"; bodyNode.style.top=lastNode.style.top; break; case "上": bodyNode.style.top=parseInt(lastNode.style.top)+25+"px"; bodyNode.style.left=lastNode.style.left; break; case "下": bodyNode.style.top=parseInt(lastNode.style.top)-25+"px"; bodyNode.style.left=lastNode.style.left; break; } bodyNode.value=lastNode.value; bodyarr.push(bodyNode); nodes.push(bodyNode); 6.身体随之移动：
//身体移动 if(bodyarr.length>0){ //身体跟随前一块移动 ,逆序遍历 for(var i=bodyarr.length-1;i>=0;i--){ switch(bodyarr[i].value){ case "左": bodyarr[i].style.left=parseInt(bodyarr[i].style.left)-25+"px"; break; case "右": bodyarr[i].style.left=parseInt(bodyarr[i].style.left)+25+"px"; break; case "上": bodyarr[i].style.top=parseInt(bodyarr[i].style.top)-25+"px"; break; case "下": bodyarr[i].style.top=parseInt(bodyarr[i].style.top)+25+"px"; break; } if(i==0){ bodyarr[i].value=headNode.value; } else{ bodyarr[i].value=bodyarr[i-1].value; } } } 7.游戏结束
//离开地图,撞墙 if(parseInt(headNode.style.left)<0||parseInt(headNode.style.left)>975 ||parseInt(headNode.style.top)<0||parseInt(headNode.style.top)>475){ clearInterval(t); alert("撞墙了,Game Over!"); } //吃到自己的身体 if(bodyarr.length>0){ for(var i=0;i<bodyarr.length;i++){ if(bodyarr[i].style.left==headNode.style.left&&bodyarr[i].style.top==headNode.style.top){ clearInterval(t); alert("咬到身体了,Game Over!"); break; } } } 8.防止更新的食物位置与身体重合
//更新食物位置,防止食物与蛇重合 var x=parseInt(Math.random()*10)*25; var y=parseInt(Math.random()*10)*25; for(var i=0;i<nodes.length;i++){ if(parseInt(nodes[i].style.left)==x&&parseInt(nodes[i].style.top)==y){ x=parseInt(Math.random()*10)*25; y=parseInt(Math.random()*10)*25; i=-1; } } foodNode.style.left=x+"px"; foodNode.style.top=y+"px"; 9.得分增加
//得分增加 $("#score").text(parseInt($("#score").text())+10); 10.对按钮实现相关功能
//对按钮实现相关功能 $("#quickBtn").click(function(){ t=setInterval(move,100); }) $("#midBtn").click(function(){ t=setInterval(move,500); }) $("#slowBtn").click(function(){ t=setInterval(move,2000); }) $("#restart").click(function(){ location.reload(); }) js文件：
$(function () { //放所有身体的数组 var bodyarr=[]; //放整个蛇的数组 var nodes=[]; //蛇移动的速度,默认为中速 var t=setInterval(move,500); //刷新页面时，不仅要产生地图，而且还要产生 蛇头 和 一个食物 //封装一个方法，用于创建div元素 放入地图 function createDiv(color) { var div = document.createElement("div"); //创建一个div节点 div.style.width = "25px"; div.style.height = "25px"; div.style.position="absolute"; //为了改变位置，并不独立成行 //位置是随机的 使用js随机数 //Math.random() 产生一个[0,1)的随机数 div.style.left=parseInt(Math.random()*10)*25+"px"; div.style.top=parseInt(Math.random()*10)*25+"px"; div.style.backgroundColor=color; $("#map").append(div); //返回创建出的div return div; } //蛇头的移动方向 ，假设默认移动方向向左 //四个方向 左 右 上 下 var headNode=createDiv("red"); //创建一个蛇头 nodes.push(headNode); headNode.value="右"; var foodNode=createDiv("blue"); //创建一个食物 function move(){ //身体移动 if(bodyarr.length>0){ //身体跟随前一块移动 ,逆序遍历 for(var i=bodyarr.length-1;i>=0;i--){ switch(bodyarr[i].value){ case "左": bodyarr[i].style.left=parseInt(bodyarr[i].style.left)-25+"px"; break; case "右": bodyarr[i].style.left=parseInt(bodyarr[i].style.left)+25+"px"; break; case "上": bodyarr[i].style.top=parseInt(bodyarr[i].style.top)-25+"px"; break; case "下": bodyarr[i].style.top=parseInt(bodyarr[i].style.top)+25+"px"; break; } if(i==0){ bodyarr[i].value=headNode.value; } else{ bodyarr[i].value=bodyarr[i-1].value; } } } //判断当前蛇头的移动方向 switch(headNode.value){ case "左": headNode.style.left=parseInt(headNode.style.left)-25+"px"; break; case "右": headNode.style.left=parseInt(headNode.style.left)+25+"px"; break; case "上": headNode.style.top=parseInt(headNode.style.top)-25+"px"; break; case "下": headNode.style.top=parseInt(headNode.style.top)+25+"px"; break; } //离开地图,撞墙 if(parseInt(headNode.style.left)<0||parseInt(headNode.style.left)>975 ||parseInt(headNode.style.top)<0||parseInt(headNode.style.top)>475){ clearInterval(t); alert("撞墙了,Game Over!"); } //吃到自己的身体 if(bodyarr.length>0){ for(var i=0;i<bodyarr.length;i++){ if(bodyarr[i].style.left==headNode.style.left&&bodyarr[i].style.top==headNode.style.top){ clearInterval(t); alert("咬到身体了,Game Over!"); break; } } } //碰撞检测 即：两个元素重合 //吃到食物,身体加一 if(headNode.style.left==foodNode.style.left&&headNode.style.top==foodNode.style.top){ var bodyNode=createDiv("yellow"); var lastNode; if(bodyarr.length>0){ lastNode=bodyarr[bodyarr.length-1]; } else{ lastNode=headNode; } switch(lastNode.value){ case "左": bodyNode.style.left=parseInt(lastNode.style.left)+25+"px"; bodyNode.style.top=lastNode.style.top; break; case "右": bodyNode.style.left=parseInt(lastNode.style.left)-25+"px"; bodyNode.style.top=lastNode.style.top; break; case "上": bodyNode.style.top=parseInt(lastNode.style.top)+25+"px"; bodyNode.style.left=lastNode.style.left; break; case "下": bodyNode.style.top=parseInt(lastNode.style.top)-25+"px"; bodyNode.style.left=lastNode.style.left; break; } bodyNode.value=lastNode.value; bodyarr.push(bodyNode); nodes.push(bodyNode); //得分增加 $("#score").text(parseInt($("#score").text())+10); //更新食物位置,防止食物与蛇重合 var x=parseInt(Math.random()*10)*25; var y=parseInt(Math.random()*10)*25; for(var i=0;i<nodes.length;i++){ if(parseInt(nodes[i].style.left)==x&&parseInt(nodes[i].style.top)==y){ x=parseInt(Math.random()*10)*25; y=parseInt(Math.random()*10)*25; i=-1; } } foodNode.style.left=x+"px"; foodNode.style.top=y+"px"; } } //通过键盘的按键，来改变蛇头的移动方向 //不同的键值对应不同的键 $(document).keydown(function(e){ //e表示事件对象 //console.log(e.keyCode); switch(e.keyCode){ case 37: headNode.value="左" break; case 39: headNode.value="右" break; case 38: headNode.value="上" break; case 40: headNode.value="下" break; } }) //对按钮实现相关功能 $("#quickBtn").click(function(){ t=setInterval(move,100); }) $("#midBtn").click(function(){ t=setInterval(move,500); }) $("#slowBtn").click(function(){ t=setInterval(move,2000); }) $("#restart").click(function(){ location.reload(); }) })
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
