原生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>

效果：

原生js写的贪吃蛇网页版游戏特效的更多相关文章

canvas原生js写的贪吃蛇
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
用js写一个贪吃蛇小游戏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
用canvas和原生js写的一个笨鸟先飞的小游戏（暂时只有一个关卡）
其中一个画布背景是一张图片,还有小鸟,两个管子的图片.暂时不知道怎么附上去就不添加了.这里只有源代码,css和js都是在html写着的,感觉比他们的容易吧,hah <!DOCTYPE html& ...
js贪吃蛇-简单版
分享个用原生js写的贪吃蛇,最近在学java,按照当年写的 js的思路,转换成java,换汤不换药 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
JavaScript与html5写的贪吃蛇完整代码
JavaScript与html5写的贪吃蛇完整代码查看运行效果可访问http://www.codesocang.com/texiao/youxitexiao/2014/0402/7045.html# ...
用原生js写一个"多动症"的简历
用原生js写一个"多动症"的简历预览地址源码地址最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...
原生 js 写分页
欢迎留言或者加本人QQ172360937咨询这段代码是用原生 js 写的一个分页的效果 <!doctype html> <html lang="en"> ...
用原生JS写移动动画案例及实际应用
js很强大相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的 ...

随机推荐

android adb install
环境:centos6.8 需要安装 root@localhost ~]# yum install libstdc++.so.6 1.下载安装包; http://pan.baidu.com/s/1skg ...
ieee80211w
80211w概述 1, WLAN网络在设计的时候就容易遭受各种类型的Denial of Service(DOS)攻击, a, 射频干扰(RF jamming) b, Spoofed Disconnec ...
jqurey 中dialog未定义问题
$(function () { $('#btnIndustry').click(function () { $.dialo ...
用python实现，冒泡排序演示
# -*- coding:utf-8 -*- import time from Tkinter import * a=[1,9,5,6,8,1] class CanvasDemo(): #n1=70 ...
libj 0.8.2 发布，Java/JavaScript API 的 C++ 实现
libj 0.8.2 增加了一些新的字符串相关的方法. libj 是一个跨平台的运行库,相当于提供了类似 Java/JavaScript API.libj 的内存管理是自动的,基于 shared_pt ...
Intellij IDEA Java web 项目搭建
Java web 项目搭建简介在上一节java web环境搭建中,我们配置了开发java web项目最基本的环境,现在我们将采用Spring MVC+Spring+Hibernate的架构搭建一个 ...
VS2013 生成安装文件
在VS2012之前,我们做安装包一般都是使用VS自带的安装包制作工具来创建安装包的,VS2012.VS2013以后,微软把这个去掉,集成使用了InstallShield进行安装包的制作了,虽然思路差不 ...
免费的HTML5版uploadify送上
相信有不少同学用过uploadify这一款文件上传插件,它支持多文件选择.能显示进度条.可配置性高,总体来说是比较好用的.官网有两个版本供下载,分别是flash版和HTML5版.不过令人惋惜的是,HT ...
Android（蓝牙）
因近期项目需求调试了Android蓝牙通讯接口,主要是两个终端作为服务端和客户端的通信,本文将部分重要知识点记录如下. 蓝牙是短距离无线通信,通常分经典蓝牙和低功耗蓝牙(即蓝牙4.0),两类蓝牙协议各 ...
JavaScript思维导图—流程控制
JavaScript思维导图-来自@王子墨http://julying.com/blog/the-features-of-javascript-language-summary-maps/

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

原生js写的贪吃蛇网页版游戏特效的更多相关文章

随机推荐

热门专题