JavaScriptを使用したゲームの作成-11

21102 ワード
テキストリンク
最後に設計を適用します.
好みによっては、簡単にhtmlやcssを変えればいいのです.
フォントはgoogle fontでpress startというフォントを使用することにします.
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Rubik+Beastly&display=swap"
    rel="stylesheet"
  />
  <style>
    * {
      box-sizing: border-box;
      font-family: "Press Start 2P", cursive;
    }
  </style>
</head>
スタミナスティック部分も修正して
      <!-- player health -->
      <div
        style="
          position: relative;
          width: 100%;
          display: flex;
          justify-content: flex-end;
          border-top: 4px solid white;
          border-left: 4px solid white;
          border-bottom: 4px solid white;
          border-top-left-radius: 7px;
          border-bottom-left-radius: 7px;
        "
      >
        <div style="background-color: red; height: 30; width: 100%"></div>
        <div
          id="playerHealth"
          style="
            position: absolute;
            background: #818cf8;
            top: 0;
            right: 0;
            bottom: 0;
            width: 100%;
          "
        ></div>
      </div>
      <!-- enemy health -->
      <div
        style="
          position: relative;
          width: 100%;
          border-top: 4px solid white;
          border-right: 4px solid white;
          border-bottom: 4px solid white;
          border-top-right-radius: 7px;
          border-bottom-right-radius: 7px;
        "
      >
        <div style="background-color: red; height: 30"></div>
        <div
          id="enemyHealth"
          style="
            position: absolute;
            background: #818cf8;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
          "
        ></div>
この過程で、現在体力と最大体力が分かれているので、このような問題が発生します.

この問題はhealthの親divコンテナのheight値をクリアすると解決します.
次にタイマー部分も修正しました.
      <div
        id="timer"
        style="
          background-color: black;
          width: 100px;
          height: 50px;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          border: 4px solid white;
          border-radius: 7px;
        "
      >
        10
      </div>
背景も修正する必要があるように見えますが、鮮明すぎて役が見えません.
function animate() {
  window.requestAnimationFrame(animate);
  c.fillStyle = "black";
  c.fillRect(0, 0, canvas.width, canvas.height);
  background.update();
  shop.update();
  c.fillStyle = "rgba(255, 255, 255, 0.1)";
  c.fillRect(0, 0, canvas.width, canvas.height);
  player.update();
  enemy.update();
キャラクタを描く前に、背景を透明に設定して、キャラクタをよりはっきり見せるようにします.
最後に、スタミナバーが減少したときにアニメーションが与えられ、gsapを使えば適用されます.
https://cdnjs.com/libraries/gsap/3.10.3
ここで受け取ることができますが、バージョンによってはアドレスが異なる場合があります.
    <canvas></canvas>
  </div>

  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js"
    integrity="sha512-6zTDRWNxo8vI6JZYDCwhrJpg5icK3P4HNnW3czsO5Scb3lAoPDam+/wF3eog4hxcl0h44d0XlIcFkuoSaWHQ2g=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
  ></script>
  <script src="js/classes.js"></script>
  <script src="js/utils.js"></script>
  <script src="index.js"></script>
</body>
一番下のスクリプトに追加し、体力を減らすコード:
  //detect collision & player get hit
  if (
    rectangularCollision({ rectangle1: enemy, rectangle2: player }) &&
    enemy.isAttacking &&
    enemy.framesCurrent === 2
  ) {
    player.takeHit();
    enemy.isAttacking = false;
    // document.querySelector("#playerHealth").style.width = player.health + "%";
    console.log("enemy attack");
    gsap.to("#playerHealth", { width: player.health + "%" });
  }
このセクションでは、クエリーセレクタの代わりにgsapを使用すればよい.
上のコードはプレイヤーが攻撃された時のコードであり、逆に敵が攻撃された場合も同様に適用されます.
火星の土地を共同購入(Toy Project)
C#MPI第2課MPI送信構造体