Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Tic Tac Toe board drawing class
'use strict';
define(function () {
class GmaeBoardRenderer{
constructor(canvas, canvasSize){
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
this.canvas.width = canvasSize;
this.canvas.height = canvasSize;
this.cellSize = Math.floor(canvasSize / 3);
this.gridLineStyle = "#D2D8D2";
this.gridLineWidth = 10;
this.xStyle = "#4ECDC4";
this.oStyle = "#FF6B6B";
this.oLineWidth = 10;
this.xLineWidth = this.oLineWidth;
let that = this;
canvas.addEventListener('mouseup', function (event) {
let canvasMousePosition = that.getRelativeCursorPosition(event);
let ev = new CustomEvent(
"cellClicked",
{
detail: {
cell: that.getCellIndex(canvasMousePosition)
},
bubbles: true,
cancelable: true
}
);
canvas.dispatchEvent(ev);
});
}
render(boardState){
this.clear();
this.drawCells(boardState);
this.drawGrid();
}
drawCells(boardState){
boardState.forEach(function(el, i){
let x = (i % 3) * this.cellSize;
let y = Math.floor(i/3) * this.cellSize;
if(el === 1){
this.drawX(x, y);
} else if(el === 2){
this.drawO(x, y);
}
}, this);
}
drawX(x, y){
this.ctx.lineWidth = 10;
this.ctx.strokeStyle = this.xStyle;
this.ctx.beginPath();
var offset = this.cellSize * 0.25;
this.ctx.moveTo(x + offset, y + offset);
this.ctx.lineTo(x + this.cellSize - offset, y + this.cellSize - offset);
this.ctx.moveTo(x + offset, y + this.cellSize - offset);
this.ctx.lineTo(x + this.cellSize - offset, y + offset);
this.ctx.stroke();
}
drawO(x, y){
let halfCellSize = (0.5 * this.cellSize);
let centerX = x + halfCellSize;
let centerY = y + halfCellSize;
let radius = (this.cellSize * 0.7) / 2;
let endAngle = 2 * Math.PI;
this.ctx.lineWidth = this.oLineWidth;
this.ctx.strokeStyle = this.oStyle;
this.ctx.beginPath();
this.ctx.arc(centerX, centerY, radius, 0, endAngle);
this.ctx.stroke();
}
drawGrid(){
let offset = 5;
let lineLenght = this.canvas.width - offset;
this.ctx.lineWidth = this.gridLineWidth;
this.ctx.lineCap = 'round';
this.ctx.strokeStyle = this.gridLineStyle;
this.ctx.beginPath();
//Horizontal lines
for (let y = 1;y <= 2;y++) {
this.ctx.moveTo(offset, y * this.cellSize);
this.ctx.lineTo(lineLenght, y * this.cellSize);
}
//Vertical lines
for (let x = 1;x <= 2;x++) {
this.ctx.moveTo(x * this.cellSize, offset);
this.ctx.lineTo(x * this.cellSize, lineLenght);
}
this.ctx.stroke();
}
clear(){
// clear entire canvas
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
getCellIndex(position){
for (let x = 0;x < 3;x++) {
for (let y = 0;y < 3;y++) {
let xCordinate = x * this.cellSize;
let yCordinate = y * this.cellSize;
if (
position.x >= xCordinate && position.x <= xCordinate + this.cellSize &&
position.y >= yCordinate && position.y <= yCordinate + this.cellSize
) {
return y * 3 + x;
}
}
}
}
getRelativeCursorPosition(event){
var rect = this.canvas.getBoundingClientRect();
return {
x: event.clientX - rect.left,
y: event.clientY - rect.top
}
}
}
return GmaeBoardRenderer;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.