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

110
minesweeper.js
View File

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