首页
所有分类
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 相关文章推荐
做网页的一些技巧
Feb 01 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
vue实现计算器功能
Feb 22 Javascript
js实现拖拽与碰撞检测
Sep 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
DE1102(1) 胆机(1) SONY600GR(1) DE1103(2) ICOM(2) DE1107(3) DE1105(1) R9700(1) WR-800F(1) 239军机(1)
You might like
php获取文件名后缀常用方法小结
2015/02/24 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
JavaScript事件学习小结（三）js事件对象
2016/06/09 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
详解Nodejs mongoose
2018/06/10 NodeJs
vue-cli 引入jQuery，Bootstrap，popper的方法
2018/09/03 jQuery
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
python的re模块应用实例
2014/09/26 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
Python中正反斜杠（‘/’和‘\’）的意义与用法
2019/08/12 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
英国高档时尚男装购物网站：MR PORTER
2016/08/09 全球购物
应届毕业生应聘自荐信
2013/12/07 职场文书
求职简历中自我评价
2014/01/28 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
初中作文评语大全
2014/04/23 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
蛋糕店创业计划书
2014/05/06 职场文书
2014年办公室工作总结范文
2014/11/12 职场文书
企业党员岗位承诺书
2015/04/27 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
Python MNIST手写体识别详解与试练
2021/11/07 Python
sql server 累计求和实现代码
2022/02/28 SQL Server
铁拳制作人赞《铁拳7》老头环Mod：制作精良 但别弄了
2022/04/03 其他游戏