diff --git a/js/keyboard_input_manager.js b/js/keyboard_input_manager.js index 822cc3bdfdc1edf9c91436aed2817e60c82e012e..a29744cc0ae26c8b87ba95bafe2a3c6220c23365 100644 --- a/js/keyboard_input_manager.js +++ b/js/keyboard_input_manager.js @@ -1,6 +1,17 @@ function KeyboardInputManager() { this.events = {}; + if (window.navigator.msPointerEnabled) { + //Internet Explorer 10 style + this.eventTouchstart = "MSPointerDown"; + this.eventTouchmove = "MSPointerMove"; + this.eventTouchend = "MSPointerUp"; + } else { + this.eventTouchstart = "touchstart"; + this.eventTouchmove = "touchmove"; + this.eventTouchend = "touchend"; + } + this.listen(); } @@ -55,7 +66,7 @@ KeyboardInputManager.prototype.listen = function () { var retry = document.querySelector(".retry-button"); retry.addEventListener("click", this.restart.bind(this)); - retry.addEventListener("touchend", this.restart.bind(this)); + retry.addEventListener(this.eventTouchend, this.restart.bind(this)); var keepPlaying = document.querySelector(".keep-playing-button"); keepPlaying.addEventListener("click", this.keepPlaying.bind(this)); @@ -65,25 +76,40 @@ KeyboardInputManager.prototype.listen = function () { var touchStartClientX, touchStartClientY; var gameContainer = document.getElementsByClassName("game-container")[0]; - gameContainer.addEventListener("touchstart", function (event) { - if (event.touches.length > 1) return; - - touchStartClientX = event.touches[0].clientX; - touchStartClientY = event.touches[0].clientY; + gameContainer.addEventListener(this.eventTouchstart, function (event) { + if (( !window.navigator.msPointerEnabled && event.touches.length > 1) || event.targetTouches > 1) return; + + if(window.navigator.msPointerEnabled){ + touchStartClientX = event.pageX; + touchStartClientY = event.pageY; + } else { + touchStartClientX = event.touches[0].clientX; + touchStartClientY = event.touches[0].clientY; + } + event.preventDefault(); }); - gameContainer.addEventListener("touchmove", function (event) { + gameContainer.addEventListener(this.eventTouchmove, function (event) { event.preventDefault(); }); - gameContainer.addEventListener("touchend", function (event) { - if (event.touches.length > 0) return; + gameContainer.addEventListener(this.eventTouchend, function (event) { + if (( !window.navigator.msPointerEnabled && event.touches.length > 0) || event.targetTouches > 0) return; + + var touchEndClientX, touchEndClientY; + if(window.navigator.msPointerEnabled){ + touchEndClientX = event.pageX; + touchEndClientY = event.pageY; + } else { + touchEndClientX = event.changedTouches[0].clientX; + touchEndClientY = event.changedTouches[0].clientY; + } - var dx = event.changedTouches[0].clientX - touchStartClientX; + var dx = touchEndClientX - touchStartClientX; var absDx = Math.abs(dx); - var dy = event.changedTouches[0].clientY - touchStartClientY; + var dy = touchEndClientY - touchStartClientY; var absDy = Math.abs(dy); if (Math.max(absDx, absDy) > 10) { diff --git a/style/main.css b/style/main.css index f8a856ad8141b61d66cf8ff44eaae58ce2e3ced8..6ed17802fe2b07ebc03bb85da814713f60ca0aa8 100644 --- a/style/main.css +++ b/style/main.css @@ -155,6 +155,7 @@ hr { border-radius: 6px; width: 500px; height: 500px; + -ms-touch-action: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } diff --git a/style/main.scss b/style/main.scss index 1ec515e1a72123fcd88c9e7994223b5328a0f4a5..00b6acc22ba3f49a33400b9143e868fae1337e49 100644 --- a/style/main.scss +++ b/style/main.scss @@ -184,6 +184,7 @@ hr { border-radius: $tile-border-radius * 2; width: $field-width; height: $field-width; + -ms-touch-action: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;