https://custom2048.github.io/js/keyboard_input_manager.js

1function KeyboardInputManager() {
2  this.events = {};
3
4  if (window.navigator.msPointerEnabled) {
5    //Internet Explorer 10 style
6    this.eventTouchstart    = "MSPointerDown";
7    this.eventTouchmove     = "MSPointerMove";
8    this.eventTouchend      = "MSPointerUp";
9  } else {
10    this.eventTouchstart    = "touchstart";
11    this.eventTouchmove     = "touchmove";
12    this.eventTouchend      = "touchend";
13  }
14
15  this.listen();
16}
17
18KeyboardInputManager.prototype.on = function (event, callback) {
19  if (!this.events[event]) {
20    this.events[event] = [];
21  }
22  this.events[event].push(callback);
23};
24
25KeyboardInputManager.prototype.emit = function (event, data) {
26  var callbacks = this.events[event];
27  if (callbacks) {
28    callbacks.forEach(function (callback) {
29      callback(data);
30    });
31  }
32};
33
34KeyboardInputManager.prototype.listen = function () {
35  var self = this;
36
37  var map = {
38    38: 0, // Up
39    39: 1, // Right
40    40: 2, // Down
41    37: 3, // Left
42    75: 0, // Vim up
43    76: 1, // Vim right
44    74: 2, // Vim down
45    72: 3, // Vim left
46    87: 0, // W
47    68: 1, // D
48    83: 2, // S
49    65: 3, // A
50    90:-1 // Z (undo)
51  };
52
53  // Respond to direction keys
54  document.addEventListener("keydown", function (event) {
55    var modifiers = event.altKey || event.ctrlKey || event.metaKey ||
56                    event.shiftKey;
57    var mapped    = map[event.which];
58
59    if (!modifiers) {
60      if (mapped !== undefined) {
61        event.preventDefault();
62        self.emit("move", mapped);
63      }
64    }
65
66    // R key restarts the game
67    if (!modifiers && event.which === 82) {
68      self.restart.call(self, event);
69    }
70  });
71
72  // Respond to button presses
73/*   this.bindButtonPress(".crowd-button", this.crowd); */
74  this.bindButtonPress(".retry-button", this.restart);
75  this.bindButtonPress(".restart-button", this.restart);
76  this.bindButtonPress(".keep-playing-button", this.keepPlaying);
77
78  // Respond to swipe events
79  var touchStartClientX, touchStartClientY;
80  var gameContainer = document.getElementsByClassName("game-container")[0];
81
82  gameContainer.addEventListener(this.eventTouchstart, function (event) {
83    if ((!window.navigator.msPointerEnabled && event.touches.length > 1) ||
84        event.targetTouches > 1) {
85      return; // Ignore if touching with more than 1 finger
86    }
87
88    if (window.navigator.msPointerEnabled) {
89      touchStartClientX = event.pageX;
90      touchStartClientY = event.pageY;
91    } else {
92      touchStartClientX = event.touches[0].clientX;
93      touchStartClientY = event.touches[0].clientY;
94    }
95
96    event.preventDefault();
97  });
98
99  gameContainer.addEventListener(this.eventTouchmove, function (event) {
100    event.preventDefault();
101  });
102
103  gameContainer.addEventListener(this.eventTouchend, function (event) {
104    if ((!window.navigator.msPointerEnabled && event.touches.length > 0) ||
105        event.targetTouches > 0) {
106      return; // Ignore if still touching with one or more fingers
107    }
108
109    var touchEndClientX, touchEndClientY;
110
111    if (window.navigator.msPointerEnabled) {
112      touchEndClientX = event.pageX;
113      touchEndClientY = event.pageY;
114    } else {
115      touchEndClientX = event.changedTouches[0].clientX;
116      touchEndClientY = event.changedTouches[0].clientY;
117    }
118
119    var dx = touchEndClientX - touchStartClientX;
120    var absDx = Math.abs(dx);
121
122    var dy = touchEndClientY - touchStartClientY;
123    var absDy = Math.abs(dy);
124
125    if (Math.max(absDx, absDy) > 10) {
126      // (right : left) : (down : up)
127      self.emit("move", absDx > absDy ? (dx > 0 ? 1 : 3) : (dy > 0 ? 2 : 0));
128    }
129  });
130};
131
132KeyboardInputManager.prototype.restart = function (event) {
133  event.preventDefault();
134  this.emit("restart");
135};
136
137KeyboardInputManager.prototype.keepPlaying = function (event) {
138  event.preventDefault();
139  this.emit("keepPlaying");
140};
141
142KeyboardInputManager.prototype.crowd = function (event) {
143  event.preventDefault();
144  this.emit("crowd");
145};
146
147KeyboardInputManager.prototype.bindButtonPress = function (selector, fn) {
148  var button = document.querySelector(selector);
149  button.addEventListener("click", fn.bind(this));
150  button.addEventListener(this.eventTouchend, fn.bind(this));
151};