Введение
2048 - это чрезвычайно популярная и легко изученная игра, которая взяла мир под скользящую ногу. Если вы еще не играли в нее, вы можете скачать ее на свой мобильный телефон и попробовать. В этом проекте вас проведет по созданию веб-версии игры 2048 с использованием HTML, CSS, JavaScript и jQuery.
- Изучить процесс разработки веб-приложения
- Изучить, как сделать приложение адаптивным для мобильных устройств, чтобы оно适配ствовало экранам различных размеров и обрабатывало макет и инициализацию
- Использовать JavaScript и jQuery для написания логики игры, реализации движения блоков и определения исходов игры.
👀 Превью
🎯 Задачи
В этом проекте вы научитесь:
- Как создавать макет страницы веб-игры 2048 с использованием HTML и CSS
- Как реализовать логику игры в JavaScript и jQuery
- Как обрабатывать движение блоков и слияние блоков
- Как тестировать и запускать веб-игру в веб-браузере
🏆 Достижения
После завершения этого проекта вы сможете:
- Разрабатывать адаптивное веб-приложение для игры 2048
- Использовать JavaScript и jQuery для написания логики и функциональности игры
- Реализовать движение и слияние блоков в игре
- Тестировать и запускать веб-игру в веб-браузере
Подготовка к разработке
Отделив стиль страницы, игру 2048 можно абстрагировать в виде двухмерного массива. В начальном состоянии необходимо случайным образом сгенерировать два числа. Случайно сгенерированные числа могут быть только 2 или 4. В последующем реализации мы сделаем вероятность появления 2 и 4 равной. Конечно, вы также можете сделать вероятность появления 4 меньшей.
0 0 0 0
2 0 0 0
0 0 2 0
Далее, когда я нажимаю на направленную клавишу, числа будут двигаться в этом направлении и смежные ячейки с одинаковыми числами будут объединяться. Затем будет случайным образом сгенерировано еще одно число. Например, если мы нажимаем Вверх → Влево → Вверх, интерфейс может стать таким:
2 0 2 0
0 0 0 0
0 0 0 0
4 0 0 0
4 0 0 0
0 0 0 0
0 0 2 0
4 0 0 0
8 0 2 0
0 0 0 0
0 4 0 0
Таким образом, мы непрерывно перемещаем и объединяем числа, пока числа не могут быть объединены больше или пока не появится 2048, что означит окончание игры. Как вы можете видеть, ядро игры - это манипуляция этим двухмерным массивом.
Структура файлов проекта
Сначала нам нужно создать следующую структуру файлов в пути ~/project:
~/project
|__ index.html
|__ main.js
|__ support.js
|__ showanimation.js
|__ style.css
jquery.min.js уже находится в пути ~/project, поэтому его можно использовать напрямую.
Теперь давайте официально начнем наши задачи по программированию! Мы начнем с макета страницы и постепенно завершим модули, такие как инициализация шахматной доски и перемещение блоков с числами.
Макет страницы
Как вы, возможно, заметили, игра 2048 построена на 16 квадратах. Ниже мы будем использовать div + css для рисования этих 4X4 ячеек. Добавьте следующий код в файл index.html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>2048 Game</title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="showanimation.js"></script>
<script type="text/javascript" src="support.js"></script>
</head>
<body>
<header>
<h1>2048 Game</h1>
<a href="javascript:new_game();" id="new_game_button">New Game</a>
<p>score: <span id="score">0</span></p>
</header>
<div id="grid_container">
<div class="grid_cell" id="grid_cell_0_0"></div>
<div class="grid_cell" id="grid_cell_0_1"></div>
<div class="grid_cell" id="grid_cell_0_2"></div>
<div class="grid_cell" id="grid_cell_0_3"></div>
<div class="grid_cell" id="grid_cell_1_0"></div>
<div class="grid_cell" id="grid_cell_1_1"></div>
<div class="grid_cell" id="grid_cell_1_2"></div>
<div class="grid_cell" id="grid_cell_1_3"></div>
<div class="grid_cell" id="grid_cell_2_0"></div>
<div class="grid_cell" id="grid_cell_2_1"></div>
<div class="grid_cell" id="grid_cell_2_2"></div>
<div class="grid_cell" id="grid_cell_2_3"></div>
<div class="grid_cell" id="grid_cell_3_0"></div>
<div class="grid_cell" id="grid_cell_3_1"></div>
<div class="grid_cell" id="grid_cell_3_2"></div>
<div class="grid_cell" id="grid_cell_3_3"></div>
</div>
</body>
</html>
Далее, нам нужно добавить стили на страницу и для каждой ячейки. Добавьте следующий код в файл style.css:
body {
padding: 50px 0px;
}
header {
display: block;
margin: 0 auto;
width: 100%;
text-align: center;
}
header h1 {
font-family: Arial;
font-size: 40px;
font-weight: bold;
margin: 0 auto;
color: #776e65;
padding: 20px 0px;
}
header #new_game_button {
display: block;
margin: 0px auto;
width: 100px;
padding: 10px 10px;
background-color: #8f7a66;
font-family: Arial;
color: white;
border-radius: 10px;
text-decoration: none;
}
header #new_game_button:hover {
background-color: #9f8b77;
}
header p {
font-family: Arial;
font-size: 25px;
margin: 5px auto;
}
#grid_container {
width: 460px;
height: 460px;
padding: 20px;
margin: 0px auto;
background-color: #bbada0;
border-radius: 10px;
position: relative;
}
.grid_cell {
width: 100px;
height: 100px;
border-radius: 6px;
background-color: #ccc0b3;
position: absolute;
}
.number_cell {
border-radius: 6px;
font-family: Arial;
font-weight: bold;
font-size: 60px;
line-height: 100px;
text-align: center;
position: absolute;
}
После завершения этого шага откройте файл index.html с использованием Предпросмотра,
и мы должны увидеть следующий результат:
Инициализация шахматной доски
Со временем все более популярными становятся мобильные устройства, поэтому нам нужно обеспечить адаптивность под различные размеры экранов.
В начале игры нам нужно сгенерировать два случайных числа на шахматной доске. Это достигается с помощью JavaScript кода.
В main.js добавьте следующее:
var board = new Array(); // Числа в каждой ячейке
var score = 0; // Счет
var has_conflicted = new Array(); // Флаг для разрешения последовательных удалений
var startx = 0; // Координата x начальной точки при касании мобильного экрана
var starty = 0; // Координата y начальной точки при касании мобильного экрана
var endx = 0; // Координата x конечной точки при касании мобильного экрана
var endy = 0; // Координата y конечной точки при касании мобильного экрана
var success_string = "Success";
var gameover_string = "GameOver";
// Инициализировать шахматную доску после загрузки HTML документа
$(document).ready(function () {
// Обработать адаптивность
prepare_for_mobile();
new_game();
});
// Начать новую игру
function new_game() {
// Инициализировать шахматную доску
init();
// Сгенерировать числа в двух случайных ячейках
generate_one_number();
}
// Инициализация
function init() {
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 4; j++) {
var grid_cell = $("#grid_cell_" + i + "_" + j);
grid_cell.css("top", get_pos_top(i, j));
grid_cell.css("left", get_pos_left(i, j));
}
}
for (var i = 0; i < 4; i++) {
board[i] = new Array();
has_conflicted[i] = new Array();
for (var j = 0; j < 4; j++) {
board[i][j] = 0;
has_conflicted[i][j] = false;
}
}
update_board_view();
score = 0;
update_score(score);
}
// Обновить вид шахматной доски
function update_board_view() {
$(".number_cell").remove();
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 4; j++) {
$("#grid_container").append(
'<div class="number_cell" id="number_cell_' + i + "_" + j + '"></div>'
);
var number_cell = $("#number_cell_" + i + "_" + j);
if (board[i][j] == 0) {
number_cell.css("width", "0px");
number_cell.css("height", "0px");
number_cell.css("top", get_pos_top(i, j) + cell_side_length / 2);
number_cell.css("left", get_pos_left(i, j) + cell_side_length / 2);
} else {
number_cell.css("width", cell_side_length);
number_cell.css("height", cell_side_length);
number_cell.css("top", get_pos_top(i, j));
number_cell.css("left", get_pos_left(i, j));
number_cell.css(
"background-color",
get_number_background_color(board[i][j])
);
number_cell.css("color", get_number_color(board[i][j]));
number_cell.text(board[i][j]);
}
has_conflicted[i][j] = false;
}
}
$(".number_cell").css("line-height", cell_side_length + "px");
$(".number_cell").css("font-size", 0.6 * cell_side_length + "px");
}
// Сгенерировать число в случайной ячейке
function generate_one_number() {
if (nospace(board)) {
return false;
}
// Случайная позиция
var randx = parseInt(Math.floor(Math.random() * 4));
var randy = parseInt(Math.floor(Math.random() * 4));
var time = 0;
while (time < 50) {
if (board[randx][randy] == 0) {
break;
}
randx = parseInt(Math.floor(Math.random() * 4));
randy = parseInt(Math.floor(Math.random() * 4));
time++;
}
if (time == 50) {
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 4; j++) {
if (board[i][j] == 0) {
randx = i;
randy = j;
}
}
}
}
// Случайное число
var rand_number = Math.random() < 0.5 ? 2 : 4;
// Отобразить случайное число в случайной позиции
board[randx][randy] = rand_number;
show_number_with_animation(randx, randy, rand_number);
return true;
}
// Обработать адаптивность
function prepare_for_mobile() {
if (document_width > 500) {
grid_container_width = 500;
cell_side_length = 100;
cell_space = 20;
}
$("#grid_container").css("width", grid_container_width - 2 * cell_space);
$("#grid_container").css("height", grid_container_width - 2 * cell_space);
$("#grid_container").css("padding", cell_space);
$("#grid_container").css("border-radius", 0.02 * grid_container_width);
$(".grid_cell").css("width", cell_side_length);
$(".grid_cell").css("height", cell_side_length);
$(".grid_cell").css("border-radius", 0.02 * grid_container_width);
}
Улучшить игровую логику
Далее, нам нужно улучшить логику игры, включая перемещение плиток с числами и проверку окончания игры. Завершите следующий код в support.js:
document_width = window.screen.availWidth; // Ширина экрана
grid_container_width = 0.92 * document_width; // Ширина игровой доски
cell_side_length = 0.18 * document_width; // Размер каждой ячейки сетки
cell_space = 0.04 * document_width; // Пространство между каждой ячейкой сетки
// Получить расстояние соответствующей ячейки сетки от верхней части игровой доски
function get_pos_top(i, j) {
return cell_space + i * (cell_space + cell_side_length);
}
// Получить расстояние соответствующей ячейки сетки от левой стороны игровой доски
function get_pos_left(i, j) {
return cell_space + j * (cell_space + cell_side_length);
}
// Получить цвет фона соответствующего числа
function get_number_background_color(number) {
switch (number) {
case 2:
return "#eee4da";
break;
case 4:
return "#ede0c8";
break;
case 8:
return "#f2b179";
break;
case 16:
return "#f59563";
break;
case 32:
return "#f67c5f";
break;
case 64:
return "#f65e3b";
break;
case 128:
return "#edcf72";
break;
case 256:
return "#edcc61";
break;
case 512:
return "#9c0";
break;
case 1024:
return "#33b5e5";
break;
case 2048:
return "#09c";
break;
case 4096:
return "#a6c";
break;
case 8192:
return "#93c";
break;
}
return "black";
}
// Получить цвет соответствующего числа
function get_number_color(number) {
if (number <= 4) return "#776e65";
return "white";
}
// Проверить, есть ли на игровой доске какие-либо пустые ячейки сетки
function nospace(board) {
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 4; j++) {
if (board[i][j] == 0) {
return false;
}
}
}
return true;
}
Улучшение анимационных эффектов
Далее, нам нужно улучшить анимационные эффекты, включая отображение плиток с числами и обновление счета. Этот код находится в showanimation.js:
// Анимация для отображения плиток с числами
function show_number_with_animation(i, j, rand_number) {
var number_cell = $("#number_cell_" + i + "_" + j);
number_cell.css("background-color", get_number_background_color(rand_number));
number_cell.css("color", get_number_color(rand_number));
number_cell.text(rand_number);
number_cell.animate(
{
width: cell_side_length,
height: cell_side_length,
top: get_pos_top(i, j),
left: get_pos_left(i, j)
},
50
);
}
// Обновление счета
function update_score(score) {
$("#score").text(score);
}
Перемещать цифровые плитки
После завершения макета и инициализации мы теперь реализуем функциональность перемещения и удаления плиток с числами до тех пор, пока игра не завершится успешно или не закончится неудачей.
Добавьте следующий код в main.js:
// Слушать движения стрелками на клавиатуре
$(document).keydown(function (event) {
if ($("#score").text() == success_string) {
new_game();
return;
}
switch (event.keyCode) {
case 37: // Влево
event.preventDefault();
if (move_left()) {
setTimeout("generate_one_number()", 210);
setTimeout("is_gameover()", 300);
}
break;
case 38: // Вверх
event.preventDefault();
if (move_up()) {
setTimeout("generate_one_number()", 210);
setTimeout("is_gameover()", 300);
}
break;
case 39: // Вправо
event.preventDefault();
if (move_right()) {
setTimeout("generate_one_number()", 210);
setTimeout("is_gameover()", 300);
}
break;
case 40: // Вниз
event.preventDefault();
if (move_down()) {
setTimeout("generate_one_number()", 210);
setTimeout("is_gameover()", 300);
}
break;
default:
break;
}
});
// Слушать событие touchstart на мобильных устройствах
document.addEventListener("touchstart", function (event) {
startx = event.touches[0].pageX;
starty = event.touches[0].pageY;
});
// Слушать событие touchmove на мобильных устройствах
document.addEventListener("touchmove", function (event) {
event.preventDefault();
});
// Слушать событие touchend на мобильных устройствах
document.addEventListener("touchend", function (event) {
endx = event.changedTouches[0].pageX;
endy = event.changedTouches[0].pageY;
var deltax = endx - startx;
var deltay = endy - starty;
if (
Math.abs(deltax) < 0.3 * document_width &&
Math.abs(deltay) < 0.3 * document_width
) {
return;
}
if ($("#score").text() == success_string) {
new_game();
return;
}
// Движение по оси x
if (Math.abs(deltax) >= Math.abs(deltay)) {
if (deltax > 0) {
// Переместить вправо
if (move_right()) {
setTimeout("generate_one_number()", 210);
setTimeout("is_gameover()", 300);
}
} else {
// Переместить влево
if (move_left()) {
setTimeout("generate_one_number()", 210);
setTimeout("is_gameover()", 300);
}
}
} else {
// Движение по оси y
if (deltay > 0) {
// Переместить вниз
if (move_down()) {
setTimeout("generate_one_number()", 210);
setTimeout("is_gameover()", 300);
}
} else {
// Переместить вверх
if (move_up()) {
setTimeout("generate_one_number()", 210);
setTimeout("is_gameover()", 300);
}
}
}
});
// Переместить влево
function move_left() {
if (!can_move_left(board)) {
return false;
}
// Переместить влево
for (var i = 0; i < 4; i++) {
for (var j = 1; j < 4; j++) {
if (board[i][j] != 0) {
for (var k = 0; k < j; k++) {
if (board[i][k] == 0 && no_block_horizontal(i, k, j, board)) {
show_move_animation(i, j, i, k);
board[i][k] = board[i][j];
board[i][j] = 0;
break;
} else if (
board[i][k] == board[i][j] &&
no_block_horizontal(i, k, j, board) &&
!has_conflicted[i][k]
) {
show_move_animation(i, j, i, k);
board[i][k] += board[i][j];
board[i][j] = 0;
// Добавить счет
score += board[i][k];
update_score(score);
has_conflicted[i][k] = true;
break;
}
}
}
}
}
setTimeout("update_board_view()", 200);
return true;
}
// Переместить вправо
function move_right() {
if (!can_move_right(board)) {
return false;
}
// Переместить вправо
for (var i = 0; i < 4; i++) {
for (var j = 2; j >= 0; j--) {
if (board[i][j] != 0) {
for (var k = 3; k > j; k--) {
if (board[i][k] == 0 && no_block_horizontal(i, j, k, board)) {
show_move_animation(i, j, i, k);
board[i][k] = board[i][j];
board[i][j] = 0;
break;
} else if (
board[i][k] == board[i][j] &&
no_block_horizontal(i, j, k, board) &&
!has_conflicted[i][k]
) {
show_move_animation(i, j, i, k);
board[i][k] += board[i][j];
board[i][j] = 0;
// Добавить счет
score += board[i][k];
update_score(score);
has_conflicted[i][k] = true;
break;
}
}
}
}
}
setTimeout("update_board_view()", 200);
return true;
}
// Переместить вверх
function move_up() {
if (!can_move_up(board)) {
return false;
}
// Переместить вверх
for (var j = 0; j < 4; j++) {
for (var i = 1; i < 4; i++) {
if (board[i][j] != 0) {
for (var k = 0; k < i; k++) {
if (board[k][j] == 0 && no_block_vertical(j, k, i, board)) {
show_move_animation(i, j, k, j);
board[k][j] = board[i][j];
board[i][j] = 0;
break;
} else if (
board[k][j] == board[i][j] &&
no_block_vertical(j, k, i, board) &&
!has_conflicted[k][j]
) {
show_move_animation(i, j, k, j);
board[k][j] += board[i][j];
board[i][j] = 0;
// Добавить счет
score += board[k][j];
update_score(score);
has_conflicted[k][j] = true;
break;
}
}
}
}
}
setTimeout("update_board_view()", 200);
return true;
}
// Переместить вниз
function move_down() {
if (!can_move_down(board)) {
return false;
}
// Переместить вниз
for (var j = 0; j < 4; j++) {
for (var i = 2; i >= 0; i--) {
if (board[i][j] != 0) {
for (var k = 3; k > i; k--) {
if (board[k][j] == 0 && no_block_vertical(j, i, k, board)) {
show_move_animation(i, j, k, j);
board[k][j] = board[i][j];
board[i][j] = 0;
break;
} else if (
board[k][j] == board[i][j] &&
no_block_vertical(j, i, k, board) &&
!has_conflicted[k][j]
) {
show_move_animation(i, j, k, j);
board[k][j] += board[i][j];
board[i][j] = 0;
// Добавить счет
score += board[k][j];
update_score(score);
has_conflicted[k][j] = true;
break;
}
}
}
}
}
setTimeout("update_board_view()", 200);
return true;
}
// Проверить, завершена ли игра успешно или неудачно
function is_gameover() {
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 4; j++) {
if (board[i][j] == 2048) {
update_score(success_string);
return;
}
}
}
if (nospace(board) && nomove(board)) {
gameover();
}
}
// Обновить текст окончания игры, когда игра заканчивается
function gameover() {
update_score(gameover_string);
}
Улучшить support.js
Далее, нам нужно улучшить код в support.js, включая проверку, может ли оно двигаться или может ли по-прежнему двигаться.
// Проверить, можно ли двигаться влево
function can_move_left(board) {
for (var i = 0; i < 4; i++) {
for (var j = 1; j < 4; j++) {
if (board[i][j] != 0) {
if (board[i][j - 1] == 0 || board[i][j] == board[i][j - 1]) {
return true;
}
}
}
}
return false;
}
// Проверить, можно ли двигаться вправо
function can_move_right(board) {
for (var i = 0; i < 4; i++) {
for (var j = 2; j >= 0; j--) {
if (board[i][j] != 0) {
if (board[i][j + 1] == 0 || board[i][j] == board[i][j + 1]) {
return true;
}
}
}
}
return false;
}
// Проверить, можно ли двигаться вверх
function can_move_up(board) {
for (var j = 0; j < 4; j++) {
for (var i = 1; i < 4; i++) {
if (board[i][j] != 0) {
if (board[i - 1][j] == 0 || board[i - 1][j] == board[i][j]) {
return true;
}
}
}
}
return false;
}
// Проверить, можно ли двигаться вниз
function can_move_down(board) {
for (var j = 0; j < 4; j++) {
for (var i = 2; i >= 0; i--) {
if (board[i][j] != 0) {
if (board[i + 1][j] == 0 || board[i + 1][j] == board[i][j]) {
return true;
}
}
}
}
return false;
}
// Проверить, нет ли препятствий в горизонтальном направлении
function no_block_horizontal(row, col1, col2, board) {
for (var i = col1 + 1; i < col2; i++) {
if (board[row][i] != 0) {
return false;
}
}
return true;
}
// Проверить, нет ли препятствий в вертикальном направлении
function no_block_vertical(col, row1, row2, board) {
for (var i = row1 + 1; i < row2; i++) {
if (board[i][col] != 0) {
return false;
}
}
return true;
}
// Проверить, может ли по-прежнему двигаться
function nomove(board) {
if (
can_move_down(board) ||
can_move_up(board) ||
can_move_right(board) ||
can_move_left(board)
) {
return false;
}
return true;
}
Завершить игру
Наконец, нам нужно завершить код в showanimation.js, включая отображение анимации перемещения и анимации слияния.
// Эффект анимации при перемещении ячейки сетки
function show_move_animation(fromx, fromy, tox, toy) {
var number_cell = $("#number_cell_" + fromx + "_" + fromy);
number_cell.animate(
{
top: get_pos_top(tox, toy),
left: get_pos_left(tox, toy)
},
200
);
}
Таким образом, наша веб-версия 2048 завершена.
Запуск и тестирование
Откройте index.html в веб-браузере.
Для просмотра следующих эффектов нажмите кнопку Go Live в нижнем правом углу WebIDE и переключитесь на вкладку "Web 8080".
Резюме
В этом проекте мы реализовали веб-версию игры 2048 с использованием HTML, CSS, JavaScript и jQuery. Мы также научились делать ее совместимой с мобильными устройствами. Предполагается, что благодаря этому проекту вы сможете углубить свое понимание фронтенд-технологий и повысить свои навыки комплексного применения.
