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++){
p = this.addstyle(this.createle(),{w:(!+[1,] ? 30 :28),h:(!+[1,] ? 30 :28),f:"left",border:"1px solid #666"});
p.setattribute("number", i*30+j)
this.appendele(p,bigdiv)
star.data.arrayall[i][j] = p;
}
}
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 p = star.data.arrayall[parseint(number/30)][number%30];
star.timeinterval.timeb = setinterval(function(){
if(p.classname == "shanshuo"){
p.classname = ""
p.style.backgroundcolor = "#fff"
}
else{
p.classname = "shanshuo";
p.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 p, 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{
p = star.data.arrayselect.pop();
p.style.background = "#fff";
self.pusheleinselect(star.data.arrayall[parseint(number/30)][number%30-1]);
}
}
},star.timeinterval.speed)
},
upgo:function(){
var p, 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{
p = star.data.arrayselect.pop();
p.style.background = "#fff";
self.pusheleinselect(star.data.arrayall[parseint(number/30)-1][number%30]);
}
}
},star.timeinterval.speed)
},
rightgo:function(){
var p, 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{
p = star.data.arrayselect.pop();
p.style.background = "#fff";
self.pusheleinselect(star.data.arrayall[parseint(number/30)][number%30+1]);
}
}
},star.timeinterval.speed)
},
downgo:function(){
var p, 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{
p = star.data.arrayselect.pop();
p.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制作网页版贪吃蛇游戏的详细内容。