Angry bulls confront each other.'s game

Click here for free DL of the app version that can save data.

No:12533

←

Prev Next

→

Angry bulls confront each other.
Developer User5181｜Date and time 23/8/19 10:20:59
Build time 20.876 sec｜Game capacity 3.043KB｜

Script

🐮

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
  <title>怒った牛が対決する</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .cow-container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .cow {
      font-size: 80px;
    }
    button {
      padding: 10px 20px;
      font-size: 20px;
      margin-top: 10px;
    }
    #result {
      font-size: 30px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div class="cow-container">
    <div class="cow" id="cow">🐮</div>
    <button onclick="attack()">ATTACK!</button>
    <div id="result"></div>
  </div>
  
  <script>
    // 初期のカウントダウン秒数
    let countdownSeconds = 3;

// ゲームが開始されているかを表すフラグ
    let isGameStarted = false;

// プレイヤーの攻撃力
    const playerAttackPower = 10;

// 怒った牛のHP
    let cowHP = 100;

// ページロード時にカウントダウンを開始する
    window.onload = function() {
      countdown();
    }

// カウントダウン関数
    function countdown() {
      const countdownElement = document.getElementById("result");
      countdownElement.innerText = countdownSeconds;
      countdownSeconds--;
      
      // カウントダウンが終了したらゲームを開始する
      if (countdownSeconds === -1) {
        countdownElement.innerText = "START!";
        isGameStarted = true;
        return;
      }
      
      // カウントダウンを1秒ごとに再帰的に実行する
      setTimeout(countdown, 1000);
    }

// プレイヤーの攻撃処理
    function attack() {
      if (!isGameStarted) {
        return;
      }
      
      const cowElement = document.getElementById("cow");
      const resultElement = document.getElementById("result");

// プレイヤーの攻撃力を牛のHPから減算する
      cowHP -= playerAttackPower;
      cowElement.innerText = "🐮 " + cowHP;

// 牛のHPが0以下になったらゲーム終了
      if (cowHP <= 0) {
        resultElement.innerText = "You Win!";
        return;
      }

// 牛の攻撃処理
      cowAttack();
    }

// 怒った牛の攻撃処理
    function cowAttack() {
      const cowElement = document.getElementById("cow");
      const resultElement = document.getElementById("result");

// プレイヤーのHPを1~20のランダムな値で減算する
      const playerHP = Math.floor(Math.random() * 20) + 1;
      resultElement.innerText = "The cow attacked you! Your HP: " + playerHP;

// プレイヤーのHPが0以下になったらゲーム終了
      if (playerHP <= 0) {
        resultElement.innerText += "\nYou Lose!";
        return;
      }

// 牛のコールバック処理を1秒後に実行する
      setTimeout(function() {
        cowElement.innerText = "🐮";
        resultElement.innerText = "";
      }, 1000);
    }
  </script>
</body>
</html>