Недавно осваивать 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 60 |
<!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 drawBee = function (x, y) { ctx.lineWidth = 2; ctx.strokeStyle = "Black"; ctx.fillStyle = "Gold"; circle(x, y, 8, true); circle(x, y, 8, false); circle(x - 5, y - 11, 5, false); circle(x + 5, y - 11, 5, false); circle(x - 2, y - 1, 2, false); circle(x + 2, y - 1, 2, false); }; var update = function (coordinate) { var offset = Math.random() * 4 - 2; coordinate += offset; if (coordinate > 200) { coordinate = 200; } if (coordinate < 0) { coordinate = 0; } return coordinate; }; var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var x = 100; var y = 100; setInterval(function () { ctx.clearRect(0, 0, 200, 200); drawBee(x, y); x = update(x); y = update(y); ctx.strokeRect(0, 0, 200, 200); }, 30); </script> </body> </html> |
Больше программ из книги можно посмотреть по тегу Javascript для детей Ник Морган