«Magic 8 Ball» – это игрушечный шарик в бильярде, созданный в бильярде, созданный в 1950 году. Вы задаете вопрос «да» или «нет», встряхните мяч и смотрите на ответ, который он дает, который вы видите через окно на одной стороне мяча.
В моей книге Упражнения для программистов , одно из упражнений – использовать массивы и случайные числа для создания собственной игры Magic 8 Ball:
Создайте магическую игру с мячом, которая запрашивает вопрос, а затем отображает либо «да», «нет», «может быть», или «спроси снова позже».
Одной из дополнительных проблем в упражнении является реализация этого в качестве приложения GUI. В этом уроке вы сделаете именно это, используя HTML, JavaScript и Canvas API Анкет Когда вы закончите, у вас будет волшебная игра с мячом, которая показывает вам ответы, когда вы нажимаете по мячу. Конечный результат будет выглядеть так:
Готовый мяч
Canvas API позволяет создавать графику 2D растровой (пиксель) с использованием JavaScript. Вы определяете холст Элемент на странице, возьмите ссылку на элемент в JavaScript, а затем используйте различные методы API, чтобы нарисовать линии, прямоугольники и дуги для создания форм.
Вы нарисуете мяч, используя Canvas API, а затем используете обработчик событий, чтобы отобразить случайный текст, когда вы нажимаете по мячу. Вы не можете изменить холст напрямую, как только нарисуете что -то, поэтому каждый раз, когда вы нажимаете, вы перерисовываете весь мяч новым текстом.
Давайте начнем.
Рисуя мяч
Мяч будет состоять из трех элементов: черного круга для самого мяча, синего треугольника для представления области, где появляется текст, и сам текст. Вы сначала вы нарисуете мяч и треугольник, а также
Сначала создайте новый файл с именем 8ball.html и добавьте следующий код для определения основного скелета HTML5 с элемент в ярлык:
8 Ball
холст Элемент имеет высота и ширина Определено, и атрибут ID, чтобы вы могли взять его с помощью JavaScript, где вы сделаете весь свой рисунок.
Далее добавьте <Скрипт> тег ниже Элемент, который получает ссылку на холст с использованием getElementbyid и а ctx переменная, которая содержит ссылку на 2D контекста холста. Это то, что вы используете, чтобы нарисовать мяч.
Далее, создайте Drawlball Функция, чтобы удержать логику, чтобы нарисовать мяч на холсте. Функция принимает строку, которая содержит текст, который будет отображаться на мяче. Добавьте следующий код, чтобы определить функцию, а затем вызовать ее так, чтобы мяч в конечном итоге появился на странице:
function drawBall(words){
// code goes here.
}
// Draw the empty ball
drawBall();
Затем напишите код, чтобы создать сам мяч. Начните с добавления следующего кода, который рисует черный заполненный круг на холсте:
function drawBall(words = ""){
// circle
ctx.fillStyle = 'black';
ctx.beginPath();
ctx.arc(150, 150, 150, 0, 2 * Math.PI);
ctx.fill();
}
Это устанавливает цвет наполнения на черный а затем создает круг, используя дуг функция дуг Функция принимает координаты x и y для центра круга, за которым следует радиус, начальный угол и угол окончания в радианах. Таким образом, в этом случае вы создаете круг на 150 над, 150 вниз, с радиусом 150, начальным углом 0 (верх) и окончательным углом Pi * 2. JavaScript имеет Математика Пи Доступно из коробки.
заполнить Функция затем заполняет круг с набором цвета с FillStyle Анкет слова Аргумент имеет значение по умолчанию пустой строки, поэтому вы можете позвонить рисовать Без аргументов, поэтому мяч не отображает никаких слов. Вот как вы инициализируете игру.
Сохраните файл и перезагрузите файл в вашем браузере. Вы увидите черный мяч:
Шар
Теперь определите синий треугольник, который будет содержать слова. Установить цвет на синий , переместите отправную точку на 150 пикселей выше и на 50 пикселей вниз. Затем нарисуйте линии от отправной точки до 50 по сравнению с 200 и вниз, а затем до 250 по сравнению с 200. Нарисуйте третью сторону, сделав линию заканчиваться в исходной точке 150 поперек и 50 вниз. Затем заполните пространство:
function drawBall(words = ""){
...
// triangle
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.moveTo(150, 50);
ctx.lineTo(50, 200);
ctx.lineTo(250, 200);
ctx.lineTo(150, 50);
ctx.fill();
}
Треугольник появляется внутри мяча, как только вы сохраните файл и перезагрузите страницу:
Мяч и треугольник
Теперь давайте напишем игровой логику.
Выбор случайной фразы
Логика игры Magic 8 с мячом сводится к тому, чтобы иметь список возможных фраз и выбрать один случайным образом, что вы можете выполнить с помощью очень небольшого количества кода JavaScript.
Ниже Const Canvas Линия в вашем Скрипт Блок, добавьте постоянную под названием Выбор Это содержит возможный выбор, который появится в вашем 8 мячах. Вы можете добавить больше вариантов, если хотите.
Затем создайте Getrandomanswer Функция, которая выбирает случайное значение из массива, используя Математика Случайный :
// select an answer
function getRandomAnswer(){
let randomIndex = Math.floor(Math.random() * choices.length);
return choices[randomIndex];
}
Это генерирует случайное число и использует его в качестве индекса массива. Математика Random () Функция возвращает случайное число от 0 до 1. Индекс, который вы используете для выбора записи в массиве, должен быть между 0 и последний показатель массива, так что вы можете взять длина из Выбор массив, умножьте его на Math.random () , а затем округл ответ с Math.floor () Анкет
Теперь, когда вы звоните getrandomanswer () , вы получите случайное значение от Выбор множество. Давайте подключим это к интерфейсу.
Отображая результат
Когда вы нажимаете на мяч, вы хотите, чтобы текст отображался внутри треугольника. Для этого вам нужно добавить код в Drawlball Функция отображает текст и создайте слушатель событий, который получает случайный ответ и рисует мяч.
Во -первых, добавьте код, чтобы отобразить текст в треугольнике. Внутри Drawlball Функция, добавьте следующий код, чтобы отобразить текст, если слова Аргумент содержит любой текст:
function drawBall(words = ""){
...
// the text
if (words !== ""){
ctx.fillStyle = '#fff';
ctx.font = '20px sans-serif';
ctx.textAlign = "center";
ctx.fillText(words, 150, 150);
}
}
Это создает центрированную текстовую область, размещенную на 150 поперечнике и 150 вниз, что находится в середине вашего мяча.
Теперь свяжите все это вместе, добавив слушателя событий.
После вызова Drawlall () , добавьте этот код, который слушает Нажмите События и перерисовывает мяч, проходя значение из getrandomanswer () Функция:
// The click event that redraws the ball
canvas.addEventListener("click", (event) => {
drawBall(getRandomAnswer());
});
Ваш полный проект должен выглядеть как следующий код:
8 Ball
Когда вы сохраняете и перезагружаете страницу и нажмите на мяч, вы увидите одну из фраз:
Готовый мяч
Вывод
В этом уроке вы создали базовую реализацию игры Magic 8 с использованием API Canvas. Отсюда вы можете попробовать следующие дополнительные упражнения:
- Вместо сплошного черного цвета используйте радиальный градиент для мяча. Проверьте Canvasgradient Документация для большего.
- Вы можете оживить холст. Пересмотреть код, который отображает текст так, чтобы он исчезал и исчезал. Помните, что чтобы оживить холст, вам нужно перерисовать холст, поэтому вам нужно сделать какой -то цикл анимации.
- Попробуйте внедрить это же приложение, что и инструмент командной строки на вашем любимом языке, или в качестве мобильного приложения.
Нравится этот пост? Поддержите мое письмо Покупка одной из моих книг о разработке программного обеспечения Анкет
Оригинал: “https://dev.to/bphogan/creating-a-magic-8-ball-game-with-html-canvas-and-javascript-5dba”