JS实现简易贪吃蛇游戏


Posted in Javascript onAugust 24, 2020

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 Javascript
js实现照片墙功能实例
Feb 05 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 Javascript
详解JavaScript的BUG和错误
May 07 Javascript
js/jQuery实现全选效果
Jun 17 jQuery
vue iview多张图片大图预览、缩放翻转
Jul 13 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 #Javascript
Node.js 中判断一个文件是否存在
Aug 24 #Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 #Javascript
在Vue中使用HOC模式的实现
Aug 23 #Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 #Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 #Javascript
vue中watch和computed的区别与使用方法
Aug 23 #Javascript
You might like
php实现网站插件机制的方法
2009/11/10 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
json原理分析及实例介绍
2012/11/29 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
决策树的python实现方法
2014/11/18 Python
对python 调用类属性的方法详解
2019/07/02 Python
如何给Python代码进行加密
2020/01/10 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
pycharm导入源码的具体步骤
2020/08/04 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
室内设计专业个人的自我评价
2013/10/19 职场文书
应聘编辑职位自荐信范文
2014/01/05 职场文书
护士毕业实习感言
2014/03/05 职场文书
市场营销工作计划书
2014/05/06 职场文书
工会换届选举方案
2014/05/21 职场文书
员工生日会策划方案
2014/06/14 职场文书
企业法人代表证明书
2014/09/27 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
家装业务员岗位职责
2015/04/03 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书