AI game creator

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

No:37635

←

Prev Next

→

Shooting Game
Developer User17081｜Date and time 24/1/21 7:26:49
Build time 12.667 sec｜Game capacity 3.674KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<html>
  <head>
    <style>
      canvas {
        border: 1px solid black;
        background-color: #f1f1f1;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
      const canvas = document.getElementById('canvas');
      const context = canvas.getContext('2d');

const player = {
        x: canvas.width / 2,
        y: canvas.height - 30,
        width: 20,
        height: 20,
        color: '#0066FF',
        moveLeft: false,
        moveRight: false
      };

const bullets = [];

const enemies = [
        { x: 50, y: 50, width: 20, height: 20, color: '#FF0000', speed: 2 },
        { x: 100, y: 50, width: 20, height: 20, color: '#FF0000', speed: 2 },
        { x: 150, y: 50, width: 20, height: 20, color: '#FF0000', speed: 2 }
      ];

function drawPlayer() {
        context.fillStyle = player.color;
        context.fillRect(player.x, player.y, player.width, player.height);
      }

function drawBullets() {
        bullets.forEach(bullet => {
          context.fillStyle = bullet.color;
          context.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
        });
      }

function drawEnemies() {
        enemies.forEach(enemy => {
          context.fillStyle = enemy.color;
          context.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
        });
      }

function updatePlayer() {
        if (player.moveLeft && player.x > 0) {
          player.x -= 1;
        }

if (
          player.moveRight &&
          player.x + player.width < canvas.width
        ) {
          player.x += 1;
        }
      }

function updateBullets() {
        bullets.forEach(bullet => {
          bullet.y -= 3;
        });

bullets.filter(
          bullet => bullet.y + bullet.height >= 0
        );
      }

function updateEnemies() {
        enemies.forEach(enemy => {
          enemy.y += enemy.speed;

if (enemy.y + enemy.height >= canvas.height) {
            alert('Game Over');
            location.reload();
          }
        });
      }

function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);

drawPlayer();
        drawBullets();
        drawEnemies();

updatePlayer();
        updateBullets();
        updateEnemies();

checkCollision();

requestAnimationFrame(draw);
      }

document.addEventListener('keydown', event => {
        if (event.key === 'ArrowLeft') {
          player.moveLeft = true;
        }

if (event.key === 'ArrowRight') {
          player.moveRight = true;
        }

if (event.key === ' ') {
          bullets.push({
            x: player.x + player.width / 2,
            y: player.y,
            width: 3,
            height: 10,
            color: '#00FF00'
          });
        }
      });

document.addEventListener('keyup', event => {
        if (event.key === 'ArrowLeft') {
          player.moveLeft = false;
        }

if (event.key === 'ArrowRight') {
          player.moveRight = false;
        }
      });

draw();
    </script>
  </body>
</html>