diff --git a/game.js b/game.js
index 48988a6..741ad2c 100644
--- a/game.js
+++ b/game.js
@@ -269,24 +269,43 @@ class Game {
}
}
+ clickEventHandler(e) {
+ if (this.isDragging)
+ return;
+
+ const pos = this.getPosition(e);
+
+ if (this.isFirstClick) {
+ this.initBombs(pos.x, pos.y);
+ this.initTime();
+ this.isFirstClick = false;
+ }
+
+ this.tileClickEvent(pos.x, pos.y);
+
+ this.victoryEvent();
+
+ clicked(e);
+ }
+
+ rightClickEventHandler(e) {
+ if (this.isDragging)
+ return;
+
+ e.preventDefault();
+
+ const pos = this.getPosition(e);
+
+ this.tileFlag(pos.x, pos.y);
+
+ this.updateBombs();
+
+ this.victoryEvent();
+ }
+
initEventListeners() {
this.layer2Canvas.addEventListener("click", (e) => {
- if (this.isDragging)
- return;
-
- const pos = this.getPosition(e);
-
- if (this.isFirstClick) {
- this.initBombs(pos.x, pos.y);
- this.initTime();
- this.isFirstClick = false;
- }
-
- this.tileClickEvent(pos.x, pos.y);
-
- this.victoryEvent();
-
- clicked(e);
+ this.clickEventHandler(e);
});
this.layer2Canvas.addEventListener("dblclick", (e) => {
@@ -301,18 +320,7 @@ class Game {
});
this.layer2Canvas.addEventListener("contextmenu", (e) => {
- if (this.isDragging)
- return;
-
- e.preventDefault();
-
- const pos = this.getPosition(e);
-
- this.tileFlag(pos.x, pos.y);
-
- this.updateBombs();
-
- this.victoryEvent();
+ this.rightClickEventHandler(e);
});
window.addEventListener("keyup", (e) => {
@@ -358,6 +366,13 @@ class Game {
document.addEventListener("mousedown", (e) => {
+ if(isTouchDevice) {
+ e.preventDefault();
+ this.pressTimer = window.setTimeout(function () {
+ game.rightClickEventHandler(e);
+ }, 1000)
+ }
+
if (e.button === 0) {
this.hasClicked = true;
this.startClientX = e.clientX;
@@ -367,7 +382,13 @@ class Game {
}
});
- document.addEventListener("mouseup", () => {
+ document.addEventListener("mouseup", (e) => {
+ if(isTouchDevice) {
+ e.preventDefault();
+ clearTimeout(this.pressTimer);
+ this.clickEventHandler(e);
+ }
+
this.hasClicked = false;
if (this.isDragging) {
setTimeout(() => {
diff --git a/index.html b/index.html
index 579d012..759a0f0 100644
--- a/index.html
+++ b/index.html
@@ -4,8 +4,8 @@
Minesweeper.js
-
-
+
+
diff --git a/minesweeper.js b/minesweeper.js
index a1dc0df..5882961 100644
--- a/minesweeper.js
+++ b/minesweeper.js
@@ -11,6 +11,8 @@ const colors = {
6: "pink"
};
+const isTouchDevice = 'ontouchstart' in document.documentElement;
+
function animateBackground(ctx, x, y, width, height, curOpacity, finalOpacity, startTime, duration, color) {
const time = (new Date()).getTime() - startTime;