HTML 5 Paddle and Movement Proglan HTML 5
- Slides: 7
HTML 5 – Paddle and Movement Proglan HTML 5 Part 2
Last Meeting:
Create a function for Rectangles function rect(x, y, w, h) { ctx. begin. Path(); ctx. rect(x, y, w, h); ctx. close. Path(); ctx. fill(); }
The Paddle var paddlex; var paddleh; var paddlew; function init_paddle() { paddlex = WIDTH / 2; paddleh = 10; paddlew = 75; } function draw() { clear(); circle(x, y, 10); rect(paddlex, HEIGHT-paddleh, paddlew, paddleh); if (x + dx > WIDTH || x + dx < 0) dx = -dx; if (y + dy < 0) dy = -dy; else if (y + dy > HEIGHT) { if (x > paddlex && x < paddlex + paddlew) dy = -dy; else //game over, so stop the animation clear. Interval(interval. Id); } x += dx; y += dy; } init(); init_paddle();
Moving with the Keyboard right. Down = false; left. Down = false; //set right. Down or left. Down if the right or left keys are down function on. Key. Down(evt) { if (evt. key. Code == 39) right. Down = true; else if (evt. key. Code == 37) left. Down = true; } //move the paddle if left or right is currently pressed if (right. Down) paddlex += 5; else if (left. Down) paddlex -= 5; rect(paddlex, HEIGHT-paddleh, paddlew, paddleh); if (x + dx > WIDTH || x + dx < 0) dx = -dx; if (y + dy < 0) dy = -dy; else if (y + dy > HEIGHT) { if (x > paddlex && x < paddlex + paddlew) dy = -dy; else clear. Interval(interval. Id); } //and unset them when the right or left key is released function on. Key. Up(evt) { if (evt. key. Code == 39) right. Down = false; else if (evt. key. Code == 37) left. Down = false; } document. onkeydown=on. Key. Down; document. onkeyup=on. Key. Up; function draw() { clear(); circle(x, y, 10); x += dx; y += dy; } init();
Moving with the Mouse var canvas. Min. X; var canvas. Max. X; function init_mouse() { canvas. Min. X = $("#canvas"). offset(). left; canvas. Max. X = canvas. Min. X + WIDTH; } function on. Mouse. Move(evt) { if (evt. page. X > canvas. Min. X && evt. page. X < canvas. Max. X) { paddlex = evt. page. X - canvas. Min. X; } } $(document). mousemove(on. Mouse. Move); function draw() { clear(); circle(x, y, 10); if (right. Down) paddlex += 5; else if (left. Down) paddlex -= 5; rect(paddlex, HEIGHT-paddleh, paddlew, paddleh); if (x + dx > WIDTH || x + dx < 0) dx = -dx; if (y + dy < 0) dy = -dy; else if (y + dy > HEIGHT) { if (x > paddlex && x < paddlex + paddlew) dy = -dy; else clear. Interval(interval. Id); } x += dx; y += dy; } init(); init_mouse();
NEXT: The last session: Completing the game
