Untitled
unknown
plain_text
a year ago
14 kB
6
Indexable
<!DOCTYPE html>
<html>
<head>
<title>WebSocket LauKataKati</title>
</head>
<body>
<canvas id="board" width="800" height="800" style=
"border:1px solid #000000;
padding: 0;
margin: auto;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;"></canvas>
<p id="gameID"></p>
<p id="turn"></p>
<p id="gameOver"></p>
<script>
let session = window.sessionStorage;
let client_id = null
let turnText = document.getElementById("turn");
let gameOverText = document.getElementById("gameOver");
let positions = {
1: [133, 100],
2: [400, 100],
3: [666, 100],
4: [222, 200],
5: [400, 200],
6: [578, 200],
7: [310, 300],
8: [400, 300],
9: [490, 300],
10: [400, 400],
11: [310, 500],
12: [400, 500],
13: [490, 500],
14: [222, 600],
15: [400, 600],
16: [578, 600],
17: [133, 700],
18: [400, 700],
19: [666, 700]
}
function drawBoard() {
let canvas = document.getElementById('board');
let ctx = canvas.getContext('2d');
ctx.fillStyle = "#F0D2B4"
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = "gray";
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(133, 100);
ctx.lineTo(666, 100);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(222, 200);
ctx.lineTo(578, 200);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(310, 300);
ctx.lineTo(490, 300);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(310, 500);
ctx.lineTo(490, 500);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(222, 600);
ctx.lineTo(578, 600);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(133, 700);
ctx.lineTo(666, 700);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(133, 100);
ctx.lineTo(666, 700);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(666, 100);
ctx.lineTo(133, 700);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(400, 100);
ctx.lineTo(400, 700);
ctx.closePath();
ctx.stroke();
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(133, 100, 20, 0, 360);
ctx.fill();
ctx.beginPath();
ctx.arc(400, 100, 20, 0, 360);
ctx.fill();
ctx.beginPath();
ctx.arc(666, 100, 20, 0, 360);
ctx.fill();
ctx.beginPath();
ctx.arc(222, 200, 20, 0, 360);
ctx.fill();
ctx.beginPath();
ctx.arc(400, 200, 20, 0, 360);
ctx.fill();
ctx.beginPath();
ctx.arc(578, 200, 20, 0, 360);
ctx.fill();
ctx.beginPath();
ctx.arc(310, 300, 20, 0, 360);
ctx.fill();
ctx.beginPath();
ctx.arc(400, 300, 20, 0, 360);
ctx.fill();
ctx.beginPath();
ctx.arc(490, 300, 20, 0, 360);
ctx.fill();
ctx.fillStyle = "gray";
ctx.beginPath();
ctx.arc(400, 400, 20, 0, 360);
ctx.fill();
ctx.fillStyle = "white";
ctx.beginPath();
ctx.arc(310, 500, 20, 0, 360);
ctx.fill();
ctx.beginPath();
ctx.arc(400, 500, 20, 0, 360);
ctx.fill();
ctx.beginPath();
ctx.arc(490, 500, 20, 0, 360);
ctx.fill();
ctx.beginPath();
ctx.arc(222, 600, 20, 0, 360);
ctx.fill();
ctx.beginPath();
ctx.arc(400, 600, 20, 0, 360);
ctx.fill();
ctx.beginPath();
ctx.arc(578, 600, 20, 0, 360);
ctx.fill();
ctx.beginPath();
ctx.arc(133, 700, 20, 0, 360);
ctx.fill();
ctx.beginPath();
ctx.arc(400, 700, 20, 0, 360);
ctx.fill();
ctx.beginPath();
ctx.arc(666, 700, 20, 0, 360);
ctx.fill();
}
function drawMove(x, y, turn) {
let canvas = document.getElementById('board');
let ctx = canvas.getContext('2d');
ctx.fillStyle = "gray";
ctx.beginPath();
ctx.arc(positions[x][0], positions[x][1], 20, 0, 360);
ctx.fill();
if(turn === 1)
ctx.fillStyle = "white";
else
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(positions[y][0], positions[y][1], 20, 0, 360);
ctx.fill();
}
function drawCapture(x, y, z, turn) {
let canvas = document.getElementById('board');
let ctx = canvas.getContext('2d');
ctx.fillStyle = "gray";
ctx.beginPath();
ctx.arc(positions[x][0], positions[x][1], 20, 0, 360);
ctx.fill();
ctx.beginPath();
ctx.arc(positions[z][0], positions[z][1], 20, 0, 360);
ctx.fill();
if(turn === 1)
ctx.fillStyle = "white";
else
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(positions[y][0], positions[y][1], 20, 0, 360);
ctx.fill();
}
function drawCurrentGame(board) {
let canvas = document.getElementById('board');
let ctx = canvas.getContext('2d');
ctx.fillStyle = "#F0D2B4"
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = "gray";
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(133, 100);
ctx.lineTo(666, 100);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(222, 200);
ctx.lineTo(578, 200);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(310, 300);
ctx.lineTo(490, 300);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(310, 500);
ctx.lineTo(490, 500);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(222, 600);
ctx.lineTo(578, 600);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(133, 700);
ctx.lineTo(666, 700);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(133, 100);
ctx.lineTo(666, 700);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(666, 100);
ctx.lineTo(133, 700);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(400, 100);
ctx.lineTo(400, 700);
ctx.closePath();
ctx.stroke();
let pieces = []
for(let i = 0; i < 38; i+=2) {
if (board.getInt16(i, false) === 0)
pieces.push(0);
else if (board.getInt16(i, false) === 1)
pieces.push(1);
else if (board.getInt16(i, false) === 2)
pieces.push(2);
}
for(let i = 0; i < 19; i++) {
if(pieces[i] === 0)
ctx.fillStyle = "white";
else if(pieces[i] === 1)
ctx.fillStyle = "black";
else
ctx.fillStyle = "gray";
ctx.beginPath();
ctx.arc(positions[i+1][0], positions[i+1][1], 20, 0, 360);
ctx.fill();
}
}
if(session.getItem("session") == null) {
client_id = '_' + Math.random().toString(36).substr(2, 9);
session.setItem("session", client_id);
drawBoard();
}
else
client_id = session.getItem("session");
let turn = false;
let game = null;
const lobby = new WebSocket("ws://localhost:8000/lobby");
lobby.binaryType = "arraybuffer";
lobby.onopen = function() {
let buffer = new ArrayBuffer(20);
let bv = new Uint16Array(buffer);
for (let i = 0, strLen = client_id.length; i < strLen; i++)
bv[i] = client_id.charCodeAt(i);
lobby.send(buffer);
}
lobby.onmessage = function(event) {
if(event.data.byteLength === 22) {
let gameId = String.fromCharCode.apply(null, new Uint16Array(event.data));
gameId = gameId.substr(1);
document.getElementById("gameID").innerText = "game: " + gameId;
game = new WebSocket("ws://localhost:8000/" + gameId);
game.binaryType = "arraybuffer";
game.onopen = function () {
if(turn)
turnText.innerText = "your turn"
else
turnText.innerText = "opponent's turn"
}
game.onmessage = function (event) {
let dv = new DataView(event.data, 0);
if(event.data.byteLength === 2) {
turn = true;
turnText.innerText = "your turn"
}
if(event.data.byteLength === 4) {
if(dv.getInt16(2, false) === 0) {
gameOverText.innerText = "game over: black wins!";
turnText.style.display = "none";
}
else {
gameOverText.innerText = "game over: white wins!"
turnText.style.display = "none";
}
}
if(event.data.byteLength === 6)
drawMove(dv.getInt16(0, false), dv.getInt16(2, false), dv.getInt16(4, false));
else
drawCapture(dv.getInt16(0, false), dv.getInt16(2, false), dv.getInt16(4, false), dv.getInt16(6, false));
}
let canvas = document.getElementById('board');
canvas.addEventListener("click", function (event) {
if (turn) {
let buffer = new ArrayBuffer(4);
let dv = new DataView(buffer, 0);
dv.setInt16(0, (event.pageX - 559), false);
dv.setInt16(2, (event.pageY - 94), false);
game.send(buffer);
turn = false;
turnText.innerText = "opponent's turn"
event.preventDefault();
}
}, false);
game.onclose = function () {
canvas = null;
}
}
else {
let dv = new DataView(event.data, 0);
drawCurrentGame(dv)
}
}
</script>
</body>
</html>Editor is loading...