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

js贪吃蛇网页版游戏特效代码分享（挑战十关）

Posted in Javascript onAugust 24, 2015

js贪吃蛇网页版游戏特效，经测试图片切换过程非常酷，相信大家一定都玩过这个经典小游戏吧，但是它是怎么实现的呐，感兴趣的朋友快来学习学习吧

运行效果图：----------------------查看效果-----------------------

js贪吃蛇网页版游戏特效代码分享（挑战十关）

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的js贪吃蛇网页版游戏特效代码如下

<body><title>js贪吃蛇网页版游戏特效</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>

小编还为大家准备了精彩的专题：javascript经典小游戏汇总

以上就是为大家分享的js贪吃蛇网页版游戏特效代码，希望大家可以喜欢。

js贪吃蛇网页版游戏特效代码分享（挑战十关）

- Author -

lijiao

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

Javascript 相关文章推荐
js可突破windows弹退效果代码
Aug 09 Javascript
JavaScript toFixed() 方法
Apr 15 Javascript
JavaScript 产生不重复的随机数三种实现思路
Dec 13 Javascript
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
JavaScript 异步调用
Oct 25 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
使用react context 实现vue插槽slot功能
Jul 18 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 #Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 #Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 #Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 #Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 #Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 #Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 #Javascript
远程控制(1) Windows server 2016(6) Telnet(1) Windows server 2019(5) Windows server 2008(5) 动静分离(1) 远程登录(2) IIS(7) https(7) http(6)
You might like
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
php列出mysql表所有行和列的方法
2015/03/13 PHP
PHP解耦的三重境界（浅谈服务容器）
2017/03/13 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
jQuery-1.9.1源码分析系列（十一）DOM操作续之克隆节点
2015/12/01 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
python正则表达式抓取成语网站
2013/11/20 Python
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
python得到qq句柄,并显示在前台的方法
2018/10/14 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
容易被忽略的Python内置类型
2020/09/03 Python
python opencv肤色检测的实现示例
2020/12/21 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
2014年自我评价
2014/01/04 职场文书
项目经理聘任书
2014/03/29 职场文书
明信片寄语大全
2014/04/08 职场文书
政协会议宣传标语
2014/10/09 职场文书
退休教师欢送会致辞
2015/07/31 职场文书