• Choose a category
• All
• Classic-Fiction

context.fill();

context.fillStyle = "#FFFFFF";

context.fillText("2",p2.x-2, p2.y+2);

context.fillStyle = "#FF0000";

context.beginPath();

context.arc(p3.x,p3.y,8,0,Math.PI*2,true);

context.closePath();

context.fill();

context.fillStyle = "#FFFFFF";

context.fillText("3",p3.x-2, p3.y+2);

points.push({x:xt,y:yt});

for (var i = 0; i< points.length; i++) {

context.drawImage(pointImage, points[i].x, points[i].y,1,1);

}

context.closePath();

player.x = xt-bullseye.width/2;

player.y = yt-bullseye.height/2;

context.drawImage(bullseye,player.x,player.y);

}

var p0 = {x:150, y:440};

var p1 = {x:450, y:10};

var p2 = {x:50, y:10};

var p3 = {x:325, y:450};

var player = {x:0, y:0, speed:.01, t:0};

var points = new Array();

theCanvas = document.getElementById("canvasOne");

context = theCanvas.getContext("2d");

setInterval(drawScreen, 33);

}

Simple Gravity, Elasticity, and Friction

Adding simulated gravity, elasticity, and friction to your objects adds a sense of realism that otherwise would not exist in 2D. These properties are major forces in nature that people feel and understand at nearly every moment of their lives. This means that people who play games expect objects to act in a particular way when these properties are applied. Our job is to simulate those effects as closely as possible, while minimizing the processing power necessary to create them. While there are some very complicated physics equations we could use to create these effects, we will use simplified versions that work well with the limited resources available to HTML5 Canvas in a web browser.

Simple Gravity

A very simple, yet seemingly realistic gravitational effect can be achieved by applying a constant gravity value to the y velocity of an object moving on a vector. To do this, select a value for gravity, such as .1, and then add that value to the y velocity of your object on every call to drawScreen().

For this example, let’s simulate a ball with a radius of 15 pixels being shot from a cannon that rests near the bottom of the canvas. The ball will move at a speed of 4 pixels per frame, with an angle of 305 degrees. This means it will move up and to the right on the canvas. If we did not apply any gravity, the ball would simply keep moving on that vector until it left the canvas (actually, it would keep moving, we just would not see it any longer).

You have seen the code to create an effect like this already. In the canvasApp() function, we would create the starting variables like this:

var speed = 4;

var angle = 305;

var radians = angle * Math.PI/ 180;

var radius = 15;

var vx = Math.cos(radians) * speed;

var vy = Math.sin(radians) * speed;

Next, we create the starting point for the ball as p1, and then create a dynamic object that holds all the values we created for the ball object:

var p1 = {x:20,y:theCanvas.width-radius};

var ball = {x:p1.x, y:p1.y, velocityx: vx, velocityy:vy, radius:radius};

If we want to add gravity to the application, we would first create a new variable named gravity and set it to a constant value of .1:

var gravity = .1;

Next, in the drawScreen() function, we apply this gravity value to the ball object when it is drawn to the canvas (ball.velocityy += gravity). We want the ball to stop moving when it hits the “ground” (the bottom of the canvas), so we test to see whether the y position of the ball plus the radius of the ball (the outer edge) has passed the bottom of the canvas (ball.y + ball.radius <= theCanvas.height). If so, we stop the ball’s movement:

if (ball.y + ball.radius <= theCanvas.height) {

ball.velocityy += gravity;

} else {

ball.velocityx = 0;

ball.velocityy = 0;

ball.y = theCanvas.height - ball.radius;

}

Next, we apply the constant x velocity and the new y velocity to ball, and draw it to the canvas: