Как да направите игра със змия с помощта на HTML, CSS и JavaScript

Играта със змия е класическо упражнение по програмиране, което можете да използвате, за да подобрите уменията си за програмиране и решаване на проблеми. Можете да създадете играта в уеб браузър, като използвате HTML, CSS и JavaScript.

В играта контролирате змия, която се движи около дъската. Змията нараства по размер, докато събирате храна. Играта ще приключи, ако се сблъскате със собствената си опашка или някоя от стените.

Как да създадете потребителския интерфейс за Canvas

Използвайте HTML и CSS, за да добавите платното, по което змията да се движи. Има много други HTML и CSS проекти можете да практикувате, ако трябва да преразгледате някои основни понятия.

Можете да се обърнете към този проект GitHub хранилище за пълния изходен код.

1. Създайте нов файл, наречен "index.html".
2. Отворете файла с помощта на произволен текстов редактор, като напр Визуален код или атом. Добавете основната структура на HTML кода:

   html>
   <htmlезик="en-US">
   <глава>
   <заглавие>Игра със змиязаглавие>
   глава>
   <тяло>
   тяло>
   html>

3. Вътре в етикета на тялото добавете платно, което да представлява игралната дъска за змията.

   <h2>Игра със змияh2>
   <дивдокумент за самоличност="игра">
   <платнодокумент за самоличност="змия">платно>
   див>

4. В същата папка като вашия HTML файл създайте нов файл, наречен "styles.css".
5. Вътре добавете малко CSS за цялостната уеб страница. Можете също така да стилизирате уебсайта си, като използвате други основни CSS съвети и трикове.

   #игра {
   ширина:400px;
   височина:400px;
   марж:0Автоматичен;
   Цвят на фона:#еее;
   }
   h2 {
   подравняване на текст: център;
   шрифтово семейство:Arial;
   размер на шрифта:36px;
   } 
   

6. Във вашия HTML файл добавете връзка към CSS в тага head:

   <връзкаотн="стилов лист"Тип="текст/css"href="styles.css">

7. За да видите платното, отворете файла "index.html" в уеб браузър.

Как да нарисувате змията

В примера по-долу черната линия представлява змията:

Множество квадратчета или „сегменти“ съставят змията. Тъй като змията расте, броят на квадратите също се увеличава. В началото на играта дължината на змията е една фигура.

1. Във вашия HTML файл, свържете се към нов JavaScript файл в долната част на етикета body:

   <тяло>
    Вашият код тук 
   <сценарийsrc="script.js">сценарий>
   тяло>

2. Създайте script.js и започнете с получаване на DOM елемента на платното:

   вар платно = документ.getElementById("змия");

3. Задайте контекста за HTML елемента canvas. В този случай искате играта да изобрази 2D платно. Това ще ви позволи да нарисувате множество форми или изображения върху HTML елемента.

   вар canvas2d = canvas.getContext("2d");

4. Задайте други променливи в играта, като например дали играта е приключила и височината и ширината на платното:

   вар gameEnded = невярно;
   canvas.width = 400;
   canvas.height = 400;

5. Декларирайте променлива, наречена "snakeSegments". Това ще съдържа броя на "квадратите", които змията ще заеме. Можете също така да създадете променлива, за да следите дължината на змията:

   вар snakeSegments = [];
   вар snakeLength = 1;
   

6. Декларирайте първоначалната X и Y позиция на змията:

   вар змияX = 0;
   вар змияY = 0;

7. Създайте нова функция. Вътре добавете началната част от змията към масива snakeSegments с нейните начални X и Y координати:

   функцияmoveSnake() {
    snakeSegments.unshift({ х: snakeX, г: змияY });
   }

8. Създайте нова функция. Вътре задайте стила на запълване на черно. Това е цветът, който ще използва, за да нарисува змията:

   функциянарисувай змия() {
    canvas2d.fillStyle = "черно"; 
   }

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

   за (вар аз = 0; i  canvas2d.fillRect (snakeSegments[i].x, snakeSegments[i].y, 10, 10);
    }

10. Създайте цикъл на играта, който ще се изпълнява на всеки 100 милисекунди. Това ще накара играта постоянно да рисува змията в новата й позиция, което ще бъде много важно, когато змията започне да се движи:

    функцияgameLoop() {
     moveSnake();
     drawSnake();

11. Отворете файла "index.html" в уеб браузър, за да видите змията в най-малкия й размер в началната й позиция.

Как да накараме змията да се движи

Добавете малко логика, за да движите змията в различни посоки, в зависимост от това кой бутон натиска играчът на клавиатурата.

1. В горната част на файла декларирайте първоначалната посока на змията:

   вар посока X = 10;
   вар посока Y = 0;
   

2. Добавете манипулатор на събития, който се задейства, когато играчът натисне клавиш:

   документ.onkeydown = функция(събитие) {
   };

3. Вътре в манипулатора на събития променете посоката, в която се движи змията, въз основа на натиснатия клавиш:

   превключвател (event.keyCode) {
   случай37: // Лява стрелка
    посока X = -10;
    посока Y = 0;
   прекъсвам;
   случай38: // Стрелка нагоре
    посока X = 0;
    посока Y = -10;
   прекъсвам;
   случай39: // Дясна стрелка
    посока X = 10;
    посока Y = 0;
   прекъсвам;
   случай40: // Стрелка надолу
    посока X = 0;
    посока Y = 10;
   прекъсвам;
   }

4. Във функцията moveSnake() използвайте посоката, за да актуализирате координатите X и Y на змията. Например, ако змията трябва да се премести наляво, посоката X ще бъде "-10". Това ще актуализира координатата X, за да премахне 10 пиксела за всеки кадър от играта:

   функцияmoveSnake() {
    snakeSegments.unshift({ х: snakeX, г: змияY });
    змияX += посокаX;
    змияY += посокаY;
   }

5. В момента играта не премахва предишни сегменти, докато змията се движи. Това ще направи змията да изглежда така:
6. За да коригирате това, изчистете платното, преди да нарисувате новата змия във всеки кадър, в началото на функцията drawSnake():

   canvas2d.clearRect(0, 0, canvas.width, canvas.height);

7. Ще трябва също да премахнете последния елемент от масива snakeSegments, вътре във функцията moveSnake():

   докато (snakeSegments.length > snakeLength) {
    snakeSegments.pop();
   }

8. Отворете файла "index.html" и натиснете клавишите наляво, надясно, нагоре или надолу, за да преместите змията.

Как да добавите храна върху платното

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

1. Декларирайте нова променлива в горната част на файла, за да съхраните масив от парчета храна:

   вар точки = [];

2. Създайте нова функция. Вътре генерирайте произволни X и Y координати за точките. Можете също така да гарантирате, че само 10 точки са на дъската по всяко време:

   функцияspawnDots() {
   ако(точки.дължина < 10) {
   вар точка X = математика.floor(математика.random() * canvas.width);
   вар точка Y = математика.floor(математика.random() * canvas.height);
    dots.push({ х: dotX, г: точка Y });
    }
   }

3. След като генерирате координатите X и Y за храната, начертайте ги върху платното с червен цвят:

   за (вар аз = 0; i < точки.дължина; i++) {
    canvas2d.fillStyle = "червен";
    canvas2d.fillRect (точки[i].x, точки[i].y, 10, 10);
   }

4. Извикайте новата функция spawnDots() в цикъла на играта:

   функцияgameLoop() {
    moveSnake();
    drawSnake();
    spawnDots();
   ако(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

5. Отворете файла "index.html", за да видите храната на игралната дъска.

Как да накараме змията да расте

Можете да накарате змията да расте, като увеличите дължината й, когато се сблъска с точка за храна.

1. Създайте нова функция. Вътре в него преминете през всеки елемент в масива с точки:

   функцияcheckCollision() {
   за (вар аз = 0; i < точки.дължина; i++) {
   
    }
   }

2. Ако позицията на змията съвпада с координатите на всяка точка, увеличете дължината на змията и изтрийте точката:

   ако (змияX < точки[i].x + 10 && 
    snakeX + 10 > точки[i].x && 
    змияY < точки[i].y + 10 && 
    змияY + 10 > точки[i].y) {
    snakeLength++;
    dots.splice (i, 1);
   }

3. Извикайте новата функция checkCollision() в цикъла на играта:

   функцияgameLoop() {
    moveSnake();
    drawSnake();
    spawnDots();
    checkCollision();
   ако(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

4. Отворете файла "index.html" в уеб браузър. Преместете змията с помощта на клавиатурата, за да съберете парчетата храна и да отгледате змията.

Как да прекратите играта

За да приключите играта, проверете дали змията се е сблъскала със собствената си опашка или някоя от стените.

1. Създайте нова функция за отпечатване на предупреждение „Играта приключи“.

   функцияиграта приключи() {
    setTimeout(функция() {
    тревога("Играта приключи!");
    }, 500); 
    gameEnded = вярно
   }

2. Във функцията checkCollision() проверете дали змията е ударила някоя от стените на платното. Ако е така, извикайте функцията gameOver():

   ако (змияX < -10 || 
    snakeY < -10 || 
    snakeX > canvas.width+10 ||
    snakeY > canvas.height+10) {
    играта приключи();
   }

3. За да проверите дали главата на змията се е сблъскала с някой от сегментите на опашката, преминете през всяка част от змията:

   за (вар аз = 1; i 
   }

4. Във вътрешността на for-loop проверете дали местоположението на главата на змията съвпада с някой от сегментите на опашката. Ако е така, това означава, че главата се е сблъскала с опашка, така че прекратете играта:

   ако (snakeX snakeSegments[i].x && snakeY snakeSegments[i].y) {
    играта приключи();
   }

5. Отворете файла "index.html" в уеб браузър. Опитайте се да ударите стена или собствената си опашка, за да приключите играта.

Изучаване на концепции на JavaScript чрез игри

Създаването на игри може да бъде чудесен начин да направите вашето обучение по-приятно. Продължете да правите още игри, за да продължите да подобрявате знанията си за JavaScript.