Недавно осваивать JavaScript начал и мой сын. И сейчас он с удовольствием читает книгу Ника Моргана Javascript для детей. Самые любопытные могут скачать и почитать эту книгу тут:
Читая с сыном книгу Ника Моргана Javascript для детей, мы постепенно тестирует и сохраняем себе самые интересные примеры и игры.
Самой первой игрой была — Игра Виселица (Hangman).
В этом примере покажу как выглядит отскакивающий мяч из этой книги:
А вот и весь код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Прыгающий мяч</title> </head> <body> <canvas id="canvas" width="200" height="200"></canvas> <script> var circle = function (x, y, radius, fillCircle) { ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI * 2, false); if (fillCircle) { ctx.fill(); } else { ctx.stroke(); } }; var Ball = function () { this.x = 100; this.y = 100; this.xSpeed = -2; this.ySpeed = 3; }; Ball.prototype.draw = function () { circle(this.x, this.y, 3, true); }; Ball.prototype.move = function () { this.x += this.xSpeed; this.y += this.ySpeed; }; Ball.prototype.checkCollision = function () { if (this.x < 0 || this.x > 200) { this.xSpeed = -this.xSpeed; } if (this.y < 0 || this.y > 200) { this.ySpeed = -this.ySpeed; } }; var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var ball = new Ball(); setInterval(function () { ctx.clearRect(0, 0, 200, 200); ball.draw(); ball.move(); ball.checkCollision(); ctx.strokeRect(0, 0, 200, 200); }, 30); </script> </body> </html> |
Больше программ из книги можно посмотреть по тегу Javascript для детей Ник Морган