feat(01-01): HTML scaffold with HiDPI canvas, Renderer, and full-window layout
- Created index.html with valid HTML5 structure and black full-window canvas
- Renderer object with devicePixelRatio-aware resize() using logical vs bitmap coords
- CSS enforces overflow:hidden with no scrollbars
- Minimum 4:3 aspect ratio enforcement in resize logic
- window.addEventListener('resize') handler for live canvas rescaling
This commit is contained in:
Dabit
187
index.html
Normal file
187
index.html
Normal file
@@ -0,0 +1,187 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Super Pong Next Gen</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #000; overflow: hidden; width: 100vw; height: 100vh; }
|
||||
#gameCanvas { display: block; background: #000; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="gameCanvas"></canvas>
|
||||
<script>
|
||||
const Renderer = {
|
||||
canvas: null,
|
||||
ctx: null,
|
||||
logicalWidth: 0,
|
||||
logicalHeight: 0,
|
||||
|
||||
init() {
|
||||
this.canvas = document.getElementById('gameCanvas');
|
||||
this.resize();
|
||||
window.addEventListener('resize', () => this.resize());
|
||||
},
|
||||
|
||||
resize() {
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
const w = window.innerWidth;
|
||||
const h = window.innerHeight;
|
||||
const minAspect = 4 / 3;
|
||||
const currentAspect = w / h;
|
||||
|
||||
// Always fill entire window; use logical coords for game
|
||||
this.logicalWidth = w;
|
||||
this.logicalHeight = h;
|
||||
|
||||
// Enforce minimum 4:3: if narrower than 4:3, treat as 4:3 height
|
||||
// (window fills screen; minimum 4:3 means we never let height dominate width)
|
||||
if (currentAspect < minAspect) {
|
||||
// Too tall — game uses 4:3 minimum: constrain logical height
|
||||
this.logicalHeight = Math.floor(w / minAspect);
|
||||
}
|
||||
|
||||
// Step 1: Set CSS size to logical dimensions
|
||||
this.canvas.style.width = this.logicalWidth + 'px';
|
||||
this.canvas.style.height = this.logicalHeight + 'px';
|
||||
|
||||
// Step 2: Scale bitmap to device pixel ratio
|
||||
this.canvas.width = Math.floor(this.logicalWidth * dpr);
|
||||
this.canvas.height = Math.floor(this.logicalHeight * dpr);
|
||||
|
||||
// Step 3: Scale context so all draw calls use logical pixels
|
||||
this.ctx = this.canvas.getContext('2d');
|
||||
this.ctx.scale(dpr, dpr);
|
||||
|
||||
// Notify Physics of new dimensions (Physics may not exist yet)
|
||||
if (typeof Physics !== 'undefined' && Physics.onResize) {
|
||||
Physics.onResize(this.logicalWidth, this.logicalHeight);
|
||||
}
|
||||
},
|
||||
|
||||
clear() {
|
||||
this.ctx.clearRect(0, 0, this.logicalWidth, this.logicalHeight);
|
||||
this.ctx.fillStyle = '#000';
|
||||
this.ctx.fillRect(0, 0, this.logicalWidth, this.logicalHeight);
|
||||
},
|
||||
|
||||
drawRect(x, y, w, h, color) {
|
||||
this.ctx.fillStyle = color || '#fff';
|
||||
this.ctx.fillRect(Math.round(x), Math.round(y), Math.round(w), Math.round(h));
|
||||
},
|
||||
|
||||
drawCircle(x, y, radius, color) {
|
||||
this.ctx.beginPath();
|
||||
this.ctx.arc(Math.round(x), Math.round(y), radius, 0, Math.PI * 2);
|
||||
this.ctx.fillStyle = color || '#fff';
|
||||
this.ctx.fill();
|
||||
}
|
||||
};
|
||||
|
||||
const GameState = {
|
||||
paddle1: {
|
||||
x: 0, y: 0, // Set on Physics.init()
|
||||
width: 12, height: 80,
|
||||
speed: 400, // Logical pixels per second
|
||||
color: '#fff'
|
||||
},
|
||||
ball: {
|
||||
x: 0, y: 0, // Set on Physics.init()
|
||||
radius: 8,
|
||||
vx: 0, vy: 0, // Set on Physics.init()
|
||||
speed: 0, // Current scalar speed
|
||||
color: '#fff'
|
||||
}
|
||||
};
|
||||
|
||||
const Input = {
|
||||
keys: { w: false, s: false },
|
||||
|
||||
init() {
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.code === 'KeyW') { this.keys.w = true; e.preventDefault(); }
|
||||
if (e.code === 'KeyS') { this.keys.s = true; e.preventDefault(); }
|
||||
});
|
||||
document.addEventListener('keyup', (e) => {
|
||||
if (e.code === 'KeyW') this.keys.w = false;
|
||||
if (e.code === 'KeyS') this.keys.s = false;
|
||||
});
|
||||
},
|
||||
|
||||
getVerticalInput() {
|
||||
if (this.keys.w) return -1;
|
||||
if (this.keys.s) return 1;
|
||||
return 0;
|
||||
}
|
||||
};
|
||||
|
||||
const Physics = {
|
||||
width: 0,
|
||||
height: 0,
|
||||
|
||||
init(width, height) {
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
// Position paddle1 on left side, vertically centered
|
||||
GameState.paddle1.x = 30;
|
||||
GameState.paddle1.y = height / 2 - GameState.paddle1.height / 2;
|
||||
// Ball positioned center — physics will drive it in Plan 02
|
||||
GameState.ball.x = width / 2;
|
||||
GameState.ball.y = height / 2;
|
||||
},
|
||||
|
||||
onResize(width, height) {
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
},
|
||||
|
||||
update(deltaTime) {
|
||||
// Move paddle1 based on input
|
||||
const dir = Input.getVerticalInput();
|
||||
const paddle = GameState.paddle1;
|
||||
paddle.y += dir * paddle.speed * deltaTime;
|
||||
// Clamp to canvas bounds
|
||||
paddle.y = Math.max(0, Math.min(this.height - paddle.height, paddle.y));
|
||||
}
|
||||
};
|
||||
|
||||
const GameLoop = {
|
||||
stopHandle: null,
|
||||
lastTime: 0,
|
||||
|
||||
start() {
|
||||
this.lastTime = performance.now();
|
||||
this.stopHandle = window.requestAnimationFrame(this.main.bind(this));
|
||||
},
|
||||
|
||||
stop() {
|
||||
if (this.stopHandle) cancelAnimationFrame(this.stopHandle);
|
||||
},
|
||||
|
||||
main(currentTime) {
|
||||
this.stopHandle = window.requestAnimationFrame(this.main.bind(this));
|
||||
const deltaTime = Math.min((currentTime - this.lastTime) / 1000, 0.05); // Cap at 50ms
|
||||
this.lastTime = currentTime;
|
||||
|
||||
Physics.update(deltaTime);
|
||||
|
||||
Renderer.clear();
|
||||
// Draw paddle1
|
||||
const p1 = GameState.paddle1;
|
||||
Renderer.drawRect(p1.x, p1.y, p1.width, p1.height, p1.color);
|
||||
// Draw ball placeholder (will move in Plan 02)
|
||||
const b = GameState.ball;
|
||||
Renderer.drawCircle(b.x, b.y, b.radius, b.color);
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize all modules
|
||||
Renderer.init();
|
||||
Physics.init(Renderer.logicalWidth, Renderer.logicalHeight);
|
||||
Input.init();
|
||||
GameLoop.start();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user