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