shooting games's game | AI game creator

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

No:46964

117

shooting games
Developer User15743｜Date and time 24/2/26 20:41:06
Build time 9.102 sec｜Game capacity 1.736KB｜

→ 　

0　

0　

　

　

[PR]現在の人気グッズランキング

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

(C)2023 HisashiApp

<script>
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  document.body.appendChild(canvas);
  
  const player = {
    x: canvas.width / 2,
    y: canvas.height - 50,
    width: 50,
    height: 50,
    color: 'blue',
    speed: 5
  };
  
  const bullets = [];
  
  function drawPlayer() {
    ctx.fillStyle = player.color;
    ctx.fillRect(player.x, player.y, player.width, player.height);
  }
  
  function drawBullets() {
    bullets.forEach(bullet => {
      ctx.fillStyle = 'red';
      ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
    });
  }
  
  function updateBullets() {
    bullets.forEach(bullet => {
      bullet.y -= 5;
    });
    
    bullets.forEach((bullet, index) => {
      if(bullet.y <= 0) {
        bullets.splice(index, 1);
      }
    });
  }
  
  function shoot() {
    bullets.push({
      x: player.x + player.width / 2,
      y: player.y - 10,
      width: 3,
      height: 10
    });
  }
  
  function movePlayer(direction) {
    if(direction === 'left' && player.x > 0) {
      player.x -= player.speed;
    } else if(direction === 'right' && player.x < canvas.width - player.width) {
      player.x += player.speed;
    }
  }
  
  function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  
    drawPlayer();
    drawBullets();
    updateBullets();
  
    requestAnimationFrame(gameLoop);
  }
  
  document.addEventListener('keydown', e => {
    if(e.key === 'ArrowLeft') {
      movePlayer('left');
    } else if(e.key === 'ArrowRight') {
      movePlayer('right');
    } else if(e.key === ' ') {
      shoot();
    }
  });
  
  gameLoop();
</script>