首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网络编程
JavaScript
正文
WEB泡泡堂2.0（图形界面+电脑对玩）(javascript)
所属分类：
网络编程
/
JavaScript
阅读数： 1000
收藏 0
赞 0
分享
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title>Hxyman Popo Ver 1.0</title><meta name="Generator" content="EditPlus"><meta name="Author" content="Hxyman"></head><body><span id=Canvas></span><SCRIPT LANGUAGE="JavaScript"><!--//WEB泡泡堂(javascript)//2006-9-5 //Hxyman QQ:86815260 EMail:Hxyman at yahoo.com.cnfunction Player(x, y){ this.x = x; this.y = y; this.popo = 1; //可放泡泡数 this.remain = 1; //剩余泡泡数 this.power = 1; //威力 this.speed = 10; //速度 this.state = 1; //正常-1 假死-2 真死-0}function Bulb(x, y){ this.display = 0; this.player = -1; this.wait = 0; //还剩多少时间爆破 this.power = 1; //威力 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)} this.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 kkkkkkkkkkkkkkk#", "#kk kk k#kk kkk k#", "# kk k#kkkkkkkkk #", "#kk kkk k#kk kkk 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 k#", "# kk kkkkkkkkkkk #", "#kk kkk kkkk kkk k#", "# kk kkkkkkkkkkk #", "#kkkkk kkkkkkkkkkkkkkkkk1#", "##########################" ); this.SetMap[1] = new Array( "##########################", "#0#kkkkkkkkkkkkkkkkkkkkkk#", "# kkk kkkkkkkkkkkkkkk#", "#kk kk k#kk kkk k#", "# kk k#kkkkkkkkk #", "#kk kkk k#kk kkk 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 k#", "# kk kkkkkkkkkkk #", "#kk kkk kkkk kkk k#", "# kk kkkkkkkkkkk #", "#kkkkk kkkkkkkkkkkkkkkkk1#", "##########################" ); this.SetMap[2] = new Array( "##########################", "#0 kkkkkkkkkk#kkkkkkkkkkk#", "# kkkkkkkkkkk#kkkkkkkkkkk#", "#kkkkkkkkkkkk#kkkkkkkkkkk#", "#kkkkkkkkkkkk#kkkkkkkkkkk#", "#kkkkkkkkkkkk#kkkkkkkkkkk#", "#kkkkkkkkkkkk#kkkkkkkkkkk#", "#kkkkkkkkkkkkkkkkkkkkkkkk#", "#kkkkkkkkkkkkkkkkkkkkkkkk#", "#kkkkkkkkkkkk#kkkkkkkkkkk#", "#kkkkkkkkkkkk#kkkkkkkkkkk#", "#kkkkkkkkkkkk#kkkkkkkkkkk#", "#kkkkkkkkkkkk#kkkkkkkkkkk#", "#kkkkkkkkkkkk#kkkkkkkkkkk#", "#kkkkkkkkkkkk#kkkkkkkkkkk#", "#kkkkkkkkkkkk#kkkkkkkkkk #", "#kkkkkkkkkkkk#kkkkkkkkk 1#", "##########################" ); //仿照上面，可以在这里加入自定义地图 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) } } //道具 this.Equip = new Array("","","","","n","","","p",""); this.DrawBox = function(x, y, id, str){ Canvas.insertAdjacentHTML("beforeEnd","<span id=’"+id+"’ style=’position:absolute;left:"+(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+"’ style=’position:absolute;width:"+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 style=’color: mediumseagreen’>■</span>"); break; case " ": this.DrawBox(i, j, "box"+i+"_"+j, " "); break; case "k": this.DrawBox(i, j, "box"+i+"_"+j, "<span style=’color: tan’>■</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!"); } } //移动选手 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; } } //安放炸.弹 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; } } } } //假死 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); } //爆炸的具体处理过程 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 style=’color: green’>◎</span>" break; case "p": this.Map[x][y] = "p"; GetEquip = "<span style=’color: red’>☆</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 style=’color: red’>¤</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); } //连爆 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; } } //爆炸 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; } //不断更新炸.弹状态 this.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 37: //left this.Move(-1, 0, 0); break; case 38: //up this.Move(0, -1, 0); break; case 39: //right this.Move(1, 0, 0); break; case 40: //down this.Move(0, 1, 0); break; case 13: //enter this.Fix(0); break; //player 2 case 65: //left this.Move(-1, 0, 1); break; case 87: //up this.Move(0, -1, 1); break; case 68: //right this.Move(1, 0, 1); break; case 83: //down this.Move(0, 1, 1); break; case 32: //space this.Fix(1); break; } event.returnValue = false; } this.Begin = function(){ this.Itv = window.setInterval(""+this.ClassName+".ShowBulb()", 100); //主进程 } 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></html>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
谢谢大家支持，玩法如Rimifon版主所说：
玩家1的方向键：asdw，炸.弹为空格
玩家2的方向键位键盘方向键，炸.弹为回车
可以炸出绿色泡泡和红色加威力的五角星。
图形都是字符，所以不太好看。
[2006-9-10]
这两天我把它改成图形界面了。呵呵，差不多可以乱真了。不过加了声音后好慢。我的声音是用几个bgsound来处理，当几个一起播放时会卡。不知道怎么才能处理好声音。暂时发个截图。等问题都解决了再整个发上来：）
更多精彩内容
其他人还在看
Node.js事件的正确使用方法
这篇文章主要给大家介绍了关于Node.js事件的正确使用方法，文中通过示例代码介绍的非常详细，对大家学习或者使用Node.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
评论 0
收藏 0
赞 0
分享
微信小程序自定义导航栏实例代码
这篇文章主要给大家介绍了关于微信小程序自定义导航栏的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
评论 0
收藏 0
赞 0
分享
js字符串处理之绝妙的代码
这篇文章主要介绍了js字符串处理之绝妙的代码，包括字符串去重、将字符放在对象中遍历拼接出字符串、把字符串的奇数位和偶数位分别提取到两个数组中、将两个数组按奇数位和偶数位插入拼接为字符串，有时候需要对字符进行处理的时候可以用得到
评论 0
收藏 0
赞 0
分享
vue设计一个倒计时秒杀的组件详解
这篇文章主要介绍了vue设计一个倒计时秒杀的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
评论 0
收藏 0
赞 0
分享
详解服务端预渲染之Nuxt（介绍篇）
这篇文章主要介绍了详解服务端预渲染之Nuxt（介绍篇）,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
javascrit中undefined和null的区别详解
这篇文章主要介绍了javascrit中undefined和null的区别详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
浅谈javascript中的prototype和__proto__的理解
这篇文章主要介绍了浅谈javascript中的prototype和__proto__的理解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
评论 0
收藏 0
赞 0
分享
详解vue中this.$emit()的返回值是什么
这篇文章主要介绍了详解vue中this.$emit()的返回值是什么，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
评论 0
收藏 0
赞 0
分享
浅谈express.js框架中间件（middleware）
这篇文章主要介绍了浅谈express.js框架中间件（middleware），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
vue自定义指令directive的使用方法
这篇文章主要介绍了vue自定义指令directive的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
朋友圈被一条人贩消息刷屏：竟然是营销?
网赚之谈：做什么网站才能让我们草根站长有个出路
网赚之谈：如何用最少的钱做最大化的网站推广
Google AdSense 电汇教程 谷歌联盟国内电汇收款教程（招行）
草根站长靠什么赚钱?什么样的人能成为赚钱的草根站长?
冲刺双十一 如何做好淘宝双11期间的推广及运营
站长故事
更多
从地图到苹果6！盘点苹果产品的四大败笔
站长故事：用百度Site App建立起自己的移动端全过程
站长故事：一个90后站长的自述
从月薪3500到身价3千万
写给那些曾经想转型却找不到方向的的站长
浅谈新手站长在网站运营中如何去养站？
