Автор оригинала: FreeCodeCamp Community Member.
Дамал
Часть моего путешествия в мире программирования учится о разработке игр. Я пробовал несколько языков, таких как Java и C ++, но в конце я хотел бы пойти с JavaScript. Я построил одну игру перед использованием JS. Игра называется Pong Ping , который является клоном для игры понга. Эта игра была построена чисто используя родной JavaScript.
Но сегодня я хотел бы построить игру на основе JavaScript Game Framework под названием Easel.js. Игра, которую я собираюсь построить, на самом деле очень простая игра: мы перекидываем квадраты, и если они одинаковы, они исчезнут. Игра завершится, когда каждый цвет соответствует. Вот пример игры в видео ниже, но они используют фотографии.
Шаг 1
Я создам файл index.html и составьте ссылку на библиотеку easel.js. Я решил использовать CDN (сеть доставки контента) для этой цели. Мне также нужно будет ссылаться на main.js, где будет все мой код JavaScript.
#index.htmlPairing Game
Мне нужно убедиться, что все элементы DOM полностью загружены до того, как Javascripts могут быть выполнены, поэтому я использую метод onload, чтобы связать JavaScript через функцию init ().
Шаг 2
Затем я создадим файл main.js и настроить среду easel.js.
#js/main.jsvar squarHeight = 200;var squareWidth = 200;
function init() { var stage = new createjs.Stage("myCanvas"); var square = drawSquare();
stage.addChild(square); stage.update();}
Мольберт использует класс под названием Stage в качестве контейнера для отображения любого элемента к определенному холсте. Теперь я нарисую квадрат через функцию Drawsquare. Я буду использовать все доступные API от Easle.js
#js/main.jsfunction drawSquare() { var graphics = new createjs.Graphics().setStrokeStyle(5).beginStroke("rgba(20,20,20,1)") graphics.beginFill(randomColor()).rect(5,5,squareWidth,squareHeight); var shape = new createjs.Shape(graphics); return shape;}
function randomColor() { var num1 = Math.floor(Math.random()*255); var num2 = Math.floor(Math.random()*255); var num3 = Math.floor(Math.random()*255); return "rgba("+num1+","+num2+","+num3+",1)"; }
Сначала я определим размер хода, который я хотел бы использовать. Тогда я применю инсульт определенным цветом, определите цвет квадрата и создайте квадрат. Цвет квадрата является случайным цветом, генерируемым из функции RandomColor. Ниже приведено как это будет выглядеть в браузере.
Шаг 3
После того, как я успешно оказал квадрат со случайным цветом, мне нужно создать, сколько рядов и столбцов будет для квадратов для заполнения. Мне также нужно будет разработать алгоритм, чтобы сделать один квадрат в каждом столбце и ряду.
#js/main.js##upated codesvar squarHeight = 200;var squareWidth = 200;var squareGap = 10;var column = 3;var row = 2;
function init() { var stage = new createjs.Stage("myCanvas"); var square;
for(i=0; i < column*row; i++) { square = drawSquare(); square.x = (squareWidth+squareGap)*(i%column); square.y = (squarHeight+squareGap)*Math.floor(i/column); stage.addChild(square); stage.update(); }
}
function drawSquare() { var graphics = new createjs.Graphics().setStrokeStyle(5).beginStroke("rgba(20,20,20,1)") graphics.beginFill(randomColor()).rect(5,5,squarHeight,squareWidth); var shape = new createjs.Shape(graphics); return shape;}
function randomColor() { var num1 = Math.floor(Math.random()*255); var num2 = Math.floor(Math.random()*255); var num3 = Math.floor(Math.random()*255); return "rgba("+num1+","+num2+","+num3+",1)"; }
Из приведенных выше кодов я получу что-то подобное HTML:
Есть много способов реализации квадратного рендеринга. Мы могли бы использовать цикл в многомерном массиве, или мы могли манипулировать квадратным размером с какой-то математической функцией. В этом случае я буду использовать позже. Но вот алгоритм, если вы хотите использовать многомерный метод:
#alternativevar positionX =0; var positionY = 0;
for(i=0;i
Шаг 4.
Опять же, цель этой игры состоит в том, чтобы сопоставить пару цветов вместе. Поэтому мне нужно изменить код, чтобы его генерировать группы цветов в парах. Для этого я буду использовать ли логику, чтобы убедиться, что два аналогичных цвета используются во время квадратной рендеринга.
#js/main.jsvar temp;var genOnce = false;
function drawSquare() {var color = randomColor();var graphics = new createjs.Graphics().setStrokeStyle(5).beginStroke("rgba(20,20,20,1)")
if(!genOnce) { graphics.beginFill(color).rect(5,5,squarHeight,squareWidth); temp = color; genOnce = true; }else { graphics.beginFill(temp).rect(5,5,squarHeight,squareWidth); genOnce = false; }
var shape = new createjs.Shape(graphics); return shape;}
Это сделает группу квадратов что-то вроде этого:
Шаг 5.
Далее я хочу, чтобы каждый из квадратов оказался в случайной положении, поэтому пары отделяются друг от друга. Это может быть достигнуто сначала создание массива, состоящего из всех показателей квадратов, а затем перетасовывать массив, поэтому номер индекса помещен случайным образом.
#js/main.jsvar squarePlacement = [];
##function to generate array with all the squares indexfunction randomDoubleColor() { for(i=0; i
}
##function of the array random shufflingfunction shuffleArray(array) { for (var i = array.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array;}
Тогда мне нужно изменить, как я оказываю квадрат. Вместо того, чтобы итерация по длине полных квадратов я перейду через случайно смягченный массив.
#js/main.jsfunction init() { var stage = new createjs.Stage("myCanvas"); var square; randomDoubleColor();
for(i=0; i < squarePlacement.length; i++) { square = drawSquare(); square.x = (squareWidth+squareGap)*(squarePlacement[i]%column); square.y = (squarHeight+squareGap)*Math.floor(squarePlacement[i]/column); stage.addChild(square); stage.update(); }
}
Это принесет мне группу квадратов, как это:
Я могу лучше видеть эффект, если представлены больше квадратов:
Шаг 6.
Моя цель теперь создать функцию, которая будет сравнивать два квадрата, которые будут выбраны впоследствии.
#js/main.jsvar highlight = createjs.Graphics.getRGB(255, 0, 0);var tileChecked;
Я начну с определения переменных выделений. Это будет использоваться для выделения первых выбранных квадратов и переменной Tilechecked для хранения того же квадрата.
#js/main.jsfor(i=0; i < squarePlacement.length; i++) { square = drawSquare(); square.x = (squareWidth+squareGap)*(squarePlacement[i]%column); square.y = (squarHeight+squareGap)*Math.floor(squarePlacement[i]/column); stage.addChild(square); square.addEventListener("click", handleOnPress); stage.update(); }
}
Затем я создадим слушатель событий, который ответит на щелчок мыши и запускает определенную функцию, ручку. Теперь я определим функцию следующим образом:
function handleOnPress(e) { var tile = e.target; if(!!tileChecked === false) { tile.graphics.setStrokeStyle(5).beginStroke(highlight).rect(5, 5, squareWidth, squarHeight); tileChecked = tile; }else { if(tileChecked.graphics._fill.style === tile.graphics._fill.style && tileChecked !== tile) { tileChecked.visible = false; tile.visible = false; }else { console.log("not match"); tileChecked.graphics.setStrokeStyle(5).beginStroke("rgba(20,20,20,1)").rect(5, 5, squareWidth, squarHeight); } tileChecked = null; } stage.update();
}
В основном функция сначала проверяет переменную TileChecked. Если он не определен, выбранный квадрат будет выделен. Выбранный квадратный объект будет сохранен в переменной Tilechecked. В противном случае (который я ожидаю произойти во втором клике), цвет между текущим выбранным квадратом и тем, который хранится в переменной Tilechecked.
При этом вторым сравнением, если цвет является совпадением, я сделаю оба квадрата исчезновения. Если это не совпадение, я удалю вывезти и сбросьте переменную TileChecked на undefined.
Шаг 7.
Чтобы создать настоящую игру головоломки, все цвета не должны отображаться. Я сделаю квадраты, покрытые серыми квадратами, и когда каждый нажал, то он покажет цвет. Поэтому, когда это не совпадение, серый квадрат снова прикроет коробку.
Чтобы сделать его более воспроизведенным, я убедитесь, что другие квадраты не накапливаются во время сравнения. Я также надену некоторую задержку между тем, когда отображается второй цвет, и когда оба квадрата исчезают, либо обращаются к серому. Некоторая модификация должна быть сделана для того, чтобы все было правильно работать
function init() { var stage = new createjs.Stage("myCanvas"); randomDoubleColor();
for(i=0; i < squarePlacement.length; i++) { var color =randomColor(); console.log(color); var square = drawSquare(color); console.log(square); square["color"] = square.graphics._fill.style; square.graphics._fill.style = "rgb(140, 136, 136)"; square.x = (squareWidth+squareGap)*(squarePlacement[i]%column); square.y = (squareHeight+squareGap)*Math.floor(squarePlacement[i]/column); stage.addChild(square); square.addEventListener("click", handleOnPress); stage.update(); } function handleOnPress(e) { var tile = e.target;
tile.graphics.beginFill(tile.color).rect(5,5,squareHeight,squareWidth); console.log(tile.mouseEnabled); tile.mouseEnabled = false; console.log(tile.mouseEnabled);
if(!!tileChecked === false) { tileChecked = tile; }else {
stage.mouseChildren = false; tile.graphics.beginFill(tile.color).rect(5,5,squareHeight,squareWidth);
setTimeout(function() { console.log("in"); console.log(tile); console.log(tileChecked); if(tileChecked.color === tile.color && tileChecked !== tile) { tileChecked.visible = false; tile.visible = false; }else { console.log("not match"); tile.graphics.beginFill("rgb(140, 136, 136)").rect(5,5,squareHeight,squareWidth); tileChecked.graphics.beginFill("rgb(140, 136, 136)").rect(5,5,squareHeight,squareWidth);
} tile.mouseEnabled = true; tileChecked.mouseEnabled = true; stage.mouseChildren = true; tileChecked = null;
stage.update(); }, 1000); } stage.update();
}
}
function drawSquare(color) { var graphics = new createjs.Graphics().setStrokeStyle(5).beginStroke("rgba(20,20,20,1)")
if(!genOnce) { graphics.beginFill(color).rect(5,5,squareHeight,squareWidth); temp = color; genOnce = true; }else { graphics.beginFill(temp).rect(5,5,squareHeight,squareWidth); genOnce = false; } var shape = new createjs.Shape(graphics); return shape;}
Ниже приведено видео игры в действии:
Эта игра может быть увеличена дальше путем добавления правил выигрыша или проигрыша или, может быть, добавив таймер для записи времени завершения каждого игрока. На данный момент я остановлюсь развитию до этого момента. Полный код можно найти на GitHub ниже, и кто-то может использовать его для любого другого проекта.
Muyased/Matching-Game-using-easel.js Способствуйте разработке сопоставления и игры, используя – EASEL.js, создав счет на GitHub. github.com.
Демонстрация
Примечания : Вероятно, есть много способов реализации этой функции, но этот способ для меня было проще. Кто-нибудь может прокомментировать любые ошибки или улучшения, которые я могу подать заявку. Это руководство изначально для меня учиться и помнить, что я сделал. Тем не менее, кто-нибудь может следовать за этим руководством, если вы обнаружите, что это полезно.