JS Snake Web version of the game effect, the test of the picture switching process is very cool, I believe we must have played this classic games, but it is how to achieve the NA, interested friends to learn to learn it quickly
Run Effects chart:----------------------View Effects-----------------------
Tip: If you are not running properly in your browser, you can try switching browsing mode.
For everyone to share the JS Snake Web version of the game effect code is as follows
<body><title>js Snake Web version game effects </title></body> <script> Star = {init:function () {var bigdiv
= This.appendele (This.createle (), {w: ' 900 ', h: ' This.addstyle ', 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: ' N ', 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 = PA
Rseint (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.b
Ackgroundcolor = ' #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 (Numbe
R,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 = =) {return;}; Self.leftgo ();
Break Case 38:if (Star.keycode = 38 | | Star.keycode = =) {return;};
Self.upgo (); Case 39:if (star.keycode = 37 | | Star.keycode = =) {return;};
Self.rightgo (); Case 40:if (Star.keycode = 38 | | Star.keycode = =) {return;};
Self.downgo ();
}}, 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.foodNumbe
R/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.foodNumb
ER/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.foodNumbe
R/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.foodNumb
ER/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 (' wall up, total score: ' + (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]].con Cat (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 = ' Please select the checkpoint ' 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 = ' first ' + (i+1) + ' Guan ' Star.appendele (option,select); } star.appendele (select) Select.onchange = function () {selectvalue = Select.options[select.selectedindex].value | | sel ect.options[select.selectedindex].innerhtml var number = Selectvalue.match (/\d+/) [0] Star.timeInterval.speed = Parsei
NT (200/number);
Star.addstyle (select,{display: ' None '});
Star.init ();
}} </script>
above is for everyone to share the JS Snake Web version of the game special effects code, I hope you can like.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
