title: Move canvas object on touchmove in Javascript
body: <p>I’m fairly new to web development and I’ve only ever used jQuery to write my scripts. Today however, I’d like to improve my skills and build a little game that could be used on a smartphone as a web app in vanilla JS.</p>
  
  <p>The game’s pretty straightforward:
  You hold your phone in portrait mode and control a character that stays at the bottom of the screen and has to dodge objects that are falling on him. The character can only move left or right and thus always stays on the same x-axis. In order to control him, your finger has to stay on the screen. Once you take it off, you lose. Also, the move isn’t triggered by tapping the screen, but by moving your finger left or right.</p>
  
  <p>For now, I’ve only been experimenting to get the hang of touchevents and was able to make the character move when swiping:</p>
  
  <pre><code>document.addEventListener('touchmove',function(e){
  e.preventDefault(); //disable scroll
  
  var board = document.getElementById(‘board);
  var character = document.getElementById(‘character’);
  
  if (e.targetTouches.length === 1) {
      var touch = e.targetTouches[0];
      board.classList.add(‘moving’);
  
      character.style.left = touch.pageX + 'px';
  }
  
  }, false);
  </code></pre>
  
  <p>(The ‘moving’ class is used to move the background-position of the board and animate the character’s sprite in plain CSS.)</p>
  
  <p>Separately, I made a little script that puts objects with random classes in a container with a set interval. These objects are then animated in css and fall from the top to the bottom of the screen.</p>
  
  <p>Now, here comes the tricky part: the collision detection.
  As I said, I’m new to development and vanilla JS, so I searched a bit to figure out how to detect when two objects collide, and it seems that most tutorials do this using canvases. The thing is, I’ve never used them and they scare me quite a bit. What’s more, I think it would render what I’ve done so far useless.</p>
  
  <p>I’m okay with trying the canvas way, but before I do, I’d like to know if there’s any other way to detect if two moving objects collide?</p>
  
  <p>Also, if there turns out to be no real way to do this without canvas, I plan on using <a href="http://www.html5rocks.com/en/tutorials/canvas/notearsgame/" rel="nofollow">this tutorial</a> to learn how to build the app. However, this game wasn’t built for touchscreen devices, and the spaceship’s position changes on certain keystrokes (left &amp; right) :</p>
  
  <pre><code>function update() {
    if (keydown.left) {
      player.x -= 5;
     }
  
    if (keydown.right) {
      player.x += 5;
    }
  
    player.x = player.x.clamp(0, CANVAS_WIDTH - player.width);
  }
  </code></pre>
  
  <p>My question is: how should I do to update the position using touchmove instead of keystrokes?</p>
  
  <p>Thank you all in advance.</p>