AI game creator

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

No:4588

6550

←

Prev Next

→

qigong cannon
Developer User3788｜Date and time 23/6/28 11:51:33
Build time 65.146 sec｜Game capacity 6.477KB｜

Script

了解です。気功砲というゲームを作成します。以下は HTML ファイルのコードです。

このコードでは、気功砲のゲームを作成し、スマホで操作することができます。HTML ファイル内には `<canvas>` タグがあり、JavaScript の `ctx` オブジェクトを使用して描画されます。プレイヤーは絵文字の「👍」で表され、矢印キーで操作することができます。プレイヤーはスペースキーで弾を発射することもできます。敵は絵文字の「👎」で表され、自動的に移動します。弾と敵の衝突が検出され、衝突すると敵が消えます。以上のコードを HTML ファイルに保存し、ブラウザで開くことで気功砲のゲームをプレイすることができます。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

了解です。気功砲というゲームを作成します。以下は HTML ファイルのコードです。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>気功砲</title>
  <style>
    canvas {
      border: 1px solid #000;
      background: #eee;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    
    const playerSize = 50;
    const enemySize = 30;
    const playerSpeed = 5;
    const enemySpeed = 3;
    const bulletSpeed = 8;
    
    const player = {
      x: canvas.width / 2 - playerSize / 2,
      y: canvas.height / 2 - playerSize / 2,
      width: playerSize,
      height: playerSize,
      color: '👍',
      dx: 0,
      dy: 0,
      fire: false
    };
    
    const bullets = [];
    
    const enemies = [
      { x: 50, y: 50, width: enemySize, height: enemySize, color: '👎', dx: 1, dy: 1 },
      { x: canvas.width - 50 - enemySize, y: 50, width: enemySize, height: enemySize, color: '👎', dx: -1, dy: 1 },
      { x: canvas.width - 50 - enemySize, y: canvas.height - 50 - enemySize, width: enemySize, height: enemySize, color: '👎', dx: -1, dy: -1 },
      { x: 50, y: canvas.height - 50 - enemySize, width: enemySize, height: enemySize, color: '👎', dx: 1, dy: -1 }
    ];
    
    function drawPlayer() {
      ctx.fillStyle = player.color;
      ctx.fillRect(player.x, player.y, player.width, player.height);
    }
    
    function drawBullets() {
      for (let i = 0; i < bullets.length; i++) {
        const bullet = bullets[i];
        ctx.fillStyle = bullet.color;
        ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
      }
    }
    
    function drawEnemies() {
      for (let i = 0; i < enemies.length; i++) {
        const enemy = enemies[i];
        ctx.fillStyle = enemy.color;
        ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
      }
    }
    
    function updatePlayer() {
      player.x += player.dx;
      player.y += player.dy;
    
      if (player.x < 0) {
        player.x = 0;
      }
      if (player.x + player.width > canvas.width) {
        player.x = canvas.width - player.width;
      }
      if (player.y < 0) {
        player.y = 0;
      }
      if (player.y + player.height > canvas.height) {
        player.y = canvas.height - player.height;
      }
    }
    
    function updateBullets() {
      for (let i = 0; i < bullets.length; i++) {
        const bullet = bullets[i];
        bullet.x += bullet.dx;
        bullet.y += bullet.dy;
    
        if (bullet.x < 0 || bullet.x + bullet.width > canvas.width || bullet.y < 0 || bullet.y + bullet.height > canvas.height) {
          bullets.splice(i, 1);
          i--;
        }
      }
    }
    
    function updateEnemies() {
      for (let i = 0; i < enemies.length; i++) {
        const enemy = enemies[i];
        enemy.x += enemy.dx;
        enemy.y += enemy.dy;
    
        if (enemy.x < 0 || enemy.x + enemy.width > canvas.width) {
          enemy.dx *= -1;
        }
        if (enemy.y < 0 || enemy.y + enemy.height > canvas.height) {
          enemy.dy *= -1;
        }
      }
    }
    
    function checkCollision() {
      for (let i = 0; i < bullets.length; i++) {
        const bullet = bullets[i];
    
        for (let j = 0; j < enemies.length; j++) {
          const enemy = enemies[j];
    
          if (bullet.x < enemy.x + enemy.width && 
              bullet.x + bullet.width > enemy.x && 
              bullet.y < enemy.y + enemy.height && 
              bullet.y + bullet.height > enemy.y) {
            bullets.splice(i, 1);
            enemies.splice(j, 1);
            i--;
            break;
          }
        }
      }
    }
    
    function updateGame() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    
      drawPlayer();
      drawBullets();
      drawEnemies();
    
      updatePlayer();
      updateBullets();
      updateEnemies();
      checkCollision();
    
      requestAnimationFrame(updateGame);
    }
    
    function handleKeyDown(e) {
      if (e.key === 'ArrowUp') {
        player.dy = -playerSpeed;
      }
      if (e.key === 'ArrowDown') {
        player.dy = playerSpeed;
      }
      if (e.key === 'ArrowLeft') {
        player.dx = -playerSpeed;
      }
      if (e.key === 'ArrowRight') {
        player.dx = playerSpeed;
      }
      if (e.key === ' ') {
        player.fire = true;
      }
    }
    
    function handleKeyUp(e) {
      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
        player.dy = 0;
      }
      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
        player.dx = 0;
      }
      if (e.key === ' ') {
        player.fire = false;
      }
    }
    
    function handleClick(e) {
      const rect = canvas.getBoundingClientRect();
      const mouseX = e.clientX - rect.left;
      const mouseY = e.clientY - rect.top;
    
      const bullet = {
        x: player.x + player.width / 2,
        y: player.y + player.height / 2,
        width: 10,
        height: 10,
        color: '✨',
        dx: (mouseX - player.x - player.width / 2) * bulletSpeed / Math.sqrt((mouseX - player.x - player.width / 2) ** 2 + (mouseY - player.y - player.height / 2) ** 2),
        dy: (mouseY - player.y - player.height / 2) * bulletSpeed / Math.sqrt((mouseX - player.x - player.width / 2) ** 2 + (mouseY - player.y - player.height / 2) ** 2)
      };
    
      bullets.push(bullet);
    }
    
    window.addEventListener('keydown', handleKeyDown);
    window.addEventListener('keyup', handleKeyUp);
    canvas.addEventListener('click', handleClick);
    
    updateGame();
  </script>
</body>
</html>
```