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 相关文章推荐
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
浅谈js基本数据类型和typeof
Aug 09 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 Javascript
vue项目中微信登录的实现操作
Sep 08 Javascript
vue使用element-ui实现表单验证
Dec 13 Vue.js
通过高德地图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
win7安装php框架Yii的方法
2016/01/25 PHP
PHP文件上传类实例详解
2016/04/08 PHP
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
js模糊查询实例分享
2016/12/26 Javascript
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
vue实现按需加载组件及异步组件功能
2019/05/27 Javascript
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
Python3基础之输入和输出实例分析
2014/08/18 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
python如何求解两数的最大公约数
2018/09/27 Python
简单了解django索引的相关知识
2019/07/17 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
村委会贫困证明范文
2014/09/21 职场文书
2014年文员工作总结
2014/11/18 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸