KingOfDog/minesweeper.js
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #3 from KingOfDog/revert-2-canvas-scaling

Browse Source 
Revert "Animation fixes"
This commit is contained in:
0100 1011 0100 1111 0100 0100
2018-05-10 12:07:55 +02:00
committed by GitHub
parent 168eee7873 110aac6e1e
commit 65b0ef0445
4 changed files with 61 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -1 +0,0 @@
.idea/*

22
animations/click.js
View File

@@ -7,9 +7,9 @@ window.requestAnimFrame = (function (callback) {
const overlayCanvas = document.getElementById('minesweeper-overlay'); const overlayCanvas = document.getElementById('minesweeper-overlay');
const overlayCtx = overlayCanvas.getContext('2d'); const overlayCtx = overlayCanvas.getContext('2d');
const particlesPerExplosion = 10; const particlesPerExplosion = 20;
const particlesMinSpeed = 3; const particlesMinSpeed = 3;
const particlesMaxSpeed = 5; const particlesMaxSpeed = 6;
const particlesMinSize = 3; const particlesMinSize = 3;
const particlesMaxSize = 6; const particlesMaxSize = 6;
const explosions = []; const explosions = [];
@@ -28,13 +28,10 @@ if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(naviga
let play = true; let play = true;
// Draw // Draw
function drawClickAnimation() { function draw() {
// Loop // Loop
if(play) if(play)
requestAnimationFrame(drawClickAnimation); requestAnimationFrame(draw);
if(explosions.length === 0)
return;
// Set NOW and DELTA // Set NOW and DELTA
now = Date.now(); now = Date.now();
@@ -50,11 +47,14 @@ function drawClickAnimation() {
// Our animation // Our animation
drawExplosion(); drawExplosion();
} }
} }
// Draw explosion(s) // Draw explosion(s)
function drawExplosion() { function drawExplosion() {
if (explosions.length === 0) { if (explosions.length === 0) {
return; return;
} }
@@ -138,9 +138,9 @@ function particle(x, y) {
this.xv = randInt(particlesMinSpeed, particlesMaxSpeed, false); this.xv = randInt(particlesMinSpeed, particlesMaxSpeed, false);
this.yv = randInt(particlesMinSpeed, particlesMaxSpeed, false); this.yv = randInt(particlesMinSpeed, particlesMaxSpeed, false);
this.size = randInt(particlesMinSize, particlesMaxSize, true); this.size = randInt(particlesMinSize, particlesMaxSize, true);
this.r = randInt(2, 36); this.r = randInt(113, 222);
this.g = randInt(135, 150); this.g = '00';
this.b = randInt(190, 255); this.b = randInt(105, 255);
} }
// Returns an random integer, positive or negative // Returns an random integer, positive or negative
@@ -159,4 +159,4 @@ function randInt(min, max, positive) {
} }
drawClickAnimation(); draw();

4
animations/victory.js
View File

@@ -59,7 +59,7 @@ function drawVictory() {
} }
} }
function animateVictory() { function animate() {
requestAnimFrame(animateVictory); requestAnimFrame(animate);
drawVictory(); drawVictory();
} }

110
minesweeper.js
View File

@@ -80,6 +80,8 @@ function animateTile(x, y, curWidth, curHeight, finalWidth, finalHeight, curRadi
else else
curRadius = finalRadius; curRadius = finalRadius;
// drawRoundedRect(ctx, x + 1, y + 1, finalWidth - 2, finalHeight - 2, finalRadius, getColor(x, y));
drawRoundedRect(ctx, x + (finalWidth - curWidth) / 2, y + (finalHeight - curHeight) / 2, curWidth, curHeight, curRadius, color); drawRoundedRect(ctx, x + (finalWidth - curWidth) / 2, y + (finalHeight - curHeight) / 2, curWidth, curHeight, curRadius, color);
requestAnimFrame(() => { requestAnimFrame(() => {
@@ -127,8 +129,8 @@ function applyScaling() {
} }
function calcScaling(field = fieldSize, tile = tileSize, zoom = zoomFactor) { function calcScaling(field = fieldSize, tile = tileSize, zoom = zoomFactor) {
const width = Math.ceil(field.x * zoom) + 1; const width = Math.ceil(field.x * zoom);
const height = Math.ceil(field.y * zoom) + 1; const height = Math.ceil(field.y * zoom);
const offsetX = Math.floor(windowX * field.x); const offsetX = Math.floor(windowX * field.x);
const offsetY = Math.floor(windowY * field.y); const offsetY = Math.floor(windowY * field.y);
@@ -193,9 +195,6 @@ function drawTile(x, y, animations = true) {
const virtualX = renderingConfig.offsetX + x; const virtualX = renderingConfig.offsetX + x;
const virtualY = renderingConfig.offsetY + y; const virtualY = renderingConfig.offsetY + y;
if(virtualX >= fieldSize.x || virtualY >= fieldSize.y)
return;
const content = field[virtualX][virtualY]; const content = field[virtualX][virtualY];
const width = .8 * renderingConfig.sizeX; const width = .8 * renderingConfig.sizeX;
@@ -217,19 +216,16 @@ function drawTile(x, y, animations = true) {
if (!content.flagged && content.clicked) { if (!content.flagged && content.clicked) {
color = "#ddd"; color = "#ddd";
if(content.tileValue === true) { if (content.tileValue !== 0) {
text = "";
fontFamily = "FontAwesome";
textColor = "#aa2211";
color = "#333";
} else if (content.tileValue !== 0) {
text = content.tileValue; text = content.tileValue;
textColor = colors[content.tileValue]; textColor = colors[content.tileValue];
// animateText(content.tileValue, (x + .5) * tileSize.x, y * tileSize.y, 0, fontSize, new Date().getTime(), duration, colors[content.tileValue]);
} }
} else if (content.flagged) { } else if (content.flagged) {
color = "#ff0000"; color = "#ff0000";
fontFamily = "FontAwesome"; fontFamily = "FontAwesome";
text = ""; text = "";
// animateText("", (x + .5) * tileSize.x, y * tileSize.y, 0, fontSize, new Date().getTime(), duration, "white", "FontAwesome");
} }
animateTile(drawX, drawY, 0, 0, width, height, 0, radius, new Date().getTime(), duration, color); animateTile(drawX, drawY, 0, 0, width, height, 0, radius, new Date().getTime(), duration, color);
@@ -256,9 +252,9 @@ function easeInOutCubic(t, b, c, d) {
} }
function gameOverEvent() { function gameOverEvent() {
play = false; console.log("Game Over");
animateBackground(0, 0, canvas.width, canvas.height, 0, .75, new Date().getTime(), 200, {r: 0, g: 0, b: 0, a: 0}); animateBackground(0, 0, canvas.width, canvas.height, 0, .75, new Date().getTime(), 200, {r: 0, g: 0, b: 0, a: 0});
animateText("Game Over", fieldSize.x / 2 - .5, fieldSize.y / 2 - .5, 0, tileSize.y * 1.33, new Date().getTime(), 200, "orange", "Roboto", overlay2Ctx); animateText("Game Over", canvas.width / 2, canvas.height / 2, 0, tileSize.y * 1.33, new Date().getTime(), 200, "orange", "Roboto", overlay2Ctx);
} }
function getPosition(e) { function getPosition(e) {
@@ -267,8 +263,6 @@ function getPosition(e) {
const fieldX = Math.floor(x * fieldSize.x); const fieldX = Math.floor(x * fieldSize.x);
const fieldY = Math.floor(y * fieldSize.y); const fieldY = Math.floor(y * fieldSize.y);
console.log(fieldX, fieldY);
return {x: fieldX, y: fieldY}; return {x: fieldX, y: fieldY};
} }
@@ -364,9 +358,8 @@ function scaleCanvas() {
} }
function tileClickEvent(x, y) { function tileClickEvent(x, y) {
if (gameOver || victory) if (gameOver)
return; return;
console.log(x, y);
uncoverTile(x, y); uncoverTile(x, y);
if (!field[x][y].flagged && field[x][y].tileValue === true) { if (!field[x][y].flagged && field[x][y].tileValue === true) {
gameOver = true; gameOver = true;
@@ -390,9 +383,6 @@ function tileFlag(x, y) {
field[x][y].flagged = !field[x][y].flagged; field[x][y].flagged = !field[x][y].flagged;
field[x][y].clicked = field[x][y].flagged; field[x][y].clicked = field[x][y].flagged;
x -= renderingConfig.offsetX;
y -= renderingConfig.offsetY;
const drawX = (x - renderingConfig.tiltX) * renderingConfig.sizeX; const drawX = (x - renderingConfig.tiltX) * renderingConfig.sizeX;
const drawY = (y - renderingConfig.tiltY) * renderingConfig.sizeY; const drawY = (y - renderingConfig.tiltY) * renderingConfig.sizeY;
@@ -414,7 +404,7 @@ function uncoverTile(x, y) {
return; return;
} }
field[x][y].clicked = true; field[x][y].clicked = true;
drawTile(x - renderingConfig.offsetX, y - renderingConfig.offsetY); drawTile(x, y, );
if (field[x][y].tileValue === true) { if (field[x][y].tileValue === true) {
gameOverEvent(); gameOverEvent();
} }
@@ -433,13 +423,12 @@ function victoryCheck() {
} }
function victoryEvent() { function victoryEvent() {
if(victory) { console.log("Win!");
animateVictory(); animate();
play = false; play = false;
const fontSize = tileSize.y * 1.33; const fontSize = tileSize.y * 1.33;
animateBackground(0, 0, canvas.width, canvas.height, 0, .01, new Date().getTime(), 200, {r: 0, g: 0, b: 0, a: 0}); animateBackground(0, 0, canvas.width, canvas.height, 0, .01, new Date().getTime(), 200, {r: 0, g: 0, b: 0, a: 0});
animateText("Victory!", fieldSize.x / 2 - .5, fieldSize.y / 2 - .5, 0, fontSize, new Date().getTime(), 300, "green", "Roboto", overlay2Ctx); animateText("Victory!", W / 2, H / 2 - fontSize / 2, 0, fontSize, new Date().getTime(), 200, "green", "Roboto", overlay2Ctx);
}
} }
Object.prototype.count = function (val) { Object.prototype.count = function (val) {
@@ -467,9 +456,6 @@ Object.prototype.countFlagged = function (val) {
}; };
overlay2Canvas.addEventListener("click", (e) => { overlay2Canvas.addEventListener("click", (e) => {
if(isDragging)
return;
const pos = getPosition(e); const pos = getPosition(e);
if (isFirstClick) { if (isFirstClick) {
@@ -485,9 +471,6 @@ overlay2Canvas.addEventListener("click", (e) => {
}); });
overlay2Canvas.addEventListener("dblclick", (e) => { overlay2Canvas.addEventListener("dblclick", (e) => {
if(isDragging)
return;
const pos = getPosition(e); const pos = getPosition(e);
tileDoubleClick(pos.x, pos.y); tileDoubleClick(pos.x, pos.y);
@@ -496,9 +479,6 @@ overlay2Canvas.addEventListener("dblclick", (e) => {
}); });
overlay2Canvas.addEventListener("contextmenu", (e) => { overlay2Canvas.addEventListener("contextmenu", (e) => {
if(isDragging)
return;
e.preventDefault(); e.preventDefault();
const pos = getPosition(e); const pos = getPosition(e);
@@ -536,51 +516,57 @@ window.addEventListener("keyup", (e) => {
applyScaling(); applyScaling();
}); });
let startClientX = 0; // let startClientX = 0;
let startClientY = 0; // let startClientY = 0;
let startWindowX = 0; //
let startWindowY = 0; // let isDragging = false;
let hasClicked = false; /*document.addEventListener("mousedown", (e) => {
let isDragging = false;
document.addEventListener("mousedown", (e) => {
if(e.button === 0) { if(e.button === 0) {
hasClicked = true; isDragging = true;
startClientX = e.clientX; startClientX = e.clientX;
startClientY = e.clientY; startClientY = e.clientY;
startWindowX = windowX;
startWindowY = windowY;
} }
}); });
document.addEventListener("mouseup", () => { document.addEventListener("mouseup", (e) => {
hasClicked = false; isDragging = false;
if(isDragging) {
setTimeout(() => {
isDragging = false;
}, 10);
}
}); });
document.addEventListener("mousemove", (e) => { document.addEventListener("mousemove", (e) => {
if(hasClicked) { if(isDragging) {
isDragging = true;
const deltaX = e.clientX - startClientX; const deltaX = e.clientX - startClientX;
const deltaY = e.clientY - startClientY; const deltaY = e.clientY - startClientY;
startClientX = e.clientX;
windowX = startWindowX - deltaX / W; startClientY = e.clientY;
windowY = startWindowY - deltaY / H; windowX -= 1 / deltaX / 10;
windowY -= 1 / deltaY / 10;
windowX = Math.min(windowX, 1 - zoomFactor); windowX = Math.min(windowX, 1 - zoomFactor);
windowY = Math.min(windowY, 1 - zoomFactor); windowY = Math.min(windowY, 1 - zoomFactor);
windowX = Math.max(windowX, 0); windowX = Math.max(windowX, 0);
windowY = Math.max(windowY, 0); windowY = Math.max(windowY, 0);
console.log(windowX, windowY);
// console.log(e, e.clientX - startClientX, e.clientY - startClientY);
// offsetX += (e.clientX - startClientX);
// offsetY += (e.clientY - startClientY);
// startClientX = e.clientX;
// startClientY = e.clientY;
applyScaling(); applyScaling();
} }
}); });*/
// document.addEventListener("dragstart", (e) => {
// console.log(e);
// startClientX = e.clientX;
// startClientY = e.clientY;
// });
//
// overlay2Canvas.addEventListener("drag", (e) => {
// console.log(startClientX - e.clientX);
// });
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
scaleCanvas(); scaleCanvas();