Комментарий: Tetris имеет 7 частей, и каждая часть занимает другое число и положение прямоугольника, поэтому создайте класс компонентов, а затем создайте массив для хранения 7 частей. Каждая часть содержит массив для хранения количества и положения прямоугольника, занятого компонентом. Ниже приведено подробное введение
Основные принципы этой игры в игре:Игровая зона - это область ограниченного размера. Игровая площадь этой игры имеет 21 × 25 прямоугольников, каждая ширина прямоугольника составляет 10 единиц, а высота-6 единиц (абсолютная единица холста фиксирован, не пиксель).
Создайте класс Rusblock для содержания соответствующих данных и поведения, и создайте двухмерный массив Astate [21] [25], чтобы записать отмеченные прямоугольники в игровой области.
Tetris имеет 7 частей, и каждая часть занимает различное число и положение прямоугольника, поэтому создайте класс компонентов, а затем создайте массив для хранения 7 частей. Каждая часть содержит массив для хранения количества и положения прямоугольника, занятого компонентом. Когда падающая часть закончится, будет сгенерирована новая часть, а отмеченный прямоугольник детали будет назначен на массив игровой области.
В функции петли игры напечатаны падающие части, уже фиксированные части и падающие части печатаются.
Основные знания:
HTML5 CSS JS
Эта игра включает в себя три файла:
Rusblock.html: настройка элементов
Rusblock.css: Set Style
Rusblock.js: управление скриптом
Шаг 1: Настройки интерфейса и подготовка материала
Rusblock.html
<! Doctype html>
<html>
<голова>
<title> rusblock </title>
<link rel = styleSheet type = text/css href = rusblock.css>
<script type = text/javascript>
function sharegame () {
var url =? link = + document.url + & title = rusblock;
window.showmodaldialog ([url]);
}
</script>
</head>
<body onkeyup = action (event)>
<audio loop = loop id = founal-audioplayer preload = auto>
<Source src = audio/founal.mp3 ″ type = audio/mp3 ″/>
</audio>
<audio id = Gameover-audioplayer preload = auto>
<Source src = audio/gameover.ogg type = audio/ogg>
</audio>
<audio id = оценка audioplayer preload = auto>
<Source src = audio/score.mp3 ″ type = audio/mp3 ″/>
</audio>
<div id = area>
<div id = button-area>
<h1 id = game-name> rusblock </h1>
<Button Id = кнопка-игра-старт onclick = gamestart ()> start </button>
<Button Id = кнопка-end onclick = GameEnd ()> End </button>
<form id = level-level>
<SELECT ID = SELECT-GAME-LEVEL>
<Значение опции = 500 ″ SELECTED = SELECTED> Easy </option>
<значение опции = 300 ″> Нормальный </option>
<значение опции = 200 ″> Hard </option>
</select>
</form>
<button onclick = sharegame () id = chare-game> Поделиться с Renren </button>
</div>
<canvas id = game-canvas> </canvas>
<div id = area>
<h2> Оценка </h2>
<P ID = Game-Score> 0 </p>
</div>
</div>
<script type = text/javascript src = rusblock.js> </script>
</body>
</html>
Шаг 2: Стиль
Rosblock.css
тело {
фоновый цвет: серый;
Текст-альбом: Центр;
Семейство шрифта: «Times New Roman»;
Справочный Image: url ();
}
H1#Game-name {
фоновый цвет: белый;
Ширина: 100%;
размер шрифта: x-large;
}
H2,#Game-Score {
размер шрифта: x-large;
фоновый цвет: белый;
}
#Game-area {
позиция: абсолютно;
Слева: 10%;
Ширина: 80%;
высота: 99%;
}
Canvas#Game-Canvas {
фоновый цвет: белый;
Ширина: 80%;
высота: 98%;
Плавание: осталось;
}
#Кнопка,#area-area {
Ширина: 10%;
высота: 100%;
Плавание: осталось;
}
#Кнопка-игра-старт,#ind-end,#кнопка-игра,#select-game-level {
Ширина: 100%;
высота: 10%;
Размер шрифта: больше;
граница правая ширина: 3PX;
фоновый цвет: белый;
}
#Select-game-level {
Ширина: 100%;
высота: 100%;
размер шрифта: x-large;
Пограничный цвет: серый;
}
Шаг 3: Напишите код JS
Rusblock.js
Разбор участников, включенный в класс Rusblock:
данные:
NcurrentComid: идентификатор текущего компонента Drop
Astate [21] [25]: массив, который хранит государство игровой зоны
CurrentCom: в настоящее время падающая часть
Nextcom: Следующая часть
Ptindex: индекс падающей в настоящее время части относительно игровой зоны
Функция:
NewNextCom (): генерировать новый следующий компонент
NextComtocurrentCom (): передача данных из следующего компонента в текущий падающий компонент
Chandown (): определить, может ли текущий компонент все еще падать
Cannew (): определить, можно ли генерировать новые компоненты
Left (): текущий компонент перемещается влево
Right (): текущий компонент движется вправо
Utate (): ток компонент вращается по часовой стрелке
AccelerAtet (): текущий компонент ускоряется вниз
Исчезнуть (): устранить линию
CheckFail (): определить, не удается ли игра
Invalidaterect (): обновить область текущего компонента
Завершите: скачать демо