首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

纯js和css完成贪吃蛇小游戏demo

Posted in Javascript onSeptember 01, 2016

本文实例为大家分享了js贪吃蛇小游戏demo，纯js和css完成，供大家参考，具体内容如下

<!doctype html>
<html>
<meta charset="utf-8">
 <head>
<style>
*{
  margin: 0;
  padding:0;
}
  .content{
    position: absolute;
    width: 500px;
    height: 500px;
    background-color: #212121;
  }
  .colo{
    width: 48px;
    height: 48px;
    background-color: #E6E6E6;
    border: 1px solid #466F85;
    float: left;
  }
  .head{
    /*background-color: #49DF85;*/
    background-image: url(./img/22.jpg);
    border-radius: 10px;
    background-size: 100%;
    position: absolute;
    height: 48px;
    width: 48px;
  }
   .fruit{
    /*background-color: #49DF85;*/
    background-image: url(./img/fruit.jpg);
    background-size: 100%;
    position: absolute;
    height: 48px;
    width: 48px;
  }
  .score{
    font-family: '黑体';
    left:600px;
    position: absolute;
    height: 50px;
    width: 200px;
    background-color: #212121;
    color: #FFF;
  }
  .newbody{
    position: absolute;
    width: 48px;
    height: 48px;
    background-image: url(./img/33.jpg);
    background-size: 100%;
  }
  .btn{
    font-family: '黑体';
    left:600px;
    top: 100px;
    position: absolute;
    height: 50px;
    width: 100px;
    background-color: #1193FF;
    color: #FFF;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    cursor: pointer;
    border-radius: 15px;
  }
</style>
</head>

<body>
<div class="content" id="content">


</div>
<div class="btn" id="stop">停止游戏</div>
<div class="btn" style="top:180px" id="start">开启游戏</div>
<div class="btn" style="top:380px" id="gameWay">游戏状态：</div>
<div class="score" id="score" >分数：<p></p></div>
<script type="text/javascript" >
//添加状态
var stop=document.getElementById('stop');
var start=document.getElementById("start");
var gameWay=document.getElementById('gameWay');
start.onclick=function(){
  head.value='2';
  incident=setInterval(move,200);
}
stop.onclick=function(){
  clearInterval(incident);
}
//


var content=document.getElementById("content");
  for(var i=0;i<100;i++){
    var div=document.createElement("div");
    div.className="colo";
    content.appendChild(div);
  }
var scoreId=document.getElementById("score");
var scoreNum=0;
var scoreCon=document.createElement("p");
// var scoreText=document.createTextNode(scoreNum);
// scoreCon.appendChild(scoreText);
scoreId.appendChild(scoreCon);

var head=null; //保存蛇头
var fruit=null; //保存果实
var dir=null;   //保存蛇的方向
var body=new Array(); //保存蛇身体增加的部分
var bodyNum=0;  //记录创建了多少个body
//随机创建head和fruit到content里面

function createType(type){
    if(type==1){
      //创建随机数
      var row = parseInt(Math.random() * 6 +2);
      var col = parseInt(Math.random() * 6 +2);
      head=document.createElement("div");
      head.className="head";   
      head.style.top=row*50+"px";
      head.style.left=col*50+"px";
      content.appendChild(head);
      // head.style.top=;
      // head.style.left=;
    }
    if(type==2){
      //创建随机数
      var row = parseInt(Math.random() * 6 +2);
      var col = parseInt(Math.random() * 6 +2);
      fruit=document.createElement("div");
      fruit.className="fruit";  
      fruit.style.width="50";
      fruit.style.height="50";
      fruit.style.backgroundColor="#EA2000";
      fruit.style.top=row*50+"px";
      fruit.style.left=col*50+"px";
      content.appendChild(fruit);
    }
  }
//调用创建的道具方法
createType(1);
createType(2);
//蛇头移动函数
var direction=new Array; //存每个新建Body的方向
//转换数
var numss=0;

//自动滑动事件
function move(){
  if(head.value!=""){
      switch(head.value){
      case '1':
        head.style.top=head.offsetTop-50+"px";
      break;
      case '2':
        head.style.top=head.offsetTop+50+"px";
      break;
      case '3':
        head.style.left=head.offsetLeft-50+"px";
      break;
      case '4':
        head.style.left=head.offsetLeft+50+"px";
      break;
      }
  }
  console.log(head.offsetTop);
  if(head.offsetTop>500){
      alert("超出边界！请重新游戏"); 
  }
  // if(head==null){
  // if(head.style.top<0||head.style.top>500||head.style.left<0||head.style.left>500){
 //    alert("超出边界！请重新游戏"); 
 //   }

  if(body.length!=0){
    for(var i=body.length-1;i>=0;i--){
      if(i==0){
        body[0].value=head.value;
      }else{
        body[i].value=body[i-1].value;
      }
    }
  }
  //转换方向

  //如果成功吃掉果实后事件
  if(head.style.top==fruit.style.top&&head.style.left==fruit.style.left){
      var row = parseInt(Math.random() * 6 +2);
      var col = parseInt(Math.random() * 6 +2);
      fruit.style.top=row*50+"px";
      fruit.style.left=col*50+"px";
      //记录分数
      scoreNum=scoreNum+1;
      document.getElementsByTagName('p')[0].innerText="";
      document.getElementsByTagName('p')[0].innerText=scoreNum;

      //创建body部分
      bodyAdd(head.style.top,head.style.left,head.value);
  }
  //控制body跟随head运动部分

     //有身体的时候要动态改变body的值
    if(body.length>0){
      var body01=document.getElementById('body01');
      body01.style.top=head.offsetTop+"px";
      body01.style.left=head.offsetLeft+"px";
        switch(head.value){
        case '1':
          body01.style.top=head.offsetTop+50+"px";
          body01.style.left=head.offsetLeft+"px";
        break;
        case '2':
          body01.style.top=head.offsetTop-50+"px";
          body01.style.left=head.offsetLeft+"px";
        break;
        case '3':
          body01.style.left=head.offsetLeft+50+"px";
          body01.style.top=head.offsetTop+"px";
        break;
        case '4':
          body01.style.left=head.offsetLeft-50+"px";
          body01.style.top=head.offsetTop+"px";
        break;
      }

    }
    if(body.length>1){
      body[bodyNum-1].value=body[bodyNum-2].value;
      for(var i=1;i<body.length;i++){
        var nu=i+1;
        var bodyId=document.getElementById('body0'+nu);
        var body_Id=document.getElementById('body0'+i);
        bodyId.style.top=body_Id.offsetTop+"px";
        bodyId.style.left=body_Id.offsetLeft+"px";
        switch(body[bodyNum-(body.length-i)].value){
          case '1':
            bodyId.style.top=body_Id.offsetTop+50+"px";
            bodyId.style.left=body_Id.offsetLeft+"px";
          break;
          case '2':
            bodyId.style.top=body_Id.offsetTop-50+"px";
            bodyId.style.left=body_Id.offsetLeft+"px";
          break;
          case '3':
            bodyId.style.left=body_Id.offsetLeft+50+"px";
            bodyId.style.top=body_Id.offsetTop+"px";
          break;
          case '4':
            bodyId.style.left=body_Id.offsetLeft-50+"px";
            bodyId.style.top=body_Id.offsetTop+"px";
          break;
      }
    }
   }
}





//创建按钮时间
document.onkeydown=function(){
  var code=event.keyCode;
  switch (code){
    //向上
    case 38:
      head.value='1';
    break;
    //向下
    case 40:
      head.value='2';
    break;
    //向左
    case 37:
      head.value='3';
    break;
    //向右
    case 39:
      head.value='4';
    break;
    console.log(head.value);
  }
}
//身体增加事件
function bodyAdd(top,left,dir){
  if(dir!=""){
    dir=dir;
  }
  else{
    dir=head.value;
  }
  //首次创建body
  if(bodyNum==0){
    var newbody=document.createElement('div');
    newbody.className="newbody";
    newbody.id="body01";
     switch (dir){
      case '1':
        newbody.style.top=head.offsetTop-50+'px';
        newbody.style.left=head.offsetLeft+"px";
      break;
      case '2':
        newbody.style.top=head.offsetTop+50+'px';
        newbody.style.left=head.offsetLeft+"px";
      break;
      case '3':
        newbody.style.left=head.offsetLeft-50+'px';
        newbody.style.top=head.offsetTop+"px";
      break;
      case '4':
        newbody.style.left=head.offsetLeft+50+'px';
        newbody.style.top=head.offsetTop+"px";
      break;
     }
    content.appendChild(newbody);
    bodyNum=bodyNum+1;
    body.push(newbody);

  }else{         
    //第二次及多次创建
    var newbody=document.createElement('div');
    newbody.className="newbody";
    newbody.id="body0"+(body.length+1);
        switch (dir){
        case '1':
          newbody.style.top=body[body.length-1].offsetTop-50+'px';
          newbody.style.left=body[body.length-1].offsetLeft+"px";
        break;
        case '2':
          newbody.style.top=body[body.length-1].offsetTop+50+'px';
          newbody.style.left=body[body.length-1].offsetLeft+"px";
        break;
        case '3':
          newbody.style.left=body[body.length-1].offsetLeft-50+'px';
          newbody.style.top=body[body.length-1].offsetTop+"px";
        break;
        case '4':
          newbody.style.left=body[body.length-1].offsetLeft+50+'px';
          newbody.style.top=body[body.length-1].offsetTop+"px";
        break;
    }
    content.appendChild(newbody);
    bodyNum=bodyNum+1;
    body.push(newbody);

  }
  // body.push(content);
}
//超出边界，重置信息事件
function initialize(){
    //重置果实
    var row = parseInt(Math.random() * 6 +2);
    var col = parseInt(Math.random() * 6 +2);
    fruit.style.top=row*50+"px";
    fruit.style.left=col*50+"px";
    //记录分数
    document.getElementsByTagName('p')[0].innerText="";
    //重置贪食蛇


}
var incident;
incident=setInterval(move,200);
//附加操作
// var btn=document.getElementById('btn');
// btn.onclick=function(){
// clearInterval(incident);
// }

//

</script>
 </body>
</html>

还在不断完善中，希望对大家的学习有所帮助。

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

纯js和css完成贪吃蛇小游戏demo

- Author -

dexing07

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 操作cookies及正确使用cookies的属性
Oct 15 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
range 标准化之获取
Aug 28 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
JS定时器实例
Apr 17 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
详解vee-validate的使用个人小结
Jun 07 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
在web中js实现类似excel的表格控件
Sep 01 #Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 #Javascript
AngularJs 指令详解及示例代码
Sep 01 #Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
Sep 01 #Javascript
JS实现列表的响应式排版(推荐)
Sep 01 #Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 #Javascript
JavaScript中子对象访问父对象的方式详解
Sep 01 #Javascript
主持词(345) 保证书(97) 广告词(105) 请假条(31) 感谢信(72) 责任书(145) 活动总结(790) 建议书(203) 倡议书(159) 决心书(42)
You might like
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
可以将word转成html的js代码
2010/04/11 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
Python multiprocessing.Manager介绍和实例（进程间共享数据）
2014/11/21 Python
python中使用序列的方法
2015/08/03 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
python中的for循环
2018/09/28 Python
python调用其他文件函数或类的示例
2019/07/16 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
python实现IOU计算案例
2020/04/12 Python
python模拟实现分发扑克牌
2020/04/22 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
美国汽车零部件和配件网站：CarParts
2019/03/13 全球购物
Java面试题：为什么要用Java
2012/05/11 面试题
优秀体育委员自荐书
2014/01/31 职场文书
员工考核管理制度
2014/02/02 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
生日答谢词
2015/01/05 职场文书
内勤岗位职责范本
2015/04/13 职场文书