74 lines
1.9 KiB
JavaScript
74 lines
1.9 KiB
JavaScript
class TicTacToe
|
|
{
|
|
constructor(height, width, gap, rectsize, canvas)
|
|
{
|
|
this.height = height;
|
|
this.width = width;
|
|
this.gap = gap;
|
|
this.rectsize = rectsize;
|
|
this.game = [[],[],[],[],[],[],[],[],[]];
|
|
for (let i = 0; i < 9; i++)
|
|
for (let j = 0; j < 9; j++)
|
|
this.game[i].push(-1);
|
|
|
|
this.canvas = canvas
|
|
this.context = this.canvas.getContext("2d");
|
|
}
|
|
|
|
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 }; |