原生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 条评论
登录 后参与评论

相关文章

来自专栏技术栈大杂烩

Linux:终端提示符 (prompt) 不如期生效原因

先来简单介绍下, prompt是什么鬼? 顾名思义就是提示符的意思, 看起来和我们遥远, 但实际上只要是每个接触shell的童鞋, 都有看到, 那就是我们在输命...

1405
来自专栏owent

初识Rust

虽然我主要使用C++,但是最近也想学点现代化的新语言。初步想的是从golang和Rust里先选一个。

2044
来自专栏C/C++基础

CVTE2017秋季校招笔试题回忆(C++后台岗)

2016.09.06晚参加了CVTEC++岗的在线笔试。笔试题型分为不定向选择题和编程题,总共27题。其中不定项选择题为25道,编程题2道。其特点是不定项选择题...

1121
来自专栏web前端教室

9.6,*少芳-学习笔记【web前端零基础课】

在学习一些js内容后,完成了一部分网站首页的动作设置(搜索栏、侧边栏、轮播图),对js代码进行了封装,重新整理了js文件。(index.js\ma...

1257
来自专栏Google Dart

Flutter Widget框架之旅 顶

Flutter小部件采用现代反应式框架构建,从React中获得灵感。 中心思想是你从小部件中构建你的UI。 小组件描述了他们的视图在给定其当前配置和状态时应该看...

6142
来自专栏施炯的IoT开发专栏

《101 Windows Phone 7 Apps》读书笔记-BABY MILESTONES

课程内容 Ø图片的读写 Ø序列化 Ø双向数据绑定     Baby Milestones将婴儿从出生到2岁之间的发展关键里程碑通知给父母。该应用程序使得父母能...

18910
来自专栏漫漫前端路

记录面试中一些回答不够好的题(Vue 居多)

grid 学习:https://www.jianshu.com/p/d183265a8dad

4452
来自专栏互联网杂技

react+redux+webpack教程2

先弄个什么例子呢?如果是现代的MVVM框架,可能会用双向绑定来吸引你。那react有双向绑定吗? 没有。 也算是有吧,有插件。不过双向绑定跟react不是一个路...

3417
来自专栏杨建荣的学习笔记

通过编程控制CPU利用率(r4笔记第69天)

今天想起一个几年前学习过的程序,是在《编程之美》中提到的,是作为当时微软的面试题,写一个程序来控制CPU的利用率保持在50%,进一步延伸,能够写出程序来画出CP...

3475
来自专栏程序员的知识天地

python3.基础爬取网易云音乐【超详细版】

简单学习了python爬虫之后,我们就可以嘿咻嘿咻了...因为平时就是用网易云听的歌,也喜欢看歌里的评论,所以就爬网易云音乐评论吧!

1K2

扫码关注云+社区

领取腾讯云代金券