AI game creator

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

No:46019

←

Prev Next

→

Красный прямоугольник - пушка, стреляет по клику н..ALL
Developer User19457｜Date and time 24/2/22 20:32:09
Build time 10.649 sec｜Game capacity 2.28KB｜

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 {
    margin: 0;
    padding: 0;
  }
  #canvas {
    background-color: #000;
  }
</style>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>

const cannonWidth = 50;
  const cannonHeight = 20;
  const bulletSize = 5;
  const enemySize = 20;

let cannonX = canvas.width / 2 - cannonWidth / 2;
  let cannonY = canvas.height - cannonHeight;
  let bullets = [];
  let enemies = [];

canvas.addEventListener('click', (e) => {
    const mouseX = e.clientX - canvas.getBoundingClientRect().left;
    const mouseY = e.clientY - canvas.getBoundingClientRect().top;
    
    const angle = Math.atan2(cannonY - mouseY, cannonX + cannonWidth / 2 - mouseX);
    const bullet = {
      x: cannonX + cannonWidth / 2,
      y: cannonY + cannonHeight / 2,
      speed: 5,
      dx: Math.cos(angle) * 5,
      dy: -Math.sin(angle) * 5
    };
    
    bullets.push(bullet);
  });

setInterval(() => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = '#f00';
    ctx.fillRect(cannonX, cannonY, cannonWidth, cannonHeight);

bullets.forEach((bullet, index) => {
      ctx.fillStyle = '#ff0';
      ctx.fillRect(bullet.x, bullet.y, bulletSize, bulletSize);

bullet.x += bullet.dx;
      bullet.y += bullet.dy;

if (bullet.x < 0 || bullet.x > canvas.width || bullet.y < 0 || bullet.y > canvas.height) {
        bullets.splice(index, 1);
      }

enemies.forEach((enemy, enemyIndex) => {
        if (bullet.x < enemy.x + enemySize && bullet.x + bulletSize > enemy.x &&
            bullet.y < enemy.y + enemySize && bullet.y + bulletSize > enemy.y) {
          bullets.splice(index, 1);
          enemies.splice(enemyIndex, 1);
        }
      });
    });

ctx.fillStyle = '#00f';
    enemies.forEach((enemy) => {
      ctx.fillRect(enemy.x, enemy.y, enemySize, enemySize);

enemy.y += 1;

if (enemy.y > canvas.height) {
        enemies.splice(enemyIndex, 1);
      }
    });

if (Math.random() < 0.02) {
      enemies.push({x: Math.random() * (canvas.width - enemySize), y: 0});
    }
  }, 1000 / 60);
</script>
</body>
</html>