game_hall.html 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>游戏大厅</title>
  8. <link rel="stylesheet" href="./css/common.css">
  9. <link rel="stylesheet" href="./css/game_hall.css">
  10. </head>
  11. <body>
  12. <div class="nav">网络五子棋对战游戏</div>
  13. <!-- 整个页面的容器元素 -->
  14. <div class="container">
  15. <!-- 这个 div 在 container 中是处于垂直水平居中这样的位置的 -->
  16. <div>
  17. <!-- 展示用户信息 -->
  18. <div id="screen"></div>
  19. <!-- 匹配按钮 -->
  20. <div id="match-button">开始匹配</div>
  21. </div>
  22. </div>
  23. <script src="./js/jquery.min.js"></script>
  24. <script>
  25. ws_hdl = null;
  26. //设置离开当前页面后立即断开websocket链接
  27. window.onbeforeunload = function () {
  28. ws_hdl.close();
  29. }
  30. // 获取玩家信息展示在游戏大厅与websocket长连接切换
  31. function get_user_info() {
  32. // 通过ajax向服务器发送获取用户信息请求
  33. $.ajax({
  34. url: "/info",
  35. type: "get",
  36. success: function(res) {
  37. var info_html = "<p>" + "姓名: " + res.username + " 积分:" + res.score + "</br>" +
  38. " 战斗场次: " + res.total_count + " 胜利场次: " + res.win_count + "</p>";
  39. var screen_div = document.getElementById("screen");
  40. screen_div.innerHTML = info_html;
  41. // 获取玩家信息成功之后将http短连接协议切换为websocket长连接切换
  42. ws_url = "ws://" + location.host + "/hall";
  43. ws_hdl = new WebSocket(ws_url);
  44. // 为websocket各种触发事件设置回调函数
  45. ws_hdl.onopen = ws_onopen;
  46. ws_hdl.onclose = ws_onclose;
  47. ws_hdl.onerror = ws_onerror;
  48. ws_hdl.onmessage = ws_onmessage;
  49. },
  50. // 获取失败则返回登录页面并提示错误信息
  51. error: function(xhr) {
  52. alert(JSON.stringify(xhr));
  53. location.replace("/login.html");
  54. }
  55. })
  56. }
  57. // 匹配按钮一共有两种状态 -- 未开始匹配(unmatched)和匹配中(matching)
  58. var button_statu = "unmatched";
  59. // 为匹配按钮添加点击事件
  60. var button_ele = document.getElementById("match-button");
  61. button_ele.onclick = function() {
  62. // 在没有匹配状态下点击按钮,则发送开始匹配请求
  63. if(button_statu == "unmatched") {
  64. var req = { optype: "match_start" };
  65. ws_hdl.send(JSON.stringify(req));
  66. }
  67. // 在匹配状态下点击按钮,则范式停止匹配请求
  68. else if(button_statu == "matching") {
  69. var req = { optype: "match_stop" };
  70. ws_hdl.send(JSON.stringify(req));
  71. }
  72. }
  73. function ws_onopen() {
  74. console.log("游戏大厅长连接建立成功");
  75. }
  76. function ws_onclose() {
  77. console.log("游戏大厅长连接断开");
  78. }
  79. function ws_onerror() {
  80. console.log("游戏大厅长连接建立出错");
  81. }
  82. // 服务器响应处理函数
  83. function ws_onmessage(evt) {
  84. // 判断请求是否被成功处理,如果处理失败,则提示错误信息并跳转登录页面
  85. var resp = JSON.parse(evt.data);
  86. if(resp.result == false) {
  87. alert(evt.data)
  88. location.replace("/login.html");
  89. return;
  90. }
  91. // 根据不同的响应类型进行不同的操作(成功建立大厅长连接、开始匹配、停止匹配、匹配成功以及未知响应类型)
  92. if(resp.optype == "hall_ready") {}
  93. else if(resp.optype == "match_start") {
  94. console.log("玩家已成功加入匹配队列");
  95. button_statu = "matching";
  96. button_ele.innerHTML = "匹配中... (点击停止匹配)";
  97. }
  98. else if(resp.optype == "match_stop") {
  99. console.log("玩家已从匹配队列中移除");
  100. button_statu = "unmatched";
  101. button_ele.innerHTML = "开始匹配";
  102. }
  103. else if(resp.optype == "match_success") {
  104. alert("匹配成功");
  105. location.replace("/game_room.html");
  106. }
  107. else {
  108. alert(evt.data);
  109. location.replace("/login.html");
  110. }
  111. }
  112. // 调用获取玩家信息函数
  113. get_user_info();
  114. </script>
  115. </body>
  116. </html>