页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

WEB泡泡堂2.0（图形界面+电脑对玩）(javascript)

发布：dxy 发布日期：2007-1-20 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<!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"> 
<style> 
 
</style> 
</head> 
<body> 
<span id=Canvas></span> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
//WEB泡泡堂(javascript) 
//2006-9-5  
//Hxyman QQ:86815260 EMail:Hxyman at yahoo.com.cn

function 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 全选提示:你可先修改部分代码,再按运行]

谢谢大家支持，玩法如Rimifon版主所说：
玩家1的方向键：asdw，炸弹为空格
玩家2的方向键位键盘方向键，炸弹为回车
可以炸出绿色泡泡和红色加威力的五角星。
图形都是字符，所以不太好看。

[2006-9-10]
这两天我把它改成图形界面了。呵呵，差不多可以乱真了。不过加了声音后好慢。我的声音是用几个bgsound来处理，当几个一起播放时会卡。不知道怎么才能处理好声音。暂时发个截图。等问题都解决了再整个发上来：）

Tags：WEB泡泡堂2.0（图形界面+电脑对玩）(javascript)