Рубрики
Без рубрики

Как создать подходящую игру в свободное время с помощью Easel.js

Yazed Jamal Как построить подходящую игру в свободное время с помощью EASEL.jspart моего путешествия в мире программирования участвует в разработке игр. Я пробовал несколько языков, таких как Java и C ++, но в конце я хотел бы пойти с JavaScript. я

Автор оригинала: 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.html
 Pairing 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.

Демонстрация

Примечания : Вероятно, есть много способов реализации этой функции, но этот способ для меня было проще. Кто-нибудь может прокомментировать любые ошибки или улучшения, которые я могу подать заявку. Это руководство изначально для меня учиться и помнить, что я сделал. Тем не менее, кто-нибудь может следовать за этим руководством, если вы обнаружите, что это полезно.