Microsoft | Development for beginners (Episode 30)

This lesson covers the basics of GitHub, a platform to host and manage changes to your code.

 · 4 phút đọc.

This lesson covers the basics of GitHub, a platform to host and manage changes to your code.

Build a Space Game Part 5: Scoring and Lives

Pre-Lecture Quiz

Pre-lecture quiz

In this lesson, you’ll learn how to add scoring to a game and calculate lives.

Draw text on the screen

To be able to display a game score on the screen, you’ll need to know how to place text on the screen. The answer is using the fillText() method on the canvas object. You can also control other aspects like what font to use, the color of the text and even its alignment (left, right, center). Below is some code drawing some text on the screen.

ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "right";
ctx.fillText("show this on the screen", 0, 0);

✅ Read more about how to add text to a canvas, and feel free to make yours look fancier!

Life, as a game concept

The concept of having a life in a game is only a number. In the context of a space game it’s common to assign a set of lives that get deducted one by one when your ship takes damage. It’s nice if you can show a graphical representation of this like miniships or hearts instead of a number.

What to build

Let’s add the following to your game:

  • Game score: For every enemy ship that is destroyed, the hero should be awarded some points, we suggest a 100 points per ship. The game score should be shown in the bottom left.
  • Life: Your ship has three lives. You lose a life every time an enemy ship collides with you. A life score should be displayed at the bottom right and be made out of the following graphic life image.

Locate the files that have been created for you in the your-work sub folder. It should contain the following:

-| assets
  -| enemyShip.png
  -| player.png
  -| laserRed.png
-| index.html
-| app.js
-| package.json

You start your project the your_work folder by typing:

cd your-work
npm start

The above will start a HTTP Server on address http://localhost:5000. Open up a browser and input that address, right now it should render the hero and all the enemies, and as you hit your left and right arrows, the hero moves and can shoot down enemies.

Add code

  1. Copy over the needed assets from the https://data.nhavantuonglai.com/image/ folder into your-work folder; you will add a life.png asset. Add the lifeImg to the window.onload function:

    lifeImg = await loadTexture("assets/life.png");
    
  2. Add the lifeImg to the list of assets:

    let heroImg,
    ...
    lifeImg,
    ...
    eventEmitter = new EventEmitter();
    
  3. Add variables. Add code that represents your total score (0) and lives left (3), display these scores on a screen.

  4. Extend updateGameObjects() function. Extend the updateGameObjects() function to handle enemy collisions:

    enemies.forEach(enemy => {
        const heroRect = hero.rectFromGameObject();
        if (intersectRect(heroRect, enemy.rectFromGameObject())) {
          eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
        }
      })
    
  5. Add life and points.

    1. Initialize variables. Under this.cooldown = 0 in the Hero class, set life and points:

      this.life = 3;
      this.points = 0;
      
    2. Draw variables on screen. Draw these values to screen:

      function drawLife() {
        // TODO, 35, 27
        const START_POS = canvas.width - 180;
        for(let i=0; i < hero.life; i++ ) {
          ctx.drawImage(
            lifeImg, 
            START_POS + (45 * (i+1) ), 
            canvas.height - 37);
        }
      }
      
      function drawPoints() {
        ctx.font = "30px Arial";
        ctx.fillStyle = "red";
        ctx.textAlign = "left";
        drawText("Points: " + hero.points, 10, canvas.height-20);
      }
      
      function drawText(message, x, y) {
        ctx.fillText(message, x, y);
      }
      
      
    3. Add methods to Game loop. Make sure you add these functions to your window.onload function under updateGameObjects():

      drawPoints();
      drawLife();
      
  6. Implement game rules. Implement the following game rules:

    1. For every hero and enemy collision, deduct a life.

      Extend the Hero class to do this deduction:

      decrementLife() {
        this.life--;
        if (this.life === 0) {
          this.dead = true;
        }
      }
      
    2. For every laser that hits an enemy, increase game score with a 100 points.

      Extend the Hero class to do this increment:

        incrementPoints() {
          this.points += 100;
        }
      

      Add these functions to your Collision Event Emitters:

      eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
         first.dead = true;
         second.dead = true;
         hero.incrementPoints();
      })
      
      eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
         enemy.dead = true;
         hero.decrementLife();
      });
      

✅ Do a little research to discover other games that are created using JavaScript/Canvas. What are their common traits?

By the end of this work, you should see the small ‘life’ ships at the bottom right, points at the bottom left, and you should see your life count decrement as you collide with enemies and your points increment when you shoot enemies. Well done! Your game is almost complete.


🚀 Challenge

Your code is almost complete. Can you envision your next steps?

Post-Lecture Quiz

Post-lecture quiz

Review & Self Study

Research some ways that you can increment and decrement game scores and lives. There are some interesting game engines like PlayFab. How could using one of these would enhance your game?

Assignment

Build a Scoring Game

Share:
Quay lại.

Có thể bạn chưa đọc

Xem tất cả »

Liên lạc thông qua Instagram

Liên lạc qua Instagram là một trong những cách tiện lợi nhất để kết nối với nhavantuonglai. Với tài khoản Instagram @nhavantuonglai, bạn có thể dễ dàng gửi tin nhắn trực tiếp để nhận tư vấn hoặc hỏi đáp về các dịch vụ. nhavantuonglai thường xuyên cập nhật thông tin, chia sẻ bài viết mới, và tổ chức các sự kiện đặc biệt trên Instagram, giúp bạn luôn được cập nhật nhanh chóng và chính xác. Tương tác qua Instagram không chỉ giúp bạn giải quyết vấn đề nhanh chóng mà còn tạo nên một kênh giao tiếp mở, gần gũi với khách hàng.

  • Tức thời và nhanh chóng

    Một trong những lợi ích lớn khi liên lạc qua Instagram là tính tức thời và nhanh chóng. Với tính năng tin nhắn trực tiếp, bạn có thể nhận được phản hồi gần như ngay lập tức từ nhavantuonglai. Điều này rất hữu ích khi bạn cần tư vấn gấp hoặc có những câu hỏi khẩn cấp về dịch vụ. Thông qua Instagram, mọi thông tin được trao đổi nhanh chóng, giúp tiết kiệm thời gian và nâng cao hiệu quả giao tiếp giữa khách hàng và nhavantuonglai.

  • Thân thiện và gần gũi

    Instagram là một nền tảng thân thiện và gần gũi, giúp bạn cảm thấy thoải mái khi liên lạc với nhavantuonglai. Giao diện đơn giản, dễ sử dụng của Instagram tạo điều kiện cho việc tương tác trở nên dễ dàng và tự nhiên hơn. Hơn nữa, thông qua các hình ảnh và video được chia sẻ trên trang Instagram của nhavantuonglai, bạn có thể cảm nhận được phong cách làm việc và giá trị mà họ mang lại, từ đó tạo nên sự kết nối gần gũi và tin cậy.

Trao đổi trên email

Liên lạc qua email với nhavantuonglai là một phương thức phổ biến và hiệu quả, đặc biệt phù hợp cho các giao dịch, tư vấn chuyên sâu hoặc yêu cầu dịch vụ chi tiết. Bạn có thể gửi email đến địa chỉ info@nhavantuonglai.com để nhận được phản hồi chuyên nghiệp và đầy đủ từ đội ngũ của chúng tôi. Email là kênh giao tiếp chính thức và có tính lưu trữ cao, giúp bạn dễ dàng theo dõi và quản lý thông tin. nhavantuonglai luôn cam kết trả lời email của khách hàng một cách nhanh chóng và chi tiết, đảm bảo bạn nhận được sự hỗ trợ tốt nhất.

  • Tin cậy

    Liên lạc qua email mang lại sự tin cậy cao cho khách hàng của nhavantuonglai. Email không chỉ là một phương tiện giao tiếp chính thức mà còn có khả năng lưu trữ và bảo mật thông tin tốt. Khi gửi email, bạn có thể yên tâm rằng mọi thông tin và yêu cầu của bạn sẽ được ghi nhận và xử lý một cách chuyên nghiệp. Việc sử dụng email giúp xây dựng lòng tin giữa khách hàng và nhavantuonglai, đảm bảo rằng mọi giao dịch và tư vấn đều được thực hiện một cách minh bạch và đáng tin cậy.

  • Chuyên nghiệp

    Giao tiếp qua email với nhavantuonglai thể hiện sự chuyên nghiệp trong mọi khía cạnh. Từ cách thức trả lời, nội dung phản hồi cho đến các tài liệu kèm theo, tất cả đều được chăm chút kỹ lưỡng để mang lại trải nghiệm tốt nhất cho khách hàng. Email cho phép nhavantuonglai cung cấp thông tin chi tiết, rõ ràng và có cấu trúc, giúp bạn hiểu rõ hơn về dịch vụ và các đề xuất của chúng tôi. Sự chuyên nghiệp trong việc giao tiếp qua email không chỉ nâng cao uy tín của nhavantuonglai mà còn giúp bạn cảm thấy an tâm và tin tưởng hơn khi sử dụng dịch vụ.

Một vài sản phẩm đã dựng

Ép tiêu bản hoa khô

Cồn Hến sông Hương

Hoàng hôn đầm Lập An

nhavantuonglai · Ghiblis Music Piano Playlist