Tower defence auto run's game

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

No:52502

260

←

Prev Next

→

Tower defence auto run
Developer User18896｜Date and time 24/3/22 11:28:35
Build time 13.706 sec｜Game capacity 1.422KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Tower Defence Game</title>
  <style>
     body {
        background-color: #f0f0f0;
        text-align: center;
     }
  </style>
</head>
<body>
   <canvas id="gameCanvas" width="400" height="400"></canvas>
</body>
<script>
  const canvas = document.getElementById("gameCanvas");
  const ctx = canvas.getContext("2d");

const player = {
    x: canvas.width/2,
    y: canvas.height-30,
    speed: 5
  };

let enemies = [];

function drawPlayer() {
    ctx.beginPath();
    ctx.arc(player.x, player.y, 10, 0, Math.PI*2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
  }

function drawEnemy(x, y) {
    ctx.beginPath();
    ctx.rect(x, y, 20, 20);
    ctx.fillStyle = "#FF0000";
    ctx.fill();
    ctx.closePath();
  }

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

drawPlayer();

for(let i = 0; i < enemies.length; i++) {
      drawEnemy(enemies[i].x, enemies[i].y);
    }
  }

function update() {
    player.x += player.speed;

if(player.x > canvas.width){
      player.x = 0;
    }
  }

function gameLoop() {
    update();
    draw();
    requestAnimationFrame(gameLoop);
  }

function createEnemy() {
    let x = Math.random() * canvas.width;
    let y = 0;
    enemies.push({x, y});
  }

function startGame() {
    setInterval(createEnemy, 1000);
    gameLoop();
  }

startGame();
</script>
</html>