💥Predatory Economy💥Environment💥.'s game | AI game creator

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

No:3241

475

💥Predatory Economy💥Environment💥.
Developer User3589｜Date and time 23/6/24 9:45:29
Build time 54.329 sec｜Game capacity 5.694KB｜

💥略奪経済💥環境💥のゲームを作ってみました！以下が実装されたhtmlファイルになります。JavaScriptも含まれています。

💥略奪経済💥環境💥ゲームに参加しよう！君は地球を守る環境保護団体「Green Earth」の代表だ。大企業たちは違法な手段で自然資源を奪い続け、環境を破壊している。君の使命は、環境を守りながら大企業たちの略奪経済を阻止することだ！準備はいいか？

スコア：0

このゲームは、プレイヤーがクリックしてオブジェクトを破壊し、スコアを稼ぎます。しかし、オブジェクトがキャンバスの外に出てしまったら、スコアは得られません。プレイヤーには30秒の時間制限があり、時間が経過するとゲームは自動的に終了します。プレイヤーはスタートボタンを押してゲームを開始し、いつでもストップボタンを押して中止することができます。このゲームは、スマホでもプレイできるように設計されています。大小のオブジェクトがキャンバス上を移動するため、プレイヤーは指でタップしてオブジェクトを破壊することができます。このゲームのテーマは「💥略奪経済💥環境💥」です。プレイヤーは環境保護団体の代表として、大企業たちの違法な略奪経済を阻止しながら、環境を守ります。このゲームが一部の人々に環境問題に対する意識を高める手助けになることを期待しています。

→ 　

0　

0　

[PR]現在の新着人気ランキング

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

(C)2023 HisashiApp

💥略奪経済💥環境💥のゲームを作ってみました！

以下が実装されたhtmlファイルになります。JavaScriptも含まれています。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>💥略奪経済💥環境💥</title>
  <style>
    #wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
    #description {
      text-align: center;
      font-size: 1.5rem;
      margin-bottom: 2rem;
    }
    #score {
      font-size: 3rem;
      margin-bottom: 2rem;
    }
    .btn {
      display: inline-block;
      padding: 1rem 2rem;
      margin: 1rem;
      border: none;
      border-radius: 2rem;
      font-size: 1.5rem;
      background-color: #FFA07A;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <p id="description">💥略奪経済💥環境💥ゲームに参加しよう！君は地球を守る環境保護団体「Green Earth」の代表だ。大企業たちは違法な手段で自然資源を奪い続け、環境を破壊している。君の使命は、環境を守りながら大企業たちの略奪経済を阻止することだ！準備はいいか？</p>
    <p id="score">スコア：0</p>
    <button class="btn" id="start-btn">スタート！</button>
    <button class="btn" id="stop-btn" style="display:none;">ストップ！</button>
    <canvas id="canvas" width="400" height="400"></canvas>
  </div>
  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

let score = 0;
    let time = 30;
    let objs = [];

class Object {
      constructor(x, y, size, speed) {
        this.x = x;
        this.y = y;
        this.size = size;
        this.speed = speed;
        this.color = '#32CD32';
      }

draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI*2);
        ctx.fillStyle = this.color;
        ctx.fill();
      }

update() {
        this.y += this.speed;
        this.draw();
      }
    }

function init() {
      canvas.style.display = 'block';
      objs = [];
      score = 0;
      time = 30;
      document.getElementById('score').textContent = `スコア：${score}`;
      drawTime();
    }

function drawTime() {
      ctx.font = '2rem sans-serif';
      ctx.fillStyle = '#000';
      ctx.fillText(`残り時間：${time}s`, 50, 50);
    }

function spawnObj() {
      const x = Math.random() * canvas.width;
      const y = 0;
      const size = Math.random() * 20 + 10;
      const speed = Math.random() * 3 + 1;
      objs.push(new Object(x, y, size, speed));
    }

function animate() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawTime();
      objs.forEach((obj, index) => {
        obj.update();
        if(obj.y > canvas.height) {
          objs.splice(index, 1);
        }
      });
      requestAnimationFrame(animate);
    }

canvas.addEventListener('click', (e) => {
      objs.forEach((obj, index) => {
        const dist = Math.hypot(e.clientX - obj.x, e.clientY - obj.y);
        if(dist - obj.size < 0) {
          objs.splice(index, 1);
          score += Math.floor(obj.size * obj.speed);
          document.getElementById('score').textContent = `スコア：${score}`;
        }
      });
    });

document.getElementById('start-btn').addEventListener('click', () => {
      init();
      setInterval(() => {
        if(time > 0) {
          time--;
        } else {
          canvas.style.display = 'none';
          document.getElementById('start-btn').textContent = 'もう一度やる';
          document.getElementById('start-btn').style.display = 'block';
          document.getElementById('stop-btn').style.display = 'none';
          alert(`時間切れ！スコアは${score}点だ！`);
        }
      }, 1000);
      animate();
      setInterval(() => {
        spawnObj();
      }, 750);
      document.getElementById('start-btn').style.display = 'none';
      document.getElementById('stop-btn').style.display = 'block';
    });

document.getElementById('stop-btn').addEventListener('click', () => {
      canvas.style.display = 'none';
      document.getElementById('start-btn').style.display = 'block';
      document.getElementById('stop-btn').style.display = 'none';
      alert(`中止されました！スコアは${score}点だ！`);
    });
  </script>
</body>
</html>
```

このゲームは、プレイヤーがクリックしてオブジェクトを破壊し、スコアを稼ぎます。しかし、オブジェクトがキャンバスの外に出てしまったら、スコアは得られません。プレイヤーには30秒の時間制限があり、時間が経過するとゲームは自動的に終了します。プレイヤーはスタートボタンを押してゲームを開始し、いつでもストップボタンを押して中止することができます。

このゲームは、スマホでもプレイできるように設計されています。大小のオブジェクトがキャンバス上を移動するため、プレイヤーは指でタップしてオブジェクトを破壊することができます。

このゲームのテーマは「💥略奪経済💥環境💥」です。プレイヤーは環境保護団体の代表として、大企業たちの違法な略奪経済を阻止しながら、環境を守ります。このゲームが一部の人々に環境問題に対する意識を高める手助けになることを期待しています。