当前位置:首页 > 日记 > 正文

js贪吃蛇网页游戏特效代码分享(挑战十)

js贪吃蛇网页游戏特效代码分享(挑战十)
js贪吃蛇游戏版效果。经过测试,图像切换过程非常酷。我相信你玩过这个经典游戏,但它是怎么发生的呢

运行:查看传导的效果和效果。
提示:如果不能在浏览器中正常运行,可以尝试切换浏览模式。

为你分享js的蛇网页游戏特效代码如下

js贪吃蛇网页特效特效

星= {
init:函数(){
无功bigdiv = this.appendele(this.addstyle(this.createle()),
{女:'900',H:'600,P:'absolute,T:10,我:500 }));
对于(var i = 0;i < 600 30;i +){
星的数据。arrayall {我} = { };
对于(var j = 0;j < 900 30;j + +){
div = this.addstyle(this.createle(),{女:(!{ 1,} 30:28),h!+ { 1 } 30:28),F:右,边境:'1px固体# 666 });
div.setattribute(若干,我* 30 + J)
This.appendEle(div,bigdiv)
星的数据。arrayall {我} { } = div {J}.;
}
}
bigdiv = this.appendele(this.addstyle(this.createle()),
{女:'900',H:'600,P:'absolute,T:10,我:500 }));
this.pusheleinselect(明星。数据。arrayall { 9 } { 15 },明星的数据。arrayall { 9 } { 14 },明星的数据。arrayall { 9 } { 13 })
This.keyBoard.apply(这个参数);
this.appearpoint();
This.left();
},
appearpoint:函数(){
VaR数组= { };
VaR值;
对于(var i = 0;i < 600;i + +){
如果(!this.hasinarray(明星。数据。arrayall { parseInt(我 / 30)} { 30 }我%。getAttribute(数的),明星的数据。arrayselect)){
ArrayIn.push(明星。数据。arrayall {我})
}
}
star.data.foodnumber =数= parseInt(Math.random()*数组长度);
this.givecolor(数)
},
GiveColor:功能(数){
var div =明星。数据。arrayall { parseInt(数/ 30)} { 30 }数%;
star.timeinterval.timeb = setInterval(){()函数(
如果(div.classname = = 'shanshuo){
div.classname =
div.style.backgroundcolor =# FFF
}
别的{
div.classname = 'shanshuo;
div.style.backgroundcolor =# F00
}
},500)
},
disappearcolor:函数(){
clearInterval(明星。时间。时间B);
星的数据。arrayall { parseInt(明星。数据。foodnumber / 30)} {明星。数据。foodnumber % 30 }。style.backgroundcolor =# F00;
},
HasInArray:功能(数量、阵列){
对于(var在数组中){
如果(数组{我}是{数组)
如果(this.hasinarray(数字,数组{我})){
返回true;
}
}
如果(数组{ } { }对象数组对象(数的)=号返回true);
}
返回false;
},
键盘:函数(){
var =;
document.onkeydown =功能(e){
E = E:window.event;
开关(能){
案例37:如果(star.keycode = 37 | | star.keycode = = 39)}(自左){ return;断裂;
案例38:如果(star.keycode = 38 | | star.keycode = = 40)}(自我的){ return;断裂;
案例39:如果(star.keycode = 37 | | star.keycode = = 39)}(自右){ return;断裂;
案例40:如果(star.keycode = 38 | | star.keycode = = 40)}(自我。下){ return;断裂;
}
}
},
左:函数(){
var,数字,自我=这个;
star.keycode = 37;
clearInterval(明星。时间。时间)
star.timeinterval.timea = setInterval(){()函数(
数=星。数据。arrayselect { 0 } getAttribute(数);
如果(数% 30 <= 0 | | self.hasinarray(1、明星。数据。arrayselect)){
Self.guanle();
}
别的{
如果(star.data.foodnumber = = 1){
self.pusheleinselect(明星。数据。arrayall { parseInt(明星。数据。foodnumber / 30)} {明星。数据。foodnumber % 30 });
Self.disappearColor();
Self.appearPoint();
}
别的{
div = star.data.arrayselect.pop();
div.style.background =# FFF;

self.pusheleinselect(明星。数据。arrayall { parseInt(数/ 30)} {编号为30-1 });
}
}
},明星。时间的速度)。
},
函数(){
var,数字,自我=这个;
star.keycode = 38;
clearInterval(明星。时间。时间)
star.timeinterval.timea = setInterval(){()函数(
Number = parseInt (Star.data.arraySelect{0}.getAttribute ('number'));

如果(parseInt(数/ 30)<= 0 | | self.hasinarray(number-30,明星的数据。arrayselect)){
Self.guanle();
}
别的{
如果(star.data.foodnumber = = number-30){
self.pusheleinselect(明星。数据。arrayall { parseInt(明星。数据。foodnumber / 30)} {明星。数据。foodnumber % 30 });
Self.disappearColor();
Self.appearPoint();
}
别的{
div = star.data.arrayselect.pop();
div.style.background =# FFF;
self.pusheleinselect(明星。数据。arrayall { parseInt(数/ 30)1 } { 30 }数%);
}
}
},明星。时间的速度)。
},
右:函数(){
var,数字,自我=这个;
star.keycode = 39;
clearInterval(明星。时间。时间)
star.timeinterval.timea = setInterval(){()函数(
数= parseInt(明星。数据。arrayselect { 0 }。getAttribute(数的));
如果(parseInt(编号为30)> = 29 | | self.hasinarray(数+ 1星的数据。arrayselect)){
Self.guanle();
}
别的{
如果(star.data.foodnumber = =数+ 1){
self.pusheleinselect(明星。数据。arrayall { parseInt(明星。数据。foodnumber / 30)} {明星。数据。foodnumber % 30 });
Self.disappearColor();
Self.appearPoint();
}
别的{
div = star.data.arrayselect.pop();
div.style.background =# FFF;
self.pusheleinselect(明星。数据。arrayall { parseInt(数/ 30)} {数% 30 + 1 });
}
}
},明星。时间的速度)。
},
函数(){
var,数字,自我=这个;
star.keycode = 40;
clearInterval(明星。时间。时间)
star.timeinterval.timea = setInterval(){()函数(
数= parseInt(明星。数据。arrayselect { 0 }。getAttribute(数的));
如果(parseInt(数/ 30)> = 19 | | self.hasinarray(数+ 30星的数据。arrayselect)){
Self.guanle();
}
别的{
如果(star.data.foodnumber = =数+ 30){
self.pusheleinselect(明星。数据。arrayall { parseInt(明星。数据。foodnumber / 30)} {明星。数据。foodnumber % 30 });
Self.disappearColor();
Self.appearPoint();
}
别的{
div = star.data.arrayselect.pop();
div.style.background =# FFF;
self.pusheleinselect(明星。数据。arrayall { parseInt(数/ 30)+ 1 } { 30 }数%);
}
}
},明星。时间的速度)。
},
Guanle:函数(){
警报(+墙,总计:(明星。数据。arrayselect。长度为3)* parseInt(1000 /明星。时间间隔。速度));
location.reload();
},
CreatEle:功能(标签){
VaR tagname = tag'div| |
返回document.createelement(TagName)
},
AppendEle:功能(ELE,父亲){
父亲,父亲document.body VaR document.documentelement | | | |
Father.appendChild(元)
返回元素;
},
addstyle:功能(ELE,CSS){
对于(在CSS中的var i){
开关(i){
case'b:ele.style.background = CSS {我};打破;
case'l:ele.style.left = CSS {我} + 'px打破的;
case'r:ele.style.right = CSS {我} + 'px打破的;
案例不:ele.style.top = CSS {我} + 'px打破的;
情况会:ele.style.down = CSS {我} + 'px打破的;
case'p:ele.style.position = CSS {我};打破;
case'w:ele.style.width = CSS {我} + 'px打破的;
case'h:ele.style.height = CSS {我} + 'px打破的;
case'f:ele.style.cssfloat = CSS {我};ele.style.stylefloat = CSS {我};打破;
默认值:样式{ };
}
}
返回元素;
},
pusheleinselect:函数(){
对于(var i = 0;i < arguments.length;i++){
star.data.arrayselect = { } } {我的论点。concat(明星。数据。arrayselect)
this.addstyle(参数{我},{乙:# F00})
}
}
}
星数据= {
ArrayAll:{ },
arrayselect:{ },
新:空,
foodnumber:0
}
时间间隔= {明星。
时间:零,
概念:空
}
star.keycode = 0;
在window.onload =函数(){
VaR选择= star.createle('select);
无功optiondefault = star.createle('option');
optiondefault.innerhtml =请选择门'
Star.appendEle (optionDefault, select)
star.addstyle(选择,{女:200、H:30,P:'absolute,左:40%,顶部:40%的})
对于(var i = 0;i < 10;i + +){
期权= star.createle('option');
option.innerhtml =+(i + 1)+管
Star.appendEle(选项,选择);
}
Star.appendEle(选择)
Select.onchange =函数(){
选择以价值=选择。选择{选择。SelectedIndex }。价值选择。选择{选择。SelectedIndex innerHTML | | }。
VaR值= selectvalue.match( / D /){ 0 }
star.timeinterval.speed = parseInt(200号);
star.addstyle(选择,{显示:不关});
Star.init();
}
}

以上是为大家分享js蛇网页版的游戏特效代码,希望大家能喜欢。

相关文章

菜鸟必看:AICS5将知道的技能

菜鸟必看:AICS5将知道的技能

菜鸟,必看,技能,电脑软件,以下盘点萧边AI CS5将知道菜鸟的技能是一个教程,非常值得一读,非常实用,推荐给爱,朋友可以跟着教程一起学习,喜欢的朋友可以跟着教程学习 菜鸟必看:AI CS5将知道的技能 解决白色和黑色浮雕技巧 1。选择 2。叠加在属性…

PS的雪花笔刷,只画美丽的冰水

PS的雪花笔刷,只画美丽的冰水

冰水,雪花,笔刷,美丽,电脑软件,本教程是向朋友介绍PS,简单地画出美丽的雪刷法。教程很简单。画笔画得很漂亮。推荐朋友一起学习。 本教程主要是向大家介绍如何用ps绘制美丽的冰冻雪笔刷。教程中的笔刷非常好。建议你喜欢你的朋友一起学习。 …

在单词返回符号技术词中使用查找和

在单词返回符号技术词中使用查找和

查找,删除,替换,单词,符号,快速批量删除软车 在菜单栏点击;具有编辑;;;,置换;发现里面的内容;输入^ L,替代不输入任何字符,然后全部替换,你可以删除整个文档里面的软回车。 把软回车换成硬回车 以上方法是删除所有的软回车车,但必要的段落仍然是需要的…

对于例外,QQ安全中心有哪些措施QQ常

对于例外,QQ安全中心有哪些措施QQ常

常见问题,安全中心,措施,有哪些,电脑软件,如果QQ安全中心检测到您的QQ账号异常行为,可以采取一些措施,比如在您的QQ账号登录账号:QQ需要输入验证码,登录前需要解除限制,这可以有效防止黑客自动登录恶意程序。 登录验证代码如下: 取消的限制如下…

Word2003应用框架,东亚字符底纹或放

Word2003应用框架,东亚字符底纹或放

教程,应用框架,字符,东亚,底纹,首先,使用微软Office语言设置的工具,东亚语言可以设置为微软Office的默认语言版本。 操作方法 1,关闭微软Word和所有微软Office程序。 2,在微软的Windows,请单击开始,指向或所有程序,指向office;微软;微软的办公室,指着…

Javascript节点和列表操作实例摘要

Javascript节点和列表操作实例摘要

列表,节点,操作,实例,摘要,本文的示例总结了Javascript节点和列表操作的方法,供大家参考: (1)创建新节点 (createdocumentfragment) / /创建一个DOM片段 (createElement) / /创建一个特定的元素 (createTextNode) / /创建一个文本节点 (2)添加、删除、替换…

2015最流行的搞笑签名和搞笑签名

2015最流行的搞笑签名和搞笑签名

搞笑,最流行,电脑软件,浏览器真的很想知道它们是否是默认浏览器。 如果一个女孩喜欢你,不管你喜欢不喜欢她,请好好对待她。毕竟,她是盲人。 不要问我为什么不回你身边,我不冷,只是冰冷的手。 我想这段时期结束时,咸鱼翻过来,谁用力过大,翻过来又回…

PS电影海报超级英雄超级动作片的合

PS电影海报超级英雄超级动作片的合

英雄,动作片,电影海报,电脑软件,PS,本教程是介绍朋友PS合成超级英雄动作片的海报,海报教程出来的真的很好,推荐我希望你能学会制作思路,发挥自己的想象力,学到更多的知识。 在本教程中,我们将教你如何使用PS图象处理软件合成酷超级英雄电影海报…

如何粘贴CAD图到逐字逐句的使用技

如何粘贴CAD图到逐字逐句的使用技

逐字逐句,技术,电脑软件,CAD,有时我们需要把CAD图粘贴到Word中,但是很多朋友不知道怎么做。事实上,这很简单。这里是萧边的一个小例子向你展示如何使用AutoCAD 2010为例做。 1,打开需要粘贴的CAD地图(这里随机绘制3个圆)。 2,按Ctrl + C(复制),框…

美丽的美丽的秋天的橙绿色PS图象处

美丽的美丽的秋天的橙绿色PS图象处

美丽,图象,处理软件,秋天,电脑软件,本文主要介绍了美丽的秋天的橙绿色的风景秀丽的PS图象处理软件,教程是非常简单的,你喜欢可以一起找朋友。 材料图片的主色为黄绿色,当高光区域为黄绿色到橙黄色;绿色稍亮点;然后以图像局部增加高光,整体处理可…

PS图象处理软件设计图酷的魔术风格

PS图象处理软件设计图酷的魔术风格

图象处理,魔术,海报,图酷,风格,用手绘添加到电商可以达到很多有趣的效果,虽然不是做游戏场景的境界,但至少你可以做你想做的,不怕被认为画面不到位。 用手绘添加到电商可以达到很多有趣的效果,虽然不是做游戏场景的境界,但至少你可以做你想做的…

WPS如何建立纵向打印WPS文本教程

WPS如何建立纵向打印WPS文本教程

教程,文本,纵向,电脑软件,WPS,我们经常使用WPS来处理文本并打印它。当我们有一些文章垂直打印时,我们如何设置它这里简要介绍WPS垂直打印设置方法。我希望能帮助你。 1,首先打开WPS,然后输入文本文件,然后单击开始打印页面设置页边距= = =。 2,…