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>
|