Игра Corona Fighter с использованием JavaScript

Опубликовано: 30 Ноября, 2021

В этой статье мы создадим игру 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