<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Native JS Write the snake Web version of the game </title>
<body><div>http://www.999jiujiu.com/</div></body>
<script>
Star = {
Init:function () {
var bigdiv = This.appendele (This.addstyle (This.createle (),
{w: ' absolute ', H: ' + ', p: ' N ', 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: ' absolute ', H: ' + ', p: ' N ', 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 = 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 (); break;
Case 39:if (Star.keycode = = 37 | | Star.keycode = =) {return;}; Self.rightgo (); break;
Case 40:if (Star.keycode = = 38 | | Star.keycode = = +) {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 (' 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]].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 = ' Please select a level '
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) + ' off '
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>
Native JS Write the snake Web version of the game