Spaces:

zhzabcd
/

game

Paused

App Files Files Community

zhzabcd commited on Aug 14, 2024

Commit

7092f63

verified ·

1 Parent(s): 80693a9

Upload 9 files

Browse files

Files changed (9) hide show

.gitignore +2 -0
Dockerfile +8 -0
LICENSE +21 -0
favicon.ico +0 -0
index.html +286 -0
qrcode.jpg +0 -0
requirements.txt +1 -0
run.sh +1 -0
server.py +86 -0

.gitignore ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ .idea
2	+ __pycache__

Dockerfile ADDED Viewed

	@@ -0,0 +1,8 @@

+FROM python:3
+MAINTAINER hullqin
+EXPOSE 8000
+COPY . /root/gobang
+WORKDIR /root/gobang
+RUN pip config set global.index-url https://mirrors.cloud.tencent.com/pypi/simple
+RUN pip install -r requirements.txt
+CMD daphne -b 0.0.0.0 -p 8000 server:application

LICENSE ADDED Viewed

	@@ -0,0 +1,21 @@

+MIT License
+Copyright (c) 2020 Hull
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

favicon.ico ADDED Viewed

index.html ADDED Viewed

	@@ -0,0 +1,286 @@

+<!DOCTYPE html>
+<html lang="en" style="height: 100%">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" href="https://fe-1255520126.file.myqcloud.com/gobang/favicon.ico">
+  <title>五子棋</title>
+</head>
+<body style="height: 100%; margin: 0; background: bisque">
+<style>
+.message {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;color: rgba(0,0,0,.85);font-size: 14px;font-variant: tabular-nums;line-height: 1.5715;list-style: none;-webkit-font-feature-settings: "tnum";font-feature-settings: "tnum";position: fixed;top: 8px;left: 0;z-index: 1010;width: 100%;pointer-events: none;text-align: center;}
+.message > div {padding: 6px;}
+.message > div > div {display: inline-block;padding: 12px 18px;background: #fff;border-radius: 2px;-webkit-box-shadow: 0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px 0 rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05);box-shadow: 0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px 0 rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05);pointer-events: all;}
+</style>
+<div id="message" class="message"></div>
+<svg id="svg" viewBox="-76,-76,152,152" style="height: 100%; width: 100%" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient id="black">
+      <stop offset="0%" style="stop-color:#808080" />
+      <stop offset="100%" style="stop-color:#111" />
+    </radialGradient>
+    <radialGradient id="white">
+      <stop offset="0%" style="stop-color:#fff" />
+      <stop offset="100%" style="stop-color:#ddd" />
+    </radialGradient>
+    <rect id="mark" x="-1" y="-1" width="2" height="2"/>
+    <circle id="piece" r="4.2"/>
+  </defs>
+  <path stroke="brown" stroke-width="0.5" fill="none" d="m-70,-70h140v140h-140zm10,0v140m10,0v-140m10,0v140m10,0v-140m10,0v140m10,0v-140m10,0v140m10,0v-140m10,0v140m10,0v-140m10,0v140m10,0v-140m10,0v140m10,-10h-140m0,-10h140m0,-10h-140m0,-10h140m0,-10h-140m0,-10h140m0,-10h-140m0,-10h140m0,-10h-140m0,-10h140m0,-10h-140m0,-10h140m0,-10h-140"/>
+  <use xlink:href="#mark"/>
+  <use xlink:href="#mark" x="40" y="40"/>
+  <use xlink:href="#mark" x="40" y="-40"/>
+  <use xlink:href="#mark" x="-40" y="40"/>
+  <use xlink:href="#mark" x="-40" y="-40"/>
+</svg>
+<div style="position: fixed; top: 0; left: 0;">
+  <button id="offline" onclick="game.online ? setOffline() : changeRoom(window.prompt('请输入房间号，开启联机对战。第一进入房间者执黑，第二进入房间者执白，其他人可观战。'))">转为离线模式</button>
+</div>
+<script>
+  const svg = document.getElementById('svg');
+  const pieces = [];
+  for (let x = 0; x < 15; x++) {
+    pieces.push([]);
+    for (let y = 0; y < 15; y++) {
+      const _x = x;
+      const _y = y;
+      const piece = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+      pieces[x].push(piece);
+      piece.setAttribute('x', (x * 10 - 70).toString());
+      piece.setAttribute('y', (y * 10 - 70).toString());
+      piece.setAttribute('fill-opacity', '0');
+      piece.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#piece');
+      piece.addEventListener('mouseenter', () => {
+        if (game.waiting || piece.getAttribute('fill-opacity') === '1') return;
+        piece.setAttribute('fill', game.black ? 'url(#black)' : 'url(#white)');
+        piece.setAttribute('fill-opacity', '0.5');
+      });
+      piece.addEventListener('mouseleave', () => {
+        if (game.waiting || piece.getAttribute('fill-opacity') === '1') return;
+        piece.setAttribute('fill-opacity', '0');
+      });
+      piece.addEventListener('click', () => {
+        if (game.waiting || piece.getAttribute('fill-opacity') === '1') return;
+        piece.setAttribute('fill', game.black ? 'url(#black)' : 'url(#white)');
+        piece.setAttribute('fill-opacity', '1');
+        dropPiece(_x, _y);
+        if (game.online) {
+          game.waiting = true;
+          ws.send(JSON.stringify({type: 'DropPiece', x: _x, y: _y}));
+        } else {
+          game.black = !game.black;
+        }
+      });
+      svg.appendChild(piece);
+    }
+  }
+  const mark = document.createElementNS("http://www.w3.org/2000/svg", 'rect');
+  mark.setAttribute('fill', 'red');
+  mark.setAttribute('width', '2');
+  mark.setAttribute('height', '2');
+  mark.setAttribute('opacity', '0');
+  svg.appendChild(mark);
+  const dropPiece = (x, y) => {
+    mark.setAttribute('x', (x * 10 - 71).toString());
+    mark.setAttribute('y', (y * 10 - 71).toString());
+    mark.setAttribute('opacity', '0.7');
+    game.winner = checkWinner(x, y);
+    if (game.winner) {
+      game.waiting = true;
+      if (game.visiting || !game.online) {
+        Message(`游戏结束，${game.winner === 'black' ? '黑' : '白'}棋胜利！`);
+      } else {
+        if ((game.winner === 'black' && game.black) || (game.winner === 'white' && !game.black)) {
+          Message('你赢了！');
+        } else {
+          Message('你输了，下次加油！');
+        }
+      }
+    }
+  };
+  const checkWinner = (x, y) => {
+    const color = pieces[x][y].getAttribute('fill');
+    const potentialWinner = color === 'url(#black)' ? 'black' : 'white';
+    const list = [4, 3, 2, 1];
+    if (x >= 4) {
+      if (!list.some(i => pieces[x - i][y].getAttribute('fill-opacity') !== '1' || pieces[x - i][y].getAttribute('fill') !== color)) {
+        return potentialWinner;
+      }
+      if (y >= 4 && !list.some(i => pieces[x - i][y - i].getAttribute('fill-opacity') !== '1' || pieces[x - i][y - i].getAttribute('fill') !== color)) {
+        return potentialWinner;
+      }
+      if (y <= 10 && !list.some(i => pieces[x - i][y + i].getAttribute('fill-opacity') !== '1' || pieces[x - i][y + i].getAttribute('fill') !== color)) {
+        return potentialWinner;
+      }
+    }
+    if (x <= 10) {
+      if (!list.some(i => pieces[x + i][y].getAttribute('fill-opacity') !== '1' || pieces[x + i][y].getAttribute('fill') !== color)) {
+        return potentialWinner;
+      }
+      if (y >= 4 && !list.some(i => pieces[x + i][y - i].getAttribute('fill-opacity') !== '1' || pieces[x + i][y - i].getAttribute('fill') !== color)) {
+        return potentialWinner;
+      }
+      if (y <= 10 && !list.some(i => pieces[x + i][y + i].getAttribute('fill-opacity') !== '1' || pieces[x + i][y + i].getAttribute('fill') !== color)) {
+        return potentialWinner;
+      }
+    }
+    if (y >= 4) {
+      if (!list.some(i => pieces[x][y - i].getAttribute('fill-opacity') !== '1' || pieces[x][y - i].getAttribute('fill') !== color)) {
+         return potentialWinner;
+      }
+    }
+    if (y <= 10) {
+       if (!list.some(i => pieces[x][y + i].getAttribute('fill-opacity') !== '1' || pieces[x][y + i].getAttribute('fill') !== color)) {
+         return potentialWinner;
+      }
+    }
+    return null;
+  };
+  const messageDiv = document.getElementById('message');
+  const Message = (content) => {
+    const div = document.createElement('div');
+    div.innerHTML = `<div>${content}</div>`;
+    messageDiv.appendChild(div);
+    setTimeout(() => messageDiv.removeChild(div), 3000);
+  };
+  const user = {};
+  const initializeUser = () => {
+    const localUserId = window.localStorage.getItem('user.id');
+    if (!localUserId) {
+      const newUserId = Math.random().toString().substr(2,8);
+      window.localStorage.setItem('user.id', newUserId);
+      user.id = newUserId;
+    } else {
+      user.id = localUserId;
+    }
+    user.name = window.localStorage.getItem('user.name') || '';
+  };
+  initializeUser();
+  const game = {};
+  let ws = null;
+  const initializeGame = (room, preserve = false) => {
+    game.room = room;
+    game.online = game.room !== '';
+    if (game.online || !preserve) {
+      for (const row of pieces) {
+          for (const piece of row) {
+            piece.setAttribute('fill-opacity', '0');
+          }
+        }
+    }
+    if (!preserve) {
+      mark.setAttribute('opacity', '0');
+    }
+    if (game.online) {
+      document.getElementById('offline').innerText = '转为离线模式';
+      game.black = true;
+      game.waiting = true;
+      game.winner = null;
+      ws = new WebSocket(`ws://${window.location.host}`);
+      ws.onopen = () => {
+        ws.send(JSON.stringify({type: 'EnterRoom', id: user.id, name: user.name, room: game.room}));
+      };
+      ws.onerror = (_ => {
+        console.error('error');
+      });
+      ws.onclose = (event => {
+        if (event.code !== 1000) {
+          if (event.code === 4000) {
+            alert('您已在新的浏览器窗口中进入了该房间，本页面将转换为单机模式！');
+          } else {
+            alert('连接已断开，将转换为单机模式！');
+          }
+          setOffline();
+        }
+      });
+      ws.onmessage = (ev => {
+        const data = JSON.parse(ev.data);
+        const { type } = data;
+        if (type === 'InitializeRoomState') {
+          game.black = data.black;
+          game.visiting = data.visiting;
+          game.ready = data.ready;
+          const droppedPieces = data.pieces;
+          let black = true;
+          for (const [x, y] of droppedPieces) {
+            pieces[x][y].setAttribute('fill', black ? 'url(#black)' : 'url(#white)');
+            pieces[x][y].setAttribute('fill-opacity', '1');
+            black = !black;
+          }
+          if (droppedPieces.length) {
+            dropPiece(...droppedPieces[droppedPieces.length - 1]);
+          }
+          if (!game.winner) {
+            if (!game.visiting && data.ready) {
+              if (game.black === black) {
+                if (droppedPieces.length) {
+                  if (!game.winner) Message('欢迎回来，该您下棋了！');
+                } else {
+                  Message('欢迎进入，您执黑棋，下棋后即开局，无法更换黑白和对手。');
+                }
+                game.waiting = false;
+              } else {
+                Message(`欢迎进入，请等待对手下棋。`);
+              }
+            } else if (!droppedPieces.length && !data.ready) {
+              Message(`欢迎进入，等待对手中。`);
+            }
+          }
+        } else if (type === 'AddPlayer') {
+          if (!game.visiting && data.ready && game.black === true) {
+            game.ready = true;
+            Message('您执黑棋，下棋后即开局，无法更换黑白和对手。');
+            game.waiting = false;
+          }
+        } else if (type === 'DropPiece') {
+          const { x, y } = data;
+          const piece = pieces[x][y];
+          piece.setAttribute('fill', game.black ? 'url(#white)' : 'url(#black)');
+          piece.setAttribute('fill-opacity', '1');
+          dropPiece(x, y);
+          if (game.visiting) game.black = !game.black;
+          if (!game.visiting && !game.winner) {
+            game.waiting = false;
+            Message('请下棋！');
+          }
+        }
+      });
+    } else {
+      document.getElementById('offline').innerText = '开始联机对战';
+      if (!preserve) {
+        game.black = true;
+        game.waiting = false;
+        game.winner = null;
+      } else {
+        if (!game.winner) {
+          game.black = !game.ready || (game.black ? !game.waiting : game.waiting);
+          game.waiting = false;
+        }
+      }
+      if (ws) {
+        ws.close();
+        ws = null;
+      }
+    }
+  };
+  initializeGame(window.location.pathname.substr(1));
+  window.onpopstate = (event) => {
+    initializeGame(event.target.location.pathname.substr(1));
+  };
+  const setOffline = () => {
+    window.history.pushState({preserve: true}, null, '/');
+    initializeGame('', true);
+    Message('切换至离线模式，可自由模拟棋局，按浏览器返回键可回到房间。')
+  };
+  const changeRoom = (room) => {
+    room = room.replace(/ /g, '');
+    if (!room) {
+      alert('请输入房间号，空格会被忽略，房间号不能为空');
+    } else {
+      window.history.pushState(null, null, `/${room}`);
+      initializeGame(room);
+    }
+  };
+</script>
+</body>
+</html>

qrcode.jpg ADDED Viewed

requirements.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ daphne==3.0.2

run.sh ADDED Viewed

	@@ -0,0 +1 @@


1	+ daphne -b 0.0.0.0 -p 80 server:application

server.py ADDED Viewed

	@@ -0,0 +1,86 @@

+import json
+with open('index.html', 'rb') as fp:
+    html = fp.read()
+house = {}
+async def application(scope, receive, send):
+    if scope['type'] == 'websocket':
+        event = await receive()
+        if event['type'] != 'websocket.connect':
+            return
+        await send({'type': 'websocket.accept'})
+        event = await receive()
+        data = json.loads(event['text'])
+        if data['type'] != 'EnterRoom' or not data['id'] or not data['room']:
+            await send({'type': 'websocket.close', 'code': 403})
+            return
+        room_id = data['room']
+        user_id = data['id']
+        if room_id not in house:
+            house[room_id] = {
+                'black': None,
+                'white': None,
+                'pieces': [],
+                'sends': [],
+                'users': [],
+            }
+        room = house[room_id]
+        old = False
+        if room['black'] == user_id or room['white'] == user_id:
+            old = True
+            if user_id in room['users']:
+                old_send = room['sends'][room['users'].index(user_id)]
+                room['sends'].remove(old_send)
+                room['users'].remove(user_id)
+                await old_send({'type': 'websocket.close', 'code': 4000})
+        else:
+            if room['black'] is None:
+                room['black'] = user_id
+            elif room['white'] is None:
+                room['white'] = user_id
+        visiting = room['black'] != user_id and room['white'] != user_id
+        room['sends'].append(send)
+        room['users'].append(user_id)
+        await send({'type': 'websocket.send', 'text': json.dumps({
+            'type': 'InitializeRoomState',
+            'pieces': room['pieces'],
+            'visiting': visiting,
+            'black': room['black'] == user_id if not visiting else bool(len(room['pieces']) % 2),
+            'ready': bool(room['black'] and room['white']),
+        })})
+        if not old and (room['black'] == user_id or room['white'] == user_id):
+            for _send in room['sends']:
+                if _send == send:
+                    continue
+                await _send({'type': 'websocket.send', 'text': json.dumps({
+                    'type': 'AddPlayer',
+                    'ready': bool(room['black'] and room['white']),
+                })})
+        while True:
+            event = await receive()
+            if event['type'] == 'websocket.disconnect':
+                if send in room['sends']:
+                    room['sends'].remove(send)
+                    room['users'].remove(user_id)
+                    if len(room['pieces']) == 0 and len(room['sends']) == 0:
+                        del house[room_id]
+                break
+            data = json.loads(event['text'])
+            if data['type'] == 'DropPiece':
+                room['pieces'].append((data['x'], data['y']))
+                for _send in room['sends']:
+                    if _send == send:
+                        continue
+                    await _send({'type': 'websocket.send', 'text': json.dumps({
+                        'type': 'DropPiece',
+                        'x': data['x'],
+                        'y': data['y'],
+                    })})
+    elif scope['type'] == 'http':
+        request = await receive()
+        if request['type'] == 'http.request':
+            await send({'type': 'http.response.start', 'status': 200})
+            await send({'type': 'http.response.body', 'body': html})