integrate animations into tictactoe grid
This commit is contained in:
parent
cbae0a0d41
commit
7a20daa045
136
grid.js
136
grid.js
@ -3,87 +3,135 @@ const size = cellSize * 3;
|
||||
const margin = 10;
|
||||
|
||||
let ctx = undefined;
|
||||
let initialPos = undefined;
|
||||
let circle = true;
|
||||
let pendingClicks = [];
|
||||
let shapes = [];
|
||||
|
||||
function resizeCanvas() {
|
||||
ctx.canvas.width = window.innerWidth;
|
||||
ctx.canvas.height = window.innerHeight;
|
||||
}
|
||||
|
||||
function drawGrid() {
|
||||
function drawGrid(origin) {
|
||||
ctx.strokeStyle = "white";
|
||||
ctx.lineWidth = 5;
|
||||
|
||||
|
||||
for (let x = 1; x < 3; ++x) {
|
||||
ctx.moveTo(initialPos.x + x * cellSize, 0 + initialPos.y);
|
||||
ctx.lineTo(initialPos.x + x * cellSize, initialPos.y + size);
|
||||
ctx.moveTo(origin.x + x * cellSize, 0 + origin.y);
|
||||
ctx.lineTo(origin.x + x * cellSize, origin.y + size);
|
||||
}
|
||||
|
||||
for (let y = 1; y < 3; ++y) {
|
||||
ctx.moveTo(initialPos.x + 0, initialPos.y + y * cellSize);
|
||||
ctx.lineTo(initialPos.x + size, initialPos.y + y * cellSize);
|
||||
ctx.moveTo(origin.x + 0, origin.y + y * cellSize);
|
||||
ctx.lineTo(origin.x + size, origin.y + y * cellSize);
|
||||
}
|
||||
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
|
||||
function drawCircle(x, y) {
|
||||
ctx.beginPath();
|
||||
// arc(x, y, radius, startAngle, endAngle)
|
||||
ctx.arc(x, y, 50, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
function drawAnimatedCircle(dt, x, y, hue) {
|
||||
const end = dt*2*Math.PI/500;
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, 50, 0, Math.min(end, 2*Math.PI));
|
||||
const percent = Math.trunc(100*Math.min(end, 2*Math.PI)/(2*Math.PI));
|
||||
ctx.strokeStyle = `hsla(${hue}, ${percent}%, 50%, 1)`;
|
||||
ctx.lineWidth = 5;
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function drawCross(x, y) {
|
||||
function drawAnimatedCross(dt, x, y, hue) {
|
||||
startPoint = { x: x-50, y: y-50 };
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(startPoint.x, startPoint.y);
|
||||
ctx.lineTo(startPoint.x + 100, startPoint.y + 100);
|
||||
ctx.moveTo(startPoint.x + 100, startPoint.y);
|
||||
ctx.lineTo(startPoint.x, startPoint.y + 100);
|
||||
|
||||
delta = 100*dt/250;
|
||||
if (delta < 100) { // draw \
|
||||
d = Math.min(delta, 100);
|
||||
ctx.lineTo(startPoint.x + d, startPoint.y + d);
|
||||
} else { // draw /
|
||||
ctx.lineTo(startPoint.x + 100, startPoint.y + 100); // keep \ drawn
|
||||
ctx.moveTo(startPoint.x + 100, startPoint.y);
|
||||
d = Math.min(delta-100, 100);
|
||||
ctx.lineTo(startPoint.x +100 - d, startPoint.y + d);
|
||||
}
|
||||
|
||||
ctx.lineWidth = 5;
|
||||
const percent = Math.trunc(100*Math.min(delta, 100)/100);
|
||||
ctx.strokeStyle = `hsla(${hue}, ${percent}%, 50%, 1)`;
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
|
||||
function update(time) {
|
||||
const origin = {
|
||||
x: ctx.canvas.width / 2 - size / 2,
|
||||
y: ctx.canvas.height / 2 - size / 2
|
||||
};
|
||||
|
||||
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
||||
drawGrid(origin);
|
||||
|
||||
for (const evt of pendingClicks) {
|
||||
const snapped = snapToGrid(origin, {x: evt.x, y: evt.y});
|
||||
const h = Math.floor(Math.random() * 255);
|
||||
if (snapped) {
|
||||
if (circle) {
|
||||
shapes.push({kind: "circle", x: snapped.x, y: snapped.y, t: time, hue: h});
|
||||
} else {
|
||||
shapes.push({kind: "cross", x: snapped.x, y: snapped.y, t: time, hue: h});
|
||||
}
|
||||
circle = !circle;
|
||||
}
|
||||
}
|
||||
pendingClicks = [];
|
||||
|
||||
for (const shape of shapes) {
|
||||
const dt = time - shape.t;
|
||||
switch (shape.kind) {
|
||||
case "circle":
|
||||
drawAnimatedCircle(dt, shape.x, shape.y, shape.hue);
|
||||
break;
|
||||
case "cross":
|
||||
drawAnimatedCross(dt, shape.x, shape.y, shape.hue);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
window.requestAnimationFrame(update);
|
||||
}
|
||||
|
||||
function snapToGrid(origin, clientPos) {
|
||||
// Coord relative to origin of the grid (origin)
|
||||
const pt = { x: clientPos.x - origin.x, y: clientPos.y - origin.y };
|
||||
const gridIndex = {
|
||||
x: Math.floor(3 * pt.x / size),
|
||||
y: Math.floor(3 * pt.y / size)
|
||||
};
|
||||
if (gridIndex.x >= 0 && gridIndex.x <= 2 && gridIndex.y >= 0 && gridIndex.y <= 2) {
|
||||
const center = {
|
||||
x: origin.x + gridIndex.x * cellSize + cellSize/2,
|
||||
y: origin.y + gridIndex.y * cellSize + cellSize/2
|
||||
};
|
||||
return center;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function init() {
|
||||
const canvas = document.getElementById("canvas");
|
||||
if (canvas.getContext) {
|
||||
ctx = canvas.getContext("2d");
|
||||
resizeCanvas(ctx); // Init canvas
|
||||
ctx.fillStyle = "red";
|
||||
|
||||
initialPos = {
|
||||
x: ctx.canvas.width / 2 - size / 2,
|
||||
y: ctx.canvas.height / 2 - size / 2
|
||||
};
|
||||
|
||||
ctx.fillRect(initialPos.x, initialPos.y, 5, 5); // origin of grid
|
||||
|
||||
canvas.addEventListener("click", (evt) => {
|
||||
const {clientX, clientY} = evt;
|
||||
// Coord relative to origin of the grid (initialPos)
|
||||
const pt = { x: clientX - initialPos.x, y: clientY - initialPos.y };
|
||||
const gridIndex = {
|
||||
x: Math.floor(3 * pt.x / size),
|
||||
y: Math.floor(3 * pt.y / size)
|
||||
};
|
||||
if (gridIndex.x >= 0 && gridIndex.x <= 2 && gridIndex.y >= 0 && gridIndex.y <= 2) {
|
||||
ctx.fillStyle = "blue";
|
||||
const center = {
|
||||
x: initialPos.x + gridIndex.x * cellSize + cellSize/2,
|
||||
y: initialPos.y + gridIndex.y * cellSize + cellSize/2
|
||||
};
|
||||
if (circle) drawCircle(center.x, center.y);
|
||||
else drawCross(center.x, center.y);
|
||||
circle = !circle;
|
||||
}
|
||||
pendingClicks.push({x: clientX, y: clientY});
|
||||
});
|
||||
|
||||
//window.addEventListener('resize', () => resizeCanvas(ctx));
|
||||
//window.requestAnimationFrame(time => update(ctx, time))
|
||||
|
||||
drawGrid(ctx);
|
||||
window.requestAnimationFrame(update)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
12
index.html
12
index.html
@ -1,12 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body style="margin: 0; padding 0; overflow: hidden; background-color: #000000">
|
||||
<canvas id="canvas" width="800" height="600"></canvas>
|
||||
</body>
|
||||
<script src="main.js"></script>
|
||||
</html>
|
||||
98
main.js
98
main.js
@ -1,98 +0,0 @@
|
||||
let startTime = undefined;
|
||||
|
||||
let shapes = [];
|
||||
let pendingClicks = [];
|
||||
|
||||
function update(ctx, time) {
|
||||
if (!startTime) {
|
||||
startTime = time;
|
||||
}
|
||||
|
||||
for (const evt of pendingClicks) {
|
||||
const h = Math.floor(Math.random() * 255);
|
||||
if (evt.kind == "circle") {
|
||||
shapes.push({kind: evt.kind, x: evt.x, y: evt.y, t: time, hue: h});
|
||||
} else if (evt.kind == "cross") {
|
||||
shapes.push({kind: evt.kind, x: evt.x, y: evt.y, t: time, hue: h});
|
||||
}
|
||||
}
|
||||
pendingClicks = [];
|
||||
|
||||
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
||||
for (const shape of shapes) {
|
||||
const dt = time - shape.t;
|
||||
switch (shape.kind) {
|
||||
case "circle":
|
||||
drawAnimatedCircle(ctx, dt, shape.x, shape.y, shape.hue);
|
||||
break;
|
||||
case "cross":
|
||||
drawAnimatedCross(ctx, dt, shape.x, shape.y, shape.hue);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
window.requestAnimationFrame(time => update(ctx, time));
|
||||
}
|
||||
|
||||
function drawAnimatedCircle(ctx, dt, x, y, hue) {
|
||||
const end = dt*2*Math.PI/500;
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, 50, 0, Math.min(end, 2*Math.PI));
|
||||
const percent = Math.trunc(100*Math.min(end, 2*Math.PI)/(2*Math.PI));
|
||||
ctx.strokeStyle = `hsla(${hue}, ${percent}%, 50%, 1)`;
|
||||
ctx.lineWidth = 5;
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function drawAnimatedCross(ctx, dt, x, y, hue) {
|
||||
startPoint = { x: x-50, y: y-50 };
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(startPoint.x, startPoint.y);
|
||||
|
||||
delta = 100*dt/250;
|
||||
if (delta < 100) { // draw \
|
||||
d = Math.min(delta, 100);
|
||||
ctx.lineTo(startPoint.x + d, startPoint.y + d);
|
||||
} else { // draw /
|
||||
ctx.lineTo(startPoint.x + 100, startPoint.y + 100); // keep \ drawn
|
||||
ctx.moveTo(startPoint.x + 100, startPoint.y);
|
||||
d = Math.min(delta-100, 100);
|
||||
ctx.lineTo(startPoint.x +100 - d, startPoint.y + d);
|
||||
}
|
||||
|
||||
ctx.lineWidth = 5;
|
||||
const percent = Math.trunc(100*Math.min(delta, 100)/100);
|
||||
ctx.strokeStyle = `hsla(${hue}, ${percent}%, 50%, 1)`;
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
function resizeCanvas(ctx) {
|
||||
ctx.canvas.width = window.innerWidth;
|
||||
ctx.canvas.height = window.innerHeight;
|
||||
}
|
||||
|
||||
function init() {
|
||||
const canvas = document.getElementById("canvas");
|
||||
if (canvas.getContext) {
|
||||
const ctx = canvas.getContext("2d");
|
||||
resizeCanvas(ctx); // Init canvas
|
||||
|
||||
canvas.addEventListener("click", (evt) => {
|
||||
const {clientX, clientY} = evt;
|
||||
pendingClicks.push({x: clientX, y: clientY, kind: "circle"});
|
||||
});
|
||||
|
||||
canvas.addEventListener("contextmenu", (evt) => {
|
||||
evt.preventDefault();
|
||||
const {clientX, clientY} = evt;
|
||||
pendingClicks.push({x: clientX, y: clientY, kind: "cross"});
|
||||
});
|
||||
|
||||
window.addEventListener('resize', () => resizeCanvas(ctx));
|
||||
window.requestAnimationFrame(time => update(ctx, time))
|
||||
}
|
||||
}
|
||||
|
||||
init();
|
||||
Loading…
Reference in New Issue
Block a user