Сегодня мы собираемся использовать Canvas, чтобы создать небольшую игру с угаданием букв, и давайте сначала нарисуем визуализации.
Игровой дизайн очень прост. Система случайным образом выберет одну из 26 букв AZ и сохранит ее. Когда вы введете букву на клавиатуре, система подскажет вам, что правильные символы меньше или больше, чем в настоящее время буква, и игра не закончится, пока вы не войдете в правильные буквы.
Следующее представляет некоторые переменные, которые необходимо использовать в коде JS и их значениях. Система инициализирует эти переменные в начале.
Угадают: количество раз, когда пользователь предполагает букву;
Сообщение: инструкции по оказанию помощи игрокам играть в игру;
Письма: Сохраните массив из 26 английских букв;
Сегодня: текущее время;
Lettertoguess: буквы, выбранные системой, то есть буквы, которые вам нужно угадать;
Sightorwer: подсказывает пользователю, является ли введенная в настоящее время буква больше или меньше ответа;
Записываемые буквы: письма, которые угадал пользователь;
Gameover: закончилась ли игра.
var goages = 0;
var message = "Угадайте букву от (нижнего) к z (выше)";
var witds = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "" "" '",", ",", ",", ",", "," j;
var сегодня = новая дата ();
var itledtoguess = "";
var sightorlower = "";
var yatrded;
var GameOver = false;
Ниже мы представляем событие, которое отвечает на всплывающее окно клавиатуры, которое используется для определения того, являются ли буквы, введенные пользователем правильным ответом:
$ (window) .bind ('keyup', EventKeyPressed);
функция EventKeyPressed (e) {
// сначала определяют, закончилась ли игра
if (! GameOver) {
// Получить входные буквы
var letterpressed = string.fromCharcode (e.keycode);
// Сделай строчную обработку
itledpressed = itledpress.tolowercase ();
// Добавить 1 номер игры
Угадания ++;
// Сохранить входные буквы в угадаемый массив букв
Letters.
// судить, являются ли входные письма и ответ последовательными, если игра заканчивается, если такая же правда, игра будет завершена
if (itledpressed == itledtoguess) {
GameOver = true;
} еще {
// Получить позицию ответа в алфавитном массиве
var itledindex = witds.indexof (itmertoguess);
// Получить позицию входной буквы в алфавитном массиве
var aggeangex = witds.indexof (itmerpressed);
Debugger.log (aggenidex);
// Судья размер
if (угадание <0) {
SightOrlower = "Это не буква";
} else if (agnageIndex> itketindex) {
SightOrlower = "буква ниже, чем вы ввели";
} еще {
SightOrlower = "Письмо выше, чем вы ввели";
}
}
// перекрасить холст
DrawCkreen ();
}
}
Здесь следует отметить, что когда нам нужно изменить изображение в холсте, весь объект Canvas, как правило, будет перекрашен. Поэтому каждый раз, когда мы предполагаем букву, мы будем выполнять рисунок, чтобы нарисовать все объекты во всем холсте.
Давайте посмотрим, что делает Draw Escreen.
функция DrawScreen () {
//фон
context.fillstyle = '#ffffa';
context.fillrect (0, 0, 500, 300);
//коробка
context.strokestyle = '#000000';
Context.strokerect (5, 5, 490, 290);
context.textbaseline = 'top';
//дата
context.fillstyle = '#00000';
context.font = '10px_sans';
context.filltext (сегодня, 150, 20);
//сообщение
context.fillstyle = '#ff0000';
context.font = '14px_sans';
context.filltext (сообщение, 125, 40);
// догадываются
context.fillstyle = '#109910';
context.font = '16px_sans';
context.filltext ('Угадания:' + Угадания, 215, 60);
// выше или ниже
context.fillstyle = '#00000';
context.font = '16px_sans';
context.filltext ('более высокий или ниже:' + sightorwer, 150, 125);
// письма догадались
context.fillstyle = '#ff0000';
context.font = '16px_sans';
context.filltext («Письма догадается: ' + witdsguess.tostring (), 10, 260);
if (GameOver) {
context.fillstyle = "#ff0000";
context.font = "40px _sans";
context.filltext («Вы поняли!», 150, 180);
}
}
Код очень прост, он должен нарисовать фон и текстовую информацию. Ниже мы представляем функцию импорта изображений. Когда мы нажимаем кнопку «Экспортное холст», будет открыта новая страница для отображения текущего изображения. Обратите внимание на метод Todataurl (), который вернет 64-битные данные изображения PNG.
$ ('#createImagedata'). Click (function () {
window.open (thecanvas.todataurl (), 'canvasimage', 'left = 0, top = 0, width =' + thecanvas.width + ', height =' + thecanvas.height + ', wabar = 0, resizab le = 0');
});
Каждый должен запустить демонстрацию непосредственно, чтобы увидеть окончательный эффект. Демонстрационный адрес загрузки: html5/"> html5canvas.guesstheletter.zip