利用JS实现贪吃蛇
利用js实现贪吃蛇的相关功能
·
第一步：绘制地图 利用JS输出表格。
第二步：产生蛇头和食物 蛇头：红色 食物蓝色。
第三步，通过js动态产生元素。
第四步，点击按钮时，让蛇头移动。
第五步：按下键盘上下左右时，改变当前蛇头移动方向。
注意解决如下贪吃蛇项目的几个问题：
1、食物的位置有可能会和身体重叠。
2、没有出界的死亡判定。
3、分数没跟随变化
4、如果出现蛇头吃到自己身体，出现死亡判定。
5、防止出现蛇头，反方向移动
注：代码段中有相关注释
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>617贪吃蛇</title>
<style>
*{
padding: 0;
margin: 0;
}
#map{
width: 500px;
height: 500px;
background-color: pink;
position: relative;
}
table{
position: absolute;
top:64px;
left:0
}
td{
width: 46px;
height: 46px;
}
</style>
</head>
<body>
<h1 id="score">Score：0</h1>
<button id="bt1">快</button>
<button id="bt2">中</button>
<button id="bt3">慢</button>
<div id="map">
</div>
<script>
//第一步：绘制地图 利用JS输出表格
document.write("<table border='1' cellpadding='0'>")
for(var n=0;n<10;n++){
document.write("<tr>")
for(var j=0;j<10;j++){
document.write("<td></td>")
}
document.write("</tr>")
}
document.write("</table>")
//第二步：产生蛇头和食物 蛇头：红色 食物蓝色
function createDiv(color){
//js动态产生元素
var div=document.createElement("div")
//设置headNode的style
div.style.width="50px"
div.style.height="50px"
div.style.backgroundColor=color
//位置是随机产生的，因此添加绝对定位
div.style.position="absolute"
//left和top是随机 50*0-9
//Math.random（）产生0-1的随机数
div.style.left=parseInt(Math.random()*10)*50+"px"
div.style.top=parseInt(Math.random()*10)*50+"px"
//找到当前的map 通过id找到对应元素
var map=document.getElementById("map")
map.appendChild(div)
return div
}
var headNode=createDiv("red")
var foodNode=createDiv("blue")
var bodyNodes=[]
var number=10
var score=0
//点击按钮 让蛇头移动
//规定蛇头移动方向
//中
headNode.dirtion="左"
var bt1=document.getElementById("bt1")
var bt2=document.getElementById("bt2")
var bt3=document.getElementById("bt3")//找到对应的按钮
bt2.onclick=function(){
//定时器 每间隔一段时间，自己走
setInterval(function(){
//身体移动
if(bodyNodes.length>0){
//后方身体先走
for(var n=bodyNodes.length-1;n>=0;n--){
//中速：0.5秒移动一次
//点击中速时，让对应的蛇头 按照dirtion移动50px
switch(bodyNodes[n].dirtion) {
case "左":
var l = parseInt(bodyNodes[n].style.left)
bodyNodes[n].style.left = l - 50 + "px"
break
case "右":
var l = parseInt(bodyNodes[n].style.left)
bodyNodes[n].style.left = l + 50 + "px"
break
case "上":
var t = parseInt(bodyNodes[n].style.top)
bodyNodes[n].style.top = t - 50 + "px"
break
case "下":
var t = parseInt(bodyNodes[n].style.top)
bodyNodes[n].style.top = t + 50 + "px"
break
}
//再次跟随上一块的移动方向bodeyNodes[n]
if(n==0){
bodyNodes[n].dirtion=headNode.dirtion
}else{
bodyNodes[n].dirtion=bodyNodes[n-1].dirtion
}
}
}
switch(headNode.dirtion){
case "左":
//原本left基础上，-50
//100px 保留数值
//parseInt() 1.取整 2.数据类型的转化 保留字符串前面的数字
//Number()
var l=parseInt(headNode.style.left)
headNode.style.left=l-50+"px"
break
case "右":
var l=parseInt(headNode.style.left)
headNode.style.left=l+50+"px"
break
case "上":
var t=parseInt(headNode.style.top)
headNode.style.top=t-50+"px"
break
case "下":
var t=parseInt(headNode.style.top)
headNode.style.top=t+50+"px"
break
}
//判断蛇头是否出界
if(parseInt(headNode.style.top)<0||parseInt(headNode.style.top)>450||parseInt(headNode.style.left)<0||parseInt(headNode.style.left)>450){
clearInterval(window.t)
alert("撞到边界，死亡")
}
//当蛇头移动后，判断是否吃到自己的身体
for(var n=0;n<bodyNodes.length;n++){
if(bodyNodes[n].style.left==headNode.style.left&&bodyNodes[n].style.top==headNode.style.top){
clearInterval(window.t)
alert("咬住尾巴")
return
}
}
//进行碰撞检测，蛇头和食物 重合到一起，食物位置进行刷新
//重合到一切如何表示？都采用定位
if(headNode.style.left==foodNode.style.left&&headNode.style.top==foodNode.style.top){
var newNode=createDiv("yellow")
//新产生身体的位置
//根据当前最后一块移动方向来决定：如果蛇头向上走，新产生的内容，在其下方
//统计管理当前贪吃蛇，所产生的身体
//在其下方：left相同top+50
//bodyNodes数组 如果有内容的话。数组中最后一个值，就是最后一块
//如果没有内容，蛇头就是最后一块
var lastNode
if(bodyNodes.length==0){
lastNode=headNode
}else{
lastNode=bodyNodes[bodyNodes.length-1]
}
switch(lastNode.dirtion){
case "上":
newNode.style.left=lastNode.style.left
var t=parseInt(lastNode.style.top)
newNode.style.top=t+50+"px"
break
case "下":
newNode.style.left=lastNode.style.left
var t=parseInt(lastNode.style.top)
newNode.style.top=t-50+"px"
break
case "左":
newNode.style.top=lastNode.style.top
var l=parseInt(lastNode.style.left)
newNode.style.left=l+50+"px"
break
case "右":
newNode.style.top=lastNode.style.top
var l=parseInt(lastNode.style.left)
newNode.style.left=l-50+"px"
break
}
newNode.dirtion=lastNode.dirtion
bodyNodes.push(newNode)
var px=parseInt(Math.random()*10)*50+"px"
var py=parseInt(Math.random()*10)*50+"px"
while(true){
for(var n=0;n<bodyNodes.length;n++){
if(bodyNodes[n].style.left==px&&bodyNodes[n].style.top==py){
px=parseInt(Math.random()*10)*50+"px"
py=parseInt(Math.random()*10)*50+"px"
break
}
}
if(n==bodyNodes.length){
break
}
}
foodNode.style.left=px
foodNode.style.top=py
//加分
var h1 = document.getElementsByTagName("h1")
score+=10
h1[0].innerHTML = 'Score:' + score //分数
}
}, 500)
}
//按下键盘上下左右时，让对应的蛇头，按照dirtion移动50px
//event.keyCode键盘对应键值
document.onkeydown=function(event){
//根据按键。改变方向
//键值判断
console.log(event.keyCode)
switch(event.keyCode){
case 38:
if(!(headNode.dirtion=="下"&&bodyNodes.length>0)){
headNode.dirtion="上"
}
break
case 40:
if(!(headNode.dirtion=="上"&&bodyNodes.length>0)){
headNode.dirtion="下"
}
break
case 37:
if(!(headNode.dirtion=="右"&&bodyNodes.length>0)){
headNode.dirtion="左"
}
break
case 39:
if(!(headNode.dirtion=="左"&&bodyNodes.length>0)){
headNode.dirtion="右"
}
break
}
}
</script>
</body>
</html>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
3
0- 0
已为社区贡献3条内容
所有评论(0)