Here’s a simple Contra-style 2D shooting game using HTML, CSS, and JavaScript (Canvas). It’s not a full Contra clone, but it includes core mechanics: player movement, shooting, enemies, and collision.
You can copy this into a single .html file and run it in your browser.
Features
- Move left/right
- Jump
- Shoot bullets
- Enemy spawning
- Basic collision detection
- Score system
Full Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mini Contra Game</title>
<style>
body {
margin: 0;
overflow: hidden;
background: black;
}
canvas {
display: block;
background: #111;
}
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script>
const canvas = document.getElementById
("gameCanvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Player
const player = {
x: 100,
y: canvas.height - 150,
width: 40,
height: 60,
color: "lime",
velocityY: 0,
jumping: false
};
// Controls
const keys = {};
// Bullets
let bullets = [];
// Enemies
let enemies = [];
let score = 0;
// Gravity
const gravity = 0.8;
// Key Events
document.addEventListener("keydown",
e => keys[e.key] = true);
document.addEventListener("keyup",
e => keys[e.key] = false);
// Shoot
function shoot() {
bullets.push({
x: player.x + player.width,
y: player.y + player.height / 2,
width: 10,
height: 4,
speed: 10
});
}
// Spawn Enemies
function spawnEnemy() {
enemies.push({
x: canvas.width,
y: canvas.height - 100,
width: 40,
height: 60,
speed: 3
});
}
setInterval(spawnEnemy, 2000);
// Update Game
function update() {
// Movement
if (keys["ArrowRight"]) player.x += 5;
if (keys["ArrowLeft"]) player.x -= 5;
// Jump
if (keys[" "] && !player.jumping) {
player.velocityY = -15;
player.jumping = true;
}
// Shoot
if (keys["z"]) {
shoot();
keys["z"] = false;
}
// Gravity
player.velocityY += gravity;
player.y += player.velocityY;
if (player.y >= canvas.height - 150) {
player.y = canvas.height - 150;
player.jumping = false;
}
// Update bullets
bullets.forEach((b, i) => {
b.x += b.speed;
if (b.x > canvas.width)
bullets.splice(i, 1);
});
// Update enemies
enemies.forEach((e, i) => {
e.x -= e.speed;
// Collision with player
if (
player.x < e.x + e.width &&
player.x + player.width > e.x &&
player.y < e.y + e.height &&
player.y + player.height > e.y
) {
alert("Game Over! Score: " + score);
location.reload();
}
// Bullet collision
bullets.forEach((b, bi) => {
if (
b.x < e.x + e.width &&
b.x + b.width > e.x &&
b.y < e.y + e.height &&
b.y + b.height > e.y
) {
enemies.splice(i, 1);
bullets.splice(bi, 1);
score++;
}
});
});
}
// Draw Game
function draw() {
ctx.clearRect(0, 0, canvas.width,
canvas.height);
// Player
ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y,
player.width, player.height);
// Bullets
ctx.fillStyle = "yellow";
bullets.forEach(b => {
ctx.fillRect(b.x, b.y, b.width,
b.height);
});
// Enemies
ctx.fillStyle = "red";
enemies.forEach(e => {
ctx.fillRect(e.x, e.y, e.width,
e.height);
});
// Score
ctx.fillStyle = "white";
ctx.font = "20px Arial";
ctx.fillText("Score: " + score, 20, 30);
}
// Game Loop
function gameLoop() {
update();
draw();
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>
Controls
- Arrow Keys → Move
- Spacebar → Jump
- Z → Shoot
