AI game creator

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

No:32066

←

Prev Next

→

Shooting Game
Developer User15330｜Date and time 23/12/29 19:43:23
Build time 53.303 sec｜Game capacity 4.56KB｜

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>
    canvas {
      background: #ddd;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// 玩家相关变量
    const player = {
      x: canvas.width / 2,
      y: canvas.height - 30,
      width: 50,
      height: 50,
      color: "#0095DD",
      speed: 5
    };

// 子弹相关变量
    const bullet = {
      x: player.x + player.width / 2,
      y: player.y,
      a: 10, // 控制子弹移动的参数
      radius: 4,
      color: "#0095DD",
      speed: 5
    };
    let bulletFired = false; // 标记子弹是否已发射

// 敌人相关变量
    const enemies = [];
    const enemyCount = 7;
    const enemyWidth = 40;
    const enemyHeight = 40;
    const enemyColor = "#FF0000";
    const enemySpeed = 2;

// 游戏结束标志
    let gameover = false;

// 创建敌人
    for (let i = 0; i < enemyCount; i++) {
      enemies.push({
        x: Math.random() * (canvas.width - enemyWidth),
        y: Math.random() * (canvas.height / 2),
        width: enemyWidth,
        height: enemyHeight,
        color: enemyColor,
        speed: enemySpeed
      });
    }

// 键盘按下事件处理
    document.addEventListener("keydown", keyDownHandler);
    document.addEventListener("keyup", keyUpHandler);

// 键盘按下事件处理函数
    function keyDownHandler(e) {
      if (gameover) {
        return;
      }

if (e.keyCode === 32 && !bulletFired) {
        bullet.x = player.x + player.width / 2;
        bullet.y = player.y;
        bulletFired = true;
      }

if (e.keyCode === 37) {
        player.x -= player.speed;
      }

if (e.keyCode === 39) {
        player.x += player.speed;
      }
    }

// 键盘松开事件处理函数
    function keyUpHandler(e) {
      if (e.keyCode === 37 || e.keyCode === 39) {
        player.x = player.x; // 停止移动
      }
    }

// 检测两个矩形是否相交
    function checkCollision(rect1, rect2) {
      if (rect1.x < rect2.x + rect2.width &&
        rect1.x + rect1.width > rect2.x &&
        rect1.y < rect2.y + rect2.height &&
        rect1.y + rect1.height > rect2.y) {
        return true; // 相交
      }
      return false; // 不相交
    }

// 更新游戏画面
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
      ctx.fillStyle = player.color;
      ctx.fillRect(player.x, player.y, player.width, player.height); // 绘制玩家

if (bulletFired) {
        ctx.beginPath();
        ctx.arc(bullet.x, bullet.y, bullet.radius, 0, Math.PI * 2);
        ctx.fillStyle = bullet.color;
        ctx.fill();
        ctx.closePath();
        bullet.y -= bullet.speed; // 子弹向上移动

// 检测是否击中敌人
        for (let i = 0; i < enemies.length; i++) {
          if (checkCollision(bullet, enemies[i])) {
            bulletFired = false; // 重置子弹状态
            bullet.y = player.y; // 子弹回到初始位置
            enemies.splice(i, 1); // 移除被击中的敌人
            break;
          }
        }

if (bullet.y < 0) { // 子弹超出画布上边界
          bulletFired = false; // 重置子弹状态
          bullet.y = player.y; // 子弹回到初始位置
        }
      }

for (let i = 0; i < enemies.length; i++) {
        ctx.fillStyle = enemies[i].color;
        ctx.fillRect(enemies[i].x, enemies[i].y, enemies[i].width, enemies[i].height); // 绘制敌人

// 更新敌人位置
        enemies[i].y += enemies[i].speed;

// 检测敌人是否与玩家相撞
        if (checkCollision(enemies[i], player)) {
          gameover = true;
          break;
        }

// 敌人超过画布下边界，重新出现在顶部
        if (enemies[i].y > canvas.height) {
          enemies[i].x = Math.random() * (canvas.width - enemyWidth);
          enemies[i].y = 0;
        }
      }

if (!gameover) {
        requestAnimationFrame(draw); // 递归调用绘制函数，形成动画效果
      } else {
        ctx.font = "30px Arial";
        ctx.fillStyle = "#0095DD";
        ctx.textAlign = "center";
        ctx.fillText("游戏结束", canvas.width / 2, canvas.height / 2);
      }
    }

draw(); // 开始游戏
  </script>
</body>
</html>