极客教程JavaScript 冠状战斗游戏
在本文中，我们将使用HTML、CSS和JavaScript创建一个冠状战斗游戏。在这个游戏中，我们将创建三个对象，第一个对象代表用户，用户需要越过几个障碍物才能到达最终目标。
方法： 我们首先创建HTML布局，使用CSS对其进行样式设置，然后在JavaScript中编写逻辑代码。在我们的游戏中，第一个对象代表地球，第二个对象代表冠状病毒，第三个对象代表疫苗。
HTML代码： 我们将使用HTML来设计网页的结构或布局。创建一个id为“mycanvas”的HTML画布。在HTML代码中包含JavaScript文件“covid.js”。
<!DOCTYPE html>
<html>
<body>
<h1>COVID-19 Fighter Game</h1>
<canvas id="mycanvas"></canvas>
<script src="covid.js"></script>
</body>
</html>
CSS代码: CSS用于提供一般样式，使其更具视觉吸引力。为整个页面提供一般样式，如颜色、对齐方式和背景颜色。我们使用 flex 将画布居中，并将背景图像设置为游戏的背景。在上述HTML代码中，在代码的 head 部分的 style 部分中包含以下内容。
body {
text-align: center;
color: #ffff;
background: #000;
}
#mycanvas{
display: flex;
align-items: center;
justify-content: center;
background-image: url(Assets/bg.gif)
background-size: cover;
}
输出： HTML布局和CSS样式的结果如下所示。
输出结果与期望的输出不一样，但是我们可以使用JavaScript调整画布的高度和宽度。
逻辑： 主要逻辑部分是使用JavaScript实现的。
- 根据我们的逻辑，当地球对象与冠状病毒（第二个对象）发生碰撞时，会使玩家的健康值减少50点。
- 玩家的初始健康值为100。
- 当玩家的健康值<=0时，游戏结束。
- 当玩家接触到第三个对象时，玩家获胜。
- 我们的游戏基本上分为六个基本函数。
function load_assets(){
}
function init(){
}
function isOverlap(rect1, rect2){
}
function draw(){
}
function update(){
}
function gameloop(){
}
步骤1：
- 首先，我们将加载所有所需的资源。我们需要一个敌人，一个玩家，胜利声音，失败声音以及第三个物体，即疫苗。
- 我们将创建一个名为 load_assets() 的函数，用于加载所有所需的资源。
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：
- 在这个步骤中，我们将初始化游戏的状态。我们将设置画布的高度和宽度。
- 我们还将设置第二个对象的数量。通过设置敌人的一般位置、速度、高度和宽度来创建五个敌人。
- 我们还将创建玩家对象，具有位置、高度、宽度、速度、生命值和移动状态等属性。
- 创建一个宝石对象，代表游戏的最终状态，具有高度、宽度和位置等属性。
- 最后，添加事件侦听器，用于鼠标按下和鼠标抬起事件，以移动玩家并停止玩家。
- 我们已经完成初始设置。让我们看一下下面的输出。
function init(){
cvs = document.getElementById('mycanvas');
// Setting the height and width of canvas
W = cvs.width = 1252;
H = cvs.height = 516;
// Getting the context of canvas
pen = cvs.getContext('2d');
// Initially setting the variable to false
game_over = false;
// Creating the enemies object with
// coordinates x y 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：
- 在这一步中，我们将看到重叠函数，我们将用它来检查我们的玩家是否与其他物体发生碰撞，可能是敌人或宝石（疫苗）。
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() 函数，它将帮助在敌人玩家和宝石的相应位置绘制图形图像。
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，游戏结束并返回。
- 如果游戏仍未结束，我们将检查玩家是否与疫苗（宝石）碰撞。在这种情况下，游戏结束，播放胜利的声音，并警报得分。
- 如果游戏仍未结束，将调整敌人的速度和位置。
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() 函数，我们将用它来运行游戏。
- 如果游戏状态结束，它将清除我们在最后调用的整个间隔。
- 我们将根据用户的操作绘制对象并更新事物。
function gameloop(){
if(game_over){
clearInterval(f);
}
draw();
update();
}
步骤7：
- 注意： 我们在JavaScript文件“covid.js”中一起调用所有函数。
- 首先，我们会调用 load_assets() 和 init() 函数。
- 我们会在每100毫秒的间隔内调用 gameloop() 函数。
load_assets();
init();
var f = setInterval(gameloop, 100);
源代码：https://github.com/Nandini-72/Covid_Fighter_Game