2D Shooter Game
About this app
A fun and colorful 2D shooter game.
2D Shooter Game
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>2D Shooter Game</title>
<meta name="description" content="A fun and colorful 2D shooter game.">
<meta name="keywords" content="2D, shooter, game, web app, single page">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<script type="text/javascript">
try {
const SPACE_KEY = 32;
let spaceDown = false;
let bullets = [];
document.addEventListener('keydown', (event) => {
if (event.keyCode === SPACE_KEY) spaceDown = true;
});
document.addEventListener('keyup', (event) => {
if (event.keyCode === SPACE_KEY) spaceDown = false;
});
document.addEventListener("DOMContentLoaded", function() {
const player = document.getElementById('player');
const gameArea = document.getElementById('gameArea');
let gameLoop = setInterval(() => {
if (spaceDown) {
let bullet = document.createElement('div');
bullet.classList.add('bullet');
bullet.style.left = `${player.offsetLeft + player.offsetWidth / 2}px`;
bullet.style.top = `${player.offsetTop}px`;
gameArea.appendChild(bullet);
bullets.push(bullet);
}
bullets = bullets.filter(bullet => {
bullet.style.top = `${bullet.offsetTop - 5}px`;
return bullet.offsetTop > 0;
});
}, 100);
});
} catch (error) {
throw error;
}
</script>
<style>
* {
box-sizing: border-box;
}
body {
background: #1e1e1e;
color: #f5f5f5;
font-family: 'Press Start 2P', sans-serif;
}
#gameArea {
position: relative;
height: 90vh;
margin: 5vh auto;
border: 5px solid #f5f5f5;
}
#player {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 20px;
background: #f5f5f5;
}
.bullet {
position: absolute;
width: 5px;
height: 10px;
background: red;
}
</style>
</head>
<body>
<div id="gameArea">
<div id="player"></div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!