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

Adjust event listeners to mobile devices

Browse Source
This commit is contained in:
Marcel
2018-05-13 11:43:09 +02:00
parent abf094da4d
commit 9dc90621ab
3 changed files with 54 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
game.js
View File

@@ -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() { initEventListeners() {
this.layer2Canvas.addEventListener("click", (e) => { this.layer2Canvas.addEventListener("click", (e) => {
if (this.isDragging) this.clickEventHandler(e);
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.layer2Canvas.addEventListener("dblclick", (e) => { this.layer2Canvas.addEventListener("dblclick", (e) => {
@@ -301,18 +320,7 @@ class Game {
}); });
this.layer2Canvas.addEventListener("contextmenu", (e) => { this.layer2Canvas.addEventListener("contextmenu", (e) => {
if (this.isDragging) this.rightClickEventHandler(e);
return;
e.preventDefault();
const pos = this.getPosition(e);
this.tileFlag(pos.x, pos.y);
this.updateBombs();
this.victoryEvent();
}); });
window.addEventListener("keyup", (e) => { window.addEventListener("keyup", (e) => {
@@ -358,6 +366,13 @@ class Game {
document.addEventListener("mousedown", (e) => { document.addEventListener("mousedown", (e) => {
if(isTouchDevice) {
e.preventDefault();
this.pressTimer = window.setTimeout(function () {
game.rightClickEventHandler(e);
}, 1000)
}
if (e.button === 0) { if (e.button === 0) {
this.hasClicked = true; this.hasClicked = true;
this.startClientX = e.clientX; 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; this.hasClicked = false;
if (this.isDragging) { if (this.isDragging) {
setTimeout(() => { setTimeout(() => {

4
index.html
View File

@@ -4,8 +4,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Minesweeper.js</title> <title>Minesweeper.js</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/x-icon" href="icons/icon.ico"> <!--<link rel="shortcut icon" type="image/x-icon" href="icons/icon.ico">-->
<link rel="icon" type="image/png" href="icons/icon.png" sizes="32x32"> <!--<link rel="icon" type="image/png" href="icons/icon.png" sizes="32x32">-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
</head> </head>
<body> <body>

2
minesweeper.js
View File

@@ -11,6 +11,8 @@ const colors = {
6: "pink" 6: "pink"
}; };
const isTouchDevice = 'ontouchstart' in document.documentElement;
function animateBackground(ctx, x, y, width, height, curOpacity, finalOpacity, startTime, duration, color) { function animateBackground(ctx, x, y, width, height, curOpacity, finalOpacity, startTime, duration, color) {
const time = (new Date()).getTime() - startTime; const time = (new Date()).getTime() - startTime;