Book Image

HTML5 Game Development by Example: Beginner's Guide

By : Seng Hin Mak
Book Image

HTML5 Game Development by Example: Beginner's Guide

By: Seng Hin Mak

Overview of this book

Table of Contents (18 chapters)
HTML5 Game Development by Example Beginner's Guide Second Edition
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
9
Building a Physics Car Game with Box2D and Canvas
Index

Time for action – dragging the circles in the Canvas


  1. Let's continue with our previous code. Open the html5games.untangle.js file.

  2. We need a function to clear all the drawings in the Canvas. Add the following function to the end of the untangle.drawing.js file:

    untangleGame.clear = function() {
      var ctx = untangleGame.ctx;
      ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
    };
  3. We also need two more functions that draw all known circles and lines. Append the following code to the untangle.drawing.js file:

    untangleGame.drawAllLines = function(){
      // draw all remembered lines
      for(var i=0;i<untangleGame.lines.length;i++) {
        var line = untangleGame.lines[i];
        var startPoint = line.startPoint;
        var endPoint = line.endPoint;
        var thickness = line.thickness;
        untangleGame.drawLine(startPoint.x, startPoint.y, endPoint.x,
        endPoint.y, thickness);
      }
    };
    
    untangleGame.drawAllCircles = function() {
      // draw all remembered circles
      for(var i=0;i<untangleGame.circles.length...