0210411
/
codebase


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/game_hall.css">
</head>
<body>
    <div class="nav">网络五子棋对战游戏</div>
    <!-- 整个页面的容器元素 -->
    <div class="container">
        <!-- 这个 div 在 container 中是处于垂直水平居中这样的位置的 -->
        <div>
            <!-- 展示用户信息 -->
            <div id="screen"></div>
            <!-- 匹配按钮 -->
            <div id="match-button">开始匹配</div>
        </div>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script>
        ws_hdl = null;
        //设置离开当前页面后立即断开websocket链接
        window.onbeforeunload = function () {
            ws_hdl.close();
        }

        // 获取玩家信息展示在游戏大厅与websocket长连接切换
        function get_user_info() {
            // 通过ajax向服务器发送获取用户信息请求
            $.ajax({
                url: "/info",
                type: "get",
                success: function(res) {
                    var info_html = "<p>" + "姓名: " + res.username + "  积分：" + res.score + "</br>" + 
                        "  战斗场次: " + res.total_count + "  胜利场次: " + res.win_count + "</p>";
                    var screen_div = document.getElementById("screen");
                    screen_div.innerHTML = info_html;

                    // 获取玩家信息成功之后将http短连接协议切换为websocket长连接切换
                    ws_url = "ws://" + location.host + "/hall";
                    ws_hdl = new WebSocket(ws_url);
                    // 为websocket各种触发事件设置回调函数
                    ws_hdl.onopen = ws_onopen;
                    ws_hdl.onclose = ws_onclose;
                    ws_hdl.onerror = ws_onerror;
                    ws_hdl.onmessage = ws_onmessage;
                },
                // 获取失败则返回登录页面并提示错误信息
                error: function(xhr) {
                    alert(JSON.stringify(xhr));
                    location.replace("/login.html");
                }
            })
        }

        // 匹配按钮一共有两种状态 -- 未开始匹配(unmatched)和匹配中(matching)
        var button_statu = "unmatched";
        // 为匹配按钮添加点击事件
        var button_ele = document.getElementById("match-button");
        button_ele.onclick = function() {
            // 在没有匹配状态下点击按钮，则发送开始匹配请求
            if(button_statu == "unmatched") {
                var req = { optype: "match_start" };
                ws_hdl.send(JSON.stringify(req));
            }
            // 在匹配状态下点击按钮，则范式停止匹配请求
            else if(button_statu == "matching") {
                var req = { optype: "match_stop" };
                ws_hdl.send(JSON.stringify(req));
            }
        }

        function ws_onopen() {
            console.log("游戏大厅长连接建立成功");
        }
        function ws_onclose() {
            console.log("游戏大厅长连接断开");
        }
        function ws_onerror() {
            console.log("游戏大厅长连接建立出错");
        }

        // 服务器响应处理函数
        function ws_onmessage(evt) {
            // 判断请求是否被成功处理，如果处理失败，则提示错误信息并跳转登录页面
            var resp = JSON.parse(evt.data);
            if(resp.result == false) {
                alert(evt.data)
                location.replace("/login.html");
                return;
            }
            // 根据不同的响应类型进行不同的操作(成功建立大厅长连接、开始匹配、停止匹配、匹配成功以及未知响应类型)
            if(resp.optype == "hall_ready") {} 
            else if(resp.optype == "match_start") {
                console.log("玩家已成功加入匹配队列");
                button_statu = "matching";
                button_ele.innerHTML = "匹配中... (点击停止匹配)";
            } 
            else if(resp.optype == "match_stop") {
                console.log("玩家已从匹配队列中移除");
                button_statu = "unmatched";
                button_ele.innerHTML = "开始匹配";
            } 
            else if(resp.optype == "match_success") {
                alert("匹配成功");
                location.replace("/game_room.html");
            }
            else {
                alert(evt.data);
                location.replace("/login.html");
            }
        }
        // 调用获取玩家信息函数
        get_user_info();
    </script>
</body>
</html>