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