Make a space invader game and the aliens look like this 👾's game

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

No:52529

125

←

Prev Next

→

Make a space invader game and the aliens look like..ALL
Developer User13088｜Date and time 24/3/22 12:30:45
Build time 8.09 sec｜Game capacity 1.814KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Space Invaders</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="600"></canvas>

const playerWidth = 50;
    const playerHeight = 50;
    const playerSpeed = 10;
    let playerX = canvas.width / 2 - playerWidth / 2;
    
    const alienWidth = 50;
    const alienHeight = 50;
    const alienSpeed = 1;
    let alienX = 0;
    let alienY = 50;

function drawPlayer() {
      ctx.fillStyle = 'blue';
      ctx.fillRect(playerX, canvas.height - playerHeight, playerWidth, playerHeight);
    }

function drawAlien() {
      ctx.fillStyle = 'green';
      ctx.fillRect(alienX, alienY, alienWidth, alienHeight);
    }

function movePlayer(direction) {
      if (direction === 'left' && playerX > 0) {
        playerX -= playerSpeed;
      } else if (direction === 'right' && playerX < canvas.width - playerWidth) {
        playerX += playerSpeed;
      }
    }

function moveAlien() {
      alienX += alienSpeed;

if (alienX > canvas.width) {
        alienX = 0;
        alienY += alienHeight + 10;
      }
    }

function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

drawPlayer();
      drawAlien();
      moveAlien();

requestAnimationFrame(update);
    }

update();
  </script>
</body>
</html>
```