Space Invaders
by UltraGlider16154 lines4.3 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="format-detection" content="telephone=no">
<title>Space Invaders</title>
<style>
:root {
--green: #3f6;
--green-dim: #1a3;
--bg: #030308;
--safe-t: env(safe-area-inset-top, 0px);
--safe-r: env(safe-area-inset-right, 0px);
--safe-b: env(safe-area-inset-bottom, 0px);
--safe-l: env(safe-area-inset-left, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
height: 100%;
height: 100dvh;
width: 100%;
position: fixed;
inset: 0;
background: var(--bg);
color: var(--green);
font-family: "Courier New", Courier, ui-monospace, monospace;
overflow: hidden;
touch-action: none;
overscroll-behavior: none;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
#app {
height: 100%;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"hud hud"
"stage stage"
"move fire";
padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
gap: 6px;
}
#hud {
grid-area: hud;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 10px 2px;
font-size: clamp(12px, 2.4vw, 18px);
letter-spacing: 0.08em;
text-shadow: 0 0 8px #3f68;
}
#hud .stat { white-space: nowrap; }
#hud .stat b { color: #fff; font-weight: 700; }
#hud-btns { display: flex; gap: 8px; }
.icon-btn {
min-width: 48px;
min-height: 44px;
padding: 0 10px;
border: 2px solid var(--green-dim);
background: #0a120a;
color: var(--green);
font: inherit;
font-size: 13px;
letter-spacing: 0.12em;
border-radius: 10px;
touch-action: none;
}
.icon-btn.held, .icon-btn:active { background: #163; color: #fff; }
#stage {
grid-area: stage;
position: relative;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
}
canvas {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
image-rendering: pixelated;
image-rendering: crisp-edges;
background: #000;
box-shadow: 0 0 40px #0f41, 0 0 0 2px #1a3;
}
#scan {
position: absolute;
inset: 0;
pointer-events: none;
background: repeating-linear-gradient(
to bottom,
transparent 0 2px,
rgba(0, 0, 0, 0.18) 2px 3px
);
mix-blend-mode: multiply;
}
#overlay {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.55);
text-align: center;
padding: 16px;
}
#overlay.hidden { display: none; }
#panel h1 {
font-size: clamp(22px, 6vw, 42px);
letter-spacing: 0.18em;
color: #6f6;
text-shadow: 0 0 16px #3f6;
margin-bottom: 12px;
}
#panel p { color: #cfc; line-height: 1.5; margin: 6px 0; font-size: clamp(13px, 2.6vw, 18px); }
#panel .hint { color: #8c8; font-size: clamp(12px, 2.2vw, 15px); margin-top: 14px; }
#panel .big { color: #fff; font-size: clamp(16px, 3.2vw, 22px); letter-spacing: 0.14em; }
#move-pad, #fire-pad {
display: flex;
gap: 8px;
padding: 4px 8px 8px;
min-height: 0;
}
#move-pad { grid-area: move; }
#fire-pad { grid-area: fire; }
.ctrl {
flex: 1;
min-width: 72px;
min-height: 72px;
border: 3px solid #2a5;
background: rgba(8, 28, 14, 0.92);
color: #7f7;
font: inherit;
font-size: 28px;
font-weight: 700;
border-radius: 18px;
touch-action: none;
box-shadow: inset 0 -6px 0 #071a0a, 0 4px 0 #050;
}
.ctrl.held {Game Source: Space Invaders
Creator: UltraGlider16
Libraries: none
Complexity: moderate (154 lines, 4.3 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: space-invaders-ultraglider16" to link back to the original. Then publish at arcadelab.ai/publish.