Игра Corona Fighter с использованием JavaScript
В этой статье мы создадим игру covid fighter с использованием HTML, CSS и JavaScript. В этой игре мы создадим три объекта: первый объект будет представлять пользователя, который должен преодолеть несколько препятствий, чтобы добраться до конечного объекта.
Подход: сначала мы создадим HTML-макет, стилизуем его с помощью CSS, а затем напишем логику на JavaScript. В нашей игре первый объект представляет землю, второй - коронавирус, а третий - вакцину.
HTML-код: мы будем использовать HTML для разработки структуры или макета веб-страницы. Создайте холст HTML с идентификатором «mycanvas». Включите файл JavaScript «covid.js» в код HTML.
HTML
<!DOCTYPE html> < html > < body > < h1 >COVID-19 Fighter Game</ h1 > < canvas id = "mycanvas" ></ canvas > < script src = "covid.js" ></ script > </ body > </ html > |
Код CSS: CSS используется, чтобы придать общий стиль и сделать его более привлекательным. Придайте общий стиль всей странице, например цвет, выравнивание и цвет фона. Мы используем гибкость для центрирования холста и устанавливаем фоновое изображение на задний план нашей игры. Включить следующее в приведенном выше HTML кода в разделе стиля головной части кода.
тело { выравнивание текста: центр; цвет: #ffff; фон: # 000; } #mycanvas { дисплей: гибкий; align-items: center; justify-content: center; background-image: url (Assets / bg.gif) размер фона: обложка; }
Вывод: результат макета HTML и стиля CSS выглядит следующим образом.
Полученный результат не похож на желаемый, но мы настроим высоту и ширину холста с помощью JavaScript.
Логика: Основная логическая часть реализована с помощью JavaScript.
- По нашей логике при столкновении земного объекта с коронавирусом (второй объект) мы уменьшаем здоровье игрока на 50 пунктов.
- Первоначальное здоровье игрока будет 100.
- Когда здоровье игрока будет <= 0, наша игра закончится.
- Когда игрок достигнет третьего объекта, игрок выигрывает.
- Наша игра в основном разделена на шесть основных функций.
function load_assets () { } function init () { } функция isOverlap (rect1, rect2) { } function draw () { } function update () { } function gameloop () { }
Шаг 1:
- Первоначально загрузим все необходимые активы. Нам потребуется один враг, один игрок, победный звук, проигрышный звук и третий объект, который является вакциной.
- Мы создадим функцию load_assets (), которая загрузит все необходимые ресурсы.
JavaScript
function load_assets(){ // Enemy object enemy_img = new Image(); enemy_img.src = "Assets/enemy.png" ; // Main user player_img = new Image(); player_img.src = "Assets/fighter.png" ; // Vaccine gem_img = new Image; gem_img.src = "Assets/vac.gif" ; // Winning sound win = new Audio(); win.src = "Audio/won.wav" ; // Losing sound lose = new Audio(); lose.src = "Audio/dead.mp3" ; } |
Шаг 2:
- На этом этапе мы инициализируем наше состояние игры. Мы установим высоту и ширину холста.
- Мы также установим количество вторых объектов. Мы создадим пять врагов, установив их общее положение, скорость, высоту и ширину.
- Мы также создадим объект игрока со свойствами, такими как положение, высота, ширина, скорость, здоровье и состояние движения.
- Создайте объект-камень, который будет представлять конечное состояние нашей игры с такими свойствами, как высота, ширина и положение.
- В конце добавьте прослушиватель событий с событиями mousedown и mouseup, чтобы переместить проигрыватель и остановить проигрыватель.
- Мы готовы к первоначальной настройке. Давайте посмотрим на результат ниже.
JavaScript
function init(){ cvs = document.getElementById( 'mycanvas' ); // Setting the height and width of canvas W = cvs.width = 1252; H = cvs.height = 516; // Getting the context the of canvas pen = cvs.getContext( '2d' ); // Initially setting the variable to false game_over = false ; // Creating the enemies object with // coordinates xy width(w) height(h) // and speed e1 = { x:200, y:50, w:80, h:80, speed:20, }; e2 = { x:450, y:150, w:80, h:80, speed:35, }; e3 = { x:700, y:300, w:80, h:80, speed:40, }; e4 = { x:900, y:100, w:80, h:80, speed:30, }; // Array of enemies enemy = [e1, e2, e3, e4]; // Creating the player object player = { x:20, y:H/2, w:110, h:110, speed:30, health:100, moving: "false" } // Creating the vaccine gem gem = { x:W-150, y:H/2, w:150, h:150, } // The main part lets move the player // using event mouse down and stop //using mouse up cvs.addEventListener( 'mousedown' , function (){ console.log( "Mouse Pressed" ); player.moving = true ; }); cvs.addEventListener( 'mouseup' , function (){ console.log( "Mouse Released" ); player.moving = false ; }); } |
Выход:
Шаг 3:
- На этом этапе мы увидим функцию перекрытия, которую мы будем использовать, чтобы проверить, сталкивается ли наш игрок с каким-либо другим объектом, может быть врагом или драгоценным камнем (вакциной).
JavaScript
function isOverlap(rect1, rect2) { if (rect1.x < rect2.x + rect2.w && rect1.x + rect1.w > rect2.x && rect1.y < rect2.y + rect2.h && rect1.y + rect1.h > rect2.y) { return true ; } return false ; } |
Шаг 4:
- Мы увидим функцию draw (), которая поможет рисовать графические изображения вражеского игрока и драгоценного камня в их соответствующих положениях.
JavaScript
function draw() { // Drawing the images for (let i = 0; i < enemy.length; i++) { pen.drawImage(enemy_img, enemy[i].x, enemy[i].y, enemy[i].w, enemy[i].h); } // Draw the player pen.drawImage(player_img, player.x, player.y, player.w, player.h); // Draw the vaccine pen.drawImage(gem_img, gem.x, gem.y, gem.w, gem.h); // Displaying score pen.fillStyle = "white" ; pen.font = "30px Roboto" ; pen.fillText( "Score " + player.health, 30, 30); } |
Шаг 5:
- Следующее реализует функцию update ().
- Он возвращается по окончании игры.
- Если игрок все еще движется, это увеличит скорость и здоровье игрока.
- Если наш игрок сталкивается с любым из врагов, он издаст звук проигрыша и уменьшит здоровье на 50 очков.
- Если здоровье становится отрицательным или 0, игра заканчивается и возвращается.
- Если игра еще не окончена, мы увидим, не сталкивается ли наш игрок с вакциной (драгоценным камнем). В этом случае игра окончена, проигрывается выигрышный звук и отображается счет.
- Если игра еще не окончена, она скорректирует скорость и позиции врага.
JavaScript
function update() { // If player is moving if (game_over){ return ; } if (player.moving == true ){ player.x += player.speed; player.health += 20; } // Checking collision of player // with all enemies for (let i = 0; i < enemy.length; i++){ if (isOverlap(enemy[i], player)){ lose.play(); player.health -= 50; if (player.health < 0){ draw(); lose.play(); alert( "You Lose " ); game_over = true ; return ; } } } // checking the player and vaccine // collision for the win. if (isOverlap(player, gem)){ win.play(); alert( "You Won " + player.health); game_over = true ; return ; } // Adjusting the speed and positions // of enemy for (let i = 0; i<enemy.length; i++){ enemy[i].y += enemy[i].speed; if (enemy[i].y > H-enemy[i].h || enemy[i].y <= 0){ enemy[i].speed *= -1; } } } |
Шаг 6:
- Давайте завершим функцию gameloop (), которую мы будем использовать для запуска игры.
- Если состояние игры завершено, он очистит весь интервал, который мы вызываем в конце.
- Мы нарисуем объект и обновим вещи в соответствии с действиями пользователя.
JavaScript
function gameloop(){ if (game_over){ clearInterval(f); } draw(); update(); } |
Шаг 7:
- Примечание. Мы вызываем все функции вместе в файле JavaScript «covid.js».
- Сначала мы вызовем функции load_assets () и init () .
- Мы будем вызывать функцию gameloop () с интервалом каждые 100 мс.
JavaScript
load_assets(); init(); var f = setInterval(gameloop, 100); |
Выход:
Исходный код:
https://github.com/Nandini-72/Covid_Fighter_Game