Mini Dodge Game

by RapidWave41

106 lines1.9 KB

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mini Dodge Game</title>
<style>
body{
  margin:0;
  overflow:hidden;
  background:#111;
}
canvas{
  display:block;
}
</style>
</head>
<body>
<canvas id="game"></canvas>

<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

function resize(){
  canvas.width = innerWidth;
  canvas.height = innerHeight;
}
resize();
addEventListener("resize", resize);

const player = {
  x: 100,
  y: 100,
  size: 40,
  speed: 6
};

const enemy = {
  x: 500,
  y: 200,
  size: 40,
  speed: 3
};

let score = 0;
let gameOver = false;
const keys = {};

addEventListener("keydown", e => keys[e.key] = true);
addEventListener("keyup", e => keys[e.key] = false);

function update(){

  if(gameOver) return;

  if(keys["ArrowUp"]) player.y -= player.speed;
  if(keys["ArrowDown"]) player.y += player.speed;
  if(keys["ArrowLeft"]) player.x -= player.speed;
  if(keys["ArrowRight"]) player.x += player.speed;

  if(enemy.x < player.x) enemy.x += enemy.speed;
  if(enemy.x > player.x) enemy.x -= enemy.speed;
  if(enemy.y < player.y) enemy.y += enemy.speed;
  if(enemy.y > player.y) enemy.y -= enemy.speed;

  score++;

  if(
    player.x < enemy.x + enemy.size &&
    player.x + player.size > enemy.x &&
    player.y < enemy.y + enemy.size &&
    player.y + player.size > enemy.y
  ){
    gameOver = true;
  }
}

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

  ctx.fillStyle = "lime";
  ctx.fillRect(player.x, player.y, player.size, player.size);

  ctx.fillStyle = "red";
  ctx.fillRect(enemy.x, enemy.y, enemy.size, enemy.size);

  ctx.fillStyle = "white";
  ctx.font = "30px Arial";
  ctx.fillText("Score: " + score, 20, 40);

  if(gameOver){
    ctx.font = "60px Arial";
    ctx.fillText("GAME OVER", canvas.width/2-180, canvas.height/2);
  }
}

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

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

Game Source: Mini Dodge Game

Creator: RapidWave41

Libraries: none

Complexity: moderate (106 lines, 1.9 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: mini-dodge-game-rapidwave41" to link back to the original. Then publish at arcadelab.ai/publish.