Како направити игру змија користећи ХТМЛ, ЦСС и ЈаваСцрипт

Игра змија је класична вежба програмирања коју можете користити да побољшате своје вештине програмирања и решавања проблема. Игру можете креирати у веб претраживачу користећи ХТМЛ, ЦСС и ЈаваСцрипт.

У игри контролишете змију која се креће по табли. Змија расте у величини док сакупљате храну. Игра ће се завршити ако се сударите са сопственим репом или било којим од зидова.

Како креирати кориснички интерфејс за платно

Користите ХТМЛ и ЦСС да додате платно по коме ће се змија кретати. Има много других ХТМЛ и ЦСС пројекти можете да вежбате даље, ако треба да ревидирате неке основне концепте.

Можете се позвати на овај пројекат ГитХуб спремиште за цео изворни код.

1. Направите нову датотеку под називом "индек.хтмл".
instagram viewer
2. Отворите датотеку користећи било који уређивач текста као што је Визуелни код или Атом. Додајте основну структуру ХТМЛ кода:

   хтмл>
   <хтмлланг="ен-УС">
   <глава>
   <наслов>Игра змијанаслов>
   глава>
   <тело>
   тело>
   хтмл>

3. Унутар ознаке тела додајте платно које представља таблу за игру за змију.

   <х2>Игра змијах2>
   <дивид="игра">
   <платнуид="змија">платну>
   див>

4. У истој фасцикли као и ваша ХТМЛ датотека, направите нову датотеку под називом „стилес.цсс“.
5. Унутра додајте мало ЦСС-а за целокупну веб страницу. Такође можете да стилизујете своју веб локацију користећи други основне ЦСС савете и трикове.

   #гаме {
   ширина:400пк;
   висина:400пк;
   маргина:0ауто;
   боја позадине:#еее;
   }
   х2 {
   Поравнање текста:центар;
   породица фонтова:Ариал;
   фонт-сизе:36пк;
   } 
   

6. Унутар ваше ХТМЛ датотеке додајте везу до ЦСС-а у ознаку хеад:

   <линкрел="стилесхеет"тип="текст/цсс"хреф="стилес.цсс">

7. Да бисте видели платно, отворите датотеку „индек.хтмл“ у веб прегледачу.

Како нацртати змију

У примеру испод, црна линија представља змију:

Више квадрата или "сегмената" чине змију. Како змија расте, повећава се и број квадрата. На почетку игре, дужина змије је један комад.

1. Унутар ваше ХТМЛ датотеке повежите се са новом ЈаваСцрипт датотеком на дну ознаке тела:

   <тело>
    Ваш код овде 
   <скриптасрц="сцрипт.јс">скрипта>
   тело>

2. Креирајте сцрипт.јс и почните тако што ћете добити ДОМ елемент платна:

   вар платно = документ.гетЕлементБиИд("змија");

3. Поставите контекст за ХТМЛ елемент платна. У овом случају, желите да игра прикаже 2д платно. Ово ће вам омогућити да нацртате више облика или слика на ХТМЛ елемент.

   вар цанвас2д = цанвас.гетЦонтект("2д");

4. Подесите друге променљиве у игри, као што је да ли је игра завршена и висину и ширину платна:

   вар гамеЕндед = лажно;
   цанвас.видтх = 400;
   цанвас.хеигхт = 400;

5. Декларисајте променљиву под називом "снакеСегментс". Ово ће задржати број "квадрата" које ће змија заузети. Такође можете да креирате променљиву да бисте пратили дужину змије:

   вар змијаСегменти = [];
   вар змијаЛенгтх = 1;
   

6. Наведите почетни Кс и И положај змије:

   вар снакеКс = 0;
   вар змијаИ = 0;

7. Креирајте нову функцију. Унутра, додајте почетни део змије у низ змија Сегментс, са његовим почетним Кс и И координатама:

   функцијамовеСнаке() {
    снакеСегментс.унсхифт({ Икс: снакеКс, и: снакеИ });
   }

8. Креирајте нову функцију. Унутра, подесите стил попуњавања на црно. Ово је боја коју ће користити за цртање змије:

   функцијадравСнаке() {
    цанвас2д.филлСтиле = "црн"; 
   }

9. За сваки сегмент који чини величину змије, нацртајте квадрат ширине и висине од 10 пиксела:

   за (вар и = 0; и < снакеСегментс.ленгтх; и++) {
    цанвас2д.филлРецт (снакеСегментс[и].к, снакеСегментс[и].и, 10, 10);
    }

10. Направите петљу игре која ће се покретати сваких 100 милисекунди. Ово ће довести до тога да игра стално црта змију у њеном новом положају, што ће бити веома важно када змија почне да се креће:

    функцијагамеЛооп() {
     мовеСнаке();
     дравСнаке();

11. Отворите датотеку „индек.хтмл“ у веб претраживачу да бисте видели змију у најмањој величини на њеној почетној позицији.

Како натерати змију да се креће

Додајте мало логике да померите змију у различитим правцима, у зависности од тога које дугме играч притисне на тастатури.

1. На врху датотеке наведите почетни правац змије:

   вар правац Кс = 10;
   вар правацИ = 0;
   

2. Додајте руковалац догађаја који се покреће када играч притисне тастер:

   документ.онкеидовн = функција(догађај) {
   };

3. Унутар обрађивача догађаја промените смер у коме се змија креће, на основу притиснутог тастера:

   прекидач (евент.кеиЦоде) {
   случај37: // Лева стрелица
    правац Кс = -10;
    правацИ = 0;
   пауза;
   случај38: // Горе стрелица
    правац Кс = 0;
    правацИ = -10;
   пауза;
   случај39: // Стрелица удесно
    правац Кс = 10;
    правацИ = 0;
   пауза;
   случај40: // Стрелица надоле
    правац Кс = 0;
    правацИ = 10;
   пауза;
   }

4. У функцији мовеСнаке() користите правац да ажурирате координате Кс и И змије. На пример, ако змија треба да се помери лево, смер Кс ће бити "-10". Ово ће ажурирати Кс координате да бисте уклонили 10 пиксела за сваки оквир игре:

   функцијамовеСнаке() {
    снакеСегментс.унсхифт({ Икс: снакеКс, и: снакеИ });
    снакеКс += дирецтионКс;
    снакеИ += дирецтионИ;
   }

5. Игра тренутно не уклања претходне сегменте док се змија креће. Ово ће учинити да змија изгледа овако:
6. Да бисте ово поправили, обришите платно пре него што нацртате нову змију у сваком оквиру, на почетку функције дравСнаке():

   цанвас2д.цлеарРецт(0, 0, цанвас.видтх, цанвас.хеигхт);

7. Такође ћете морати да уклоните последњи елемент низа снакеСегментс, унутар функције мовеСнаке():

   док (снакеСегментс.ленгтх > снакеЛенгтх) {
    снакеСегментс.поп();
   }

8. Отворите датотеку "индек.хтмл" и притисните тастере лево, десно, горе или доле да померите змију.

Како додати храну на платно

Додајте тачке у игру на плочи да бисте представили комаде хране за змију.

1. Декларисајте нову променљиву на врху датотеке за складиштење низа комада хране:

   вар тачке = [];

2. Креирајте нову функцију. Унутра, генеришите насумичне Кс и И координате за тачке. Такође можете осигурати да је само 10 тачака на табли у било ком тренутку:

   функцијаспавнДотс() {
   ако(дотс.ленгтх < 10) {
   вар дотКс = Матх.под(Матх.рандом() * цанвас.видтх);
   вар дотИ = Матх.под(Матх.рандом() * цанвас.хеигхт);
    дотс.пусх({ Икс: дотКс, и: дотИ });
    }
   }

3. Након генерисања Кс и И координата за храну, нацртајте их на платну користећи црвену боју:

   за (вар и = 0; и < дотс.ленгтх; и++) {
    цанвас2д.филлСтиле = "црвено";
    цанвас2д.филлРецт (тачке[и].к, тачке[и].и, 10, 10);
   }

4. Позовите нову функцију спавнДотс() унутар петље игре:

   функцијагамеЛооп() {
    мовеСнаке();
    дравСнаке();
    спавнДотс();
   ако(!гамеЕндед) {
    сетТимеоут (гамеЛооп, 100);
    }
   }

5. Отворите датотеку "индек.хтмл" да бисте видели храну на табли за игру.

Како натерати змију да расте

Можете натерати змију да расте повећавајући њену дужину када се судари са тачком хране.

1. Креирајте нову функцију. Унутар њега, прођите кроз сваки елемент у низу тачака:

   функцијацхецкЦоллисион() {
   за (вар и = 0; и < дотс.ленгтх; и++) {
   
    }
   }

2. Ако се позиција змије поклапа са координатама било које тачке, повећајте дужину змије и избришите тачку:

   ако (змија Кс < тачке[и].к + 10 && 
    снакеКс + 10 > тачке[и].к && 
    змијаИ < тачке[и].и + 10 && 
    снакеИ + 10 > тачке[и].и) {
    снакеЛенгтх++;
    дотс.сплице (и, 1);
   }

3. Позовите нову функцију цхецкЦоллисион() у петљи игре:

   функцијагамеЛооп() {
    мовеСнаке();
    дравСнаке();
    спавнДотс();
    цхецкЦоллисион();
   ако(!гамеЕндед) {
    сетТимеоут (гамеЛооп, 100);
    }
   }

4. Отворите датотеку „индек.хтмл“ у веб прегледачу. Померите змију користећи тастатуру да сакупите комаде хране и узгајате змију.

Како завршити игру

Да бисте завршили игру, проверите да ли се змија сударила са сопственим репом или неким од зидова.

1. Направите нову функцију за штампање упозорења „Гаме Овер“.

   функцијакрај игре() {
    сетТимеоут(функција() {
    упозорење ("Крај игре!");
    }, 500); 
    гамеЕндед = истина
   }

2. Унутар функције цхецкЦоллисион() проверите да ли је змија ударила у било који од зидова платна. Ако јесте, позовите функцију гамеОвер():

   ако (снакеКс < -10 || 
    снакеИ < -10 || 
    снакеКс > цанвас.видтх+10 ||
    змијаИ > платно.висина+10) {
    крај игре();
   }

3. Да бисте проверили да ли се глава змије сударила са неким од сегмената репа, прођите кроз сваки део змије:

   за (вар и = 1; и < снакеСегментс.ленгтх; и++) {
   }

4. Унутар фор-петље, проверите да ли се локација змијске главе поклапа са било којим сегментом репа. Ако је тако, то значи да се глава сударила са репом, па завршите игру:

   ако (снакеКс снакеСегментс[и].к && снакеИ снакеСегментс[и].и) {
    крај игре();
   }

5. Отворите датотеку „индек.хтмл“ у веб прегледачу. Покушајте да ударите у зид или свој реп да бисте завршили игру.

Учење ЈаваСцрипт концепата кроз игре

Прављење игара може бити одличан начин да ваше искуство учења учините угоднијим. Наставите да правите још игара да бисте наставили да побољшавате своје знање о ЈаваСцрипт-у.