289 lines
8.1 KiB
JavaScript
289 lines
8.1 KiB
JavaScript
import { client, lang } from "../../../index.js";
|
|
|
|
import { AGame } from "../AGame.js";
|
|
|
|
class TicTacToe
|
|
{
|
|
constructor(height, width, gap, rectsize, canvas, game_id)
|
|
{
|
|
this.height = height;
|
|
this.width = width;
|
|
this.gap = gap;
|
|
this.rectsize = rectsize;
|
|
this.map = [[],[],[],[],[],[],[],[],[]];
|
|
for (let i = 0; i < 9; i++)
|
|
for (let j = 0; j < 9; j++)
|
|
this.map[i].push(-1);
|
|
this.game_id = game_id;
|
|
this.game = new AGame(client, game_id, this.onReceive.bind(this), this.uninit.bind(this), "tictactoe")
|
|
this.canvas = canvas
|
|
this.context = this.canvas.getContext("2d");
|
|
this.sign;
|
|
this.currentMorpion = 4;
|
|
this.turn;
|
|
}
|
|
|
|
async init()
|
|
{
|
|
await this.game.join();
|
|
this.canvas.addEventListener("mousedown", (event, morpion = this) => this.onClick(event, morpion));
|
|
}
|
|
|
|
async uninit()
|
|
{
|
|
this.canvas.removeEventListener("mousedown", (event, morpion = this) => this.onClick(event, morpion));
|
|
this.game.leave()
|
|
}
|
|
|
|
async onReceive(messageData)
|
|
{
|
|
console.log(messageData)
|
|
switch (messageData.detail)
|
|
{
|
|
case 'x':
|
|
case 'o':
|
|
this.sign = messageData.detail;
|
|
this.turn = messageData.detail == "x";
|
|
break;
|
|
|
|
case 'game_start':
|
|
this.game.started = true;
|
|
if (this.turn)
|
|
this.setOutline(4, false);
|
|
break;
|
|
|
|
case 'game_move':
|
|
this.map[messageData.targetMorpion][messageData.targetCase] = (this.sign == "x") ? 1 : 0;
|
|
this.printSign(messageData.targetMorpion, messageData.targetCase, (this.sign == "x") ? "o" : "x");
|
|
this.setOutline(this.currentMorpion, false);
|
|
break;
|
|
|
|
case 'game_end':
|
|
this.game.finished = true;
|
|
this.canvas.removeEventListener("mousedown", (event, morpion = this) => this.onClick(event, morpion));
|
|
this.printWin(messageData.winning_sign);
|
|
break;
|
|
case 'catchup':
|
|
this.map = messageData.morpion;
|
|
for (let i = 0; i < 9; i++)
|
|
{
|
|
for (let j = 0; j < 9; j++)
|
|
{
|
|
if (this.map[i][j] != -1)
|
|
this.printSign(i, j, this.map[i][j])
|
|
}
|
|
}
|
|
this.turn = (messageData.turn == this.sign);
|
|
this.currentMorpion = messageData.currentMorpion;
|
|
if (this.turn)
|
|
this.setOutline(this.currentMorpion, false);
|
|
}
|
|
}
|
|
|
|
printWin(winning_sign)
|
|
{
|
|
this.context.beginPath();
|
|
this.context.fillStyle = "white";
|
|
this.context.fillRect(this.width / 2 - 200, this.height - this.gap + 10, 400, 80);
|
|
this.context.closePath();
|
|
this.context.beginPath();
|
|
this.context.fillStyle = (winning_sign == "o") ? "red" : "green";
|
|
this.context.fillText((winning_sign == "o") ? lang.get("morpionWin") + "O" : lang.get("morpionWin") + "X", this.width / 2 - 30, this.height - this.gap / 2, 140);
|
|
this.context.closePath();
|
|
}
|
|
checkWin()
|
|
{
|
|
for (let i = 0; i < 9; i++)
|
|
{
|
|
for (let j = 0; j < 3; j++)
|
|
{
|
|
if (this.map[i][j] == this.map[i][j + 3] && this.map[i][j + 3] == this.map[i][j + 6])
|
|
return (this.map[i][j])
|
|
}
|
|
for (let j = 0; i < 9; i += 3)
|
|
{
|
|
if (this.map[i][j] == this.map[i][j + 1] && this.map[i][j + 1] == this.map[i][j + 2])
|
|
return (this.map[i][j])
|
|
}
|
|
if (this.map[i][0] == this.map[i][4] && this.map[i][4] == this.map[i][8])
|
|
return (this.map[i][0]);
|
|
if (this.map[i][6] == this.map[i][4] && this.map[i][4] == this.map[i][2])
|
|
return (this.map[i][6]);
|
|
return -1
|
|
}
|
|
}
|
|
onClick(event, morpion)
|
|
{
|
|
let x = event.offsetX;
|
|
let y = event.offsetY;
|
|
let targetMorpion, targetCase;
|
|
|
|
if (this.game.finished)
|
|
{
|
|
return;
|
|
}
|
|
targetMorpion = morpion.findPlace(x, this) + morpion.findPlace(y, this) * 3;
|
|
if (morpion.findPlace(x, this) < 0 || morpion.findPlace(y, this) < 0)
|
|
return -1;
|
|
targetCase = morpion.findSquare(x, this.rectsize * 3 * morpion.findPlace(x, this) + this.gap, this) + morpion.findSquare(y, this.rectsize * 3 * morpion. findPlace(y, this) + this.gap, this) * 3;
|
|
|
|
if (morpion.checkCase(targetMorpion, targetCase))
|
|
{
|
|
morpion.setOutline(this.currentMorpion, true);
|
|
morpion.sendCase(targetMorpion, targetCase);
|
|
}
|
|
else
|
|
morpion.incorrectCase();
|
|
}
|
|
|
|
checkCase(targetMorpion, targetCase)
|
|
{
|
|
return (this.map[targetMorpion][targetCase] == -1 && this.turn == true && targetMorpion == this.currentMorpion);
|
|
}
|
|
|
|
incorrectCase()
|
|
{
|
|
|
|
}
|
|
|
|
sendCase(targetMorpion, targetCase)
|
|
{
|
|
this.map[targetMorpion][targetCase] = (this.sign == "x") ? 0 : 1;
|
|
this.currentMorpion = targetCase;
|
|
this.printSign(targetMorpion, targetCase, this.sign);
|
|
this.game.send(JSON.stringify({"targetMorpion" : targetMorpion, "targetCase" : targetCase, "sign" : this.sign}));
|
|
this.turn = !this.turn;
|
|
}
|
|
|
|
printSign(targetMorpion, targetCase, sign)
|
|
{
|
|
let targetX = (this.gap + targetMorpion % 3 * this.rectsize * 3) + (targetCase % 3 * this.rectsize);
|
|
let targetY = (this.gap + Math.floor(targetMorpion / 3) * this.rectsize * 3) + (Math.floor(targetCase / 3) * this.rectsize);
|
|
if (sign == "x")
|
|
{
|
|
this.context.beginPath();
|
|
this.context.strokeStyle = "green";
|
|
this.context.moveTo(targetX + 15, targetY + 15);
|
|
this.context.lineTo(targetX + 45, targetY + 45);
|
|
this.context.moveTo(targetX + 45, targetY + 15);
|
|
this.context.lineTo(targetX + 15, targetY + 45);
|
|
this.context.stroke();
|
|
this.context.closePath();
|
|
}
|
|
else
|
|
{
|
|
this.context.beginPath();
|
|
this.context.strokeStyle = "red";
|
|
targetX += this.rectsize / 2;
|
|
targetY += this.rectsize / 2;
|
|
this.context.arc(targetX, targetY, 20, 0, 2 * Math.PI);
|
|
this.context.stroke();
|
|
this.context.closePath();
|
|
}
|
|
if (sign != this.sign)
|
|
this.turn = true;
|
|
}
|
|
|
|
findPlace(x, morpion)
|
|
{
|
|
if (x <= this.gap || x >= this.gap + this.rectsize * 9)
|
|
return -1;
|
|
if (x <= this.gap + this.rectsize * 3)
|
|
return 0;
|
|
if (x >= this.gap + this.rectsize * 3 && x <= this.gap + this.rectsize * 6)
|
|
return 1;
|
|
if (x >= this.gap + this.rectsize * 6)
|
|
return 2;
|
|
return -1;
|
|
}
|
|
|
|
findSquare(x, gap, morpion)
|
|
{
|
|
if (x <= gap + this.rectsize)
|
|
return 0;
|
|
if (x >= gap + this.rectsize && x <= gap + this.rectsize * 2)
|
|
return 1;
|
|
if (x >= gap + this.rectsize * 2)
|
|
return 2;
|
|
return -1;
|
|
}
|
|
|
|
setOutline(targetMorpion, clear)
|
|
{
|
|
let targetX = (this.gap + targetMorpion % 3 * this.rectsize * 3);
|
|
let targetY = (this.gap + Math.floor(targetMorpion / 3) * this.rectsize * 3);
|
|
if (this.game.finished)
|
|
return;
|
|
if (!clear)
|
|
{
|
|
this.context.beginPath();
|
|
this.context.strokeStyle = (this.sign == "x") ? "green" : "red";
|
|
this.context.rect(targetX, targetY, this.rectsize * 3, this.rectsize * 3)
|
|
this.context.stroke();
|
|
this.context.closePath();
|
|
}
|
|
else
|
|
{
|
|
this.context.beginPath();
|
|
this.context.strokeStyle = `rgb(230 230 230)`;
|
|
this.context.rect(targetX, targetY, this.rectsize * 3, this.rectsize * 3)
|
|
this.context.stroke();
|
|
this.context.closePath();
|
|
}
|
|
}
|
|
|
|
DrawSuperMorpion()
|
|
{
|
|
this.context.fillStyle = "#1a1a1d";
|
|
this.context.roundRect(0, 0, this.canvas.width, this.canvas.height, 20);
|
|
this.context.fill();
|
|
for (let i = 1, x = this.gap, y = this.gap; i <= 9; i++)
|
|
{
|
|
this.DrawMorpion(x, y);
|
|
x += this.rectsize * 3;
|
|
if (i % 3 == 0)
|
|
{
|
|
y += this.rectsize * 3;
|
|
x = this.gap;
|
|
}
|
|
}
|
|
this.context.lineWidth = 6;
|
|
for (let i = 0; i < 4; i++)
|
|
{
|
|
this.context.beginPath();
|
|
this.context.strokeStyle = `rgb(230 230 230)`;
|
|
this.context.moveTo(this.gap + i * this.rectsize * 3, this.gap - 3);
|
|
this.context.lineTo(this.gap + i * this.rectsize * 3, this.canvas.height - this.gap + 3);
|
|
this.context.stroke();
|
|
this.context.closePath();
|
|
};
|
|
for (let i = 0; i < 4; i++)
|
|
{
|
|
this.context.beginPath();
|
|
this.context.strokeStyle = `rgb(230 230 230)`;
|
|
this.context.moveTo(this.gap, this.gap + i * this.rectsize * 3);
|
|
this.context.lineTo(this.canvas.height - this.gap, this.gap + i * this.rectsize * 3);
|
|
this.context.stroke();
|
|
this.context.closePath();
|
|
}
|
|
}
|
|
|
|
DrawMorpion(start_x, start_y)
|
|
{
|
|
this.context.beginPath();
|
|
this.context.strokeStyle = `rgb(200 200 200)`;
|
|
for (let i = 1, x = 0, y = 0; i <= 9; i++)
|
|
{
|
|
this.context.strokeRect(start_x + x, start_y + y, this.rectsize, this.rectsize);
|
|
x += this.rectsize;
|
|
if (i % 3 == 0)
|
|
{
|
|
y += this.rectsize;
|
|
x = 0;
|
|
}
|
|
}
|
|
this.context.closePath();
|
|
}
|
|
}
|
|
|
|
export { TicTacToe }; |