1. Pemrograman Berbasis Web
08 – Canvas(3)
Informatics Department
Parahyangan Catholic University

2. Getting Mouse Coordinate
Mouse coordinate can be acquired through event’s clientX and clientY attributes
Example:
canvas = $("#myCanvas");
context = canvas.get(0).getContext("2d");
canvas.get(0).addEventListener("mousemove", function(event){
var x = event.clientX;
var y = event.clientY;
context.clearRect(0,0, 500,200);
context.fillText(x + "," + y, 200,40)
});

3. Getting Mouse Coordinate
703
254

4. Getting Mouse Coordinate
top
bottom
height
width
left
right
The getBoundingClientRect() method returns the size of an element and its position relative to the viewport

5. Getting Mouse Coordinate
top
clientX
clientY
left
x coordinate = clientX – left
y coordinate = clientY – top

6. Getting Mouse Coordinate
Example:
canvas.get(0).addEventListener("mousemove", function(event){
var rect = canvas.get(0).getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
context.clearRect(0,0, 500,200);
context.fillText(x + "," + y, 200,40)
});
Example1 in HTML page…

7. Animation: Moving an Object Towards Mouse Pointer
direction y
speedX
speedY
speed  x
tan  = y/x  = atan(y/x)
speedX = cos() * speed
speedY = sin() * speed

8. Animation: Moving an Object Towards Mouse Pointer
Example:
var posX=250;
var posY=250;
var dirX = 1;
var dirY = 1;
var angle=0;
difference between the
object and the mouse pointer
canvas.get(0).addEventListener("mousemove", function(event){
var rect = canvas.get(0).getBoundingClientRect();
var x = Math.abs((event.clientX - rect.left) - posX);
var y = Math.abs((event.clientY - rect.top) - posY);
angle = Math.atan(y/x);
dirX = ((event.clientX - rect.left) >= posX)? 1 : -1;
dirY = ((event.clientY - rect.top) >= posY)? 1 : -1;
});
Example2 in HTML page…

9. Collision Detection How to detect whether 2 objects collide ?
Circle shaped objects
Box shaped objects
Random shaped objects ? (not covered in this course)

10. Collision Detection Circle shaped objects r1 r2
Collision occurred when the distance between the two circle’s center is less than the sum of the two’s radius

11. Collision Detection A A Box shaped objects B B Collision condition:
x1A,y1A
x2A,y2A A
x1A,y1A
x2A,y2A B
x1B,y1B
x2B,y2B B
x1B,y1B
x2B,y2B
Collision condition:
x1B < x2A

12. Collision Detection A A Box shaped objects B B Collision condition:
x1A,y1A
x2A,y2A A
x1A,y1A
x2A,y2A B
x1B,y1B
x2B,y2B B
x1B,y1B
x2B,y2B
Collision condition:
x1B < x2A
x1A < x2B

13. Collision Detection A A Box shaped objects B B Collision condition:
x1B,y1B
x2B,y2B B
x1B,y1B
x2B,y2B A
x1A,y1A
x2A,y2A A
x1A,y1A
x2A,y2A
Collision condition:
x1B < x2A
x1A < x2B
y1A < y2B

14. Collision Detection A A Box shaped objects B B Collision condition:
x1A,y1A
x2A,y2A A
x1A,y1A
x2A,y2A B
x1B,y1B
x2B,y2B B
x1B,y1B
x2B,y2B
Collision condition:
x1B < x2A
x1A < x2B
y1A < y2B
y1B < y2A
Note:
x2 = x1 + width
y2 = y1 + height

15. Collision Detection Example (from Matt Hackett’s game tutorial)
// Are they touching?
if (
hero.x <= (monster.x + 32)
&& monster.x <= (hero.x + 32)
&& hero.y <= (monster.y + 32)
&& monster.y <= (hero.y + 32)
) {
++monstersCaught;
reset(); }