明霞山资源网 Design By www.htccd.com
本文实例为大家分享了JS实现简易贪吃蛇的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
#body{
width: 900px;/*长宽最好是obj的倍数*/
height: 600px;
border-width: 10px;
border-style: solid;
border-color: blue;
line-height:600px;/*文本垂直居中*/
text-align: center;/*文本水平居中*/
position: relative;/*相对定位*/
left: 0px;
top: 0px;
}
#obj{
width: 30px;
height: 30px;
background-color: red;
position: absolute;/*绝对定位*/
left: 0px;
top: 0px;
z-index: 1;/*头部在上层显示*/
}
div{
text-align: center;
line-height:30px;
}
</style>
</head>
<body id='body'>
<!--内容-->
按awsd移动
<div id='obj'></div>
<select id='speed' onclick="setspeed(this)">
<option value="100">快速</option>
<option value="500">中速</option>
<option value="1000" selected>慢速</option>
</select>
| <button onclick="lenbodyadd()">身体+1</button>
| <button onclick="stopspeed()">暂停</button>
<div class="div"></div>
</body>
</html>
<script>
var val={key:"d"};//默认向右移动
var key = document.getElementById("body");
key.onkeydown =f; //注册keydown事件处理函数
var divnum=1;//身体每节编号
var lenbody=5;//默认身体长度
var speed=1000;//默认速度
var obj=document.getElementById('obj');
var myWidth=parseInt(getComputedStyle(obj,null).getPropertyValue('width'));
var myHeight=parseInt(getComputedStyle(obj,null).getPropertyValue('height'));
var clientH= document.body.clientHeight;//获取body高
var clientW= document.body.clientWidth;//获取body宽
var foodLeft=0;//食物x坐标
var foodTop=0;//食物y坐标
function f (va) {
var e = e || window.event; //标准化事件处理
let s = '';//val.type + " " + val.key; //获取键盘事件类型和按下的值
let key=val.key;
val=va;
var myTop=parseInt(getComputedStyle(obj,null).getPropertyValue('top'));//获取精灵y坐标 parseInt(obj.style.top);
var myLeft=parseInt(getComputedStyle(obj,null).getPropertyValue('left'));//获取精灵x坐标 parseInt(obj.style.left);
var movePx=myWidth;//每次移动的距离
var move=0;
if(key=='w'){
move=myTop-movePx;//每次移动10
if(move<0 || move>clientH){
return false;//不能超过边界
}
obj.style.top=move+'px';
s='上';
}
if(key=='s'){
move=myTop+movePx;
if(move<0 || move>clientH-myHeight){
return false;
}
obj.style.top=move+'px';
s='下';
}
if(key=='a'){
move=myLeft-movePx;
if(move<0 || move>clientW){
return false;
}
obj.style.left=move+'px';
s='左';
}
if(key=='d'){
move=myLeft+movePx;
if(move<0 || move>clientW-myWidth){
return false;
}
obj.style.left=move+'px';
s='右';
}
obj.innerText=s;//设置文本 & 清楚之前的元素
console.log(move+' top:'+myTop+' left:'+myLeft);
//移除之前的身体元素，使有头有尾
if(document.getElementsByClassName('div').length>=lenbody){
document.getElementsByClassName('div')[0].parentNode.removeChild(document.getElementsByClassName('div')[0]);
}
//div身体元素随后移动
let newMyMoveWidth=myLeft;
let newMyMoveHeight=myTop;
let div=document.createElement('div');
div.className ='div';
div.style.width = myWidth + 'px';
div.style.height = myHeight + 'px';
div.style.position = 'absolute';
div.style.left=newMyMoveWidth + 'px';
div.style.top=newMyMoveHeight + 'px';
div.style.backgroundColor='blue';
div.innerHTML=divnum;//设置文字|方便识别div顺序
obj.parentNode.appendChild(div);
console.log('newMyMoveWidth:'+newMyMoveWidth+' newMyMoveHeight:'+newMyMoveHeight);
divnum++;
ifeatfood(myLeft,myTop);
} /*f() end--*/
//生成食物
function setfood(){
foodLeft=parseInt(Math.random()*clientW);
foodTop=parseInt(Math.random()*clientH);
let div=document.createElement('div');
div.id ='food';
div.style.width = myWidth + 'px';
div.style.height = myHeight + 'px';
div.style.position = 'absolute';
div.style.left= foodLeft + 'px';
div.style.top= foodTop + 'px';
div.style.backgroundColor='pink';
div.innerHTML='吃';//设置文字|方便识别div顺序
document.body.appendChild(div);
}
setfood();
//判断吃到食物
function ifeatfood(myLeft,myTop){
//判断是否吃到食物
if(Math.abs(foodLeft-myLeft)<myWidth && Math.abs(foodTop-myTop)<myHeight){
lenbodyadd();//长度+1
//删除旧food，生成新food
document.getElementById('food').parentNode.removeChild(document.getElementById('food'));
setfood();
}
}
//吃到食物身体加1
function lenbodyadd(){
lenbody++;
}
//保持移动
var setinter=setInterval((function move(){
f(val);
}),speed);
//设置移动速度
function setspeed(obj){
speed=obj.options[obj.options.selectedIndex].value;
stopspeed();
setinter=setInterval((function move(){
f(val);
}),speed);
}
//停止移动
function stopspeed(){
clearInterval(setinter);
}
//窗口改变时跳转-防f12
window.onresize = ()=>{
console.log(window.innerWidth,window.innerHeight);
//window.location.href='https://www.baidu.com';
}
</script>
更多有趣的经典小游戏实现专题，分享给大家：
C++经典小游戏汇总
python经典小游戏汇总
python俄罗斯方块游戏集合
JavaScript经典游戏 玩不停
java经典小游戏汇总
javascript经典小游戏汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
js,贪吃蛇
明霞山资源网 Design By www.htccd.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
明霞山资源网 Design By www.htccd.com
暂无评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。