Сделайте интерфейс, позволяющий писать и исполнять кусочки кода JavaScript.
Сделайте кнопку рядом с <textarea>, по нажатию которой конструктор Function из главы 10 будет обёртывать введённый текст в функцию и вызывать его. Преобразуйте значение, возвращаемое функцией, или любую её ошибку, в строку, и выведите её после текстового поля.
<textarea id="code">return "hi";</textarea>
<button id="button">Поехали</button>
<pre id="output"></pre>
<script>
// Ваш код.
</script>
Автодополнение
Дополните текстовое поле так, что при вводе текста под ним появлялся бы список вариантов. У вас есть массив возможных вариантов, и показывать нужно те из них, которые начинаются с вводимого текста. Когда пользователь щёлкает по предложенному варианту, он меняет содержимое поля на него.
<input type="text" id="field">
<div id="suggestions" style="cursor: pointer"></div>
<script>
// Строит массив из имён глобальных перменных,
// типа 'alert', 'document', и 'scrollTo'
var terms = [];
for (var name in window)
terms.push(name);
// Ваш код.
</script>
Игра «Жизнь» Конвея
Это простая симуляция жизни на прямоугольной решётке, каждый элемент которой живой или нет. Каждое поколение (шаг игры) применяются следующие правила:
— каждая живая клетка, количество соседей которой меньше двух или больше трёх, погибает — каждая живая клетка, у которой от двух до трёх соседей, живёт до следующего хода — каждая мёртвая клетка, у которой есть ровно три соседа, оживает
Соседи клетки – это все соседние с ней клетки по горизонтали, вертикали и диагонали, всего 8 штук.
Обратите внимание, что правила применяются ко всей решётке одновременно, а не к каждой из клеток по очереди. То есть, подсчёт количества соседей происходит в один момент перед следующим шагом, и изменения, происходящие на соседних клетках, не влияют на новое состояние клетки.
Реализуйте игру, используя любые подходящие структуры. Используйте Math.random для создания случайных начальных популяций. Выводите поле как решётку из галочек с кнопкой «перейти на следующий шаг». Когда пользователь включает или выключает галочки, эти изменения нужно учитывать при подсчёте следующего поколения.
<div id="grid"></div>
<button id="next">Следующее поколение</button>
<script>
// Ваш код.
</script>
19. Проект: Paint
Я смотрю на многообразие цветов. Я смотрю на пустой холст. Затем я пытаюсь нанести цвета как слова, из которых возникают поэмы, как ноты, из которых возникает музыка.
Материал предыдущих глав даёт вам всё необходимое для создания простого веб-приложения. Именно этим мы и займёмся.
Наше приложение будет программой для рисования в браузере, схожей с Microsoft Paint. С его помощью можно будет открывать файлы с изображениями, малевать на них мышкой и сохранять обратно. Вот, как это будет выглядеть:
Простая программа рисования
Рисовать на компьютере клёво. Не надо волноваться насчёт материалов, умения, таланта. Просто берёшь, и начинаешь калякать.
Реализация
Интерфейс программы выводит вверху большой элемент <canvas>, под которым есть несколько полей ввода. Пользователь рисует на картинке, выбирая инструмент из поля <select>, а затем нажимая на холсте мышь. Есть инструменты для рисования линий, стирания кусочков картинки, добавления текста и т. п.
Щелчок на холсте передаёт событие "mousedown" текущему инструменту, который обрабатывает его, как считает нужным. Рисование линий, например, будет слушать события "mousemove", пока кнопка мыши не будет отпущена, и нарисует линию по пути мыши текущим цветом и размером кисти.
Цвет и размер кисти выбираются в дополнительных полях ввода. Они выполняют обновление свойств контекста рисования на холсте fillStyle, strokeStyle, и lineWidth каждый раз при их изменении.
Загрузить картинку в программу можно двумя способами. Первый использует поле file, где пользователь выбирает файл со своего диска. Вторая запрашивает URL и скачивает картинку из интернета.
Картинки хранятся нестандартным способом. Ссылка save с правой стороны ведёт на текущую картинку. По ней можно проходить, делиться ей или сохранять файл через неё. Я скоро объясню, как это работает.