HTML5游戏源码《贪吃蛇》

最新推荐文章于 2024-07-30 10:31:44 发布

ccnanxi

最新推荐文章于 2024-07-30 10:31:44 发布

阅读量3.5k

点赞数 3

<!DOCTYPE html>

<html >
<head>
<meta charset="UTF-8">
<title>贪吃蛇</title>
<style>
*{
margin: 0px;
padding: 0px;
}

td,tr{
border:1px solid gray;
width:48px;
height:48px;
}
#map{
background:pink;
width:500px;
height: 500px;
position:absolute;
opacity:0.3;
}
div{
position:absolute;
width:49px;
height:49px;
}
</style>
</head>
<body>
<h2><span id="span">score:0</span></h2>
<button οnclick="myFunc('100')">快</button>
<button οnclick="myFunc('250')">中</button>
<button οnclick="myFunc('500')">慢</button>
<div id="map"></div>
<script>
//创建地图表格
document.write("<table cellspacing='0'>")
for(var i=0;i<10;i++){
document.write("<tr>")
for(var j=0;j<10;j++){
document.write("<td></td>")
}
document.write("</tr>")
}
document.write("<table>")
// 第二步 34封装函数
function createNode(type) {
var div=document.createElement("div")//创建div
div.style.left=parseInt(Math.random()*10)*50+"px";
div.style.top=parseInt(Math.random()*10)*50+"px";
map.appendChild(div) //添加到地图中
//赋予颜色
switch (type){
case 1:
div.style.background="red"
break;
case 2:
div.style.background="blue"
break;
case 3:
div.style.background="yellow"
case 3:
break;
}
return div;//返还

}
//加分
var span=document.getElementById("span");
var score=0
// 1.获得map
var map=document.getElementById("map")
// 2.创建蛇头
var headnode=createNode(1);
// 3.创建食物并得到
var foodnode=createNode(2);

headnode.value=37;
//4.声明数组
var allnode=new Array();
//第四步启动定时器定时调用核心逻辑
//控制速度
function myFunc(speed){
setInterval(moveSnake,speed);
}

//第五步核心逻辑
function moveSnake(){
//游戏结束
if(parseInt(headnode.style.left)>450||parseInt(headnode.style.left)<0||
parseInt(headnode.style.top)>450||parseInt(headnode.style.top)<0){
alert("Game over!!!")
}

//03移动身体
if (allnode.length>0){
for (var n= allnode.length-1; n>=0; n--) {
//吃到记几
if (parseInt(headnode.style.left)==parseInt(allnode[n].style.left)&&
parseInt(headnode.style.top)==parseInt(allnode[n].style.top)){
alert("吃到记几了，疼不，不疼就点击继续吧")
}
//01根据蛇头方向移动蛇头
switch(allnode[n].value){
case 37:
allnode[n].style.left=parseInt(allnode[n].style.left)-50+"px";
break;
case 38:
allnode[n].style.top=parseInt(allnode[n].style.top)-50+"px";
break;
case 39:
allnode[n].style.left=parseInt(allnode[n].style.left)+50+"px";
break;
case 40:
allnode[n].style.top=parseInt(allnode[n].style.top)+50+"px";
break;
}
if(n==0){
allnode[n].value=headnode.value;

}else{
allnode[n].value=allnode[n-1].value
}
};
}
switch(headnode.value){
case 37:
headnode.style.left=parseInt(headnode.style.left)-50+"px";
break;
case 38:
headnode.style.top=parseInt(headnode.style.top)-50+"px";
break;
case 39:
headnode.style.left=parseInt(headnode.style.left)+50+"px";
break;
case 40:
headnode.style.top=parseInt(headnode.style.top)+50+"px";
break;
}

//02 碰撞检测
if(parseInt(headnode.style.left)==parseInt(foodnode.style.left)&&
parseInt(headnode.style.top)==parseInt(foodnode.style.top)){
score+=10;
span.innerHTML="score:"+score;

var newbody=createNode(3);//产生新的块
//定义最后一块跟着蛇头
var lastbody=null;
if(allnode.length>0){
lastbody=allnode[allnode.length-1];
}else{
lastbody=headnode;
}
newbody.value = lastbody.value;//块坐标产生在最后一块的相对坐标
switch (newbody.value) {
case 37:
newbody.style.left = parseInt(lastbody.style.left) + 50 + "px";
newbody.style.top = lastbody.style.top;
break;
case 38:
newbody.style.top = parseInt(lastbody.style.top) + 50 + "px";
newbody.style.left = lastbody.style.left;
break;
case 39:
newbody.style.left = parseInt(lastbody.style.left) - 50 + "px";
newbody.style.top = lastbody.style.top;
break;
case 40:
newbody.style.top = parseInt(lastbody.style.top) - 50 + "px";
newbody.style.left = lastbody.style.left;
break;
}
allnode.push(newbody)
foodnode.style.left=parseInt(Math.random()*10)*50+"px";
foodnode.style.top=parseInt(Math.random()*10)*50+"px";
}
}
//第三步控制蛇头方向
document.οnkeydοwn=function (event) {
switch(event.keyCode){
case 37:
if(allnode.length<=0||headnode.value!=39){
headnode.value=37;
}

break;
case 38:
if(allnode.length<=0||headnode.value!=40){
headnode.value=38;
}

break;
case 39:
if(allnode.length<=0||headnode.value!=37){
headnode.value=39;
}

break;
case 40:
if(allnode.length<=0||headnode.value!=38){
headnode.value=40;
}

break;

}

}

</script>

</body>

</html>

HTML5开发小游戏源码《贪吃蛇》引自http://bbs.h5edu.cn/?/article/7436