├── Chapter 3
    ├── Programming Challenge #4.js
    ├── Programming Challenge #2.js
    └── Programming Challenge #3.js
├── Chapter 8
    ├── Programming Challenge #1.js
    ├── Programming Challenge #2.js
    └── Programming Challenge #3.html
├── README.md
├── Chapter 4
    ├── Programming Challenge #2.js
    └── Programming Challenge #1.js
├── Chapter 10
    ├── Programming Challenge #1.html
    ├── Programming Challenge #2.html
    ├── Programming Challenge #3.html
    └── Programming Challenge #4.html
├── Chapter 9
    ├── Programming Challenge #2.html
    ├── Programming Challenge #1.html
    └── Programming Challenge #3.html
├── Chapter 6
    ├── Programming challenge #1.html
    ├── Programming challenge #2.html
    └── Programming challenge #3.html
├── Chapter 13
    ├── Programming Challenge #2.html
    ├── Programming Challenge #3.html
    ├── Programming Challenge #1.html
    └── Programming Challenge #4.html
├── LICENSE
├── .gitignore
├── Chapter 12
    ├── Programming Challenge #1.html
    ├── Programming Challenge #2.html
    └── Programming Challenge #3.html
├── Chapter 16
    ├── Programming Challenge #1.html
    ├── Programming Challenge #2.html
    └── Programming Challenge #3.html
├── Chapter 14
    ├── Programming Challenge #1.html
    ├── Programming Challenge #2.html
    ├── Programming Challenge #3.html
    └── Programming Challenge #4.html
├── Chapter 7
    ├── Programming Challenge #2.html
    ├── Programming Challenge #3.html
    └── Programming Challenge #4.html
├── Chapter 11
    ├── Programming Challenge #1.html
    ├── Programming Challenge #2.html
    ├── Programming Challenge #3.html
    └── Programming Challenge #4.html
├── Chapter 15
    ├── Programming Challenge #1.html
    ├── Programming Challenge #3.html
    └── Programming Challenge #2.html
└── Chapter 17
    ├── Programming Challenge #1.html
    ├── Programming Challenge #2.html
    ├── Programming Challenge #3.html
    └── Programming Challenge #4.html


/Chapter 3/Programming Challenge #4.js:
--------------------------------------------------------------------------------
1 | [3, 2, 1].join(" больше, чем ");
2 | // "3 больше, чем 2 больше, чем 1"


--------------------------------------------------------------------------------
/Chapter 8/Programming Challenge #1.js:
--------------------------------------------------------------------------------
 1 | var add = function (a, b) {
 2 |   return a + b;
 3 | };
 4 | 
 5 | var multiply = function (a, b) {
 6 |   return a * b;
 7 | };
 8 | 
 9 | add(multiply(36325, 9824), 777);
10 | // 356857577
11 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # JavaScriptForKidsSolutionsRU
2 | Решения упражнений из книги [Ника Моргана](https://github.com/skilldrick) [«JavaScript для детей. Самоучитель по программированию»](https://www.mann-ivanov-ferber.ru/books/javascript-dlya-detej/).
3 | 


--------------------------------------------------------------------------------
/Chapter 4/Programming Challenge #2.js:
--------------------------------------------------------------------------------
1 | var myCrazyObject = {
2 |   "name": "Нелепый объект",
3 |   "some array": [7, 9, { purpose: "путаница", number: 123 }, 3.3], "random animal": "Банановая акула"
4 | };
5 | 
6 | myCrazyObject["some array"][2].number;
7 | // 123


--------------------------------------------------------------------------------
/Chapter 4/Programming Challenge #1.js:
--------------------------------------------------------------------------------
 1 | var scores = {
 2 |   "Фёдор": 0,
 3 |   "Хабиб": 0
 4 | };
 5 | 
 6 | // Увеличиваем счёт Фёдора на 1000
 7 | scores["Фёдор"] += 1000;
 8 | 
 9 | // Увеличиваем счёт Хабиба на 100
10 | scores["Хабиб"] += 100;
11 | 
12 | // Показываем счёт игроков
13 | scores;
14 | // { 'Фёдор': 1000, 'Хабиб': 100 }


--------------------------------------------------------------------------------
/Chapter 10/Programming Challenge #1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Перемещение мышки</title>
 5 | </head>
 6 | 
 7 | <body>
 8 |     <h1 id="heading">Привет, мир!</h1>
 9 | 
10 |     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
11 | 
12 |     <script>
13 |     $("html").click(function (event) {
14 |       $("#heading").offset({
15 |         left: event.pageX,
16 |         top: event.pageY
17 |       });
18 |     });
19 |     </script>
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/Chapter 8/Programming Challenge #2.js:
--------------------------------------------------------------------------------
 1 | var areArraysSame = function (arr1, arr2) {
 2 |   if (arr1.length !== arr2.length) {
 3 |     return false;
 4 |   }
 5 | 
 6 |   for (var i = 0; i < arr1.length; i++) {
 7 |     if (arr1[i] !== arr2[i]) {
 8 |       return false;
 9 |     }
10 |   }
11 | 
12 |   return true;
13 | };
14 | 
15 | areArraysSame([1, 2, 3], [4, 5, 6]);
16 | // false
17 | 
18 | areArraysSame([1, 2, 3], [1, 2, 3]);
19 | // true
20 | 
21 | areArraysSame([1, 2, 3], [1, 2, 3, 4]);
22 | // false
23 | 


--------------------------------------------------------------------------------
/Chapter 9/Programming Challenge #2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Изучаем DOM</title>
 5 | </head>
 6 | 
 7 | <body>
 8 |     <h1 id="main-heading">Привет, мир!</h1>
 9 | 
10 |     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
11 | 
12 |     <script>
13 |     var fadeTime;
14 |     for (var i = 0; i < 5; i++) {
15 |       fadeTime = (i + 1) * 1000;
16 |       $("#main-heading").fadeOut(fadeTime / 2).fadeIn(fadeTime / 2);
17 |     }
18 |     </script>
19 |    </body>
20 | </html>


--------------------------------------------------------------------------------
/Chapter 6/Programming challenge #1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Моя первая настоящая HTML-страничка</title>
 5 | </head>
 6 | <body>
 7 |     <h1>Привет, мир!</h1>
 8 |     <p>Моя первая веб-страничка.</p>
 9 |     <script>
10 |     var animals = ["Кот", "Рыба", "Лемур", "Комодский варан"];
11 |     
12 |     for (var i = 0; i < animals.length; i++) {
13 |       animals[i] = animals[i] + " - прекрасное животное";
14 |     }
15 | 
16 |     console.log(animals);
17 |     </script>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/Chapter 6/Programming challenge #2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!DOCTYPE html>
 3 | <html>
 4 | <head>
 5 |     <title>Моя первая настоящая HTML-страничка</title>
 6 | </head>
 7 | <body>
 8 |     <h1>Привет, мир!</h1>
 9 |     <p>Моя первая веб-страничка.</p>
10 |     <script>
11 |     var alphabet = "абвгдеёжзиклмнопрстуфхцчшщъыьэюя";
12 |     var randomString = "";
13 |     var stringLength = 6;
14 |     
15 |     while (randomString.length < stringLength) {
16 |       randomString += alphabet[Math.floor(Math.random() *   alphabet.length)];
17 |     }
18 | 
19 |     console.log(randomString);
20 |     </script>
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/Chapter 9/Programming Challenge #1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Изучаем DOM</title>
 5 | </head>
 6 | 
 7 | <body>
 8 |     <h1 id="main-heading">Привет, мир!</h1>
 9 | 
10 |     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
11 | 
12 |     <script>
13 |     $("#main-heading").text("Мои друзья");
14 | 
15 |     var friends = ["Федя", "Хабиб", "Андрей"];
16 | 
17 |     for (var i = 0; i < friends.length; i++) {
18 |       $("body").append("<p>" + friends[i] + "</p>");
19 |       $("p").last().hide().fadeIn((i + 1) * 10000);
20 |     }
21 | 
22 |     $("p").append(" лучший!");
23 |     </script>
24 |    </body>
25 | </html>


--------------------------------------------------------------------------------
/Chapter 9/Programming Challenge #3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Изучаем DOM</title>
 5 | </head>
 6 | 
 7 | <body>
 8 |     <h1 id="main-heading">Привет, мир!</h1>
 9 | 
10 |     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
11 | 
12 |     <script>
13 |     $("#main-heading").text("Мои друзья");
14 | 
15 |     var friends = ["Федя", "Хабиб", "Андрей"];
16 | 
17 |     for (var i = 0; i < friends.length; i++) {
18 |       $("body").append("<p>" + friends[i] + "</p>");
19 |       $("p").last().hide().delay((i + 1) * 3000).fadeIn(2000);
20 |     }
21 | 
22 |     $("p").append(" лучший!");
23 |     </script>
24 |    </body>
25 | </html>


--------------------------------------------------------------------------------
/Chapter 13/Programming Challenge #2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <title>Canvas</title>
 5 | </head>
 6 | 
 7 | <body>
 8 |     <canvas id="canvas" width="200" height="200"></canvas>
 9 | 
10 |     <script>
11 |     var canvas = document.getElementById("canvas");
12 |     var ctx = canvas.getContext("2d");
13 | 
14 |     var drawPoints = function (points) {
15 |       ctx.beginPath();
16 |       ctx.moveTo(points[0][0], points[0][1]);
17 |       for (var i = 1; i < points.length; i++) {
18 |         ctx.lineTo(points[i][0], points[i][1]);
19 |       }
20 |       ctx.stroke();
21 |     };
22 | 
23 |     var mysteryPoints = [[50, 50], [50, 100], [25, 120], [100, 50], [70, 90], [100, 90], [70, 120]];
24 |     drawPoints(mysteryPoints);
25 |     </script>
26 | </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/Chapter 6/Programming challenge #3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Моя первая настоящая HTML-страничка</title>
 5 | </head>
 6 | <body>
 7 |     <h1>Привет, мир!</h1>
 8 |     <p>Моя первая веб-страничка.</p>
 9 |     <script>
10 |     var input = "javascript is awesome";
11 |     var output = "";
12 | 
13 |     for (var i = 0; i < input.length; i++) {
14 |       if (input[i] === "a") {
15 |         output += "4";
16 |       } else if (input[i] === "e") {
17 |         output += "3";
18 |       } else if (input[i] === "i") {
19 |         output += "1";
20 |       } else if (input[i] === "o") {
21 |         output += "0";
22 |       } else {
23 |         output += input[i];
24 |       }
25 |     }
26 |     
27 |     console.log(output);
28 |     </script>
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/Chapter 13/Programming Challenge #3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <title>Canvas</title>
 5 | </head>
 6 | 
 7 | <body>
 8 |     <canvas id="canvas" width="200" height="200"></canvas>
 9 | 
10 |     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
11 | 
12 |     <script>
13 |     var canvas = document.getElementById("canvas");
14 |     var ctx = canvas.getContext("2d");
15 | 
16 |     var circle = function (x, y, radius, fillCircle) {
17 |       ctx.beginPath();
18 |       ctx.arc(x, y, radius, 0, Math.PI * 2, false);
19 |       if (fillCircle) {
20 |         ctx.fill();
21 |       } else {
22 |         ctx.stroke();
23 |       }
24 |     };
25 | 
26 |     $('canvas').mousemove(function (event) {
27 |       circle(event.offsetX, event.offsetY, 3, true);
28 |     });
29 |     </script>
30 | </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/Chapter 3/Programming Challenge #2.js:
--------------------------------------------------------------------------------
 1 | var randomBodyParts = ["глаз", "нос", "череп"];
 2 | var randomAnimalBodyParts = ["хвост", "пузо", "рот"];
 3 | var randomAdjectives = ["вонючий", "унылый", "дурацкий"];
 4 | var randomAnimals = ["жабы", "выдры", "коровы", "мартышки", "крысы"];
 5 | 
 6 | // Выбор случайной части тела из массива randomBodyParts:
 7 | var randomBodyPart = randomBodyParts[Math.floor(Math.random() * 3)];
 8 | 
 9 | // Выбор случайной части тела животного из массива randomAnimalBodyParts:
10 | var randomAnimalBodyPart = randomAnimalBodyParts[Math.floor(Math.random() * 3)];
11 | 
12 | // Выбор случайного прилагательного из массива randomAdjectives:
13 | var randomAdjective = randomAdjectives[Math.floor(Math.random() * 3)];
14 | 
15 | // Выбор случайного животного из массива randomAnimals:
16 | var randomAnimal = randomAnimals[Math.floor(Math.random() * 5)];
17 | 
18 | // Соединяем случайные строки в предложение:
19 | var randomInsult = "У тебя " + randomBodyPart + " ещё более " + randomAdjective + " чем " + randomAnimalBodyPart + " у " + randomAnimal + "!!!";
20 | randomInsult;
21 | // "У тебя череп ещё более дурацкий чем хвост у мартышки!!!"
22 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Philippe Rigovanov
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # Typescript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 
60 | 


--------------------------------------------------------------------------------
/Chapter 3/Programming Challenge #3.js:
--------------------------------------------------------------------------------
 1 | var randomBodyParts = ["глаз", "нос", "череп"];
 2 | var randomAnimalBodyParts = ["хвост", "пузо", "рот"];
 3 | var randomAdjectives = ["вонючий", "унылый", "дурацкий"];
 4 | var randomAnimals = ["жабы", "выдры", "коровы", "мартышки", "крысы"];
 5 | 
 6 | var randomBodyPart = randomBodyParts[Math.floor(Math.random() * 3)];
 7 | var randomAnimalBodyPart = randomAnimalBodyParts[Math.floor(Math.random() * 3)];
 8 | var randomAdjective = randomAdjectives[Math.floor(Math.random() * 3)];
 9 | var randomAnimal = randomAnimals[Math.floor(Math.random() * 5)];
10 | 
11 | var randomInsult = ["У тебя", randomBodyPart, "ещё более", randomAdjective, "чем", randomAnimalBodyPart, "у", randomAnimal].join(" ") + "!!!";
12 | randomInsult;
13 | // "У тебя череп ещё более дурацкий чем хвост у мартышки!!!"
14 | // Метод .join(" ") менее гибкий, например перед !!! нам не нужен был пробел,
15 | // так что пришлось все равно использовать оператор +
16 | // Но зато метод .join(" ") может вывести содержимое любого массива разделенное пробелами,
17 | // а ведь в массиве могут быть и тысячи и миллионы элементов,
18 | // так что такой способ, хоть и менее гибкий, но гораздо более мощный


--------------------------------------------------------------------------------
/Chapter 13/Programming Challenge #1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <title>Canvas</title>
 5 | </head>
 6 | 
 7 | <body>
 8 |     <canvas id="canvas" width="200" height="200"></canvas>
 9 | 
10 |     <script>
11 |     var canvas = document.getElementById("canvas");
12 |     var ctx = canvas.getContext("2d");
13 | 
14 |     var circle = function (x, y, radius, fillCircle) {
15 |       ctx.beginPath();
16 |       ctx.arc(x, y, radius, 0, Math.PI * 2, false);
17 |       if (fillCircle) {
18 |         ctx.fill();
19 |       } else {
20 |         ctx.stroke();
21 |       }
22 |     };
23 | 
24 |     var drawSnowman = function (x, y) {
25 |       ctx.fillStyle = "Black";
26 |       ctx.lineWidth = 4;
27 | 
28 |       circle(x + 50, y + 110, 40, false);
29 |       circle(x + 50, y + 40, 30, false);
30 |       circle(x + 40, y + 35, 5, true);
31 |       circle(x + 60, y + 35, 5, true);
32 | 
33 |       circle(x + 50, y + 90, 5, true);
34 |       circle(x + 50, y + 110, 5, true);
35 |       circle(x + 50, y + 130, 5, true);
36 | 
37 |       ctx.fillStyle = "Orange";
38 |       circle(x + 50, y + 45, 5, true);
39 |     };
40 | 
41 |     drawSnowman(0, 0);
42 |     drawSnowman(100, 20);
43 |     </script>
44 | </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/Chapter 10/Programming Challenge #2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Интерактивное программирование</title>
 5 | </head>
 6 | 
 7 | <body>
 8 |     <h1 id="heading">Привет, мир!</h1>
 9 | 
10 |     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
11 | 
12 |     <script>
13 |     var direction = 'вправо';
14 |     var offset = 0;
15 | 
16 |     $("#heading").offset({ left: offset, top: offset });
17 | 
18 |     var moveHeading = function () {
19 |       if (direction === 'вправо') {
20 |         $("#heading").offset({ left: offset });
21 |         offset++;
22 |         if (offset > 200) {
23 |           offset = 0;
24 |           direction = 'вниз';
25 |         }
26 |       } else if (direction === 'вниз') {
27 |         $("#heading").offset({ top: offset });
28 |         offset++;
29 |         if (offset > 200) {
30 |           offset = 200;
31 |           direction = 'влево';
32 |         }
33 |       } else if (direction === 'влево') {
34 |         $("#heading").offset({ left: offset });
35 |         offset--;
36 |         if (offset < 0) {
37 |           offset = 200;
38 |           direction = 'вверх';
39 |         }
40 |       } else if (direction === 'вверх') {
41 |         $("#heading").offset({ top: offset });
42 |         offset--;
43 |         if (offset < 0) {
44 |           offset = 0;
45 |           direction = 'вправо';
46 |         }
47 |       }
48 |     };
49 | 
50 |     setInterval(moveHeading, 30);
51 |     </script>
52 | </body>
53 | </html>


--------------------------------------------------------------------------------
/Chapter 12/Programming Challenge #1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Гонки</title>
 5 | </head>
 6 | <body>
 7 |     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
 8 |     <script>
 9 |     var Car = function (x, y) {
10 |       this.x = x;
11 |       this.y = y;
12 |       this.draw();
13 |     };
14 | 
15 |     Car.prototype.draw = function () {
16 |       var carHtml = '<img src="http://nostarch.com/images/car.png">';
17 | 
18 |       this.carElement = $(carHtml);
19 | 
20 |       this.carElement.css({
21 |         position: "absolute",
22 |         left: this.x,
23 |         top: this.y
24 |       });
25 | 
26 |       $("body").append(this.carElement);
27 |     };
28 | 
29 |     Car.prototype.moveRight = function () {
30 |       this.x += 5;
31 | 
32 |       this.carElement.css({
33 |         left: this.x,
34 |         top: this.y
35 |       });
36 |     };
37 | 
38 |     Car.prototype.moveLeft = function () {
39 |       this.x -= 5;
40 | 
41 |       this.carElement.css({
42 |         left: this.x,
43 |         top: this.y
44 |       });
45 |     };
46 | 
47 |     Car.prototype.moveUp = function () {
48 |       this.y -= 5;
49 | 
50 |       this.carElement.css({
51 |         left: this.x,
52 |         top: this.y
53 |       });
54 |     };
55 | 
56 |     Car.prototype.moveDown = function () {
57 |       this.y += 5;
58 | 
59 |       this.carElement.css({
60 |         left: this.x,
61 |         top: this.y
62 |       });
63 |     };
64 | 
65 |     var tesla = new Car(20, 20);
66 |     var nissan = new Car(100, 200);
67 |     </script>
68 | </body>
69 | </html>
70 | 


--------------------------------------------------------------------------------
/Chapter 10/Programming Challenge #3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Интерактивное программирование</title>
 5 | </head>
 6 | 
 7 | <body>
 8 |     <h1 id="heading">Привет, мир!</h1>
 9 | 
10 |     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
11 | 
12 |     <script>
13 |     var direction = 'вправо';
14 |     var offset = 0;
15 | 
16 |     $("#heading").offset({ left: offset, top: offset });
17 | 
18 |     var moveHeading = function () {
19 |       if (direction === 'вправо') {
20 |         $("#heading").offset({ left: offset });
21 |         offset++;
22 |         if (offset > 200) {
23 |           offset = 0;
24 |           direction = 'вниз';
25 |         }
26 |       } else if (direction === 'вниз') {
27 |         $("#heading").offset({ top: offset });
28 |         offset++;
29 |         if (offset > 200) {
30 |           offset = 200;
31 |           direction = 'влево';
32 |         }
33 |       } else if (direction === 'влево') {
34 |         $("#heading").offset({ left: offset });
35 |         offset--;
36 |         if (offset < 0) {
37 |           offset = 200;
38 |           direction = 'вверх';
39 |         }
40 |       } else if (direction === 'вверх') {
41 |         $("#heading").offset({ top: offset });
42 |         offset--;
43 |         if (offset < 0) {
44 |           offset = 0;
45 |           direction = 'вправо';
46 |         }
47 |       }
48 |     };
49 | 
50 |     var intervalId = setInterval(moveHeading, 30);
51 |     
52 |     $("#heading").click(function () {
53 |       clearInterval(intervalId);
54 |     });
55 |     </script>
56 | </body>
57 | </html>


--------------------------------------------------------------------------------
/Chapter 16/Programming Challenge #1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Змейка!</title>
 5 | </head>
 6 | <body>
 7 |     <canvas id="canvas" width="400" height="400"></canvas>
 8 | 
 9 |     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
10 | 
11 |     <script>
12 |     var canvas = document.getElementById("canvas");
13 |     var ctx = canvas.getContext("2d");
14 | 
15 |     var width = canvas.width;
16 |     var height = canvas.height;
17 | 
18 |     var blockSize = 10;
19 |     var widthInBlocks = width / blockSize;
20 |     var heightInBlocks = height / blockSize;
21 | 
22 |     var score = 0;
23 | 
24 |     var drawBorder = function () {
25 |       ctx.fillStyle = "Gray";
26 |       ctx.fillRect(0, 0, width, blockSize);
27 |       ctx.fillRect(0, height - blockSize, width, blockSize);
28 |       ctx.fillRect(0, 0, blockSize, height);
29 |       ctx.fillRect(width - blockSize, 0, blockSize, height);
30 |     };
31 | 
32 |     var drawScore = function () {
33 |       ctx.font = "20px Courier";
34 |       ctx.fillStyle = "Black";
35 |       ctx.textAlign = "left";
36 |       ctx.textBaseline = "top";
37 |       ctx.fillText("Счет: " + score, blockSize, blockSize);
38 |     };
39 | 
40 |     var gameOver = function () {
41 |       //clearInterval(intervalId);
42 |       ctx.font = "60px Courier";
43 |       ctx.fillStyle = "Black";
44 |       ctx.textAlign = "center";
45 |       ctx.textBaseline = "middle";
46 |       ctx.fillText("Конец игры", width / 2, height / 2);
47 |     };
48 | 
49 |     drawBorder();
50 |     drawScore();
51 |     gameOver();
52 |     </script>
53 | </body>
54 | </html>
55 | 


--------------------------------------------------------------------------------
/Chapter 14/Programming Challenge #1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Прыгающий мяч</title>
 5 | </head>
 6 | 
 7 | <body>
 8 |     <canvas id="canvas" width="400" height="400"></canvas>
 9 | 
10 |     <script>
11 |     var Ball = function () {
12 |       this.x = 100;
13 |       this.y = 100;
14 |       this.xSpeed = -2;
15 |       this.ySpeed = 3;
16 |     };
17 | 
18 |     var circle = function (x, y, radius, fillCircle) {
19 |       ctx.beginPath();
20 |       ctx.arc(x, y, radius, 0, Math.PI * 2, false);
21 |       if (fillCircle) {
22 |         ctx.fill();
23 |       } else {
24 |         ctx.stroke();
25 |       }
26 |     };
27 | 
28 |     Ball.prototype.draw = function () {
29 |       circle(this.x, this.y, 3, true);
30 |     };
31 | 
32 |     Ball.prototype.move = function () {
33 |       this.x += this.xSpeed;
34 |       this.y += this.ySpeed;
35 |     };
36 | 
37 |     Ball.prototype.checkCollision = function () {
38 |       if (this.x < 0 || this.x > width) {
39 |         this.xSpeed = -this.xSpeed;
40 |       }
41 |       if (this.y < 0 || this.y > height) {
42 |         this.ySpeed = -this.ySpeed;
43 |       }
44 |     };
45 | 
46 |     var canvas = document.getElementById("canvas");
47 |     var ctx = canvas.getContext("2d");
48 | 
49 |     var width = canvas.width;
50 |     var height = canvas.height;
51 | 
52 |     var ball = new Ball();
53 | 
54 |     setInterval(function () {
55 |       ctx.clearRect(0, 0, width, height);
56 | 
57 |       ball.draw();
58 |       ball.move();
59 |       ball.checkCollision();
60 | 
61 |       ctx.strokeRect(0, 0, width, height);
62 |     }, 30);
63 |     </script>
64 | </body>
65 | </html>
66 | 


--------------------------------------------------------------------------------
/Chapter 12/Programming Challenge #2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Гонки</title>
 5 | </head>
 6 | <body>
 7 |     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
 8 |     <script>
 9 |     var Car = function (x, y) {
10 |       this.x = x;
11 |       this.y = y;
12 |       this.speed = 5;
13 |       this.draw();
14 |     };
15 | 
16 |     Car.prototype.draw = function () {
17 |       var carHtml = '<img src="http://nostarch.com/images/car.png">';
18 | 
19 |       this.carElement = $(carHtml);
20 | 
21 |       this.carElement.css({
22 |         position: "absolute",
23 |         left: this.x,
24 |         top: this.y
25 |       });
26 | 
27 |       $("body").append(this.carElement);
28 |     };
29 | 
30 |     Car.prototype.moveRight = function () {
31 |       this.x += this.speed;
32 | 
33 |       this.carElement.css({
34 |         left: this.x,
35 |         top: this.y
36 |       });
37 |     };
38 | 
39 |     Car.prototype.moveLeft = function () {
40 |       this.x -= this.speed;
41 | 
42 |       this.carElement.css({
43 |         left: this.x,
44 |         top: this.y
45 |       });
46 |     };
47 | 
48 |     Car.prototype.moveUp = function () {
49 |       this.y -= this.speed;
50 | 
51 |       this.carElement.css({
52 |         left: this.x,
53 |         top: this.y
54 |       });
55 |     };
56 | 
57 |     Car.prototype.moveDown = function () {
58 |       this.y += this.speed;
59 | 
60 |       this.carElement.css({
61 |         left: this.x,
62 |         top: this.y
63 |       });
64 |     };
65 | 
66 |     var tesla = new Car(20, 20);
67 |     var nissan = new Car(100, 200);
68 |     </script>
69 | </body>
70 | </html>
71 | 


--------------------------------------------------------------------------------
/Chapter 14/Programming Challenge #2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Прыгающий мяч</title>
 5 | </head>
 6 | 
 7 | <body>
 8 |     <canvas id="canvas" width="400" height="400"></canvas>
 9 | 
10 |     <script>
11 |     var Ball = function () {
12 |       this.x = 100;
13 |       this.y = 100;
14 |       this.xSpeed = (Math.random() * 10) - 5;
15 |       this.ySpeed = (Math.random() * 10) - 5;
16 |     };
17 | 
18 |     var circle = function (x, y, radius, fillCircle) {
19 |       ctx.beginPath();
20 |       ctx.arc(x, y, radius, 0, Math.PI * 2, false);
21 |       if (fillCircle) {
22 |         ctx.fill();
23 |       } else {
24 |         ctx.stroke();
25 |       }
26 |     };
27 | 
28 |     Ball.prototype.draw = function () {
29 |       circle(this.x, this.y, 3, true);
30 |     };
31 | 
32 |     Ball.prototype.move = function () {
33 |       this.x += this.xSpeed;
34 |       this.y += this.ySpeed;
35 |     };
36 | 
37 |     Ball.prototype.checkCollision = function () {
38 |       if (this.x < 0 || this.x > width) {
39 |         this.xSpeed = -this.xSpeed;
40 |       }
41 |       if (this.y < 0 || this.y > height) {
42 |         this.ySpeed = -this.ySpeed;
43 |       }
44 |     };
45 | 
46 |     var canvas = document.getElementById("canvas");
47 |     var ctx = canvas.getContext("2d");
48 | 
49 |     var width = canvas.width;
50 |     var height = canvas.height;
51 | 
52 |     var ball = new Ball();
53 | 
54 |     setInterval(function () {
55 |       ctx.clearRect(0, 0, width, height);
56 | 
57 |       ball.draw();
58 |       ball.move();
59 |       ball.checkCollision();
60 | 
61 |       ctx.strokeRect(0, 0, width, height);
62 |     }, 30);
63 |     </script>
64 | </body>
65 | </html>
66 | 


--------------------------------------------------------------------------------
/Chapter 7/Programming Challenge #2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Виселица!</title>
 5 | </head>
 6 | <body>
 7 |     <h1>Виселица!</h1>
 8 |     <script>
 9 |     // Создаем массив со словами
10 |     var words = [
11 |       "программа",
12 |       "макака",
13 |       "прекрасный",
14 |       "оладушек"
15 |     ];
16 |     
17 |     // Выбираем случайное слово
18 |     var word = words[Math.floor(Math.random() * words.length)];
19 |     
20 |     // Создаем итоговый массив
21 |     var answerArray = [];
22 |     for (var i = 0; i < word.length; i++) {
23 |       answerArray[i] = "_";
24 |     }
25 |     
26 |     var remainingLetters = word.length;
27 |     
28 |     // Игровой цикл
29 |     while (remainingLetters > 0) {
30 |       // Показываем состояние игры
31 |       alert(answerArray.join(" "));
32 |       
33 |       // Запрашиваем вариант ответа
34 |       var guess = prompt("Угадайте букву, или нажмите Отмена для выхода из игры.");
35 |       if (guess === null) {
36 |         // Выходим из игрового цикла
37 |         break;
38 |       } else if (guess.length !== 1) {
39 |         alert("Пожалуйста, введите одиночную букву.");
40 |       } else {
41 |         guess = guess.toLowerCase();
42 |         // Обновляем состояние игры
43 |         for (var j = 0; j < word.length; j++) {
44 |           if (word[j] === guess) {
45 |             answerArray[j] = guess;
46 |             remainingLetters--;
47 |           }
48 |         }
49 |       }
50 |     // Конец игрового цикла
51 |     }
52 |     
53 |     // Отображаем ответ и поздравляем игрока
54 |     alert(answerArray.join(" "));
55 |     alert("Отлично! Было загадано слово " + word);
56 |     </script>
57 | </body>
58 | </html>


--------------------------------------------------------------------------------
/Chapter 16/Programming Challenge #2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Змейка!</title>
 5 | </head>
 6 | <body>
 7 |     <canvas id="canvas" width="400" height="400"></canvas>
 8 | 
 9 |     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
10 | 
11 |     <script>
12 |     var canvas = document.getElementById("canvas");
13 |     var ctx = canvas.getContext("2d");
14 | 
15 |     var width = canvas.width;
16 |     var height = canvas.height;
17 | 
18 |     var blockSize = 10;
19 |     var widthInBlocks = width / blockSize;
20 |     var heightInBlocks = height / blockSize;
21 | 
22 |     var score = 0;
23 | 
24 |     var drawBorder = function () {
25 |       ctx.fillStyle = "Gray";
26 |       ctx.fillRect(0, 0, width, blockSize);
27 |       ctx.fillRect(0, height - blockSize, width, blockSize);
28 |       ctx.fillRect(0, 0, blockSize, height);
29 |       ctx.fillRect(width - blockSize, 0, blockSize, height);
30 |     };
31 | 
32 |     var drawScore = function () {
33 |       ctx.font = "20px Courier";
34 |       ctx.fillStyle = "Black";
35 |       ctx.textAlign = "left";
36 |       ctx.textBaseline = "top";
37 |       ctx.fillText("Счет: " + score, blockSize, blockSize);
38 |     };
39 | 
40 |     var gameOver = function () {
41 |       //clearInterval(intervalId);
42 |       ctx.font = "60px Courier";
43 |       ctx.fillStyle = "Black";
44 |       ctx.textAlign = "center";
45 |       ctx.textBaseline = "middle";
46 |       ctx.fillText("Конец игры", width / 2, height / 2);
47 |     };
48 | 
49 | 
50 |     setInterval(function () {
51 |       ctx.clearRect(0, 0, width, height);
52 |       drawBorder();
53 |       drawScore();
54 |       score++;
55 |     }, 100);
56 |     </script>
57 | </body>
58 | </html>
59 | 


--------------------------------------------------------------------------------
/Chapter 12/Programming Challenge #3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Гонки</title>
 5 | </head>
 6 | <body>
 7 |     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
 8 |     <script>
 9 |     var Car = function (x, y) {
10 |       this.x = x;
11 |       this.y = y;
12 |       this.draw();
13 |     };
14 | 
15 |     Car.prototype.draw = function () {
16 |       var carHtml = '<img src="http://nostarch.com/images/car.png">';
17 | 
18 |       this.carElement = $(carHtml);
19 | 
20 |       this.carElement.css({
21 |         position: "absolute",
22 |         left: this.x,
23 |         top: this.y
24 |       });
25 | 
26 |       $("body").append(this.carElement);
27 |     };
28 | 
29 |     Car.prototype.moveRight = function (distance) {
30 |       this.x += distance;
31 | 
32 |       this.carElement.css({
33 |         left: this.x,
34 |         top: this.y
35 |       });
36 |     };
37 | 
38 |     Car.prototype.moveLeft = function (distance) {
39 |       this.x -= distance;
40 | 
41 |       this.carElement.css({
42 |         left: this.x,
43 |         top: this.y
44 |       });
45 |     };
46 | 
47 |     Car.prototype.moveUp = function (distance) {
48 |       this.y -= distance;
49 | 
50 |       this.carElement.css({
51 |         left: this.x,
52 |         top: this.y
53 |       });
54 |     };
55 | 
56 |     Car.prototype.moveDown = function (distance) {
57 |       this.y += distance;
58 | 
59 |       this.carElement.css({
60 |         left: this.x,
61 |         top: this.y
62 |       });
63 |     };
64 | 
65 |     var tesla = new Car(20, 20);
66 |     var nissan = new Car(100, 200);
67 | 
68 | 
69 |     setInterval(function () {
70 |       tesla.moveRight(Math.random() * 5);
71 |       nissan.moveRight(Math.random() * 5);
72 |     }, 30);
73 |     </script>
74 | </body>
75 | </html>
76 | 


--------------------------------------------------------------------------------
/Chapter 14/Programming Challenge #3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Прыгающий мяч</title>
 5 | </head>
 6 | 
 7 | <body>
 8 |     <canvas id="canvas" width="400" height="400"></canvas>
 9 | 
10 |     <script>
11 |     var Ball = function () {
12 |       this.x = 100;
13 |       this.y = 100;
14 |       this.xSpeed = (Math.random() * 10) - 5;
15 |       this.ySpeed = (Math.random() * 10) - 5;
16 |     };
17 | 
18 |     var circle = function (x, y, radius, fillCircle) {
19 |       ctx.beginPath();
20 |       ctx.arc(x, y, radius, 0, Math.PI * 2, false);
21 |       if (fillCircle) {
22 |         ctx.fill();
23 |       } else {
24 |         ctx.stroke();
25 |       }
26 |     };
27 | 
28 |     Ball.prototype.draw = function () {
29 |       circle(this.x, this.y, 3, true);
30 |     };
31 | 
32 |     Ball.prototype.move = function () {
33 |       this.x += this.xSpeed;
34 |       this.y += this.ySpeed;
35 |     };
36 | 
37 |     Ball.prototype.checkCollision = function () {
38 |       if (this.x < 0 || this.x > width) {
39 |         this.xSpeed = -this.xSpeed;
40 |       }
41 |       if (this.y < 0 || this.y > height) {
42 |         this.ySpeed = -this.ySpeed;
43 |       }
44 |     };
45 | 
46 |     var canvas = document.getElementById("canvas");
47 |     var ctx = canvas.getContext("2d");
48 | 
49 |     var width = canvas.width;
50 |     var height = canvas.height;
51 | 
52 |     var balls = [];
53 |     for (var i = 0; i < 10; i++) {
54 |       balls[i] = new Ball();
55 |     }
56 | 
57 |     setInterval(function () {
58 |       ctx.clearRect(0, 0, width, height);
59 | 
60 |       for (var i = 0; i < balls.length; i++) {
61 |         balls[i].draw();
62 |         balls[i].move();
63 |         balls[i].checkCollision();
64 |       }
65 | 
66 |       ctx.strokeRect(0, 0, width, height);
67 |     }, 30);
68 |     </script>
69 | </body>
70 | </html>
71 | 


--------------------------------------------------------------------------------
/Chapter 7/Programming Challenge #3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Виселица!</title>
 5 | </head>
 6 | <body>
 7 |     <h1>Виселица!</h1>
 8 |     <script>
 9 |     // Создаем массив со словами
10 |     var words = [
11 |       "программа",
12 |       "макака",
13 |       "прекрасный",
14 |       "оладушек"
15 |     ];
16 |     
17 |     // Выбираем случайное слово
18 |     var word = words[Math.floor(Math.random() * words.length)];
19 |     
20 |     // Создаем итоговый массив
21 |     var answerArray = [];
22 |     for (var i = 0; i < word.length; i++) {
23 |       answerArray[i] = "_";
24 |     }
25 |     
26 |     var remainingLetters = word.length;
27 |     var guesses = 20;
28 |     
29 |     // Игровой цикл
30 |     while (remainingLetters > 0 && guesses > 0) {
31 |       // Показываем состояние игры
32 |       alert(answerArray.join(" "));
33 |       
34 |       // Запрашиваем вариант ответа
35 |       var guess = prompt("Угадайте букву, или нажмите Отмена для выхода из игры.");
36 |       if (guess === null) {
37 |         // Выходим из игрового цикла
38 |         break;
39 |       } else if (guess.length !== 1) {
40 |         alert("Пожалуйста, введите одиночную букву.");
41 |       } else {
42 |         guesses--;
43 |         guess = guess.toLowerCase();
44 |         // Обновляем состояние игры
45 |         for (var j = 0; j < word.length; j++) {
46 |           if (word[j] === guess) {
47 |             answerArray[j] = guess;
48 |             remainingLetters--;
49 |           }
50 |         }
51 |       }
52 |     // Конец игрового цикла
53 |     }
54 |     
55 |     // Отображаем ответ и поздравляем игрока
56 |     alert(answerArray.join(" "));
57 |     if (guesses > 0) {
58 |       alert("Отлично! Было загадано слово " + word);
59 |     } else {
60 |       alert("Очень плохо! Было загадано слово " + word);
61 |     }
62 |     </script>
63 | </body>
64 | </html>


--------------------------------------------------------------------------------
/Chapter 7/Programming Challenge #4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Виселица!</title>
 5 | </head>
 6 | <body>
 7 |     <h1>Виселица!</h1>
 8 |     <script>
 9 |     // Создаем массив со словами
10 |     var words = [
11 |       "программа",
12 |       "макака",
13 |       "прекрасный",
14 |       "оладушек"
15 |     ];
16 |     
17 |     // Выбираем случайное слово
18 |     var word = words[Math.floor(Math.random() * words.length)];
19 |     
20 |     // Создаем итоговый массив
21 |     var answerArray = [];
22 |     for (var i = 0; i < word.length; i++) {
23 |       answerArray[i] = "_";
24 |     }
25 |     
26 |     var remainingLetters = word.length;
27 |     var guesses = 20;
28 |     
29 |     // Игровой цикл
30 |     while (remainingLetters > 0 && guesses > 0) {
31 |       // Показываем состояние игры
32 |       alert(answerArray.join(" "));
33 |       
34 |       // Запрашиваем вариант ответа
35 |       var guess = prompt("Угадайте букву, или нажмите Отмена для выхода из игры.");
36 |       if (guess === null) {
37 |         // Выходим из игрового цикла
38 |         break;
39 |       } else if (guess.length !== 1) {
40 |         alert("Пожалуйста, введите одиночную букву.");
41 |       } else {
42 |         guesses--;
43 |         guess = guess.toLowerCase();
44 |         // Обновляем состояние игры
45 |         for (var j = 0; j < word.length; j++) {
46 |           if (word[j] === guess && answerArray[j] === "_") {
47 |             answerArray[j] = guess;
48 |             remainingLetters--;
49 |           }
50 |         }
51 |       }
52 |     // Конец игрового цикла
53 |     }
54 |     
55 |     // Отображаем ответ и поздравляем игрока
56 |     alert(answerArray.join(" "));
57 |     if (guesses > 0) {
58 |       alert("Отлично! Было загадано слово " + word);
59 |     } else {
60 |       alert("Очень плохо! Было загадано слово " + word);
61 |     }
62 |     </script>
63 | </body>
64 | </html>


--------------------------------------------------------------------------------
/Chapter 10/Programming Challenge #4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Интерактивное программирование</title>
 5 | </head>
 6 | 
 7 | <body>
 8 |     <h1 id="heading">Привет, мир!</h1>
 9 | 
10 |     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
11 | 
12 |     <script>
13 |     var direction = 'вправо';
14 |     var offset = 0;
15 |     var intervalLength = 120;
16 |     var clicks = 0;
17 | 
18 |     $("#heading").offset({ left: offset, top: offset });
19 | 
20 |     var moveHeading = function () {
21 |       if (direction === 'вправо') {
22 |         $("#heading").offset({ left: offset });
23 |         offset++;
24 |         if (offset > 200) {
25 |           offset = 0;
26 |           direction = 'вниз';
27 |         }
28 |       } else if (direction === 'вниз') {
29 |         $("#heading").offset({ top: offset });
30 |         offset++;
31 |         if (offset > 200) {
32 |           offset = 200;
33 |           direction = 'влево';
34 |         }
35 |       } else if (direction === 'влево') {
36 |         $("#heading").offset({ left: offset });
37 |         offset--;
38 |         if (offset < 0) {
39 |           offset = 200;
40 |           direction = 'вверх';
41 |         }
42 |       } else if (direction === 'вверх') {
43 |         $("#heading").offset({ top: offset });
44 |         offset--;
45 |         if (offset < 0) {
46 |           offset = 0;
47 |           direction = 'вправо';
48 |         }
49 |       }
50 |     };
51 | 
52 |     var intervalId = setInterval(moveHeading, intervalLength);
53 | 
54 |     $("#heading").click(function () {
55 |       clearInterval(intervalId);
56 |       intervalLength /= 2;
57 |       clicks++;
58 | 
59 |       if (clicks > 10) {
60 |         $("#heading").text("Накликал-таки!");
61 |       } else {
62 |         intervalId = setInterval(moveHeading, intervalLength)
63 | 
64 |       }
65 |     });
66 |     </script>
67 | </body>
68 | </html>


--------------------------------------------------------------------------------
/Chapter 14/Programming Challenge #4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Прыгающий мяч</title>
 5 | </head>
 6 | 
 7 | <body>
 8 |     <canvas id="canvas" width="400" height="400"></canvas>
 9 | 
10 |     <script>
11 |     var Ball = function () {
12 |       this.x = 100;
13 |       this.y = 100;
14 |       this.xSpeed = (Math.random() * 10) - 5;
15 |       this.ySpeed = (Math.random() * 10) - 5;
16 |       var colors = ["Red", "Orange", "Yellow", "Green", "Blue",  "Purple"];
17 |       this.color = pickRandomWord(colors);
18 |     };
19 | 
20 |     var pickRandomWord = function (words) {
21 |       return words[Math.floor(Math.random() * words.length)];
22 |     };
23 | 
24 |     var circle = function (x, y, radius, fillCircle) {
25 |       ctx.beginPath();
26 |       ctx.arc(x, y, radius, 0, Math.PI * 2, false);
27 |       if (fillCircle) {
28 |         ctx.fill();
29 |       } else {
30 |         ctx.stroke();
31 |       }
32 |     };
33 | 
34 |     Ball.prototype.draw = function () {
35 |       ctx.fillStyle = this.color;
36 |       circle(this.x, this.y, 3, true);
37 |     };
38 | 
39 |     Ball.prototype.move = function () {
40 |       this.x += this.xSpeed;
41 |       this.y += this.ySpeed;
42 |     };
43 | 
44 |     Ball.prototype.checkCollision = function () {
45 |       if (this.x < 0 || this.x > width) {
46 |         this.xSpeed = -this.xSpeed;
47 |       }
48 |       if (this.y < 0 || this.y > height) {
49 |         this.ySpeed = -this.ySpeed;
50 |       }
51 |     };
52 | 
53 |     var canvas = document.getElementById("canvas");
54 |     var ctx = canvas.getContext("2d");
55 | 
56 |     var width = canvas.width;
57 |     var height = canvas.height;
58 | 
59 |     var balls = [];
60 |     for (var i = 0; i < 10; i++) {
61 |       balls[i] = new Ball();
62 |     }
63 | 
64 |     setInterval(function () {
65 |       ctx.clearRect(0, 0, width, height);
66 | 
67 |       for (var i = 0; i < balls.length; i++) {
68 |         balls[i].draw();
69 |         balls[i].move();
70 |         balls[i].checkCollision();
71 |       }
72 | 
73 |       ctx.strokeRect(0, 0, width, height);
74 |     }, 30);
75 |     </script>
76 | </body>
77 | </html>
78 | 


--------------------------------------------------------------------------------
/Chapter 11/Programming Challenge #1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Найди клад!</title>
 5 | </head>
 6 | <body>
 7 |     <h1 id="heading">Найди клад!</h1>
 8 |     <img id="map" width=800 height=800 src="http://nostarch.com/images/treasuremap.png">
 9 | 
10 |     <p id="distance"></p>
11 | 
12 |     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
13 | 
14 |     <script>
15 |     // Получить случайное число от 0 до size-1
16 |     var getRandomNumber = function (size) {
17 |       return Math.floor(Math.random() * size);
18 |     };
19 |     
20 |     // Вычислить расстояние от клика (event) до клада (target)
21 |     var getDistance = function (event, target) {
22 |       var diffX = event.offsetX - target.x;
23 |       var diffY = event.offsetY - target.y;
24 |       return Math.sqrt((diffX * diffX) + (diffY * diffY));
25 |     };
26 |     
27 |     // Получить для расстояния строку подсказки
28 |     var getDistanceHint = function (distance) {
29 |       if (distance < 10) {
30 |         return "Обожжешься!";
31 |       } else if (distance < 20) {
32 |         return "Очень горячо";
33 |       } else if (distance < 40) {
34 |         return "Горячо";
35 |       } else if (distance < 80) {
36 |         return "Тепло";
37 |       } else if (distance < 160) {
38 |         return "Холодно";
39 |       } else if (distance < 320) {
40 |         return "Очень холодно";
41 |       } else {
42 |         return "Замерзнешь!";
43 |       }
44 |     };
45 |     
46 |     // Создаем переменные
47 |     var width = 800;
48 |     var height = 800;
49 |     var clicks = 0;
50 |     
51 |     // Случайная позиция клада
52 |     var target = {
53 |       x: getRandomNumber(width),
54 |       y: getRandomNumber(height)
55 |     };
56 |     
57 |     // Добавляем элементу img обработчик клика
58 |     $("#map").click(function (event) {
59 |       clicks++;
60 |       
61 |       // Получаем расстояние от места клика до клада
62 |       var distance = getDistance(event, target);
63 |       // Преобразуем расстояние в подсказку
64 |       var distanceHint = getDistanceHint(distance);
65 |       
66 |       // Записываем в элемент #distance новую подсказку
67 |       $("#distance").text(distanceHint);
68 |       
69 |       // Если клик был достаточно близко, поздравляем с победой
70 |       if (distance < 8) {
71 |         alert("Клад найден! Сделано кликов: " + clicks);
72 |       }
73 |     });
74 |     </script>
75 | </body>
76 | </html>


--------------------------------------------------------------------------------
/Chapter 11/Programming Challenge #2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Найди клад!</title>
 5 | </head>
 6 | <body>
 7 |     <h1 id="heading">Найди клад!</h1>
 8 |     <img id="map" width=800 height=800 src="http://nostarch.com/images/treasuremap.png">
 9 | 
10 |     <p id="distance"></p>
11 | 
12 |     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
13 | 
14 |     <script>
15 |     // Получить случайное число от 0 до size-1
16 |     var getRandomNumber = function (size) {
17 |       return Math.floor(Math.random() * size);
18 |     };
19 |     
20 |     // Вычислить расстояние от клика (event) до клада (target)
21 |     var getDistance = function (event, target) {
22 |       var diffX = event.offsetX - target.x;
23 |       var diffY = event.offsetY - target.y;
24 |       return Math.sqrt((diffX * diffX) + (diffY * diffY));
25 |     };
26 |     
27 |     // Получить для расстояния строку подсказки
28 |     var getDistanceHint = function (distance) {
29 |       if (distance < 10) {
30 |         return "Обожжешься!";
31 |       } else if (distance < 20) {
32 |         return "Очень горячо";
33 |       } else if (distance < 40) {
34 |         return "Горячо";
35 |       } else if (distance < 80) {
36 |         return "Тепло";
37 |       } else if (distance < 160) {
38 |         return "Холодно";
39 |       } else if (distance < 320) {
40 |         return "Очень холодно";
41 |       } else if (distance < 640) {
42 |         return "Очень-очень холодно!";
43 |       } else {
44 |         return "Замерзнешь!";
45 |       }
46 |     };
47 |     
48 |     // Создаем переменные
49 |     var width = 800;
50 |     var height = 800;
51 |     var clicks = 0;
52 |     
53 |     // Случайная позиция клада
54 |     var target = {
55 |       x: getRandomNumber(width),
56 |       y: getRandomNumber(height)
57 |     };
58 |     
59 |     // Добавляем элементу img обработчик клика
60 |     $("#map").click(function (event) {
61 |       clicks++;
62 |       
63 |       // Получаем расстояние от места клика до клада
64 |       var distance = getDistance(event, target);
65 |       // Преобразуем расстояние в подсказку
66 |       var distanceHint = getDistanceHint(distance);
67 |       
68 |       // Записываем в элемент #distance новую подсказку
69 |       $("#distance").text(distanceHint);
70 |       
71 |       // Если клик был достаточно близко, поздравляем с победой
72 |       if (distance < 8) {
73 |         alert("Клад найден! Сделано кликов: " + clicks);
74 |       }
75 |     });
76 |     </script>
77 | </body>
78 | </html>


--------------------------------------------------------------------------------
/Chapter 11/Programming Challenge #3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Найди клад!</title>
 5 | </head>
 6 | <body>
 7 |     <h1 id="heading">Найди клад!</h1>
 8 |     <img id="map" width=800 height=800 src="http://nostarch.com/images/treasuremap.png">
 9 | 
10 |     <p id="distance"></p>
11 | 
12 |     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
13 | 
14 |     <script>
15 |     // Получить случайное число от 0 до size-1
16 |     var getRandomNumber = function (size) {
17 |       return Math.floor(Math.random() * size);
18 |     };
19 |     
20 |     // Вычислить расстояние от клика (event) до клада (target)
21 |     var getDistance = function (event, target) {
22 |       var diffX = event.offsetX - target.x;
23 |       var diffY = event.offsetY - target.y;
24 |       return Math.sqrt((diffX * diffX) + (diffY * diffY));
25 |     };
26 |     
27 |     // Получить для расстояния строку подсказки
28 |     var getDistanceHint = function (distance) {
29 |       if (distance < 10) {
30 |         return "Обожжешься!";
31 |       } else if (distance < 20) {
32 |         return "Очень горячо";
33 |       } else if (distance < 40) {
34 |         return "Горячо";
35 |       } else if (distance < 80) {
36 |         return "Тепло";
37 |       } else if (distance < 160) {
38 |         return "Холодно";
39 |       } else if (distance < 320) {
40 |         return "Очень холодно";
41 |       } else if (distance < 640) {
42 |         return "Очень-очень холодно!";
43 |       } else {
44 |         return "Замерзнешь!";
45 |       }
46 |     };
47 |     
48 |     // Создаем переменные
49 |     var width = 800;
50 |     var height = 800;
51 |     var clicks = 0;
52 |     var clickLimit = 20;
53 |     
54 |     // Случайная позиция клада
55 |     var target = {
56 |       x: getRandomNumber(width),
57 |       y: getRandomNumber(height)
58 |     };
59 |     
60 |     // Добавляем элементу img обработчик клика
61 |     $("#map").click(function (event) {
62 |       clicks++;
63 |       
64 |       if (clicks > clickLimit) {
65 |         alert("КОНЕЦ ИГРЫ");
66 |         return;
67 |       }
68 |       
69 |       // Получаем расстояние от места клика до клада
70 |       var distance = getDistance(event, target);
71 |       // Преобразуем расстояние в подсказку
72 |       var distanceHint = getDistanceHint(distance);
73 |       
74 |       // Записываем в элемент #distance новую подсказку
75 |       $("#distance").text(distanceHint);
76 |       
77 |       // Если клик был достаточно близко, поздравляем с победой
78 |       if (distance < 8) {
79 |         alert("Клад найден! Сделано кликов: " + clicks);
80 |       }
81 |     });
82 |     </script>
83 | </body>
84 | </html>


--------------------------------------------------------------------------------
/Chapter 11/Programming Challenge #4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Найди клад!</title>
 5 | </head>
 6 | <body>
 7 |     <h1 id="heading">Найди клад!</h1>
 8 |     <img id="map" width=800 height=800 src="http://nostarch.com/images/treasuremap.png">
 9 | 
10 |     <p id="distance"></p>
11 |     <p id="clicks-remaining"></p>
12 | 
13 |     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
14 | 
15 |     <script>
16 |     // Получить случайное число от 0 до size-1
17 |     var getRandomNumber = function (size) {
18 |       return Math.floor(Math.random() * size);
19 |     };
20 |     
21 |     // Вычислить расстояние от клика (event) до клада (target)
22 |     var getDistance = function (event, target) {
23 |       var diffX = event.offsetX - target.x;
24 |       var diffY = event.offsetY - target.y;
25 |       return Math.sqrt((diffX * diffX) + (diffY * diffY));
26 |     };
27 |     
28 |     // Получить для расстояния строку подсказки
29 |     var getDistanceHint = function (distance) {
30 |       if (distance < 10) {
31 |         return "Обожжешься!";
32 |       } else if (distance < 20) {
33 |         return "Очень горячо";
34 |       } else if (distance < 40) {
35 |         return "Горячо";
36 |       } else if (distance < 80) {
37 |         return "Тепло";
38 |       } else if (distance < 160) {
39 |         return "Холодно";
40 |       } else if (distance < 320) {
41 |         return "Очень холодно";
42 |       } else if (distance < 640) {
43 |         return "Очень-очень холодно!";
44 |       } else {
45 |         return "Замерзнешь!";
46 |       }
47 |     };
48 |     
49 |     // Создаем переменные
50 |     var width = 800;
51 |     var height = 800;
52 |     var clicks = 0;
53 |     var clickLimit = 20;
54 |     
55 |     // Случайная позиция клада
56 |     var target = {
57 |       x: getRandomNumber(width),
58 |       y: getRandomNumber(height)
59 |     };
60 |     
61 |     // Добавляем элементу img обработчик клика
62 |     $("#map").click(function (event) {
63 |       clicks++;
64 |       
65 |       if (clicks > clickLimit) {
66 |         alert("КОНЕЦ ИГРЫ");
67 |         return;
68 |       }
69 |       
70 |       // Получаем расстояние от места клика до клада
71 |       var distance = getDistance(event, target);
72 |       // Преобразуем расстояние в подсказку
73 |       var distanceHint = getDistanceHint(distance);
74 |       
75 |       // Записываем в элемент #distance новую подсказку
76 |       $("#distance").text(distanceHint);
77 |       
78 |       // Обновляем элемент #clicks-remaining  сообщением о числе оставшихся кликов
79 |       $("#clicks-remaining").text("Осталось " + (clickLimit - clicks) + " попыток.");
80 |       
81 |       // Если клик был достаточно близко, поздравляем с победой
82 |       if (distance < 8) {
83 |         alert("Клад найден! Сделано кликов: " + clicks);
84 |       }
85 |     });
86 |     </script>
87 | </body>
88 | </html>


--------------------------------------------------------------------------------
/Chapter 8/Programming Challenge #3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Виселица!</title>
 5 | </head>
 6 | <body>
 7 |     <h1>Виселица!</h1>
 8 |     <script>
 9 |     var pickWord = function () {
10 |       // Возвращает случайно выбранное слово
11 |       var words = [
12 |         "программа",
13 |         "макака",
14 |         "прекрасный",
15 |         "оладушек"
16 |       ];
17 | 
18 |       return words[Math.floor(Math.random() * words.length)];
19 |     };
20 | 
21 |     var setupAnswerArray = function (word) {
22 |       // Возвращает итоговый массив для заданного слова word
23 |       var answerArray = [];
24 |       for (var i = 0; i < word.length; i++) {
25 |         answerArray[i] = "_";
26 |       }
27 | 
28 |       return answerArray;
29 |     };
30 | 
31 |     var showPlayerProgress = function (answerArray) {
32 |       // С помощью alert отображает текущее состояние игры
33 |       alert(answerArray.join(" "));
34 |     };
35 | 
36 |     var getGuess = function () {
37 |       // Запрашивает ответ игрока с помощью prompt
38 |       return prompt("Угадайте букву, или нажмите Отмена для выхода из игры.");
39 |     };
40 | 
41 |     var updateGameState = function (guess, word, answerArray) {
42 |       // Обновляет answerArray согласно ответу игрока (guess)
43 |       // возвращает число, обозначающее, сколько раз буква guess
44 |       // встречается в слове, чтобы можно было обновить значение
45 |       // remainingLetters
46 |       var appearances = 0;
47 |       for (var j = 0; j < word.length; j++) {
48 |         if (word[j] === guess) {
49 |           answerArray[j] = guess;
50 |           appearances++;
51 |         }
52 |       }
53 | 
54 |       return appearances;
55 |     };
56 | 
57 |     var showAnswerAndCongratulatePlayer = function (answerArray) {
58 |       // С помощью alert показывает игроку отгаданное слово
59 |       // и поздравляет его с победой
60 |       showPlayerProgress(answerArray);
61 |       alert("Отлично! Было загадано слово " + answerArray.join(""));
62 |     };
63 | 
64 |     // word: загаданное слово
65 |     var word = pickWord();
66 |     // answerArray: итоговый массив
67 |     var answerArray = setupAnswerArray(word);
68 |     // remainingLetters: сколько букв осталось угадать
69 |     var remainingLetters = word.length;
70 | 
71 |     while (remainingLetters > 0) {
72 |       showPlayerProgress(answerArray);
73 |       // guess: ответ игрока
74 |       var guess = getGuess();
75 |       if (guess === null) {
76 |         break;
77 |       } else if (guess.length !== 1) {
78 |         alert("Пожалуйста, введите одиночную букву.");
79 |       } else {
80 |         // correctGuesses: количество открытых букв
81 |         var correctGuesses = updateGameState(guess, word, answerArray);
82 |         remainingLetters -= correctGuesses;
83 |       }
84 |     }
85 | 
86 |     showAnswerAndCongratulatePlayer(answerArray);
87 |     </script>
88 | </body>
89 | </html>


--------------------------------------------------------------------------------
/Chapter 15/Programming Challenge #1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Ввод с клавиатуры</title>
 5 | </head>
 6 | <body>
 7 |     <canvas id="canvas" width="400" height="400"></canvas>
 8 |     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
 9 |     <script>
10 |     var canvas = document.getElementById("canvas");
11 |     var ctx = canvas.getContext("2d");
12 |     var width = canvas.width;
13 |     var height = canvas.height;
14 | 
15 |     var circle = function (x, y, radius, fillCircle) {
16 |       ctx.beginPath();
17 |       ctx.arc(x, y, radius, 0, Math.PI * 2, false);
18 |       if (fillCircle) {
19 |         ctx.fill();
20 |         } else {
21 |         ctx.stroke();
22 |       }
23 |     };
24 | 
25 |     // Конструктор Ball
26 |     var Ball = function () {
27 |       this.x = width / 2;
28 |       this.y = height / 2;
29 |       this.xSpeed = 5;
30 |       this.ySpeed = 0;
31 |     };
32 | 
33 |     // Обновляем позицию мяча соответственно его скорости
34 |     Ball.prototype.move = function () {
35 |       this.x += this.xSpeed;
36 |       this.y += this.ySpeed;
37 | 
38 |       if (this.x < 0 || this.x > width) {
39 |         this.xSpeed = -this.xSpeed;
40 |       } else if (this.y < 0 || this.y > height) {
41 |         this.ySpeed = -this.ySpeed;
42 |       }
43 |     };
44 | 
45 |     // Рисуем мяч в его текущей позиции
46 |     Ball.prototype.draw = function () {
47 |       circle(this.x, this.y, 10, true);
48 |     };
49 | 
50 |     // Задаем направление движения по строке с названием действия
51 |     Ball.prototype.setDirection = function (direction) {
52 |       if (direction === "вверх") {
53 |         this.xSpeed = 0;
54 |         this.ySpeed = -5;
55 |       } else if (direction === "вниз") {
56 |         this.xSpeed = 0;
57 |         this.ySpeed = 5;
58 |       } else if (direction === "влево") {
59 |         this.xSpeed = -5;
60 |         this.ySpeed = 0;
61 |       } else if (direction === "вправо") {
62 |         this.xSpeed = 5;
63 |         this.ySpeed = 0;
64 |       } else if (direction === "стоп") {
65 |         this.xSpeed = 0;
66 |         this.ySpeed = 0;
67 |       }
68 |     };
69 | 
70 |     // Создаем объект-мяч
71 |     var ball = new Ball();
72 | 
73 |     // Объект для перевода кодов клавиш в названия действий
74 |     var keyActions = {
75 |       32: "стоп",
76 |       37: "влево",
77 |       38: "вверх",
78 |       39: "вправо",
79 |       40: "вниз"
80 |     };
81 | 
82 |     // Обработчик события keydown, будет вызван при каждом нажатии клавиши
83 |     $("body").keydown(function (event) {
84 |       var direction = keyActions[event.keyCode];
85 |       ball.setDirection(direction);
86 |     });
87 | 
88 |     // Функция анимации, вызывается раз в 30 мс
89 |     setInterval(function () {
90 |       ctx.clearRect(0, 0, width, height);
91 | 
92 |       ball.draw();
93 |       ball.move();
94 | 
95 |       ctx.strokeRect(0, 0, width, height);
96 |     }, 30);
97 |     </script>
98 | </body>
99 | </html>


--------------------------------------------------------------------------------
/Chapter 13/Programming Challenge #4.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <title>Виселица</title>
  5 | </head>
  6 | 
  7 | <body>
  8 |     <canvas id="canvas" width="200" height="200"></canvas>
  9 | 
 10 |     <script>
 11 |     var canvas = document.getElementById("canvas");
 12 |     var ctx = canvas.getContext("2d");
 13 | 
 14 |     var pickWord = function () {
 15 |       var words = [
 16 |       "программа",
 17 |       "макака",
 18 |       "прекрасный",
 19 |       "оладушек"
 20 |     ];
 21 | 
 22 |       return words[Math.floor(Math.random() * words.length)];
 23 |     };
 24 | 
 25 |     var setupAnswerArray = function (word) {
 26 |       var answerArray = [];
 27 |       for (var i = 0; i < word.length; i++) {
 28 |         answerArray[i] = "_";
 29 |       }
 30 | 
 31 |       return answerArray;
 32 |     };
 33 | 
 34 |     var showPlayerProgress = function (answerArray) {
 35 |       alert(answerArray.join(" "));
 36 |     };
 37 | 
 38 |     var getGuess = function () {
 39 |       return prompt("Угадайте букву, или нажмите Отмена для выхода из игры.");
 40 |     };
 41 | 
 42 |     var updateGameState = function (guess, word, answerArray) {
 43 |       var appearances = 0;
 44 |       for (var j = 0; j < word.length; j++) {
 45 |         if (word[j] === guess) {
 46 |           answerArray[j] = guess;
 47 |           appearances++;
 48 |         }
 49 |       }
 50 | 
 51 |       return appearances;
 52 |     };
 53 | 
 54 |     var showAnswerAndCongratulatePlayer = function (answerArray) {
 55 |       showPlayerProgress(answerArray);
 56 |       alert("Отлично! Было загадано слово " + answerArray.join(""));
 57 |     };
 58 | 
 59 |     var drawSegment = function (incorrectGuesses) {
 60 |       ctx.lineWidth = 4;
 61 | 
 62 |       if (incorrectGuesses === 0) {
 63 |         ctx.strokeRect(20, 20, 20, 20);
 64 |       } else if (incorrectGuesses === 1) {
 65 |         ctx.beginPath();
 66 |         ctx.moveTo(30, 40);
 67 |         ctx.lineTo(30, 80);
 68 |         ctx.stroke();
 69 |       } else if (incorrectGuesses === 2) {
 70 |         ctx.beginPath();
 71 |         ctx.moveTo(30, 80);
 72 |         ctx.lineTo(10, 110);
 73 |         ctx.stroke();
 74 |       } else if (incorrectGuesses === 3) {
 75 |         ctx.beginPath();
 76 |         ctx.moveTo(30, 80);
 77 |         ctx.lineTo(50, 110);
 78 |         ctx.stroke();
 79 |       } else if (incorrectGuesses === 4) {
 80 |         ctx.beginPath();
 81 |         ctx.moveTo(30, 60);
 82 |         ctx.lineTo(10, 50);
 83 |         ctx.stroke();
 84 |       } else if (incorrectGuesses === 5) {
 85 |         ctx.beginPath();
 86 |         ctx.moveTo(30, 60);
 87 |         ctx.lineTo(50, 50);
 88 |         ctx.stroke();
 89 |       }
 90 |     };
 91 | 
 92 |     var word = pickWord();
 93 |     var answerArray = setupAnswerArray(word);
 94 |     var remainingLetters = word.length;
 95 |     var incorrectGuesses = 0;
 96 | 
 97 |     while (remainingLetters > 0) {
 98 |       showPlayerProgress(answerArray);
 99 |       var guess = getGuess();
100 |       if (guess === null) {
101 |         break;
102 |       } else if (guess.length !== 1) {
103 |         alert("Пожалуйста, введите одиночную букву.");
104 |       } else {
105 |         var correctGuesses = updateGameState(guess, word, answerArray);
106 | 
107 |         remainingLetters -= correctGuesses;
108 | 
109 |         if (correctGuesses === 0) {
110 |           drawSegment(incorrectGuesses);
111 |           incorrectGuesses++;
112 |         }
113 |       }
114 |     }
115 | 
116 |     showAnswerAndCongratulatePlayer(answerArray);
117 |     </script>
118 | </body>
119 | </html>
120 | 


--------------------------------------------------------------------------------
/Chapter 15/Programming Challenge #3.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <title>Ввод с клавиатуры</title>
  5 | </head>
  6 | <body>
  7 |     <canvas id="canvas" width="400" height="400"></canvas>
  8 |     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
  9 |     <script>
 10 |     var canvas = document.getElementById("canvas");
 11 |     var ctx = canvas.getContext("2d");
 12 |     var width = canvas.width;
 13 |     var height = canvas.height;
 14 | 
 15 |     var circle = function (x, y, radius, fillCircle) {
 16 |       ctx.beginPath();
 17 |       ctx.arc(x, y, radius, 0, Math.PI * 2, false);
 18 |       if (fillCircle) {
 19 |         ctx.fill();
 20 |         } else {
 21 |         ctx.stroke();
 22 |       }
 23 |     };
 24 | 
 25 |     // Конструктор Ball
 26 |     var Ball = function () {
 27 |       this.x = width / 2;
 28 |       this.y = height / 2;
 29 |       this.speed = 5;
 30 |       this.size = 10;
 31 |       this.xSpeed = 1;
 32 |       this.ySpeed = 0;
 33 |     };
 34 | 
 35 |     // Обновляем позицию мяча соответственно его скорости
 36 |     Ball.prototype.move = function () {
 37 |       this.x += this.xSpeed * this.speed;
 38 |       this.y += this.ySpeed * this.speed;
 39 | 
 40 |       if (this.x < 0 || this.x > width) {
 41 |         this.xSpeed = -this.xSpeed;
 42 |       } else if (this.y < 0 || this.y > height) {
 43 |         this.ySpeed = -this.ySpeed;
 44 |       }
 45 |     };
 46 | 
 47 |     // Рисуем мяч в его текущей позиции
 48 |     Ball.prototype.draw = function () {
 49 |       circle(this.x, this.y, this.size, true);
 50 |     };
 51 | 
 52 |     // Задаем направление движения по строке с названием действия
 53 |     Ball.prototype.doAction = function (action) {
 54 |       if (action === "вверх") {
 55 |         this.xSpeed = 0;
 56 |         this.ySpeed = -1;
 57 |       } else if (action === "вниз") {
 58 |         this.xSpeed = 0;
 59 |         this.ySpeed = 1;
 60 |       } else if (action === "влево") {
 61 |         this.xSpeed = -1;
 62 |         this.ySpeed = 0;
 63 |       } else if (action === "вправо") {
 64 |         this.xSpeed = 1;
 65 |         this.ySpeed = 0;
 66 |       } else if (action === "стоп") {
 67 |         this.xSpeed = 0;
 68 |         this.ySpeed = 0;
 69 |       } else if (action === "быстрее") {
 70 |         this.speed++;
 71 |       } else if (action === "медленнее") {
 72 |         if (this.speed > 0) {
 73 |           this.speed--;
 74 |         }
 75 |       } else if (action === "меньше") {
 76 |         if (this.size > 0) {
 77 |           this.size--;
 78 |         }
 79 |       } else if (action === "больше") {
 80 |         this.size++;
 81 |       }
 82 |     };
 83 | 
 84 |     // Создаем объект-мяч
 85 |     var ball = new Ball();
 86 | 
 87 |     // Объект для перевода кодов клавиш в названия действий
 88 |     var keyActions = {
 89 |       32: "стоп",
 90 |       37: "влево",
 91 |       38: "вверх",
 92 |       39: "вправо",
 93 |       40: "вниз",
 94 |       88: "быстрее",
 95 |       90: "медленнее",
 96 |       67: "меньше",
 97 |       86: "больше"
 98 |     };
 99 | 
100 |     // Обработчик события keydown, будет вызван при каждом нажатии клавиши
101 |     $("body").keydown(function (event) {
102 |       var action = keyActions[event.keyCode];
103 |       ball.doAction(action);
104 |     });
105 | 
106 |     // Функция анимации, вызывается раз в 30 мс
107 |     setInterval(function () {
108 |       ctx.clearRect(0, 0, width, height);
109 | 
110 |       ball.draw();
111 |       ball.move();
112 | 
113 |       ctx.strokeRect(0, 0, width, height);
114 |     }, 30);
115 |     </script>
116 | </body>
117 | </html>


--------------------------------------------------------------------------------
/Chapter 15/Programming Challenge #2.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <title>Ввод с клавиатуры</title>
  5 | </head>
  6 | <body>
  7 |     <canvas id="canvas" width="400" height="400"></canvas>
  8 |     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
  9 |     <script>
 10 |     var canvas = document.getElementById("canvas");
 11 |     var ctx = canvas.getContext("2d");
 12 |     var width = canvas.width;
 13 |     var height = canvas.height;
 14 | 
 15 |     var circle = function (x, y, radius, fillCircle) {
 16 |       ctx.beginPath();
 17 |       ctx.arc(x, y, radius, 0, Math.PI * 2, false);
 18 |       if (fillCircle) {
 19 |         ctx.fill();
 20 |         } else {
 21 |         ctx.stroke();
 22 |       }
 23 |     };
 24 | 
 25 |     // Конструктор Ball
 26 |     var Ball = function () {
 27 |       this.x = width / 2;
 28 |       this.y = height / 2;
 29 |       this.speed = 5;
 30 |       this.xSpeed = 1;
 31 |       this.ySpeed = 0;
 32 |     };
 33 | 
 34 |     // Обновляем позицию мяча соответственно его скорости
 35 |     Ball.prototype.move = function () {
 36 |       this.x += this.xSpeed * this.speed;
 37 |       this.y += this.ySpeed * this.speed;
 38 | 
 39 |       if (this.x < 0 || this.x > width) {
 40 |         this.xSpeed = -this.xSpeed;
 41 |       } else if (this.y < 0 || this.y > height) {
 42 |         this.ySpeed = -this.ySpeed;
 43 |       }
 44 |     };
 45 | 
 46 |     // Рисуем мяч в его текущей позиции
 47 |     Ball.prototype.draw = function () {
 48 |       circle(this.x, this.y, 10, true);
 49 |     };
 50 | 
 51 |     // Задаем направление движения по строке с названием действия
 52 |     Ball.prototype.setDirection = function (direction) {
 53 |       if (direction === "вверх") {
 54 |         this.xSpeed = 0;
 55 |         this.ySpeed = -5;
 56 |       } else if (direction === "вниз") {
 57 |         this.xSpeed = 0;
 58 |         this.ySpeed = 5;
 59 |       } else if (direction === "влево") {
 60 |         this.xSpeed = -5;
 61 |         this.ySpeed = 0;
 62 |       } else if (direction === "вправо") {
 63 |         this.xSpeed = 5;
 64 |         this.ySpeed = 0;
 65 |       } else if (direction === "стоп") {
 66 |         this.xSpeed = 0;
 67 |         this.ySpeed = 0;
 68 |       }
 69 |     };
 70 | 
 71 |     // Задаем новую скорость мяча
 72 |     Ball.prototype.setSpeed = function (newSpeed) {
 73 |       if (newSpeed !== undefined) {
 74 |         this.speed = newSpeed;
 75 |       }
 76 |     };
 77 | 
 78 |     // Создаем объект-мяч
 79 |     var ball = new Ball();
 80 | 
 81 |     // Объект для перевода кодов клавиш в названия действий
 82 |     var keyActions = {
 83 |       32: "стоп",
 84 |       37: "влево",
 85 |       38: "вверх",
 86 |       39: "вправо",
 87 |       40: "вниз"
 88 |     };
 89 | 
 90 |     // Объект для перевода кодов клавиш в скорости
 91 |     var speeds = {
 92 |       49: 1,
 93 |       50: 2,
 94 |       51: 3,
 95 |       52: 4,
 96 |       53: 5,
 97 |       54: 6,
 98 |       55: 7,
 99 |       56: 8,
100 |       57: 9
101 |     };
102 | 
103 |     // Обработчик события keydown, будет вызван при каждом нажатии клавиши
104 |     $("body").keydown(function (event) {
105 |       var direction = keyActions[event.keyCode];
106 |       var speed = speeds[event.keyCode];
107 |       ball.setDirection(direction);
108 |       ball.setSpeed(speed);
109 |     });
110 | 
111 |     // Функция анимации, вызывается раз в 30 мс
112 |     setInterval(function () {
113 |       ctx.clearRect(0, 0, width, height);
114 | 
115 |       ball.draw();
116 |       ball.move();
117 | 
118 |       ctx.strokeRect(0, 0, width, height);
119 |     }, 30);
120 |     </script>
121 | </body>
122 | </html>
123 | 


--------------------------------------------------------------------------------
/Chapter 16/Programming Challenge #3.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <title>Виселица!</title>
  5 | </head>
  6 | 
  7 | <body>
  8 |     <canvas id="canvas" width="400" height="200"></canvas>
  9 | 
 10 |     <script>
 11 |     var canvas = document.getElementById("canvas");
 12 |     var ctx = canvas.getContext("2d");
 13 | 
 14 |     var pickWord = function () {
 15 |       var words = [
 16 |         "программа",
 17 |         "макака",
 18 |         "прекрасный",
 19 |         "оладушек"
 20 |       ];
 21 | 
 22 |       return words[Math.floor(Math.random() * words.length)];
 23 |     };
 24 | 
 25 |     var setupAnswerArray = function (word) {
 26 |       var answerArray = [];
 27 |       for (var i = 0; i < word.length; i++) {
 28 |         answerArray[i] = "_";
 29 |       }
 30 | 
 31 |       return answerArray;
 32 |     };
 33 | 
 34 |     var showPlayerProgress = function (answerArray) {
 35 |       alert(answerArray.join(" "));
 36 |     };
 37 | 
 38 |     var getGuess = function () {
 39 |       return prompt("Угадайте букву, или нажмите Отмена для выхода из игры.");
 40 |     };
 41 | 
 42 |     var updateGameState = function (guess, word, answerArray) {
 43 |       var appearances = 0;
 44 |       for (var j = 0; j < word.length; j++) {
 45 |         if (word[j] === guess) {
 46 |           answerArray[j] = guess;
 47 |           drawCorrectGuess(guess, j);
 48 |           appearances++;
 49 |         }
 50 |       }
 51 | 
 52 |       return appearances;
 53 |     };
 54 | 
 55 |     var showAnswerAndCongratulatePlayer = function (answerArray) {
 56 |       showPlayerProgress(answerArray);
 57 |       alert("Отлично! Было загадано слово " + answerArray.join(""));
 58 |     };
 59 | 
 60 |     var drawSegment = function (incorrectGuesses) {
 61 |       ctx.lineWidth = 4;
 62 | 
 63 |       if (incorrectGuesses === 0) {
 64 |         ctx.strokeRect(20, 20, 20, 20);
 65 |       } else if (incorrectGuesses === 1) {
 66 |         ctx.beginPath();
 67 |         ctx.moveTo(30, 40);
 68 |         ctx.lineTo(30, 80);
 69 |         ctx.stroke();
 70 |       } else if (incorrectGuesses === 2) {
 71 |         ctx.beginPath();
 72 |         ctx.moveTo(30, 80);
 73 |         ctx.lineTo(10, 110);
 74 |         ctx.stroke();
 75 |       } else if (incorrectGuesses === 3) {
 76 |         ctx.beginPath();
 77 |         ctx.moveTo(30, 80);
 78 |         ctx.lineTo(50, 110);
 79 |         ctx.stroke();
 80 |       } else if (incorrectGuesses === 4) {
 81 |         ctx.beginPath();
 82 |         ctx.moveTo(30, 60);
 83 |         ctx.lineTo(10, 50);
 84 |         ctx.stroke();
 85 |       } else if (incorrectGuesses === 5) {
 86 |         ctx.beginPath();
 87 |         ctx.moveTo(30, 60);
 88 |         ctx.lineTo(50, 50);
 89 |         ctx.stroke();
 90 |       }
 91 |     };
 92 | 
 93 |     // Рисуем подчеркивания для догадок
 94 |     var drawUnderscores = function (howMany) {
 95 |       ctx.lineWidth = 4;
 96 |       ctx.beginPath();
 97 | 
 98 |       for (var i = 0; i < howMany; i++) {
 99 |         ctx.moveTo((i * 30) + 10, 160);
100 |         ctx.lineTo((i * 30) + 30, 160);
101 |       }
102 | 
103 |       ctx.stroke();
104 |     };
105 | 
106 |     // Рисуем угаданную букву в соответствующей позиции
107 |     var drawCorrectGuess = function (guess, index) {
108 |       ctx.font = "20px Comic Sans MS";
109 |       ctx.fillText(guess.toUpperCase(), (index * 30) + 10, 150);
110 |     };
111 | 
112 |     // Рисуем перечеркнутую неправильную догадку в соответствующей позиции
113 |     var drawIncorrectGuess = function (guess, index) {
114 |       ctx.font = "20px Comic Sans MS";
115 |       ctx.fillText(guess.toUpperCase(), 380, (index * 20) + 40);
116 |       ctx.moveTo(380, (index * 20) + 30);
117 |       ctx.lineTo(400, (index * 20) + 30);
118 |       ctx.stroke();
119 |     };
120 | 
121 |     var word = pickWord();
122 |     var answerArray = setupAnswerArray(word);
123 |     var remainingLetters = word.length;
124 |     var incorrectGuesses = 0;
125 | 
126 |     drawUnderscores(word.length);
127 | 
128 |     while (remainingLetters > 0) { showPlayerProgress(answerArray); var guess = getGuess();
129 |       if (guess === null) {
130 |         break;
131 |       } else if (guess.length !== 1) {
132 |         alert("Пожалуйста, введите одиночную букву.");
133 |       } else {
134 |         var correctGuesses = updateGameState(guess, word, answerArray);
135 | 
136 |         remainingLetters -= correctGuesses;
137 | 
138 |         if (correctGuesses === 0) {
139 |           drawSegment(incorrectGuesses);
140 |           drawIncorrectGuess(guess, incorrectGuesses);
141 |           incorrectGuesses++;
142 |         }
143 |       }
144 |     }
145 | 
146 |     showAnswerAndCongratulatePlayer(answerArray);
147 |     </script>
148 | </body>
149 | </html>


--------------------------------------------------------------------------------
/Chapter 17/Programming Challenge #1.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <title>Змейка!</title>
  5 | </head>
  6 | <body>
  7 |     <canvas id="canvas" width="500" height="500"></canvas>
  8 | 
  9 |     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
 10 | 
 11 |     <script>
 12 |     // Настройка «холста»
 13 |     var canvas = document.getElementById("canvas");
 14 |     var ctx = canvas.getContext("2d");
 15 | 
 16 |     // Получаем ширину и высоту элемента canvas
 17 |     var width = canvas.width;
 18 |     var height = canvas.height;
 19 | 
 20 |     // Вычисляем ширину и высоту в ячейках
 21 |     var blockSize = 10;
 22 |     var widthInBlocks = width / blockSize;
 23 |     var heightInBlocks = height / blockSize;
 24 | 
 25 |     // Устанавливаем счет 0
 26 |     var score = 0;
 27 | 
 28 |     // Рисуем рамку
 29 |     var drawBorder = function () {
 30 |       ctx.fillStyle = "Gray";
 31 |       ctx.fillRect(0, 0, width, blockSize);
 32 |       ctx.fillRect(0, height - blockSize, width, blockSize);
 33 |       ctx.fillRect(0, 0, blockSize, height);
 34 |       ctx.fillRect(width - blockSize, 0, blockSize, height);
 35 |     };
 36 | 
 37 |     // Выводим счет игры в левом верхнем углу
 38 |     var drawScore = function () {
 39 |       ctx.font = "20px Courier";
 40 |       ctx.fillStyle = "Black";
 41 |       ctx.textAlign = "left";
 42 |       ctx.textBaseline = "top";
 43 |       ctx.fillText("Счет: " + score, blockSize, blockSize);
 44 |     };
 45 | 
 46 |     // Отменяем действие setInterval и печатаем сообщение «Конец игры»
 47 |     var gameOver = function () {
 48 |       clearInterval(intervalId);
 49 |       ctx.font = "60px Courier";
 50 |       ctx.fillStyle = "Black";
 51 |       ctx.textAlign = "center";
 52 |       ctx.textBaseline = "middle";
 53 |       ctx.fillText("Конец игры", width / 2, height / 2);
 54 |     };
 55 | 
 56 |     // Рисуем окружность (используя функцию из главы 14)
 57 |     var circle = function (x, y, radius, fillCircle) {
 58 |       ctx.beginPath();
 59 |       ctx.arc(x, y, radius, 0, Math.PI * 2, false);
 60 |       if (fillCircle) {
 61 |         ctx.fill();
 62 |       } else {
 63 |         ctx.stroke();
 64 |       }
 65 |     };
 66 | 
 67 |     // Задаем конструктор Block (ячейка)
 68 |     var Block = function (col, row) {
 69 |       this.col = col;
 70 |       this.row = row;
 71 |     };
 72 | 
 73 |     // Рисуем квадрат в позиции ячейки
 74 |     Block.prototype.drawSquare = function (color) {
 75 |       var x = this.col * blockSize;
 76 |       var y = this.row * blockSize;
 77 |       ctx.fillStyle = color;
 78 |       ctx.fillRect(x, y, blockSize, blockSize);
 79 |     };
 80 | 
 81 |     // Рисуем круг в позиции ячейки
 82 |     Block.prototype.drawCircle = function (color) {
 83 |       var centerX = this.col * blockSize + blockSize / 2;
 84 |       var centerY = this.row * blockSize + blockSize / 2;
 85 |       ctx.fillStyle = color;
 86 |       circle(centerX, centerY, blockSize / 2, true);
 87 |     };
 88 | 
 89 |     // Проверяем, находится ли эта ячейка в той же позиции,
 90 |     // что и ячейка otherBlock
 91 |     Block.prototype.equal = function (otherBlock) {
 92 |       return this.col === otherBlock.col && this.row === otherBlock.row;
 93 |     };
 94 | 
 95 |     // Задаем конструктор Snake (змейка)
 96 |     var Snake = function () {
 97 |       this.segments = [
 98 |         new Block(7, 5),
 99 |         new Block(6, 5),
100 |         new Block(5, 5)
101 |       ];
102 | 
103 |       this.direction = "right";
104 |       this.nextDirection = "right";
105 |     };
106 | 
107 |     // Рисуем квадратик для каждого сегмента тела змейки
108 |     Snake.prototype.draw = function () {
109 |       for (var i = 0; i < this.segments.length; i++) {
110 |         this.segments[i].drawSquare("Blue");
111 |       }
112 |     };
113 | 
114 |     // Создаем новую голову и добавляем ее к началу змейки,
115 |     // чтобы передвинуть змейку в текущем направлении
116 |     Snake.prototype.move = function () {
117 |       var head = this.segments[0];
118 |       var newHead;
119 | 
120 |       this.direction = this.nextDirection;
121 | 
122 |       if (this.direction === "right") {
123 |         newHead = new Block(head.col + 1, head.row);
124 |       } else if (this.direction === "down") {
125 |         newHead = new Block(head.col, head.row + 1);
126 |       } else if (this.direction === "left") {
127 |         newHead = new Block(head.col - 1, head.row);
128 |       } else if (this.direction === "up") {
129 |         newHead = new Block(head.col, head.row - 1);
130 |       }
131 | 
132 |       if (this.checkCollision(newHead)) {
133 |         gameOver();
134 |         return;
135 |       }
136 | 
137 |       this.segments.unshift(newHead);
138 | 
139 |       if (newHead.equal(apple.position)) {
140 |         score++;
141 |         apple.move();
142 |       } else {
143 |         this.segments.pop();
144 |       }
145 |     };
146 | 
147 |     // Проверяем, не столкнулась ли змейка со стеной
148 |     // или собственным телом
149 |     Snake.prototype.checkCollision = function (head) {
150 |       var leftCollision = (head.col === 0);
151 |       var topCollision = (head.row === 0);
152 |       var rightCollision = (head.col === widthInBlocks - 1);
153 |       var bottomCollision = (head.row === heightInBlocks - 1);
154 | 
155 |       var wallCollision = leftCollision || topCollision || rightCollision || bottomCollision;
156 | 
157 |       var selfCollision = false;
158 | 
159 |       for (var i = 0; i < this.segments.length; i++) {
160 |         if (head.equal(this.segments[i])) {
161 |           selfCollision = true;
162 |         }
163 |       }
164 | 
165 |       return wallCollision || selfCollision;
166 |     };
167 | 
168 |     // Задаем следующее направление движения змейки на основе
169 |     // нажатой клавиши
170 |     Snake.prototype.setDirection = function (newDirection) {
171 |       if (this.direction === "up" && newDirection === "down") {
172 |         return;
173 |       } else if (this.direction === "right" && newDirection === "left") {
174 |         return;
175 |       } else if (this.direction === "down" && newDirection === "up") {
176 |         return;
177 |       } else if (this.direction === "left" && newDirection === "right") {
178 |         return;
179 |       }
180 | 
181 |       this.nextDirection = newDirection;
182 |     };
183 | 
184 |     // Задаем конструктор Apple (яблоко)
185 |     var Apple = function () {
186 |       this.position = new Block(10, 10);
187 |     };
188 | 
189 |     // Рисуем кружок в позиции яблока
190 |     Apple.prototype.draw = function () {
191 |       this.position.drawCircle("LimeGreen");
192 |     };
193 | 
194 |     // Перемещаем яблоко в случайную позицию
195 |     Apple.prototype.move = function () {
196 |       var randomCol = Math.floor(Math.random() * (widthInBlocks - 2)) + 1;
197 |       var randomRow = Math.floor(Math.random() * (heightInBlocks - 2)) + 1;
198 |       this.position = new Block(randomCol, randomRow);
199 |     };
200 | 
201 |     // Создаем объект-змейку и объект-яблоко
202 |     var snake = new Snake();
203 |     var apple = new Apple();
204 | 
205 |     // Запускаем функцию анимации через setInterval
206 |     var intervalId = setInterval(function () {
207 |       ctx.clearRect(0, 0, width, height);
208 |       drawScore();
209 |       snake.move();
210 |       snake.draw();
211 |       apple.draw();
212 |       drawBorder();
213 |     }, 100);
214 | 
215 |     // Преобразуем коды клавиш в направления
216 |     var directions = {
217 |       37: "left",
218 |       38: "up",
219 |       39: "right",
220 |       40: "down"
221 |     };
222 | 
223 |     // Задаем обработчик события keydown (клавиши-стрелки)
224 |     $("body").keydown(function (event) {
225 |       var newDirection = directions[event.keyCode];
226 |       if (newDirection !== undefined) {
227 |         snake.setDirection(newDirection);
228 |       }
229 |     });
230 |     </script>
231 | </body>
232 | </html>
233 | 


--------------------------------------------------------------------------------
/Chapter 17/Programming Challenge #2.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <title>Змейка!</title>
  5 | </head>
  6 | <body>
  7 |     <canvas id="canvas" width="500" height="500"></canvas>
  8 | 
  9 |     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
 10 | 
 11 |     <script>
 12 |     // Настройка «холста»
 13 |     var canvas = document.getElementById("canvas");
 14 |     var ctx = canvas.getContext("2d");
 15 | 
 16 |     // Получаем ширину и высоту элемента canvas
 17 |     var width = canvas.width;
 18 |     var height = canvas.height;
 19 | 
 20 |     // Вычисляем ширину и высоту в ячейках
 21 |     var blockSize = 10;
 22 |     var widthInBlocks = width / blockSize;
 23 |     var heightInBlocks = height / blockSize;
 24 | 
 25 |     // Устанавливаем счет 0
 26 |     var score = 0;
 27 | 
 28 |     // Рисуем рамку
 29 |     var drawBorder = function () {
 30 |       ctx.fillStyle = "Gray";
 31 |       ctx.fillRect(0, 0, width, blockSize);
 32 |       ctx.fillRect(0, height - blockSize, width, blockSize);
 33 |       ctx.fillRect(0, 0, blockSize, height);
 34 |       ctx.fillRect(width - blockSize, 0, blockSize, height);
 35 |     };
 36 | 
 37 |     // Выводим счет игры в левом верхнем углу
 38 |     var drawScore = function () {
 39 |       ctx.font = "20px Courier";
 40 |       ctx.fillStyle = "Black";
 41 |       ctx.textAlign = "left";
 42 |       ctx.textBaseline = "top";
 43 |       ctx.fillText("Счет: " + score, blockSize, blockSize);
 44 |     };
 45 | 
 46 |     // Отменяем действие setInterval и печатаем сообщение «Конец игры»
 47 |     var gameOver = function () {
 48 |       clearInterval(intervalId);
 49 |       ctx.font = "60px Courier";
 50 |       ctx.fillStyle = "Black";
 51 |       ctx.textAlign = "center";
 52 |       ctx.textBaseline = "middle";
 53 |       ctx.fillText("Конец игры", width / 2, height / 2);
 54 |     };
 55 | 
 56 |     // Рисуем окружность (используя функцию из главы 14)
 57 |     var circle = function (x, y, radius, fillCircle) {
 58 |       ctx.beginPath();
 59 |       ctx.arc(x, y, radius, 0, Math.PI * 2, false);
 60 |       if (fillCircle) {
 61 |         ctx.fill();
 62 |       } else {
 63 |         ctx.stroke();
 64 |       }
 65 |     };
 66 | 
 67 |     // Задаем конструктор Block (ячейка)
 68 |     var Block = function (col, row) {
 69 |       this.col = col;
 70 |       this.row = row;
 71 |     };
 72 | 
 73 |     // Рисуем квадрат в позиции ячейки
 74 |     Block.prototype.drawSquare = function (color) {
 75 |       var x = this.col * blockSize;
 76 |       var y = this.row * blockSize;
 77 |       ctx.fillStyle = color;
 78 |       ctx.fillRect(x, y, blockSize, blockSize);
 79 |     };
 80 | 
 81 |     // Рисуем круг в позиции ячейки
 82 |     Block.prototype.drawCircle = function (color) {
 83 |       var centerX = this.col * blockSize + blockSize / 2;
 84 |       var centerY = this.row * blockSize + blockSize / 2;
 85 |       ctx.fillStyle = color;
 86 |       circle(centerX, centerY, blockSize / 2, true);
 87 |     };
 88 | 
 89 |     // Проверяем, находится ли эта ячейка в той же позиции,
 90 |     // что и ячейка otherBlock
 91 |     Block.prototype.equal = function (otherBlock) {
 92 |       return this.col === otherBlock.col && this.row === otherBlock.row;
 93 |     };
 94 | 
 95 |     // Задаем конструктор Snake (змейка)
 96 |     var Snake = function () {
 97 |       this.segments = [
 98 |         new Block(7, 5),
 99 |         new Block(6, 5),
100 |         new Block(5, 5)
101 |       ];
102 | 
103 |       this.direction = "right";
104 |       this.nextDirection = "right";
105 |     };
106 | 
107 |     // Рисуем квадратик для каждого сегмента тела змейки
108 |     Snake.prototype.draw = function () {
109 |       this.segments[0].drawSquare("LimeGreen");
110 |       var isEvenSegment = false;
111 | 
112 |       for (var i = 1; i < this.segments.length; i++) {
113 |         if (isEvenSegment) {
114 |           this.segments[i].drawSquare("Blue");
115 |         } else {
116 |           this.segments[i].drawSquare("Yellow");
117 |         }
118 | 
119 |         isEvenSegment = !isEvenSegment; // следующий сегмент будет нечетным
120 |       }
121 |     };
122 | 
123 |     // Создаем новую голову и добавляем ее к началу змейки,
124 |     // чтобы передвинуть змейку в текущем направлении
125 |     Snake.prototype.move = function () {
126 |       var head = this.segments[0];
127 |       var newHead;
128 | 
129 |       this.direction = this.nextDirection;
130 | 
131 |       if (this.direction === "right") {
132 |         newHead = new Block(head.col + 1, head.row);
133 |       } else if (this.direction === "down") {
134 |         newHead = new Block(head.col, head.row + 1);
135 |       } else if (this.direction === "left") {
136 |         newHead = new Block(head.col - 1, head.row);
137 |       } else if (this.direction === "up") {
138 |         newHead = new Block(head.col, head.row - 1);
139 |       }
140 | 
141 |       if (this.checkCollision(newHead)) {
142 |         gameOver();
143 |         return;
144 |       }
145 | 
146 |       this.segments.unshift(newHead);
147 | 
148 |       if (newHead.equal(apple.position)) {
149 |         score++;
150 |         apple.move();
151 |       } else {
152 |         this.segments.pop();
153 |       }
154 |     };
155 | 
156 |     // Проверяем, не столкнулась ли змейка со стеной
157 |     // или собственным телом
158 |     Snake.prototype.checkCollision = function (head) {
159 |       var leftCollision = (head.col === 0);
160 |       var topCollision = (head.row === 0);
161 |       var rightCollision = (head.col === widthInBlocks - 1);
162 |       var bottomCollision = (head.row === heightInBlocks - 1);
163 | 
164 |       var wallCollision = leftCollision || topCollision || rightCollision || bottomCollision;
165 | 
166 |       var selfCollision = false;
167 | 
168 |       for (var i = 0; i < this.segments.length; i++) {
169 |         if (head.equal(this.segments[i])) {
170 |           selfCollision = true;
171 |         }
172 |       }
173 | 
174 |       return wallCollision || selfCollision;
175 |     };
176 | 
177 |     // Задаем следующее направление движения змейки на основе
178 |     // нажатой клавиши
179 |     Snake.prototype.setDirection = function (newDirection) {
180 |       if (this.direction === "up" && newDirection === "down") {
181 |         return;
182 |       } else if (this.direction === "right" && newDirection === "left") {
183 |         return;
184 |       } else if (this.direction === "down" && newDirection === "up") {
185 |         return;
186 |       } else if (this.direction === "left" && newDirection === "right") {
187 |         return;
188 |       }
189 | 
190 |       this.nextDirection = newDirection;
191 |     };
192 | 
193 |     // Задаем конструктор Apple (яблоко)
194 |     var Apple = function () {
195 |       this.position = new Block(10, 10);
196 |     };
197 | 
198 |     // Рисуем кружок в позиции яблока
199 |     Apple.prototype.draw = function () {
200 |       this.position.drawCircle("LimeGreen");
201 |     };
202 | 
203 |     // Перемещаем яблоко в случайную позицию
204 |     Apple.prototype.move = function () {
205 |       var randomCol = Math.floor(Math.random() * (widthInBlocks - 2)) + 1;
206 |       var randomRow = Math.floor(Math.random() * (heightInBlocks - 2)) + 1;
207 |       this.position = new Block(randomCol, randomRow);
208 |     };
209 | 
210 |     // Создаем объект-змейку и объект-яблоко
211 |     var snake = new Snake();
212 |     var apple = new Apple();
213 | 
214 |     // Запускаем функцию анимации через setInterval
215 |     var intervalId = setInterval(function () {
216 |       ctx.clearRect(0, 0, width, height);
217 |       drawScore();
218 |       snake.move();
219 |       snake.draw();
220 |       apple.draw();
221 |       drawBorder();
222 |     }, 100);
223 | 
224 |     // Преобразуем коды клавиш в направления
225 |     var directions = {
226 |       37: "left",
227 |       38: "up",
228 |       39: "right",
229 |       40: "down"
230 |     };
231 | 
232 |     // Задаем обработчик события keydown (клавиши-стрелки)
233 |     $("body").keydown(function (event) {
234 |       var newDirection = directions[event.keyCode];
235 |       if (newDirection !== undefined) {
236 |         snake.setDirection(newDirection);
237 |       }
238 |     });
239 |     </script>
240 | </body>
241 | </html>


--------------------------------------------------------------------------------
/Chapter 17/Programming Challenge #3.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <title>Змейка!</title>
  5 | </head>
  6 | <body>
  7 |     <canvas id="canvas" width="500" height="500"></canvas>
  8 | 
  9 |     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
 10 | 
 11 |     <script>
 12 |     // Настройка «холста»
 13 |     var canvas = document.getElementById("canvas");
 14 |     var ctx = canvas.getContext("2d");
 15 | 
 16 |     // Получаем ширину и высоту элемента canvas
 17 |     var width = canvas.width;
 18 |     var height = canvas.height;
 19 | 
 20 |     // Вычисляем ширину и высоту в ячейках
 21 |     var blockSize = 10;
 22 |     var widthInBlocks = width / blockSize;
 23 |     var heightInBlocks = height / blockSize;
 24 | 
 25 |     // Устанавливаем счет 0
 26 |     var score = 0;
 27 | 
 28 |     // Рисуем рамку
 29 |     var drawBorder = function () {
 30 |       ctx.fillStyle = "Gray";
 31 |       ctx.fillRect(0, 0, width, blockSize);
 32 |       ctx.fillRect(0, height - blockSize, width, blockSize);
 33 |       ctx.fillRect(0, 0, blockSize, height);
 34 |       ctx.fillRect(width - blockSize, 0, blockSize, height);
 35 |     };
 36 | 
 37 |     // Выводим счет игры в левом верхнем углу
 38 |     var drawScore = function () {
 39 |       ctx.font = "20px Courier";
 40 |       ctx.fillStyle = "Black";
 41 |       ctx.textAlign = "left";
 42 |       ctx.textBaseline = "top";
 43 |       ctx.fillText("Счет: " + score, blockSize, blockSize);
 44 |     };
 45 | 
 46 |     // Отменяем действие setInterval и печатаем сообщение «Конец игры»
 47 |     var gameOver = function () {
 48 |       playing = false;
 49 |       ctx.font = "60px Courier";
 50 |       ctx.fillStyle = "Black";
 51 |       ctx.textAlign = "center";
 52 |       ctx.textBaseline = "middle";
 53 |       ctx.fillText("Конец игры", width / 2, height / 2);
 54 |     };
 55 | 
 56 |     // Рисуем окружность (используя функцию из главы 14)
 57 |     var circle = function (x, y, radius, fillCircle) {
 58 |       ctx.beginPath();
 59 |       ctx.arc(x, y, radius, 0, Math.PI * 2, false);
 60 |       if (fillCircle) {
 61 |         ctx.fill();
 62 |       } else {
 63 |         ctx.stroke();
 64 |       }
 65 |     };
 66 | 
 67 |     // Задаем конструктор Block (ячейка)
 68 |     var Block = function (col, row) {
 69 |       this.col = col;
 70 |       this.row = row;
 71 |     };
 72 | 
 73 |     // Рисуем квадрат в позиции ячейки
 74 |     Block.prototype.drawSquare = function (color) {
 75 |       var x = this.col * blockSize;
 76 |       var y = this.row * blockSize;
 77 |       ctx.fillStyle = color;
 78 |       ctx.fillRect(x, y, blockSize, blockSize);
 79 |     };
 80 | 
 81 |     // Рисуем круг в позиции ячейки
 82 |     Block.prototype.drawCircle = function (color) {
 83 |       var centerX = this.col * blockSize + blockSize / 2;
 84 |       var centerY = this.row * blockSize + blockSize / 2;
 85 |       ctx.fillStyle = color;
 86 |       circle(centerX, centerY, blockSize / 2, true);
 87 |     };
 88 | 
 89 |     // Проверяем, находится ли эта ячейка в той же позиции,
 90 |     // что и ячейка otherBlock
 91 |     Block.prototype.equal = function (otherBlock) {
 92 |       return this.col === otherBlock.col && this.row === otherBlock.row;
 93 |     };
 94 | 
 95 |     // Задаем конструктор Snake (змейка)
 96 |     var Snake = function () {
 97 |       this.segments = [
 98 |         new Block(7, 5),
 99 |         new Block(6, 5),
100 |         new Block(5, 5)
101 |       ];
102 | 
103 |       this.direction = "right";
104 |       this.nextDirection = "right";
105 |     };
106 | 
107 |     // Рисуем квадратик для каждого сегмента тела змейки
108 |     Snake.prototype.draw = function () {
109 |       this.segments[0].drawSquare("LimeGreen");
110 |       var isEvenSegment = false;
111 | 
112 |       for (var i = 1; i < this.segments.length; i++) {
113 |         if (isEvenSegment) {
114 |           this.segments[i].drawSquare("Blue");
115 |         } else {
116 |           this.segments[i].drawSquare("Yellow");
117 |         }
118 | 
119 |         isEvenSegment = !isEvenSegment; // следующий сегмент будет нечетным
120 |       }
121 |     };
122 | 
123 |     // Создаем новую голову и добавляем ее к началу змейки,
124 |     // чтобы передвинуть змейку в текущем направлении
125 |     Snake.prototype.move = function () {
126 |       var head = this.segments[0];
127 |       var newHead;
128 | 
129 |       this.direction = this.nextDirection;
130 | 
131 |       if (this.direction === "right") {
132 |         newHead = new Block(head.col + 1, head.row);
133 |       } else if (this.direction === "down") {
134 |         newHead = new Block(head.col, head.row + 1);
135 |       } else if (this.direction === "left") {
136 |         newHead = new Block(head.col - 1, head.row);
137 |       } else if (this.direction === "up") {
138 |         newHead = new Block(head.col, head.row - 1);
139 |       }
140 | 
141 |       if (this.checkCollision(newHead)) {
142 |         gameOver();
143 |         return;
144 |       }
145 | 
146 |       this.segments.unshift(newHead);
147 | 
148 |       if (newHead.equal(apple.position)) {
149 |         score++;
150 |         animationTime -= 5;
151 |         apple.move();
152 |       } else {
153 |         this.segments.pop();
154 |       }
155 |     };
156 | 
157 |     // Проверяем, не столкнулась ли змейка со стеной
158 |     // или собственным телом
159 |     Snake.prototype.checkCollision = function (head) {
160 |       var leftCollision = (head.col === 0);
161 |       var topCollision = (head.row === 0);
162 |       var rightCollision = (head.col === widthInBlocks - 1);
163 |       var bottomCollision = (head.row === heightInBlocks - 1);
164 | 
165 |       var wallCollision = leftCollision || topCollision || rightCollision || bottomCollision;
166 | 
167 |       var selfCollision = false;
168 | 
169 |       for (var i = 0; i < this.segments.length; i++) {
170 |         if (head.equal(this.segments[i])) {
171 |           selfCollision = true;
172 |         }
173 |       }
174 | 
175 |       return wallCollision || selfCollision;
176 |     };
177 | 
178 |     // Задаем следующее направление движения змейки на основе
179 |     // нажатой клавиши
180 |     Snake.prototype.setDirection = function (newDirection) {
181 |       if (this.direction === "up" && newDirection === "down") {
182 |         return;
183 |       } else if (this.direction === "right" && newDirection === "left") {
184 |         return;
185 |       } else if (this.direction === "down" && newDirection === "up") {
186 |         return;
187 |       } else if (this.direction === "left" && newDirection === "right") {
188 |         return;
189 |       }
190 | 
191 |       this.nextDirection = newDirection;
192 |     };
193 | 
194 |     // Задаем конструктор Apple (яблоко)
195 |     var Apple = function () {
196 |       this.position = new Block(10, 10);
197 |     };
198 | 
199 |     // Рисуем кружок в позиции яблока
200 |     Apple.prototype.draw = function () {
201 |       this.position.drawCircle("LimeGreen");
202 |     };
203 | 
204 |     // Перемещаем яблоко в случайную позицию
205 |     Apple.prototype.move = function () {
206 |       var randomCol = Math.floor(Math.random() * (widthInBlocks - 2)) + 1;
207 |       var randomRow = Math.floor(Math.random() * (heightInBlocks - 2)) + 1;
208 |       this.position = new Block(randomCol, randomRow);
209 |     };
210 | 
211 |     // Создаем объект-змейку и объект-яблоко
212 |     var snake = new Snake();
213 |     var apple = new Apple();
214 | 
215 |     // Запускаем функцию анимации через setInterval
216 |     var playing = true;
217 |     var animationTime = 100;
218 | 
219 |     // Создаем функцию игрового цикла, вызывающую саму себя используя setTimeout
220 |     var gameLoop = function () {
221 |       ctx.clearRect(0, 0, width, height);
222 |       drawScore();
223 |       snake.move();
224 |       snake.draw();
225 |       apple.draw();
226 |       drawBorder();
227 | 
228 |       // Устанавливается в false функцией gameOver
229 |       if (playing) {
230 |         setTimeout(gameLoop, animationTime);
231 |       }
232 |     };
233 | 
234 |     // Начинаем игровой цикл
235 |     gameLoop();
236 | 
237 |     // Преобразуем коды клавиш в направления
238 |     var directions = {
239 |       37: "left",
240 |       38: "up",
241 |       39: "right",
242 |       40: "down"
243 |     };
244 | 
245 |     // Задаем обработчик события keydown (клавиши-стрелки)
246 |     $("body").keydown(function (event) {
247 |       var newDirection = directions[event.keyCode];
248 |       if (newDirection !== undefined) {
249 |         snake.setDirection(newDirection);
250 |       }
251 |     });
252 |     </script>
253 | </body>
254 | </html>


--------------------------------------------------------------------------------
/Chapter 17/Programming Challenge #4.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <title>Змейка!</title>
  5 | </head>
  6 | <body>
  7 |     <canvas id="canvas" width="500" height="500"></canvas>
  8 | 
  9 |     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
 10 | 
 11 |     <script>
 12 |     // Настройка «холста»
 13 |     var canvas = document.getElementById("canvas");
 14 |     var ctx = canvas.getContext("2d");
 15 | 
 16 |     // Получаем ширину и высоту элемента canvas
 17 |     var width = canvas.width;
 18 |     var height = canvas.height;
 19 | 
 20 |     // Вычисляем ширину и высоту в ячейках
 21 |     var blockSize = 10;
 22 |     var widthInBlocks = width / blockSize;
 23 |     var heightInBlocks = height / blockSize;
 24 | 
 25 |     // Устанавливаем счет 0
 26 |     var score = 0;
 27 | 
 28 |     // Рисуем рамку
 29 |     var drawBorder = function () {
 30 |       ctx.fillStyle = "Gray";
 31 |       ctx.fillRect(0, 0, width, blockSize);
 32 |       ctx.fillRect(0, height - blockSize, width, blockSize);
 33 |       ctx.fillRect(0, 0, blockSize, height);
 34 |       ctx.fillRect(width - blockSize, 0, blockSize, height);
 35 |     };
 36 | 
 37 |     // Выводим счет игры в левом верхнем углу
 38 |     var drawScore = function () {
 39 |       ctx.font = "20px Courier";
 40 |       ctx.fillStyle = "Black";
 41 |       ctx.textAlign = "left";
 42 |       ctx.textBaseline = "top";
 43 |       ctx.fillText("Счет: " + score, blockSize, blockSize);
 44 |     };
 45 | 
 46 |     // Отменяем действие setInterval и печатаем сообщение «Конец игры»
 47 |     var gameOver = function () {
 48 |       playing = false;
 49 |       ctx.font = "60px Courier";
 50 |       ctx.fillStyle = "Black";
 51 |       ctx.textAlign = "center";
 52 |       ctx.textBaseline = "middle";
 53 |       ctx.fillText("Конец игры", width / 2, height / 2);
 54 |     };
 55 | 
 56 |     // Рисуем окружность (используя функцию из главы 14)
 57 |     var circle = function (x, y, radius, fillCircle) {
 58 |       ctx.beginPath();
 59 |       ctx.arc(x, y, radius, 0, Math.PI * 2, false);
 60 |       if (fillCircle) {
 61 |         ctx.fill();
 62 |       } else {
 63 |         ctx.stroke();
 64 |       }
 65 |     };
 66 | 
 67 |     // Задаем конструктор Block (ячейка)
 68 |     var Block = function (col, row) {
 69 |       this.col = col;
 70 |       this.row = row;
 71 |     };
 72 | 
 73 |     // Рисуем квадрат в позиции ячейки
 74 |     Block.prototype.drawSquare = function (color) {
 75 |       var x = this.col * blockSize;
 76 |       var y = this.row * blockSize;
 77 |       ctx.fillStyle = color;
 78 |       ctx.fillRect(x, y, blockSize, blockSize);
 79 |     };
 80 | 
 81 |     // Рисуем круг в позиции ячейки
 82 |     Block.prototype.drawCircle = function (color) {
 83 |       var centerX = this.col * blockSize + blockSize / 2;
 84 |       var centerY = this.row * blockSize + blockSize / 2;
 85 |       ctx.fillStyle = color;
 86 |       circle(centerX, centerY, blockSize / 2, true);
 87 |     };
 88 | 
 89 |     // Проверяем, находится ли эта ячейка в той же позиции,
 90 |     // что и ячейка otherBlock
 91 |     Block.prototype.equal = function (otherBlock) {
 92 |       return this.col === otherBlock.col && this.row === otherBlock.row;
 93 |     };
 94 | 
 95 |     // Задаем конструктор Snake (змейка)
 96 |     var Snake = function () {
 97 |       this.segments = [
 98 |         new Block(7, 5),
 99 |         new Block(6, 5),
100 |         new Block(5, 5)
101 |       ];
102 | 
103 |       this.direction = "right";
104 |       this.nextDirection = "right";
105 |     };
106 | 
107 |     // Рисуем квадратик для каждого сегмента тела змейки
108 |     Snake.prototype.draw = function () {
109 |       this.segments[0].drawSquare("LimeGreen");
110 |       var isEvenSegment = false;
111 | 
112 |       for (var i = 1; i < this.segments.length; i++) {
113 |         if (isEvenSegment) {
114 |           this.segments[i].drawSquare("Blue");
115 |         } else {
116 |           this.segments[i].drawSquare("Yellow");
117 |         }
118 | 
119 |         isEvenSegment = !isEvenSegment; // следующий сегмент будет нечетным
120 |       }
121 |     };
122 | 
123 |     // Создаем новую голову и добавляем ее к началу змейки,
124 |     // чтобы передвинуть змейку в текущем направлении
125 |     Snake.prototype.move = function () {
126 |       var head = this.segments[0];
127 |       var newHead;
128 | 
129 |       this.direction = this.nextDirection;
130 | 
131 |       if (this.direction === "right") {
132 |         newHead = new Block(head.col + 1, head.row);
133 |       } else if (this.direction === "down") {
134 |         newHead = new Block(head.col, head.row + 1);
135 |       } else if (this.direction === "left") {
136 |         newHead = new Block(head.col - 1, head.row);
137 |       } else if (this.direction === "up") {
138 |         newHead = new Block(head.col, head.row - 1);
139 |       }
140 | 
141 |       if (this.checkCollision(newHead)) {
142 |         gameOver();
143 |         return;
144 |       }
145 | 
146 |       this.segments.unshift(newHead);
147 | 
148 |       if (newHead.equal(apple.position)) {
149 |         score++;
150 |         animationTime -= 5;
151 |         apple.move(this.segments);
152 |       } else {
153 |         this.segments.pop();
154 |       }
155 |     };
156 | 
157 |     // Проверяем, не столкнулась ли змейка со стеной
158 |     // или собственным телом
159 |     Snake.prototype.checkCollision = function (head) {
160 |       var leftCollision = (head.col === 0);
161 |       var topCollision = (head.row === 0);
162 |       var rightCollision = (head.col === widthInBlocks - 1);
163 |       var bottomCollision = (head.row === heightInBlocks - 1);
164 | 
165 |       var wallCollision = leftCollision || topCollision || rightCollision || bottomCollision;
166 | 
167 |       var selfCollision = false;
168 | 
169 |       for (var i = 0; i < this.segments.length; i++) {
170 |         if (head.equal(this.segments[i])) {
171 |           selfCollision = true;
172 |         }
173 |       }
174 | 
175 |       return wallCollision || selfCollision;
176 |     };
177 | 
178 |     // Задаем следующее направление движения змейки на основе
179 |     // нажатой клавиши
180 |     Snake.prototype.setDirection = function (newDirection) {
181 |       if (this.direction === "up" && newDirection === "down") {
182 |         return;
183 |       } else if (this.direction === "right" && newDirection === "left") {
184 |         return;
185 |       } else if (this.direction === "down" && newDirection === "up") {
186 |         return;
187 |       } else if (this.direction === "left" && newDirection === "right") {
188 |         return;
189 |       }
190 | 
191 |       this.nextDirection = newDirection;
192 |     };
193 | 
194 |     // Задаем конструктор Apple (яблоко)
195 |     var Apple = function () {
196 |       this.position = new Block(10, 10);
197 |     };
198 | 
199 |     // Рисуем кружок в позиции яблока
200 |     Apple.prototype.draw = function () {
201 |       this.position.drawCircle("LimeGreen");
202 |     };
203 | 
204 |     // Перемещаем яблоко в случайную позицию
205 |     Apple.prototype.move = function (occupiedBlocks) {
206 |       var randomCol = Math.floor(Math.random() * (widthInBlocks - 2)) + 1;
207 |       var randomRow = Math.floor(Math.random() * (heightInBlocks - 2)) + 1;
208 |       this.position = new Block(randomCol, randomRow);
209 |       
210 |       // Проверяем не передвинули лы мы яблоко в ячейку занятую сейчас телом змейки
211 |       var index = occupiedBlocks.length - 1;
212 |       while ( index >= 0 ) {
213 |         if (this.position.equal(occupiedBlocks[index])) {
214 |           this.move(occupiedBlocks); // Вызываем метод move повторно
215 |           return;
216 |         }
217 |         index--;
218 |       }
219 |     };
220 | 
221 |     // Создаем объект-змейку и объект-яблоко
222 |     var snake = new Snake();
223 |     var apple = new Apple();
224 | 
225 |     // Запускаем функцию анимации через setInterval
226 |     var playing = true;
227 |     var animationTime = 100;
228 | 
229 |     // Создаем функцию игрового цикла, вызывающую саму себя используя setTimeout
230 |     var gameLoop = function () {
231 |       ctx.clearRect(0, 0, width, height);
232 |       drawScore();
233 |       snake.move();
234 |       snake.draw();
235 |       apple.draw();
236 |       drawBorder();
237 | 
238 |       // Устанавливается в false функцией gameOver
239 |       if (playing) {
240 |         setTimeout(gameLoop, animationTime);
241 |       }
242 |     };
243 | 
244 |     // Начинаем игровой цикл
245 |     gameLoop();
246 | 
247 |     // Преобразуем коды клавиш в направления
248 |     var directions = {
249 |       37: "left",
250 |       38: "up",
251 |       39: "right",
252 |       40: "down"
253 |     };
254 | 
255 |     // Задаем обработчик события keydown (клавиши-стрелки)
256 |     $("body").keydown(function (event) {
257 |       var newDirection = directions[event.keyCode];
258 |       if (newDirection !== undefined) {
259 |         snake.setDirection(newDirection);
260 |       }
261 |     });
262 |     </script>
263 | </body>
264 | </html>


--------------------------------------------------------------------------------