<Html> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> <Title> a browser game written by native js </title> </Head> <Body> </Body> <Script> Star = { Init: function (){ Var bigDiv = this. appendEle (this. addStyle (this. creatEle (), {W: '000000', h: '000000', p: 'absolute ', t: 10, l: 900 })); 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: '000000', h: '000000', p: 'absolute ', t: 10, l: 900 })); 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 = 'shanghai '){ 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 ('hit the wall, 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.doc umentElement 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.css Float = 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 = 'select level' Star. appendEle (optionDefault, select) Star. addStyle (select, {w: 200, h: 30, p: 'absolute ', left: '000000', top: '000000 '}) For (var I = 0; I <10; I ++ ){ Var option = Star. creatEle ('option '); Option. innerHTML = 'di' + (I + 1) + 'interval' 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> </Html> |