138 lines
3.7 KiB
JavaScript
138 lines
3.7 KiB
JavaScript
|
|
class TicTacToe
|
|
{
|
|
constructor(height, width, gap, rectsize, canvas, blitz = false)
|
|
{
|
|
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");
|
|
this.blitz = blitz;
|
|
}
|
|
|
|
init()
|
|
{
|
|
this.canvas.addEventListener("mousedown", (event) => { this.onClick(event) }, false);
|
|
}
|
|
|
|
uninit()
|
|
{
|
|
this.canvas.removeEventListener("mousedown", this.onClick, false);
|
|
}
|
|
|
|
onClick(event)
|
|
{
|
|
function findPlace(x, morpion)
|
|
{
|
|
if (x <= morpion.gap || x >= morpion.gap + morpion.rectsize * 9)
|
|
return -1;
|
|
if (x <= morpion.gap + morpion.rectsize * 3)
|
|
return 0;
|
|
if (x >= morpion.gap + morpion.rectsize * 3 && x <= morpion.gap + morpion.rectsize * 6)
|
|
return 1;
|
|
if (x >= morpion.gap + morpion.rectsize * 6)
|
|
return 2;
|
|
return -1;
|
|
}
|
|
|
|
function findSquare(x, gap, morpion)
|
|
{
|
|
if (x <= gap + morpion.rectsize)
|
|
return 0;
|
|
if (x >= gap + morpion.rectsize && x <= gap + morpion.rectsize * 2)
|
|
return 1;
|
|
if (x >= gap + morpion.rectsize * 2)
|
|
return 2;
|
|
return -1;
|
|
}
|
|
|
|
let x = event.offsetX;
|
|
let y = event.offsetY;
|
|
let targetMorpion, targetCase;
|
|
|
|
targetMorpion = findPlace(x, this) + findPlace(y, this) * 3;
|
|
if (findPlace(x, this) < 0 || findPlace(y, this) < 0)
|
|
return -1;
|
|
targetCase = findSquare(x, this.rectsize * 3 * findPlace(x, this) + this.gap, this) + findSquare(y, this.rectsize * 3 * findPlace(y, this) + this.gap, this) * 3;
|
|
console.log("TargetMorpion :" + targetMorpion + " targetCase :" + targetCase);
|
|
}
|
|
|
|
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();
|
|
}
|
|
|
|
selectCase(x, y)
|
|
{
|
|
case_morpion = Math.floor(x / this.rectsize) + Math.floor((y / this.rectsize)) * 3
|
|
case_square = Math.floor(x / Math.floor(this.rectsize / 3)) % this.rectsize + Math.floor(y / this.rectsize) % this.rectsize
|
|
// ask server if case_morpion == playing_case && case_square == empty
|
|
|
|
}
|
|
|
|
SetOutline(color)
|
|
{
|
|
this.context.beginPath();
|
|
this.context.strokeStyle = color;
|
|
this.context.roundRect(0, 0, this.canvas.width, this.canvas.height, 25);
|
|
this.context.stroke();
|
|
this.context.closePath();
|
|
}
|
|
}
|
|
|
|
export { TicTacToe }; |