好资源导航 » 文章资讯 » 纯原生js实现贪吃蛇游戏

纯原生js实现贪吃蛇游戏

2024-02-24 12:04:03 52

本文实例为大家分享了js实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下




贪吃蛇游戏


*{
margin:0;
padding:0;
}

.wrap{
width:600px;
margin:0auto;
position:relative;
}

p{
position:absolute;
left:65%;
top:10%;
}

h1{
text-align:center;
margin-bottom:20px;
}

#score{
text-align:center;
font-size:20px;
}

#snake_map{
margin:0auto;
border:1pxsolidskyblue;
}
/*行样式*/
.row{
height:20px;
}
/*列样式*/
.col{
height:20px;
width:20px;
box-sizing:border-box;
border:1pxsolidlightgray;
background:rgb(250,250,250);
float:left;
}

.activeSnake{
background:black;
}

.egg{
background:red;
}

#Pause{
margin-left:18%;
border:1pxsolidskyblue;
color:white;
background:skyblue;
width:50px;
height:30px;
margin-bottom:10px;
border-radius:5px;
}

#Start,#Refresh,#Speed{
border:1pxsolidskyblue;
background:skyblue;
color:white;
width:50px;
height:30px;
border-radius:5px;
margin-left:15px;
}






贪吃蛇游戏

score:0

//获取分数标签 varscore=document.getElementById('score'); //获取路径地图标签 varmap=document.getElementById('snake_map'); //为了灵活的设置地图的大小,以下设置两个变量 //用于存储行数和列数(即方格的个数) varrowNumber=25;//行数 varcolumnNumber=20;//列数; varmapWidth=columnNumber*20+'px';//地图的宽 varmapHeight=rowNumber*20+'px';//地图的高 map.style.width=mapWidth; map.style.height=mapHeight;//设置地图宽高 //创建一个二维数组,用来记录地图上的所有div的位置 varsnakeDIVPosition=[]; //通过双层for循环来创建地图元素 for(vari=0;i=columnNumber||y>=rowNumber){ alert('GameOver!!!'); //结束蛇移动的定时器 clearInterval(moveTimer); return;//终止键盘事件; } //如果蛇吃到自己,也要结束游戏 for(vari=0;i

更多有趣的经典小游戏实现专题，分享给大家：

C++经典小游戏汇总

python经典小游戏汇总

python俄罗斯方块游戏集合

JavaScript经典游戏玩不停

java经典小游戏汇总

javascript经典小游戏汇总

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

返回顶部
514930285
czq8825@qq.com

纯原生js实现贪吃蛇游戏

贪吃蛇游戏

热门推荐

随机推荐