JS实现简易贪吃蛇游戏

本文实例为大家分享了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经典小游戏汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript实现简单的贪吃蛇游戏

    javascript实现简单的贪吃蛇游戏,功能很简单,代码也很实用,就不多废话了,小伙伴们参考注释吧. <html> <head> <meta http-equiv='content-type' content='text/html;charset=utf-8'> <title>贪吃蛇</title> <script type="text/javascript"> var map; //地图 var snake;

  • 20行js代码实现的贪吃蛇小游戏

    前言 最近在csdn上看到一位大神用20行代码就写出了一个贪吃蛇的小游戏,感觉被惊艳到了,就试着读了一下这段代码,阅读过程中不断为作者写法的巧妙而叫绝,其中我发现自己对运算符优先级和一些js的技巧不是很清楚,所以看完之后决定把思路分享出来,方便和我一样的小白学习. 我对代码稍稍做了些修改,并添加了一些注释,方便理解. 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="

  • javascript 贪吃蛇实现代码

    在习作的过程中尝试着贪吃蛇游戏用JS实现了.竟然成功了. 思路:使用10px*10px的div层担当"像素",然后使用40*40矩阵160个"像素"构成了游戏的界面. 下面是代码: 复制代码 代码如下: // JavaScript Document alert("键盘的方向键控制方向,空格键暂停.\nLIFE制作\nhttp://blog.csdn.net/anhulife"); // 添加基本的图形块,即160个10 * 10的层组成的二维矩阵

  • js编写“贪吃蛇”的小游戏

    贪吃蛇儿时的回忆,今天刚好学习到这了,就刚好做了一个,也是学习了吧,需要掌握的知识: 1.JS函数的熟练掌握, 2.JS数组的应用, 3.JS小部分AJAX的学习 4.JS中的splice.shift等一些函数的应用, 基本上就这些吧,下面提重点部分: 前端的页面,这里可自行布局,我这边提供一个我自己的布局: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

  • js实现贪吃蛇小游戏（容易理解）

    js实现贪吃蛇小游戏（容易理解）

    话不多说,请看代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <link rel="stylesheet" href="style.css"> <script src="style.js" >

  • javascript贪吃蛇完整版(源码)

    javascript贪吃蛇完整版 注释完整,面向对象 复制代码 代码如下: <html><head>    <title>贪吃蛇 Snake v2.4</title><style>    body{        font-size:9pt;    }    table{        border-collapse: collapse;        border:solid #333 1px;    }    td{        heigh

  • 原生js实现的贪吃蛇网页版游戏完整实例

    本文实例讲述了原生js实现的贪吃蛇网页版游戏.分享给大家供大家参考.具体实现方法如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生js写的贪吃蛇网页版游戏</title> </head> <body> </body> <sc

  • js贪吃蛇游戏实现思路和源码

    js贪吃蛇游戏实现思路和源码

    本文实例为大家分享了js贪吃蛇游戏的相关代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇小游戏</title> <style> *{margin:0; padding:0;} header { display: block; margin: 0 auto;

  • JS写的贪吃蛇游戏(个人练习)

    JS写的贪吃蛇游戏(个人练习)

    JS贪吃蛇游戏,个人练习之用,放在这备份一下,   复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS贪吃蛇-练习</t

  • JS实现的贪吃蛇游戏完整实例

    JS实现的贪吃蛇游戏完整实例

    本文实例讲述了JS实现的贪吃蛇游戏.分享给大家供大家参考,具体如下: 思想: 1.设计蛇:属性有宽.高.方向.状态(有多少节),方法:显示,跑 2.设计食物:属性宽.高 3.显示蛇:根据状态向地图里加元素 4.蛇跑起来:下一节到前一节的位置,蛇头根据方向变,删除原来的蛇,新建蛇:当出界时,死亡,初始化:当蛇头吃到自己的时候,死亡,初始化 5.食物被吃掉,蛇加一节,去掉原来的食物,生成新的食物 6.添加定时器,绑定按键 完整示例: <!doctype html> <html lang=&q

随机推荐