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 overlayCtx = overlayCanvas.getContext('2d');
const particlesPerExplosion = 50;
const particlesPerExplosion = 20;
const particlesMinSpeed = 3;
const particlesMaxSpeed = 6;
const particlesMinSize = 3;

9
index.html
View File

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

83
minesweeper.js
View File

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