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 相关文章推荐
鼠标经过显示二级菜单js特效
Aug 13 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
js中arguments,caller,callee,apply的用法小结
Jan 28 Javascript
js清空form表单中的内容示例
May 20 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 Javascript
Vue中qs插件的使用详解
Feb 07 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 Javascript
JS实现手风琴特效
Nov 08 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读注册表
2006/10/09 PHP
PHP5.2下chunk_split()函数整数溢出漏洞 分析
2007/06/06 PHP
php checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
将CKfinder整合进CKEditor3.0的新方法
2010/01/10 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
2016/07/05 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
js 颜色选择插件
2017/01/23 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
Django组件cookie与session的具体使用
2019/06/05 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
Keras设置以及获取权重的实现
2020/06/19 Python
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
秋季运动会活动方案
2014/02/05 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
建筑节能汇报材料
2014/08/22 职场文书
节水倡议书
2015/01/19 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
仙境之桥观后感
2015/06/16 职场文书
公司档案管理制度
2015/08/05 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
Go语言编译原理之源码调试
2022/08/05 Golang