← back to Games Agentabrams
games/breakout/AbramsBreak.aa
241 lines
<!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">
<title>Abrams Break</title>
<style>
:root { --bg:#0a0e14; --ink:#e5e7eb; }
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
background:radial-gradient(1200px 600px at 50% -10%, #16202e, var(--bg));
color:var(--ink); font:15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
display:flex; flex-direction:column; align-items:center; justify-content:center;
min-height:100%; gap:10px; padding:12px; overscroll-behavior:none; touch-action:none;
}
h1 { font-size:14px; letter-spacing:.28em; text-transform:uppercase; color:#93c5fd; font-weight:600; }
.hud { display:flex; gap:18px; font-variant-numeric:tabular-nums; font-size:13px; color:#9aa4b2; }
.hud b { color:var(--ink); font-weight:600; }
#wrap { position:relative; }
canvas { background:#0d131c; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.5); display:block; }
.overlay {
position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:10px; text-align:center; background:rgba(8,12,18,.72); border-radius:12px; backdrop-filter:blur(2px);
}
.overlay.hide { display:none; }
.big { font-size:22px; font-weight:700; }
.sub { font-size:13px; color:#9aa4b2; max-width:300px; }
.tag { font-size:11px; color:#93c5fd; letter-spacing:.2em; text-transform:uppercase; }
button.play { margin-top:4px; padding:10px 22px; border:0; border-radius:999px; cursor:pointer; background:linear-gradient(180deg,#60a5fa,#3b82f6); color:#fff; font-weight:700; font-size:14px; }
.btns { position:absolute; top:8px; right:10px; display:flex; gap:6px; }
.btns button { width:30px; height:30px; border-radius:8px; border:1px solid #2a3441; background:#141b25; color:#cbd5e1; cursor:pointer; font-size:14px; }
.hint { font-size:11px; color:#5b6673; }
</style>
</head>
<body>
<h1>Abrams Break</h1>
<div class="hud"><span>Score <b id="score">0</b></span><span>Lives <b id="lives">3</b></span><span>Level <b id="lvl">1</b></span><span>Best <b id="best">0</b></span></div>
<div id="wrap">
<canvas id="c" width="440" height="480"></canvas>
<div class="btns">
<button id="mute" title="Mute (M)">🔊</button>
<button id="pauseBtn" title="Pause (P)">⏸</button>
</div>
<div class="overlay" id="ov">
<div class="tag" id="ovTag">Ready</div>
<div class="big" id="ovTitle">Abrams Break</div>
<div class="sub" id="ovSub">Clear every brick. Move the paddle with mouse / arrows, or drag on touch. Don't drop the ball.</div>
<button class="play" id="playBtn">Play</button>
<div class="hint">P pause · M mute · Space launch</div>
</div>
</div>
<script>
(function () {
var cv = document.getElementById('c'), ctx = cv.getContext('2d');
var W = cv.width, H = cv.height;
var scoreEl = document.getElementById('score'), livesEl = document.getElementById('lives'),
lvlEl = document.getElementById('lvl'), bestEl = document.getElementById('best');
var ov = document.getElementById('ov'), ovTag = document.getElementById('ovTag'), ovTitle = document.getElementById('ovTitle'), ovSub = document.getElementById('ovSub');
var playBtn = document.getElementById('playBtn'), pauseBtn = document.getElementById('pauseBtn'), muteBtn = document.getElementById('mute');
var BEST_KEY = 'abrams-break-best';
var best = parseInt(localStorage.getItem(BEST_KEY) || '0', 10) || 0; bestEl.textContent = best;
var COLS = 10, PAD = 6, TOP = 46, BRICK_H = 20;
var brickW = (W - PAD * (COLS + 1)) / COLS;
var COLORS = ['#f472b6', '#fb923c', '#facc15', '#4ade80', '#38bdf8', '#a78bfa'];
var paddle, ball, bricks, score, lives, level, running, paused, launched, muted = false;
var last = 0;
var actx = null;
function beep(freq, dur, type, vol) {
if (muted) return;
try {
if (!actx) actx = new (window.AudioContext || window.webkitAudioContext)();
var o = actx.createOscillator(), g = actx.createGain();
o.type = type || 'square'; o.frequency.value = freq; g.gain.value = vol || 0.05;
o.connect(g); g.connect(actx.destination);
var t = actx.currentTime; o.start(t);
g.gain.exponentialRampToValueAtTime(0.0001, t + (dur || 0.07)); o.stop(t + (dur || 0.07));
} catch (e) {}
}
function buildBricks(lv) {
bricks = [];
var rows = Math.min(4 + lv, 7);
for (var r = 0; r < rows; r++) for (var c = 0; c < COLS; c++) {
bricks.push({
x: PAD + c * (brickW + PAD), y: TOP + r * (BRICK_H + PAD),
w: brickW, h: BRICK_H, color: COLORS[r % COLORS.length],
hits: r < 1 ? 2 : 1 // top row tougher
});
}
}
function resetBallPaddle() {
paddle = { w: 84, h: 12, x: W / 2 - 42, y: H - 28, speed: 7 };
var sp = 4.2 + level * 0.4;
ball = { x: W / 2, y: paddle.y - 8, r: 7, vx: sp * (Math.random() < 0.5 ? -1 : 1) * 0.7, vy: -sp };
launched = false;
}
function newGame() {
score = 0; lives = 3; level = 1; buildBricks(level); resetBallPaddle(); updateHud();
}
function updateHud() { scoreEl.textContent = score; livesEl.textContent = lives; lvlEl.textContent = level; }
function launch() { if (!launched) { launched = true; beep(520, 0.06, 'square', 0.05); } }
function tick() {
if (!launched) { ball.x = paddle.x + paddle.w / 2; ball.y = paddle.y - ball.r - 1; return; }
ball.x += ball.vx; ball.y += ball.vy;
// walls
if (ball.x - ball.r < 0) { ball.x = ball.r; ball.vx *= -1; beep(300, 0.04, 'square', 0.04); }
if (ball.x + ball.r > W) { ball.x = W - ball.r; ball.vx *= -1; beep(300, 0.04, 'square', 0.04); }
if (ball.y - ball.r < 0) { ball.y = ball.r; ball.vy *= -1; beep(300, 0.04, 'square', 0.04); }
// paddle
if (ball.vy > 0 && ball.y + ball.r >= paddle.y && ball.y + ball.r <= paddle.y + paddle.h + 8 &&
ball.x >= paddle.x - ball.r && ball.x <= paddle.x + paddle.w + ball.r) {
var hit = (ball.x - (paddle.x + paddle.w / 2)) / (paddle.w / 2); // -1..1
var speed = Math.min(9, Math.hypot(ball.vx, ball.vy) + 0.06);
var ang = hit * 1.05; // steer by contact point
ball.vx = speed * Math.sin(ang); ball.vy = -Math.abs(speed * Math.cos(ang));
ball.y = paddle.y - ball.r - 1; beep(440, 0.05, 'square', 0.05);
}
// bricks
for (var i = 0; i < bricks.length; i++) {
var b = bricks[i];
if (ball.x + ball.r > b.x && ball.x - ball.r < b.x + b.w && ball.y + ball.r > b.y && ball.y - ball.r < b.y + b.h) {
// decide bounce axis by shallowest overlap
var overL = ball.x + ball.r - b.x, overR = b.x + b.w - (ball.x - ball.r);
var overT = ball.y + ball.r - b.y, overB = b.y + b.h - (ball.y - ball.r);
var minX = Math.min(overL, overR), minY = Math.min(overT, overB);
if (minX < minY) ball.vx *= -1; else ball.vy *= -1;
b.hits--; score += 10; updateHud(); beep(660, 0.05, 'square', 0.05);
if (b.hits <= 0) { bricks.splice(i, 1); score += 5; updateHud(); }
break;
}
}
// lost ball
if (ball.y - ball.r > H) {
lives--; updateHud(); beep(160, 0.25, 'sawtooth', 0.07);
if (lives <= 0) { gameOver(); return; }
resetBallPaddle();
}
// level clear
if (bricks.length === 0) {
level++; score += 100; updateHud(); buildBricks(level); resetBallPaddle();
beep(880, 0.12, 'triangle', 0.07);
overlay('Level ' + level, 'Cleared!', 'Nice. Space or click to launch the next wave.', 'Continue');
running = false;
}
}
function draw() {
ctx.clearRect(0, 0, W, H);
for (var i = 0; i < bricks.length; i++) {
var b = bricks[i]; ctx.fillStyle = b.color; ctx.globalAlpha = b.hits > 1 ? 1 : 0.82;
round(b.x, b.y, b.w, b.h, 4); ctx.fill(); ctx.globalAlpha = 1;
}
ctx.fillStyle = '#e5e7eb'; round(paddle.x, paddle.y, paddle.w, paddle.h, 6); ctx.fill();
ctx.beginPath(); ctx.arc(ball.x, ball.y, ball.r, 0, 7); ctx.fillStyle = '#a7f3d0'; ctx.fill();
}
function round(x, y, w, h, r) {
ctx.beginPath(); ctx.moveTo(x + r, y);
ctx.arcTo(x + w, y, x + w, y + h, r); ctx.arcTo(x + w, y + h, x, y + h, r);
ctx.arcTo(x, y + h, x, y, r); ctx.arcTo(x, y, x + w, y, r); ctx.closePath();
}
function loop(ts) {
requestAnimationFrame(loop);
if (!running || paused) { last = ts; return; }
if (!last) last = ts;
var steps = Math.min(3, Math.round((ts - last) / 16.67)) || 1; last = ts;
for (var s = 0; s < steps; s++) if (running) tick();
draw();
}
function overlay(tag, title, sub, btn) { ovTag.textContent = tag; ovTitle.textContent = title; ovSub.textContent = sub; playBtn.textContent = btn; ov.classList.remove('hide'); }
function gameOver() {
running = false;
if (score > best) { best = score; localStorage.setItem(BEST_KEY, best); bestEl.textContent = best; }
overlay(score >= best && score > 0 ? 'New Best!' : 'Game Over', 'Score ' + score, 'Best ' + best + '. Play again?', 'Play again');
}
function start() {
// If overlay was a level-clear pause, just resume; otherwise fresh game.
if (bricks && bricks.length > 0 && lives > 0 && !paused && running === false && launched === false && score > 0) {
running = true; ov.classList.add('hide'); last = 0; return;
}
newGame(); running = true; paused = false; last = 0; ov.classList.add('hide');
if (actx && actx.state === 'suspended') actx.resume();
}
function togglePause() {
if (!running && !paused) return;
paused = !paused; pauseBtn.textContent = paused ? '▶' : '⏸';
if (paused) overlay('Paused', 'Paused', 'Press P to resume.', 'Resume');
else { ov.classList.add('hide'); last = 0; }
}
// input
function movePaddleTo(px) { paddle.x = Math.max(0, Math.min(W - paddle.w, px - paddle.w / 2)); }
cv.addEventListener('mousemove', function (e) { if (!paddle) return; var r = cv.getBoundingClientRect(); movePaddleTo((e.clientX - r.left) * (W / r.width)); });
cv.addEventListener('click', function () { if (!running && !paused) start(); else launch(); });
cv.addEventListener('touchmove', function (e) { if (!paddle) return; var r = cv.getBoundingClientRect(); movePaddleTo((e.touches[0].clientX - r.left) * (W / r.width)); e.preventDefault(); }, { passive: false });
cv.addEventListener('touchstart', function () { if (!running && !paused) start(); else launch(); }, { passive: true });
var leftDown = false, rightDown = false;
window.addEventListener('keydown', function (e) {
var k = e.key.toLowerCase();
if (k === 'arrowleft' || k === 'a') { leftDown = true; e.preventDefault(); }
else if (k === 'arrowright' || k === 'd') { rightDown = true; e.preventDefault(); }
else if (k === ' ') { if (!running && !paused) start(); else launch(); e.preventDefault(); }
else if (k === 'p' || k === 'escape') togglePause();
else if (k === 'm') toggleMute();
});
window.addEventListener('keyup', function (e) {
var k = e.key.toLowerCase();
if (k === 'arrowleft' || k === 'a') leftDown = false;
if (k === 'arrowright' || k === 'd') rightDown = false;
});
// keyboard paddle drift
setInterval(function () {
if (!paddle || !running || paused) return;
if (leftDown) movePaddleTo(paddle.x + paddle.w / 2 - paddle.speed);
if (rightDown) movePaddleTo(paddle.x + paddle.w / 2 + paddle.speed);
}, 16);
playBtn.addEventListener('click', function () { if (paused) togglePause(); else start(); });
pauseBtn.addEventListener('click', togglePause);
function toggleMute() { muted = !muted; muteBtn.textContent = muted ? '🔈' : '🔊'; }
muteBtn.addEventListener('click', toggleMute);
window.addEventListener('blur', function () { if (running && !paused) togglePause(); });
newGame(); draw();
requestAnimationFrame(loop);
})();
</script>
</body>
</html>