Web Bubble Hall 2.0 (graphical interface + computer to play) (JavaScript) _javascript tips

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" > <ptml> <pead> <title>hxyman popo Ver 1.0</title> <meta name= "generator" content= "EditPlus" > <meta name= "Author" content= "Hxyman" > < Style> <!--body {font-size:8pt font-family:arial}--> </style> </pead> &LT;BODY&G T <span id=canvas></span> <script language= "JavaScript" > <!--//web Bubble Hall (JavaScript)//2006-9-5//h Xyman qq:86815260 Email:hxyman at yahoo.com.cn function Player (x, y) {this.x = x; This.y = y; This.popo = 1; Bubble number This.remain = 1; Number of bubbles remaining This.power = 1; Power this.speed = 10; Speed this.state = 1; Normal-1 Suspended animation-2 true death-0} function Bulb (x, y) {this.display = 0; This.player =-1; this.wait = 0; How much time is left to blast this.power = 1; Power this.size = 40; This.size_max = 40; This.size_min = 38; this.tendency = 0; this.x = x; This.y = y; function Popo (ClassName) {this. Getrnd = function (Max) {return Math.Round (Math.random () *max)} ClassName = ClassName; This. Setmap = new Array (); This. Setmap[0] = new Array ("########", "#0kkkkk #", "K k#", "#kk K", "#kk K" # "," #kk kk1# "," ######## "); This. SETMAP[1] = new Array ("##########################", "#0 #kkkkkkkkkkkkkkkkkkkkkk#", "# KKK K kkkkkkkkkkkkkk# "," #kk KK K#kk KKK k# "," KK K#kkkkkkkkk # "," #kk KKK k#kk KK K k# "," # KK K#kkkkkkkkk # "," #kk KKK kkkk KKK k# "," # KK KKKKKKKKKKK # "," #kk KKK kkkk KKK k# "," KK Kkkkkkkkkkk # "," # KKK kkkkkkkkkkkkkkk# "," #kk KKK kkkk KKK k# "," KK Kkkkkkkkkkk # "," #kk KKK kkkkk# "," # KK Kkkkkkkkkkk # "," #kk KKK kkkk KKK k# "," # KK Kkkkkkkkkkk # ", "#kkkkk kkkkkkkkkkkkkkkkk1#", "##########################"); This. SETMAP[1] = new Array ("##########################", "#0 #kkkkkkkkkkkkkkkkkkkkkk#", "# KKK K kkkkkkkkkkkkkk# "," #kk KK K#kk KKK k# "," KK K#kkkkkkkkk # "," #kk KKK k#kk KK K k# "," # KK K#kkkkkkkkk # "," #kk KKK kkkk KKK k# "," # KK KKKKKKKKKKK # "," #kk KKK kkkk KKK k# "," KK Kkkkkkkkkkk # "," # KKK kkkkkkkkkkkkkkk# "," #kk KKK kkkk KKK k# "," KK Kkkkkkkkkkk # "," #kk KKK kkkk KKK ", "# KK Kkkkkkkkkkk #", "#kk KKK kkkk KKK k#", "KK Kkkkkkkkkkk #", "#kkkkk kkkkkkkkkkkkkkkkk1#", "##########################" ); This. SETMAP[2] = new Array ("##########################", "#0 kkkkkkkkkk#kkkkkkkkkkk#", "# KKKKKKKKK kk#kkkkkkkkkkk# "," #kkkkkkkkkkkk #kkkkkkkkkkk# "," #kkkkkkkkkkkk #kkkkkkkkkkk# "," #kkkkkkkkkkkk #kk kkkkkkkkk# "," #kkkkkkkkkkkk #kkkkkkkkkkk# "," #kkkkkkkkkkkkkkkkkkkkkkkk # "," #kkkkkkkkkkkkkkkkkkkk kkkk# "," #kkkkkkkkkkkk #kkkkkkkkkkk# "," #kkkkkkkkkkkk #kkkkkkkkkkk# "," #kkkkkkkkkkkk #kkkkkkkkkkk# "," #kkkkkkkkkkkk #kkkkkkkkkkk# "," #kkkkkkkkkkkk #kkkkkkkkkkk# "," #kkkkkkkkkkkk #kkkkkkkkkkk# ", "#kkkkkkkkkkkk #kkkkkkkkkk #", "#kkkkkkkkkkkk #kkkkkkkkk", "##########################"); Modeled above, you can add a custom map here to this. Mapindex = this. Getrnd (this. SETMAP.LENGTH-1); This. Bulbmax = 50; This. bulbwait = 30; This. Bulbburst = 1000; This. Playerrecovery = 6000; This. ITV = null; This. DeadsettImeout = new Array (); This.stop = new Array (0,0,0,0); This. Player = new Array (); This. Bulb = new Array (); for (var i=0; i<this. Bulbmax; i++) {this. Bulb[i] = new Bulb (0, 0); } this. Mapmaxx = this. Setmap[this. Mapindex][0].length; This. Mapmaxy = this. Setmap[this. Mapindex].length; This. Boxwidth = this. Boxheight = 30; Read Map this. Map = new Array (); for (var i=0; i<this. Mapmaxx; i++) {this. Map[i] = new Array (); for (var j=0; j<this. Mapmaxy; J + +) {this. MAP[I][J] = this. Setmap[this. Mapindex][j].charat (i)}}//props this. Equip = new Array ("", "", "", "", "N", "", "", "P", ""); This. Drawbox = function (x, y, id, str) {canvas.insertadjacenthtml ("BeforeEnd", "<span id=" "+id+" + (x*this). Boxwidth) + "; Top:" + (y*this. Boxheight) + "; width:" +this. boxwidth+ "; Height:" +this. Boxheight+ "; font-size:40px; ' > "+str+" </span>); } tHis. initbulb = function (n) {for (var i=0; i<n; i++) {canvas.insertadjacenthtml ("BeforeEnd") "<span id= ' bulb" +i+ "' +this. boxwidth+ "; Height:" +this. Boxheight+ "; font-size:40px;display:none;color:blue; ' > </span> "); }} this. Redrawbox = function (x, y, str) {document.getElementById ("box" +x+ "_" +y). InnerHTML = str; } this. Initmap = function () {for (var i=0; i<this. Mapmaxx; i++) {for (var j=0; j<this. Mapmaxy; J + +) {switch (this. Map[i][j]) {case ' # ': this. Drawbox (I, J, "box" +i+ "_" +j, "<span > </span>"); Break Case "": this. Drawbox (I, J, "box" +i+ "_" +j, ""); Break Case "K": this. Drawbox (I, J, "box" +i+ "_" +j, "<span > </spAn> "); Break Case "0": this. Drawbox (I, J, "box" +i+ "_" +j, ""); This. Drawbox (I, J, "Player0", "♀"); This. Player[this. Player.length] = new Player (i, j); Break Case "1": this. Drawbox (I, J, "box" +i+ "_" +j, ""); This. Drawbox (I, J, "Player1", "♂"); This. Player[this. Player.length] = new Player (i, j); Break }}} this. Campaign = function (self, other) {if (self = = other) return 0; if (this. Player[other].state = = 2) {this. player[other].state = 0; document.getElementById ("Player" +other). Style.display = ' None '; This. End (); Alert ("Player" +self+ "win!");} Move player this. Move = function (Addx, Addy, who) {if (this. Player[who].state!= 1) return 0; var old = this. Map[this. Player[who].x][this. PLAYER[WHO].Y]; This. player[who].x = Addx+this. player[who].x; This. Player[who].y = Addy+this. PLAYER[WHO].Y; var str = "01NP"; If Str.indexof (this. Map[this. Player[who].x][this. PLAYER[WHO].Y])!=-1) {document.getElementById ("Player" +who). Style.left = this. Player[who].x*this. Boxwidth; document.getElementById ("Player" +who). Style.top = this. Player[who].y*this. Boxheight; This. Map[this. Player[who].x-addx][this. Player[who].y-addy] = old; Switch (this. Map[this. Player[who].x][this. PLAYER[WHO].Y]) {case ' n ': this. Map[this. Player[who].x][this. PLAYER[WHO].Y] = ""; This. Redrawbox (this. Player[who].x, this. Player[who].y, ""); This. player[who].popo++; This.player[who].remain++; Break Case "P": this. Map[this. Player[who].x][this. PLAYER[WHO].Y] = ""; This. Redrawbox (this. Player[who].x, this. Player[who].y, ""); This. player[who].power++; Break for (var i=0; i<this. Player.length; i++) {if (this. player[i].x = = this. Player[who].x && this. Player[i].y = = this. PLAYER[WHO].Y) {this. Campaign (who, I); }} else {this. player[who].x-= ADDX; This. PLAYER[WHO].Y-= addy; }//Bomb this. Fix = function (WHO) {if (this. Player[who].state!= 1) return 0; var x = this. player[who].x; var y = this. PLAYER[WHO].Y; var str = "01"; if (this. Player[who].remain > 0 && str.iNdexof (this. Map[x][y]!=-1) {for (var i=0; i<this. Bulbmax; i++) {if (0 = this. Bulb[i].display) {this. Bulb[i] = new Bulb (x, y); This. Bulb[i].player = who; This. Bulb[i].power = this. Player[who].power; This. Bulb[i].wait = this. bulbwait; This. Bulb[i].display = 1; This. Map[x][y] = "B"; This. player[who].remain--; return 0; ()}}//Suspended animation this. Dead = function (n) {this. Player[n].state = 2; document.getElementById ("Player" +n). Style.color = "Gray"; Window.cleartimeout (this. Deadsettimeout[n]) this. Deadsettimeout[n] = settimeout (this. Classname+ ". player["+n+"].state=1; document.getElementById (' Player ' +n+ '). Style.color = '; ', this. Playerrecovery); }//The exact place of the explosionProcess this. Doburst = function (x, y, dir) {var getequip = ""; Switch (this. Map[x][y]) {case ' K ': switch (this. Equip[this. Getrnd (this. Equip.length-1)] {case ' n ': this. Map[x][y] = "n"; Getequip = "<span > </span>" break; Case "P": this. Map[x][y] = "P"; Getequip = "<span >☆</span>" break; Default:this. Map[x][y] = ""; } break; Case "#": this.stop[dir] = 1; return 0; Break Default:this. Map[x][y] = ""; } this. Redrawbox (x, y, "<span >¤</span>"); for (var i=0; i<this. Player.length; i++) {if (this. player[i].x = = x && this. Player[i].y = = y) {this. Dead (i); } settimeout (this. Classname+ ". Redrawbox ("+x+", "+y+", \ "" "+getequip+"); ", this. Bulbburst); }//even explode this. Otherburst = function (x, y, N) {for (var i=0; i!=n,i<this). Bulbmax; i++) {if (this. bulb[i].x = = x && this. Bulb[i].y = = y && this. Bulb[i].display = = 1) this. bulb[i].wait = 0; }//Explosion this. Burst = function (n) {var x = this. bulb[n].x; var y = this. BULB[N].Y; if (this. Player[this. Bulb[n].player].remain < this. Player[this. Bulb[n].player].popo) this. Player[this. bulb[n].player].remain++; This. Doburst (x, y); This.stop[0] = 0; THIS.STOP[1] = 0; THIS.STOP[2] = 0; THIS.STOP[3] = 0; for (var I=1; i<=this. Bulb[n].power; i++) {//right x = i; if (!this.stop[0] && x < this. MAPMAXX-1) {this. Doburst (x, y, 0); This. Otherburst (x, y, i); } x-= i; Up y = i; if (!this.stop[1] && y < this. MAPMAXY-1) {this. Doburst (x, y, 1); This. Otherburst (x, y, i); } y-= i; Left X-= i; if (!this.stop[2] && x > 0) {this. Doburst (x, Y, 2); This. Otherburst (x, y, i); } x + = i; Down Y-= i; if (!this.stop[3] && y > 0) {this. Doburst (x, Y, 3); This. Otherburst (x, y, i); } y = i; } document.getElementById ("Bulb" +n). Style.display = ' None '; This. Bulb[n].display = 0; The bomb status is constantly updated. Showbulb = function () { for (var i=0; i<this. Bulbmax; i++) {var obj = document.getElementById ("bulb" +i); if (this. bulb[i].wait--> 0) {obj.style.left = this. Bulb[i].x*this. Boxwidth; Obj.style.top = this. Bulb[i].y*this. Boxheight; Obj.style.display = ""; if (obj.tendency > 0) {this. bulb[i].size++; if (this. Bulb[i].size > this. Bulb[i].size_max) {obj.tendency = 0; }} else {this. bulb[i].size--; if (this. Bulb[i].size < this. Bulb[i].size_min) {obj.tendency = 1; } obj.style.fontSize = this. bulb[i].size+ "px"; else if (this. Bulb[i].displaY > 0) {this. Burst (i); }}} this. Control = function () {switch (event.keycode) {//player 1 case://left This. Move (-1, 0, 0); Break Case://up this. Move (0,-1, 0); Break Case A://right this. Move (1, 0, 0); Break Case://down this. Move (0, 1, 0); Break Case://enter this. Fix (0); Break Player 2 case://left this. Move (-1, 0, 1); Break Case://up this. Move (0,-1, 1); Break Case://right this. Move (1, 0, 1); Break Case A://down this. Move (0, 1, 1); Break Case://space this. Fix (1); Break } Event.returnvalue = false; } this. Begin = function () {this. ITV = Window.setinterval ("" +this). Classname+ ". Showbulb () ", 100); Main process} this. end = function () {Window.clearinterval (this. ITV); } var game = new Popo ("game"); Game. Initmap (); Game. Initbulb (game. Bulbmax); Game. Begin (); function Document.onkeydown () {game. Control ()}//--> </SCRIPT> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Thank you for your support, play like Rimifon Moderator said:
Player 1 's direction key: Asdw, bomb for space
Player 2 in the direction key keyboard direction keys, bombs for carriage
Can blow out green bubbles and red stars with power.

Graphics are all characters, so it's not very nice.


[2006-9-10]
I've changed it to a graphical interface for the next two days. Oh, almost can be genuine. But it's so slow when you add the sound. My voice is handled with a few bgsound, and when several play together it will be card. I do not know how to deal with good sound. To temporarily send a screenshot. And so the problem is solved again the whole send up:)