在学习了前端三大件之后，对于自己的学习情况进行一个总结，所以写了一个网页版本的简单小游戏，贪吃蛇，成果如下：
首先介绍一下：
分数可以计数总共吃了多少东西，红色的是贪吃蛇的蛇头，蓝色的是食物，还有黄色的，黄色的是身体。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇</title>
<style>
*{
margin: 0;
padding: 0;
}
td{
width: 48px;
height: 48px;
border: 1px solid black;
}
#map{
width: 700px;
height: 700px;
opacity: 0.4;
position: absolute;
background-color: rgb(29, 236, 10);
/* 背景颜色是这个 */
}
div{
position: absolute;
width: 50px;
height: 50px;
}
span{
position: relative;
width: 100px;
height: 100px;
}
h1{
margin-left: 300px;
}
button{
margin-left: 150px;
}
</style>
</head>
<body>
<span id="score1"><h1>分数:0</h1></span>
<span>
<button onclick="changTime('100')">快</button>
<button onclick="changTime('300')">中</button>
<button onclick="changTime('1000')">慢</button>
</span>
<div id="map"></div>
<script>
//首先创建地图 地图的规模是14*14即一行14格，共计14行
document.write("<table cellspacing ='0'");
for(var i=0;i<14;i++){
document.write("</tr>");
for(var j=0;j<14;j++){
document.write("<td></td>");
}
document.write("</tr>");
}
document.write("</table>")
var map =document.getElementById("map") //获取地图的标签
function createDiv(type){
var node =document.createElement("div") // 一个创建函数，主要是创建一个小格
node.style.left=parseInt(Math.random()*14)*50+"px" //随机生成一个距离左边的位置
node.style.top=parseInt(Math.random()*14)*50+"px" //随机生成一个距离右边的位置
map.appendChild(node) //将创建的div 50*50的一个颜色为传入的color的小格，添加到map地图中去
switch(type){ //给创建的新的元素赋“含义” 红色的是蛇头 蓝色的是食物 黄色的是身体
case "head":
node.style.backgroundColor="red"
break;
case "food":
node.style.backgroundColor="blue"
break;
case "body":
node.style.backgroundColor="yellow"
break;
}
return node
}
var arrAll =[] //放置蛇身体的元素
var NodeAll=[] //放置所有的元素
var score =0; //用来计分的
var headNode =createDiv("head") //红色的是蛇头的颜色
var spanScore =document.getElementById("score1") //获取计分数的，目的是当吃了一个食物后，就能够将分数进行更新
var footNode =createDiv("food") //蓝色的是食物的部分
headNode.value="下" //初始化蛇头的运动状态
//创建函数，此函数主要功能是贪吃蛇的移动
function move(){
//贪吃蛇移动身体
if(arrAll.length>0){
for(var i=arrAll.length-1;i >= 0;i--){
switch(arrAll[i].value){
case "上":
arrAll[i].style.top =parseInt(arrAll[i].style.top)-50+"px"
break
case "下":
arrAll[i].style.top =parseInt(arrAll[i].style.top)+50+"px"
break
case "左":
arrAll[i].style.left =parseInt(arrAll[i].style.left)-50+"px"
break
case "右":
arrAll[i].style.left =parseInt(arrAll[i].style.left)+50+"px"
break
}
if(i==0){
arrAll[i].value=headNode.value //当i=0的时候，那个元素其实就是蛇头
}else{
arrAll[i].value=arrAll[i-1].value
}
}
}
//确定蛇头的移动方向，根据蛇头的移动方向，来确定移动方向
switch(headNode.value){
case "上":
headNode.style.top =parseInt(headNode.style.top)-50+"px"
break
case "下":
headNode.style.top =parseInt(headNode.style.top)+50+"px"
break
case "左":
headNode.style.left =parseInt(headNode.style.left)-50+"px"
break
case "右":
headNode.style.left =parseInt(headNode.style.left)+50+"px"
break
}
//这个判断是如果蛇咬到了自己，那么就停止游戏
if(arrAll.length>0){
for(var i=0;i<arrAll.length;i++){
if(headNode.style.left ==arrAll[i].style.left && headNode.style.top ==arrAll[i].style.top){
clearInterval(time)
alert("你操作的贪吃蛇咬到自己了，游戏结束！！！")
}
}
}
//如果蛇碰到四周的墙壁，那么蛇就会死亡
if(parseInt(headNode.style.left) <0 ||parseInt(headNode.style.left)>650 || parseInt(headNode.style.top) <0 ||parseInt(headNode.style.top)>650){
//判断的条件是地图的四条边框线
clearInterval(time) //在这里是清除定时器
alert("你操作的贪吃蛇撞墙了，游戏结束！！点击刷新重新开始游戏")
switch(headNode.value){
case "上":
headNode.style.top =0+"px"
break
case "下":
headNode.style.top =650+"px"
break
case "左":
headNode.style.left =0+"px"
break
case "右":
headNode.style.left =650+"px"
break
}
//这个switch的作用是不让蛇头在死亡后再次移动
}
//重合检测 保证贪吃蛇不能够重合
if(headNode.style.left ==footNode.style.left && headNode.style.top ==footNode.style.top){
score =score +10
spanScore.innerHTML="<h1>分数:"+score+"</h1>"
var bodyNode =createDiv("body")
NodeAll.push(headNode)
var lastNode
if(arrAll.length >0){
lastNode=arrAll[arrAll.length-1]
}else{
lastNode=headNode
}
switch(lastNode.value){
case "上":
bodyNode.style.top=parseInt(lastNode.style.top)+50+"px"
bodyNode.style.left=lastNode.style.left
break
case "右":
bodyNode.style.left=parseInt(lastNode.style.left)-50+"px"
bodyNode.style.top=lastNode.style.top
break
case "下":
bodyNode.style.top=parseInt(lastNode.style.top)-50+"px"
bodyNode.style.left=lastNode.style.left
break
case "左":
bodyNode.style.left=parseInt(lastNode.style.left)+50+"px"
bodyNode.style.top=lastNode.style.top
break
}
bodyNode.value=lastNode.value
arrAll.push(bodyNode)
NodeAll.push(bodyNode)
var px =parseInt(Math.random()*14)*50
var py =parseInt(Math.random()*14)*50
for(var i=0;i<NodeAll.length;i++){
if((parseInt(NodeAll[i].style.left) ==px &&parseInt(NodeAll[i].style.top) ==py)){
px =parseInt(Math.random()*14)*50
py =parseInt(Math.random()*14)*50
}
}
footNode.style.left =px+"px"
footNode.style.top=py+"px"
}
}
function changTime(speed){
time =setInterval(move,speed)
}
//按住键盘的值，函数做出相应的反应 37对应的是左 38对应上 39对应右 40对应下
document.onkeydown=function(e){
switch(e.keyCode){
case 37:
if(headNode.value ="右" ){
headNode.value="左"
}
break
case 38:
if(headNode.value ="下"){
headNode.value="上"
}
break
case 39:
if(headNode.value ="左" ){
headNode.value="右"
}
break
case 40:
if(headNode.value ="上"){
headNode.value="下"
}
break
}
}
</script>
</body>
</html>
希望能够不断成长
标签：
javascript
本文转载自: https://blog.csdn.net/m0_57446284/article/details/122767113
版权归原作者 菜到不会下载软件 所有， 如有侵权，请联系我们删除。
版权归原作者 菜到不会下载软件 所有， 如有侵权，请联系我们删除。