首页
所有分类
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 相关文章推荐
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
Aug 02 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
javascript与css3动画结合使用小结
Mar 11 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 Javascript
JS面向对象（3）之Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法
Feb 25 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
JS重载实现方法分析
Dec 16 Javascript
ES6入门教程之Class和Module详解
May 17 Javascript
vue.js或js实现中文A-Z排序的方法
Mar 08 Javascript
微信小程序实现图片上传
May 23 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
Servlet面试题(20) Delphi面试题(13) Javascript面试题(44) PYTHON面试题(27) UNIX面试题(27) J2EE面试题(19) 自我鉴定(671) MySQL面试题(19) SOA面试题(9) Ruby面试题(15)
You might like
新手学PHP之数据库操作详解及乱码解决！
2007/01/02 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
JavaScript 继承详解（一）
2009/07/13 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
js弹出层之1：JQuery.Boxy (二)
2011/10/06 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
javascript实现的左右无缝滚动效果
2016/09/19 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
Python实现简单多线程任务队列
2016/02/27 Python
Python爬取网页中的图片（搜狗图片）详解
2017/03/23 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
华为旗下电子商务平台：华为商城
2016/08/06 全球购物
微软英国官方网站：Microsoft英国
2016/10/15 全球购物
医学院护理专业应届生求职信
2013/11/12 职场文书
办公室文员工作自我评价
2013/12/01 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
业务员岗位职责范本
2015/04/03 职场文书
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js