网页游戏五子棋(3) 显示页实现

这里写两个主要页面的实现和javascript代码

房间页面的前后台代码，页面中用了一个服务器timer控件用来从服务器读取消息，在js代码文件中也定义了一个timer用来读取玩家信息，在页面中使用服务器timer控件可以少写不少js代码，而且代码也更简单

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div class="main1">
    <table width="700" height="400" border="0" cellspacing="0" cellpadding="0">
          <tr>
               <td valign="top" width="460" style="background-image:url(Images/bg.gif); border:1px solid #000" background="Images/bg.gif">
                   <div style="height:420px; width:420px; padding:20px;">
                      <div id="desktop" style="height:420px; width:420px; background-image:url(Images/board.gif); overflow:hidden; position:absolute;"></div>
                </div>
              </td>
            <td width="300" valign="top">
                <table width="290" border="0" cellspacing="0" cellpadding="5">
                    <tr>
                        <td height="70" valign="top">
                            <ul class="u1"><li class="y1">颜色</li><li class="y2">用户</li><li class="y3">合计</li><li class="y4">下注</li><li class="y5">先手</li></ul>
                            <ul class="u2" id="p10">用户数据读取中，请稍候</ul>
                            <ul class="u2" id="p11">用户数据读取中，请稍候</ul>
                        </td>
                      </tr>
                      <tr>
                        <td>
                            <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                                <ContentTemplate>
                                    房间状态：<asp:Label ID="Label1" runat="server"></asp:Label><hr size="1" />
                                    游戏时间：<asp:Label ID="Label2" runat="server"></asp:Label>秒<hr size="1" />
                                    剩余时间：<asp:Label ID="Label3" runat="server"></asp:Label>秒<hr size="1" />
                                    <asp:Button ID="Button2" runat="server" Text="准备游戏" onclick="Button2_Click" />
                                    <asp:Button ID="Button3" runat="server" Text="离开游戏" onclick="Button3_Click" />
                                    <asp:Button ID="Button1" runat="server" Text="人机对战" onclick="Button1_Click" />
                                    <asp:HiddenField ID="roomVal" runat="server" />
                                    <asp:HiddenField ID="desktopVal" runat="server" />
                                    <asp:HiddenField ID="roomMessage" runat="server" />
                                    <asp:HiddenField ID="elementVal" runat="server" />
                                    <asp:Timer ID="Timer2" Interval="1000" runat="server" Enabled="false" ontick="Timer2_Tick"></asp:Timer>
                                </ContentTemplate>
                            </asp:UpdatePanel>  
                        </td>
                      </tr>
                </table>
            </td>
          </tr>
          <tr>
            <td height="40" valign="middle">
                <table width="400" align="center" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td id="p20">&nbsp;</td>
                        <td id="p21">&nbsp;</td>
                      </tr>
                </table>
              </td>
            <td>   
            </td>
          </tr>
    </table>
    </div>

 

public partial class Room : System.Web.UI.Page
{
    Dipper.WZQ.Initialize lobby = new Dipper.WZQ.Initialize(Min.Lu.StringHelper.QueryString("ID", -1));

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            Dipper.WZQ.Room room = lobby.Room;
            this.Page.Title = room.RoomName;
            int roomId = room.RoomId;
            Dipper.User.Cookies cookies = new Dipper.User.Data().Cookies;//用户信息包裹
            if (!cookies.UserLogin)//判断用户是否登陆
            {
                Response.Write("<script type=\"text/javascript\">alert('你还没有登陆!');window.close();</script>");
            }
            else
            {
                try
                {
                    Dipper.Games.Player player = new Dipper.Games.Player(cookies.UserId, cookies.UserName, -1, false, false, 20, -1, -1, 60);
                    int desktopId = room.AddPlayer(player);
                    if (desktopId == -1)//判断玩家是否在房间中或玩家是否已满
                    {
                        Response.Write("<script type=\"text/javascript\">alert('房间人数已满!');window.close();</script>");
                    }
                    else
                    {
                        lobby.Update();//保存信息
                        roomVal.Value = roomId.ToString();//房间ID
                        desktopVal.Value = desktopId.ToString();//玩家桌面ID
                        Label1.Text = room.RoomState;
                        Label2.Text = "0";
                        Label3.Text = player.UserTime.ToString();
                        if (room.RoomState == "进行中")
                        {
                            Button1.Enabled = false;
                        }
                        else
                        {
                            Button2.Enabled = false;
                        }
                    }
                }
                catch
                {
                    Response.Write("<script type=\"text/javascript\">alert('房间参数出错!');window.close();</script>");
                }
            }
        }
    }

    protected void Button1_Click(object sender, EventArgs e)
    {//开启人机对战
        if (new Dipper.User.Data().Cookies.UserLogin)
        {
            Dipper.WZQ.Room room = lobby.Room;
            room.AutoPlayer(int.Parse(desktopVal.Value));//注册机器人
            lobby.Update();
            Label1.Text = room.RoomState;
            Timer2.Enabled = true;
            Button1.Enabled = false;
            Button2.Enabled = false;
        }
        else
        {
            Response.Write("<script type=\"text/javascript\">alert('你还没有登陆!');window.close();</script>");
        }
    }

    protected void Button2_Click(object sender, EventArgs e)
    {
        if (new Dipper.User.Data().Cookies.UserLogin)
        {//准备游戏
            Dipper.WZQ.Room room = lobby.Room;
            room.ReadyPlayer(int.Parse(desktopVal.Value));
            lobby.Update();
            Label1.Text = room.RoomState;
            Timer2.Enabled = true;
            Button1.Enabled = false;
            Button2.Enabled = false;
        }
        else
        {
            Response.Write("<script type=\"text/javascript\">alert('你还没有登陆!');window.close();</script>");
        }
    }

    protected void Button3_Click(object sender, EventArgs e)
    {//离开游戏
        ScriptManager.RegisterStartupScript(UpdatePanel2, typeof(UpdatePanel), "WZQ", "window.close();", true);
    }

    protected void Timer2_Tick(object sender, EventArgs e)
    {
        Dipper.WZQ.Room room = lobby.Room;
        Dipper.Games.Player player = room.RoomPlayer[int.Parse(desktopVal.Value)];
        if (player.UserTime == 1)
        {//判断玩家游戏剩余时间
            room.RoomMessage = new Dipper.WZQ.Message(4, player.UserPrevious, 0, 0);
            if (player.IsAuto)
            {
                room.WinChess(player.DesktopId);
            }
            else
            {
                room.WinChess(player.UserPrevious);
            }
            lobby.Update();
        }
        Label2.Text = (int.Parse(Label2.Text) + 1).ToString();
        if ((room.RoomMessage.Type == 9 && room.RoomMessage.Desktop == player.UserPrevious) || (room.RoomMessage.Type == 1 && room.RoomMessage.Desktop == player.DesktopId))
        {//玩家剩余时间显示
            player.UserTime--;
            Label3.Text = player.UserTime.ToString();
        }
        roomMessage.Value = room.RoomMessage.ToString();//把消息写到页面控件中
        ScriptManager.RegisterStartupScript(UpdatePanel2, typeof(UpdatePanel), "WZQ", "WZQ.chessBoard()", true);//注册脚本代码，在页面上画出棋子
        if (room.RoomMessage.Type == 3 || room.RoomMessage.Type == 4 || room.RoomMessage.Type == 5)
        {//根据消息类型，判断玩家，重置按钮和房间状态
            Label1.Text = room.RoomState;
            Label2.Text = "0";
            Timer2.Enabled = false;
            Button2.Enabled = true;
            if (room.RoomState == "开放中")
            {
                Button1.Enabled = true;
            }
        }   
    }
}

 

这个页面是用来很js代码交互的，前台代码没有

public partial class Contact : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            if (Request.HttpMethod == "POST")
            {
                int desktopId = Convert.ToInt16(Request.Form["DESKTOP"]);
                int roomId = Convert.ToInt16(Request.Form["ROOM"]);
                string type = Request.Form["TYPE"];
                Dipper.WZQ.Initialize lobby = new Dipper.WZQ.Initialize(roomId);
                Dipper.WZQ.Room room = lobby.Room;
                if (type == "LEAVE")
                {
                    int start = Convert.ToInt16(Request.Form["START"]);
                    try
                    {
                        if (start == 1)
                        {//表是在游戏中离开，则判定为输
                            room.RoomMessage = new Dipper.WZQ.Message(5, room.RoomPlayer[desktopId].UserPrevious, 0, 0);
                            room.WinChess(room.RoomPlayer[desktopId].UserPrevious);
                        }
                        room.SubPlayer(desktopId);
                        lobby.Update();
                        Response.Write("true");
                    }
                    catch
                    {
                        Response.Write("false");
                    }
                }
                else if (type == "CHESS")
                {
                    try
                    {
                        string[] data = Request.Form["DATA"].Split(',');
                        room.PlayChess(desktopId, int.Parse(data[0]), int.Parse(data[1]));//下一步棋
                        if (room.RuleChess(desktopId))
                        {//判断是否赢
                            room.WinChess(desktopId);
                            room.RoomMessage = new Dipper.WZQ.Message(3, desktopId, int.Parse(data[0]), int.Parse(data[1]));
                        }
                        else
                        {
                            room.RoomPlayer[desktopId].UserTime = 60;
                            Player player = room.RoomPlayer[desktopId];
                            if (player.IsAuto)//判断是否托管，机器人
                            {
                                if (room.RoomCount == 225)
                                {//判断棋子是否下满
                                    room.DrawChess(desktopId);
                                    room.RoomMessage = new Dipper.WZQ.Message(6, desktopId, int.Parse(data[0]), int.Parse(data[1]));
                                }
                                else
                                {
                                    room.RoomMessage = new Dipper.WZQ.Message(9, desktopId, int.Parse(data[0]), int.Parse(data[1]));
                                    Dipper.WZQ.AI ai = new Dipper.WZQ.AI(room.RoomBoard, player.DesktopId, player.UserNext);
                                    Dipper.WZQ.Message message = ai.Chess();
                                    room.PlayChess(player.UserNext, message.X, message.Y);
                                    if (room.RuleChess(player.UserNext))
                                    {
                                        room.WinChess(desktopId);
                                        room.RoomMessage = new Dipper.WZQ.Message(3, message.Desktop, message.X, message.Y);
                                    }
                                    else
                                    {
                                        if (room.RoomCount == 225) { room.DrawChess(desktopId); room.RoomMessage = new Dipper.WZQ.Message(6, message.Desktop, message.X, message.Y); }
                                        else { room.RoomMessage = message; }
                                    }
                                }
                            }
                        }
                        lobby.Update();
                        Response.Write("true");
                    }
                    catch
                    {
                        Response.Write("false");
                    }
                }
            }
            else if (Request.HttpMethod == "GET")
            {
                string type = Min.Lu.StringHelper.QueryString("TYPE", "");
                int desktopId = Min.Lu.StringHelper.QueryString("DESKTOP", 0);
                int roomId = Min.Lu.StringHelper.QueryString("ROOM", 0);
                Dipper.WZQ.Initialize lobby = new Dipper.WZQ.Initialize(roomId);
                Dipper.WZQ.Room room = lobby.Room;
                if (type == "PLAYER")
                {
                    if (room != null)
                    {
                        for (int i = 0; i < room.RoomPlayer.Length; i++)
                        {
                             if (room.RoomPlayer[i] != null)
                            {
                                Response.Write("player" + i + " = new Player(" + room.RoomPlayer[i].UserId + ",'" + room.RoomPlayer[i].UserName + "'," + room.RoomPlayer[i].DesktopId + "," + (room.RoomPlayer[i].IsReady ? "true" : "false") + "," + (room.RoomPlayer[i].IsFirst ? "true" : "false") + "," + room.RoomPlayer[i].UserPrevious + "," + room.RoomPlayer[i].UserNext + "," + room.RoomPlayer[i].MoneySum + "," + room.RoomPlayer[i].MoneyAnte + ");");
                            }
                            else
                            {
                                Response.Write("player" + i + " = new Player(0, '', " + i + ", false, false, -1, -1, 0, 0);");
                            }
                            Response.Write("player" + i + ".load();");

                        }
                    }
                }
            }
        }
    }
}

 

下面是javascript代码

var desktopId = 0, roomId = 0; //玩家自己的桌面ID和房间ID
var roomMessage = []; //房间消息
var isStart = false, isCheck = false; //isSart 游戏是否开始 isCheck 玩家是否可以下子
var player0 = null, player1 = null; //玩家信息
var timer1 = null, timer2 = null;
var error = 0; //玩家读取信息失败次数，判断玩家是否掉线

(function() {
    if (!window['WZQ']) { window['WZQ'] = {}; };

    function initialize() {
        $('#desktop').html('');
        for (var i = 0; i < 15; i++) {
            for (var j = 0; j < 15; j++) {
                $('#desktop').append('<div id="X' + i + 'Y' + j + '" onclick="WZQ.chessDown(' + i + ', ' + j + ')" class="chess"></div>');
            }
        }//初始化棋盘
        timer1 = setInterval('WZQ.loadPlayer()', 1000);//启动timer
    }
    window['WZQ']['initialize'] = initialize;

    function chessBoard() {//在棋盘上下子
        roomMessage = eval($('#roomMessage').val());//房间消息 格式[1,1,0,0]
        if (eval('player' + desktopId + '.previous') == roomMessage[1]) { isCheck = true; }
            else { isCheck = false; } //如果消息中用户桌面ID等于自己的上家用户ID，则玩家可以开始下子
        if (!isStart) clearInterval(timer1);
        if (roomMessage[0] == 9 || roomMessage[0] == 2) {
            if (roomMessage[1] != desktopId) { WZQ.chessDraw(roomMessage[1], roomMessage[2], roomMessage[3]); isStart = true; }
        } else if (roomMessage[0] == 3 || roomMessage[0] == 4 || roomMessage[0] == 5 || roomMessage[0] == 6) {
            WZQ.chessDraw(roomMessage[1], roomMessage[2], roomMessage[3]);
            WZQ.chessWin(roomMessage[1], roomMessage[0]);
            isStart = false;
        } else if (roomMessage[0] == 1) {
            if (roomMessage[1] == desktopId) {
                if (!isStart) { alert('游戏开始，由你先下棋！'); }
                isCheck = true;
            }
            isStart = true;
        }
    }
    window['WZQ']['chessBoard'] = chessBoard;

    function chessDraw(desktop, x, y) {//在棋盘上画子，改变棋子的背景色，5秒之后置为正常色，让玩家容易辨认对手所下棋子
        var element = $('#X' + x + 'Y' + y + '');
        if (element.attr('onclick') != '') {
            WZQ.chessShow();
            $('#elementVal').val('#X' + x + 'Y' + y + '');
            timer2 = setTimeout('WZQ.chessShow()', 5000);
            element.addClass('c3');
            element.addClass('c' + desktop);
            element.attr('onclick', '');
        }
    }
    window['WZQ']['chessDraw'] = chessDraw;

    function chessShow() {
        $($('#elementVal').val()).removeClass('c3');
        if (timer2 != null) { clearTimeout(timer2); }
    }
    window['WZQ']['chessShow'] = chessShow;

    function chessDown(x, y) {
        if (!isStart) { alert('还没有开始呢！'); return; }
        if (!isCheck) { alert('还没有轮到你！'); return; }
        var result = $.ajax({ type: 'POST',
            url: 'Contact.aspx',
            data: 'ROOM=' + roomId + '&DESKTOP=' + desktopId + '&TYPE=CHESS&DATA=' + x + ',' + y + '',
            cache: false,
            async:false
        }).responseText;
        if (eval(result)) {
            WZQ.chessDraw(desktopId, x, y);
        } else {
            if (error == 15) { alert('你已经掉线了！'); } error++;
        }
    }
    window['WZQ']['chessDown'] = chessDown;

    function chessWin(desktop, type) {
        if (type == 3) {
            if (desktop == desktopId) { alert('恭喜你赢得了本局的胜利！'); }
            else { alert('你失败了，下次再接再厉！'); }
        } else if (type == 4) {
            if (desktop == desktopId) { alert('时间到，你获胜了！'); }
            else { alert('时间到，你失败了！'); }
        } else if (type == 5) {
            if (desktop == desktopId) { alert('对手离开，你获胜了！'); }
            else { alert('掉线了，你失败了！'); }
        } else if (type == 6) {
            alert('厉害啊，没有棋可走了！');
        }
        $('#roomMessage').val('');
        WZQ.initialize();
    }
    window['WZQ']['chessWin'] = chessWin;

    function leavePlayer() {//玩家离开
        if (isStart) { alert('正在游戏中，离开将被扣除相应游戏币！'); }
        var result = $.ajax({ type: 'POST',
            url: 'Contact.aspx',
            data: 'ROOM=' + roomId + '&DESKTOP=' + desktopId + '&TYPE=LEAVE&START=' + (isStart ? 1 : 0),
            cache: false,
            async: false
        }).responseText;
        if (eval(result)) { isStart = false; window.close(); }
    }
    window['WZQ']['leavePlayer'] = leavePlayer;

    function loadPlayer() {//读取玩家信息
        $.ajax({ type: 'GET',
            url: 'Contact.aspx',
            data: 'ROOM=' + roomId + '&DESKTOP=' + desktopId + '&TYPE=PLAYER',
            dataType: 'script',
            cache: true
        });
    }
    window['WZQ']['loadPlayer'] = loadPlayer;
})()

window.onbeforeunload = function() {
    WZQ.leavePlayer();
}

function Player(id, name, desktop, ready, first, previous, next, sum, ante) {//这是客服端用户类
    this.id = id;
    this.name = name;
    this.desktop = desktop;
    if (ready) {
        this.ready = '准备好';
    } else {
        this.ready = '准备中';
    }
    this.first=first;
    this.previous = previous;
    this.next = next;
    this.sum=sum;
    this.ante=ante;
    this.image = '<img src="Images/t' + desktop + '.gif" height="20" width="20">';
    this.load = function() {
        if (this.name == '') {
            $('#p1' + this.desktop).html('');
            $('#p2' + this.desktop).html('');
        } else {
            var html = '<li class="y1">' + this.image + '</li>';
            html += '<li class="y2"><a href="#' + this.id + '">' + this.name + '</a></li>';
            html += '<li class="y3">' + this.sum + '</li>';
            html += '<li class="y4">' + this.ante + '</li>';
            if (this.first) {
                html += '<li class="y5"><img src="Images/first.gif" width="20" height="20" /></li>';
            } else {
                html += '<li class="y5"></li>';
            }
            $('#p1' + this.desktop).html(html);
            html = '<ul class="player"><li class="image">' + this.image + '</li><li class="name">' + this.name + '</li><li class="ready">' + this.ready + '</li></ul>';
            $('#p2' + this.desktop).html(html);
        }
    }
}

$(document).ready(function() {
    desktopId = $('#desktopVal').val();
    roomId = $('#roomVal').val();
    WZQ.initialize();
})