一个本地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(){()函数(
数= parseInt(明星。数据。arrayselect { 0 }。getAttribute(数的));
如果(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,选择)
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();
}
}
希望本文能对大家的javascript程序设计有所帮助。