The Essential Guide to HTML5

CANNONBALL AND SL INGSHOT Figure 4-7. Drawing and rotating a rectangle The problem is the rotation point is at the origin, (0,0) ...

CHAPTER 4 By the way, we can't expect our players to put in angles using radians. They, and we, are too accustomed to degrees (9 ...

CANNONBALL AND SL INGSHOT Figure 4-9. Calculating horizontal * vertical displacements At this point, you may want to skip ahead ...

CHAPTER 4 ctx.moveTo(this.bx,this.by); ctx.lineTo(this.s1x,this.s1y); ctx.moveTo(this.bx,this.by); ctx.lineTo(this.s2x,this.s2y) ...

CANNONBALL AND SL INGSHOT When other browsers, such as Internet Explorer, support HTML5, this code will need to be checked and, ...

CHAPTER 4 The last step is to put in a call first to drawall() and then to setInterval to set up the timing event. Again, finish ...

CANNONBALL AND SL INGSHOT 111 square of the distance for the initial velocity. I experimented with some numbers and, as I mentio ...

CHAPTER 4 Table 4-2 shows the complete code for the simplest application, with the ball moving in an arc and no actual cannon. T ...

CANNONBALL AND SL INGSHOT Code Explanation var verticalvel1; Variable to hold vertical displacement at start of interval var ver ...

CHAPTER 4 Code Explanation } Close the function function moveball(dx,dy) { Header for the moveball function this.sx +=dx; Increm ...

CANNONBALL AND SL INGSHOT Code Explanation var target = new Myrectangle(300,100,
80,200,"rgb(0,5,90)"); Build a Myrectangle obj ...

CHAPTER 4 Code Explanation function drawall() { Function header for drawall ctx.clearRect
(0,0,cwidth,cheight); Erase canvas va ...

CANNONBALL AND SL INGSHOT Code Explanation clearInterval(tid); If so, stop motion } Close if true clause drawall(); Draw everyth ...

CHAPTER 4 Code Explanation </body> Close body element </html> Close html element You certainly can make improvements ...

CANNONBALL AND SL INGSHOT Function Invoked By / Called By Calls moveball Invoked by call of the moveit method for the one Ball o ...

CHAPTER 4 Code Explanation var cheight = 400; var ctx; var everything = []; var tid; var horvelocity; var verticalvel1; var vert ...

CANNONBALL AND SL INGSHOT Code Explanation function Ball(sx,sy,rad,stylestring) { this.sx = sx; this.sy = sy; this.rad = rad; th ...

CHAPTER 4 Code Explanation function Myrectangle(sx,sy,swidth,sheight,
stylestring) { this.sx = sx; this.sy = sy; this.swidth = ...

CANNONBALL AND SL INGSHOT Code Explanation this.sheight = sheight; ... sheight this.draw = drawAnImage; ... draw. This will be t ...

CHAPTER 4 Code Explanation function init(){ ctx = document.getElementById
('canvas').getContext('2d'); drawall(); } function fi ...