JS实现简易贪吃蛇游戏

网络编程 2025/10/25 佚名

3 2 1

本文实例为大家分享了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,贪吃蛇

标签：

js,贪吃蛇

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

岱庙资源网 Copyright www.zgmyg.com

评论“JS实现简易贪吃蛇游戏”

JS实现简易贪吃蛇游戏

暂无“JS实现简易贪吃蛇游戏”评论...

www.zgmyg.com 岱庙资源网

129,905影音资源

244,626技术资源

111,817软件资源

578,645站长资源

JS实现简易贪吃蛇游戏

js,贪吃蛇

JS实现按比例缩小图片宽高

通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法

评论“JS实现简易贪吃蛇游戏”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

JS实现简易贪吃蛇游戏

js,贪吃蛇

JS实现按比例缩小图片宽高

通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法

评论“JS实现简易贪吃蛇游戏”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存