专栏首页james大数据架构原生js写的贪吃蛇网页版游戏特效

原生js写的贪吃蛇网页版游戏特效

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<body><title>原生js写的贪吃蛇网页版游戏特效代码 demo by js.alixixi.com</title></body>
<script> 
  Star = {
    init:function(){
      var bigDiv = this.appendEle(this.addStyle(this.creatEle(),
        {w:'900',h:'600',p:'absolute',t:10,l:500}));
      for(var i = 0; i<600/30;i++){
        Star.data.arrayAll[i] = [];
        for(var j = 0; j<900/30; j++){
          div = this.addStyle(this.creatEle(),{w:(!+[1,] ? 30 :28),h:(!+[1,] ? 30 :28),f:'left',border:'1px solid #666'});
          div.setAttribute('number', i*30+j)
          this.appendEle(div,bigDiv)
          Star.data.arrayAll[i][j] = div;
        }
      }
      bigDiv = this.appendEle(this.addStyle(this.creatEle(),
        {w:'900',h:'600',p:'absolute',t:10,l:500}));


      this.pushEleInSelect(Star.data.arrayAll[9][15],Star.data.arrayAll[9][14],Star.data.arrayAll[9][13])
      this.keyBoard.apply(this,arguments);
      this.appearPoint();
      this.leftGo();
    },
    appearPoint:function(){
      var arrayIn = [];
      var number;
      for(var i = 0; i<600; i++){
        if(!this.hasInArray(Star.data.arrayAll[parseInt(i/30)][i%30].getAttribute('number'),Star.data.arraySelect)){
          arrayIn.push(Star.data.arrayAll[i])
        }
      }
      Star.data.foodNumber = number = parseInt(Math.random()*arrayIn.length);
      this.giveColor(number)
    },
    giveColor:function(number){
      var div = Star.data.arrayAll[parseInt(number/30)][number%30];
      Star.timeInterval.timeB = setInterval(function(){
        if(div.className == 'shanshuo'){
          div.className = ''
          div.style.backgroundColor = '#fff'
        }
        else{
          div.className = 'shanshuo';
          div.style.backgroundColor = '#f00'
        }
      },500)
    },
    disappearColor:function(){
      clearInterval(Star.timeInterval.timeB);
      Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30].style.backgroundColor = '#f00';
    },
    hasInArray:function(number,array){
      for(var i in array){
        if(array[i] instanceof Array){
          if(this.hasInArray(number,array[i])){
            return true;
          }
        }
        if(array[i].getAttribute && array[i].getAttribute('number') == number) return true;
      }
      return false;
    },
    keyBoard:function(){
      var self = this;
      document.onkeydown = function(e){
        e = e? e : window.event;
        switch(e.keyCode){
          case 37: if(Star.keycode == 37 || Star.keycode == 39){return;};  self.leftGo(); break;
          case 38: if(Star.keycode == 38 || Star.keycode == 40){return;};  self.upGo();break;
          case 39: if(Star.keycode == 37 || Star.keycode == 39){return;};  self.rightGo();break;
          case 40: if(Star.keycode == 38 || Star.keycode == 40){return;};  self.downGo();break;
        }
      }
    },
    leftGo:function(){
      var div, number , self = this;
      Star.keycode = 37;
      clearInterval(Star.timeInterval.timeA)
      Star.timeInterval.timeA = setInterval(function(){
        number = Star.data.arraySelect[0].getAttribute('number');
        if(number%30<=0 || self.hasInArray(number-1,Star.data.arraySelect)){
          self.guanle();
        }
        else{
          if(Star.data.foodNumber == number-1){
            self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]);
            self.disappearColor();
            self.appearPoint();
          }
          else{
            div = Star.data.arraySelect.pop();
            div.style.background = '#fff';

            self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)][number%30-1]);
          }
        }
      },Star.timeInterval.speed)
    },
    upGo:function(){
      var div, number , self = this;
      Star.keycode = 38;
      clearInterval(Star.timeInterval.timeA)
      Star.timeInterval.timeA = setInterval(function(){
        number = parseInt(Star.data.arraySelect[0].getAttribute('number'));

        if(parseInt(number/30)<=0 || self.hasInArray(number-30,Star.data.arraySelect)){
          self.guanle();
        }
        else{
          if(Star.data.foodNumber == number-30){
            self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]);
            self.disappearColor();
            self.appearPoint();
          }
          else{
            div = Star.data.arraySelect.pop();
            div.style.background = '#fff';
            self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)-1][number%30]);
          }
        }
      },Star.timeInterval.speed)
    },
    rightGo:function(){
      var div, number , self = this;
      Star.keycode = 39;
      clearInterval(Star.timeInterval.timeA)
      Star.timeInterval.timeA = setInterval(function(){
        number = parseInt(Star.data.arraySelect[0].getAttribute('number'));
        if(parseInt(number%30)>=29 || self.hasInArray(number+1,Star.data.arraySelect)){
          self.guanle();
        }
        else{
          if(Star.data.foodNumber == number+1){
            self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]);
            self.disappearColor();
            self.appearPoint();
          }
          else{
            div = Star.data.arraySelect.pop();
            div.style.background = '#fff';
            self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)][number%30+1]);
          }
        }
      },Star.timeInterval.speed)
    },
    downGo:function(){
      var div, number , self = this;
      Star.keycode = 40;
      clearInterval(Star.timeInterval.timeA)
      Star.timeInterval.timeA = setInterval(function(){
        number = parseInt(Star.data.arraySelect[0].getAttribute('number'));
        if(parseInt(number/30)>=19 || self.hasInArray(number+30,Star.data.arraySelect)){
          self.guanle();
        }
        else{
          if(Star.data.foodNumber == number+30){
            self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]);
            self.disappearColor();
            self.appearPoint();
          }
          else{
            div = Star.data.arraySelect.pop();
            div.style.background = '#fff';
            self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)+1][number%30]);
          }
        }
      },Star.timeInterval.speed)
    },
    guanle:function(){
      alert('撞墙了,总分:' + (Star.data.arraySelect.length-3) * parseInt(1000 / Star.timeInterval.speed));
      location.reload();
    },
    creatEle:function(tag){
      var tagName = tag || 'DIV'
      return document.createElement(tagName)
    },
    appendEle:function(ele,father){
      var father = father || document.body || document.documentElement
      father.appendChild(ele)
      return ele;
    },
    addStyle:function(ele,css){
      for(var i in css){
        switch(i){
          case 'b' : ele.style.background = css[i];       break;
          case 'l' : ele.style.left       = css[i]+'px';  break;
          case 'r' : ele.style.right      = css[i]+'px';  break;
          case 't' : ele.style.top        = css[i]+'px';  break;
          case 'd' : ele.style.down       = css[i]+'px';  break;
          case 'p' : ele.style.position   = css[i];       break;
          case 'w' : ele.style.width      = css[i]+'px';  break;
          case 'h' : ele.style.height     = css[i]+'px';  break;
          case 'f' : ele.style.cssFloat   = css[i];  ele.style.styleFloat   = css[i];     break;
          default  : ele.style[i]         = css[i];       break;
        }
      }
      return ele;
    },
    pushEleInSelect:function(){
      for(var i = 0; i<arguments.length; i++){
        Star.data.arraySelect = [arguments[i]].concat(Star.data.arraySelect)
        this.addStyle(arguments[i],{b:'#f00'})
      }
    }
  }
  Star.data={
    arrayAll : [],
    arraySelect:[],
    newPoint:null,
    foodNumber:0
  }
  Star.timeInterval={
    timeA:null,
    timeB:null
  }
  Star.keycode = 0;


  window.onload = function(){
    var select = Star.creatEle('select');
    var optionDefault = Star.creatEle('option');
    optionDefault.innerHTML = '请选择关卡'
    Star.appendEle(optionDefault,select)
    Star.addStyle(select,{w:200,h:30,p:'absolute',left:'40%',top:'40%'})
    for(var i = 0 ; i <10 ; i++){
      var option = Star.creatEle('option');
      option.innerHTML = '第' + (i+1) + '关'
      Star.appendEle(option,select);
    }
    Star.appendEle(select)
    select.onchange = function(){
      selectValue = select.options[select.selectedIndex].value || select.options[select.selectedIndex].innerHTML
      var number = selectValue.match(/\d+/)[0]
      Star.timeInterval.speed = parseInt(200/number);
      Star.addStyle(select,{display:'none'});
      Star.init();
    }
  }

</script>

效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Access数据库多表连接查询

    第一次在Access中写多表查询,就按照MS数据库中的写法,结果报语法错,原来Access的多表连接查询是不一样的 表A、B、C,A关联B,B关联C,均用ID键...

    欢醉
  • 你必须要了解的大数据潮流下的机器学习及应用场景

      机器学习是一门人工智能的科学,能通过经验自动改进的计算机算法的研究。       机器学习是一个多学科交叉的领域,会涉及到计算机、信息学、数学、统计学、神经...

    欢醉
  • 算法系列

      算法对程序员来说是熟悉的陌生人,编过大量代码后突然被哪个问到算法是什么也有时不知从何说起,简单来说是没有好好总结过仔细分析过。大学里面导师整天苦口婆心的教导...

    欢醉
  • GitHub最受欢迎深度学习应用项目 Top 5

    1 Neural Style Star:12122 Github:https://github.com/jcjohnson/neural-style 这个项目是...

    昱良
  • linux下 mongodb安装和启动过程

    一  转到目录解压缩下载的压缩包 lamp@QA-clg server$ tar -zxvf mongodb.tgz 二 安装后查看: [la...

    用户5166556
  • WPF中UI元素跨线程访问

    dotnet中线程资源独占UI元素,不能跨线程访问,可以通过Dispatcher.Invoke的方式调用,但实际处理还是UI线程中,任务量比较大的数据会增加线程...

    sofu456
  • 2-5 R语言基础 factor

    #因子:分类数据 #有序和无序 #整数向量+标签label #Male/Female #常用于lm(),glm()

    hankleo
  • “杭州5G之城”揭幕 安恒信息出任浙江5G产业联盟副理事长单位

    近年来,随着信息经济和数字经济的飞速发展,全国各地通信行业进一步加大科技创新力度,在4G之后,进一步加快5G产业的部署。

    安恒信息
  • 札记:android手势识别,MotionEvent

    摘要 本文是手势识别输入事件处理的完整学习记录。内容包括输入事件InputEvent响应方式,触摸事件MotionEvent的概念和使用,触摸事件的动作分类、多...

    用户1172465
  • Spark Streaming流式计算的WordCount入门

    我是攻城师

扫码关注云+社区

领取腾讯云代金券