• Skip to main content
  • Select language
  • Skip to search
MDN Web Docs
  • Technologies
    • HTML
    • CSS
    • JavaScript
    • Graphics
    • HTTP
    • APIs / DOM
    • WebExtensions
    • MathML
  • References & Guides
    • Learn web development
    • Tutorials
    • References
    • Developer Guides
    • Accessibility
    • Game development
    • ...more docs
Game development
  1. MDN
  2. Game development
  3. Tutorials
  4. Touch Event Horizon

Touch Event Horizon

In This Article
  1. Touch Gestures and Events
  2. The example game
    1. Setting up the canvas
    2. Counting the taps
    3. Collecting the bonus
  3. Future developments
  4. Summary

This article is for Touch Event Horizon and A Game Related To It

Touch Gestures and Events

Link

The example game

Github repository

Live demo

Setting up the canvas

Counting the taps

touchstart, touchend

Collecting the bonus

touchmove

Future developments

Summary

This tutorial shows how to use Touch Events to create a game on a <canvas>. This is a multi-player game relying on the Tap and Drag gestures.

 

Document Tags and Contributors

Tags: 
  • NeedsContent
  • NeedsExample
 Contributors to this page: chrisdavidmills, rolfedh, dkocho4, nithinsudarsan, fscholz, Werebgle, aamiryan23, franciov
 Last updated by: chrisdavidmills, Mar 14, 2016, 3:43:22 AM
  1. Introduction
    1. Introduction to game development for the Web
    2. Anatomy of a video game
  2. APIs for game development
    1. Canvas
    2. CSS
    3. Full Screen
    4. Gamepad
    5. IndexedDB
    6. JavaScript
    7. Pointer Lock
    8. SVG
    9. Typed Arrays
    10. Web Audio
    11. WebGL
    12. WebRTC
    13. Web Sockets
    14. Web Workers
    15. XmlHttpRequest
  3. Tools
    1. asm.js
    2. Emscripten
    3. WebVR
    4. Gecko profiler
    5. Game engines and tools
  4. Techniques
    1. Using async scripts for asm.js
    2. Optimizing startup performance
    3. Using WebRTC peer-to-peer data channels
    4. Efficient animation for web games
    5. 3D games on the Web
      1. 3D games on the Web overview
      2. Explaining basic 3D theory
      3. Building up a basic demo with Three.js
      4. Building up a basic demo with PlayCanvas
      5. WebVR
    6. Audio for Web Games
    7. 2D collision detection
    8. 3D collision detection
      1. 3D collision detection overview
      2. Bounding volume collision detection with THREE.js
    9. Tiles and tilemaps
      1. Tiles and tilemaps overview
      2. Static maps
      3. Scrolling maps
  5. Workflows
    1. 2D breakout game using pure JavaScript
    2. 2D breakout game using Phaser
    3. 2D maze game with device orientation
  6. Publishing games
    1. Publishing games overview
    2. Game distribution
    3. Game promotion
    4. Game monetization
  7. Examples