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

Not working scaling and transforming

Browse Source
This commit is contained in:
Marcel
2018-05-06 12:44:38 +02:00
parent e2f0981a7f
commit 3932ac8638
3 changed files with 85 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
animations/click.js
View File

@@ -7,7 +7,7 @@ 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 = 50; const particlesPerExplosion = 20;
const particlesMinSpeed = 3; const particlesMinSpeed = 3;
const particlesMaxSpeed = 6; const particlesMaxSpeed = 6;
const particlesMinSize = 3; const particlesMinSize = 3;

9
index.html
View File

@@ -7,6 +7,7 @@
html { html {
overflow: hidden; overflow: hidden;
} }
#minesweeper-overlay, #minesweeper-overlay2 { #minesweeper-overlay, #minesweeper-overlay2 {
position: absolute; position: absolute;
top: 0; top: 0;
@@ -16,9 +17,11 @@
</head> </head>
<body style="margin: 0"> <body style="margin: 0">
<canvas id="minesweeper-game" width="100" height="100"></canvas> <div>
<canvas id="minesweeper-overlay" width="100" height="100"></canvas> <canvas id="minesweeper-game" width="100" height="100"></canvas>
<canvas id="minesweeper-overlay2" width="100" height="100"></canvas> <canvas id="minesweeper-overlay" width="100" height="100"></canvas>
<canvas id="minesweeper-overlay2" width="100" height="100"></canvas>
</div>
<script type="text/javascript" src="animations/click.js"></script> <script type="text/javascript" src="animations/click.js"></script>
<script type="text/javascript" src="animations/victory.js"></script> <script type="text/javascript" src="animations/victory.js"></script>

83
minesweeper.js
View File

@@ -3,7 +3,7 @@ const ctx = canvas.getContext('2d');
const fieldSize = {x: 15, y: 10}; const fieldSize = {x: 15, y: 10};
let tileSize; let tileSize;
const bombCount = 30; const bombCount = 25;
const field = []; const field = [];
let gameOver = false; let gameOver = false;
let victory = false; let victory = false;
@@ -165,7 +165,7 @@ function drawTile(x, y, animations = true) {
let duration = 150; let duration = 150;
if (!animations) if (!animations)
duration = 0; duration = 0;
console.log(animations);
if (!field[x][y].flagged && field[x][y].clicked) { if (!field[x][y].flagged && field[x][y].clicked) {
animateTile(x * tileSize.x + .1 * tileSize.x, y * tileSize.y + .1 * tileSize.y, animateTile(x * tileSize.x + .1 * tileSize.x, y * tileSize.y + .1 * tileSize.y,
0, 0, 0, 0,
@@ -201,10 +201,12 @@ function gameOverEvent() {
} }
function getPositon(e) { function getPositon(e) {
const x = e.x - canvas.offsetLeft; const x = e.x - canvas.offsetLeft - offsetX * scaleFactor;
const y = e.y - canvas.offsetTop; const y = e.y - canvas.offsetTop - offsetY * scaleFactor;
console.log(x, y);
const fieldX = Math.floor(x / tileSize.x); const fieldX = Math.floor(x / tileSize.x);
const fieldY = Math.floor(y / tileSize.y); const fieldY = Math.floor(y / tileSize.y);
console.log(fieldX, fieldY);
return {x: fieldX, y: fieldY}; return {x: fieldX, y: fieldY};
} }
@@ -271,11 +273,13 @@ function initBombs(startX, startY) {
} }
function scaleCanvas() { function scaleCanvas() {
tileSize = {x: window.innerWidth / fieldSize.x * .9, y: window.innerWidth / fieldSize.x * .9}; tileSize = {x: window.innerWidth / fieldSize.x * .9 / scale, y: window.innerWidth / fieldSize.x * .9 / scale};
W = fieldSize.x * tileSize.x; W = fieldSize.x * tileSize.x;
H = fieldSize.y * tileSize.y; H = fieldSize.y * tileSize.y;
console.log(canvas);
canvas.width = W; canvas.width = W;
canvas.height = H; canvas.height = H;
overlayCanvas.width = W; overlayCanvas.width = W;
@@ -283,9 +287,13 @@ function scaleCanvas() {
overlay2Canvas.width = W; overlay2Canvas.width = W;
overlay2Canvas.height = H; overlay2Canvas.height = H;
offsetX = -W * scale * 10;
offsetY = -H * scale * 10;
initBalls(); initBalls();
drawGrid(false); drawGrid(false);
applyScaling();
if (gameOver) { if (gameOver) {
gameOverEvent(); gameOverEvent();
} else if (victory) { } else if (victory) {
@@ -418,6 +426,71 @@ overlay2Canvas.addEventListener("contextmenu", (e) => {
tileFlag(pos.x, pos.y); tileFlag(pos.x, pos.y);
}); });
let scale = 1;
let offsetX = 0;
let offsetY = 0;
window.addEventListener("keyup", (e) => {
e.preventDefault();
if(e.keyCode === 171) {
scale += .2;
} else if(e.keyCode === 173) {
if(canvas.width * scale > window.innerWidth && canvas.height * scale > window.innerHeight)
scale -= .2;
}
applyScaling();
console.log("Test");
});
let startClientX = 0;
let startClientY = 0;
let isDragging = false;
document.addEventListener("mousedown", (e) => {
console.log(e);
if(e.button === 0) {
isDragging = true;
startClientX = e.clientX;
startClientY = e.clientY;
}
});
document.addEventListener("mouseup", (e) => {
isDragging = false;
});
document.addEventListener("mousemove", (e) => {
if(isDragging) {
// 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);
// });
function applyScaling() {
canvas.style.transform = "scale(" + scale + ") translate(" + offsetX + "px, " + offsetY + "px)";
overlayCanvas.style.transform = "scale(" + scale + ") translate(" + offsetX + "px, " + offsetY + "px)";
overlay2Canvas.style.transform = "scale(" + scale + ") translate(" + offsetX + "px, " + offsetY + "px)";
console.log("scale(" + scale + ") translate(" + offsetX + "px, " + offsetY + "px)");
}
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
scaleCanvas(); scaleCanvas();
}); });