117 lines
2.6 KiB
JavaScript
117 lines
2.6 KiB
JavaScript
const canvas = document.getElementById('game');
|
|
const ctx = canvas.getContext('2d');
|
|
const scoreEl = document.getElementById('score');
|
|
|
|
const keys = new Set();
|
|
const gravity = 1900;
|
|
const groundY = 420;
|
|
|
|
const state = {
|
|
running: true,
|
|
lastTs: performance.now(),
|
|
score: 0,
|
|
stepCarry: 0,
|
|
player: {
|
|
x: 160,
|
|
y: 0,
|
|
width: 64,
|
|
height: 76,
|
|
standingHeight: 76,
|
|
duckHeight: 48,
|
|
vx: 0,
|
|
vy: 0,
|
|
speed: 300,
|
|
jumpPower: 760,
|
|
onGround: true,
|
|
ducking: false
|
|
}
|
|
};
|
|
state.player.y = groundY - state.player.height;
|
|
|
|
window.addEventListener('keydown', (e) => {
|
|
if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
|
|
e.preventDefault();
|
|
}
|
|
keys.add(e.key);
|
|
|
|
if (e.key === 'ArrowUp' && state.player.onGround) {
|
|
state.player.vy = -state.player.jumpPower;
|
|
state.player.onGround = false;
|
|
}
|
|
});
|
|
window.addEventListener('keyup', (e) => keys.delete(e.key));
|
|
|
|
function drawBackground() {
|
|
ctx.fillStyle = '#8ddcff';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
ctx.fillStyle = '#88d34f';
|
|
ctx.fillRect(0, groundY, canvas.width, canvas.height - groundY);
|
|
}
|
|
|
|
function drawTRex(p) {
|
|
ctx.fillStyle = '#35535f';
|
|
ctx.fillRect(p.x, p.y, p.width, p.height);
|
|
ctx.fillStyle = '#27404a';
|
|
ctx.fillRect(p.x + p.width - 12, p.y + 14, 7, 7); // eye
|
|
ctx.fillRect(p.x + 10, p.y + p.height - 8, 14, 8); // foot1
|
|
ctx.fillRect(p.x + p.width - 24, p.y + p.height - 8, 14, 8); // foot2
|
|
}
|
|
|
|
function updatePlayer(dt) {
|
|
const p = state.player;
|
|
let move = 0;
|
|
|
|
if (keys.has('ArrowLeft')) move -= 1;
|
|
if (keys.has('ArrowRight')) move += 1;
|
|
|
|
p.ducking = keys.has('ArrowDown') && p.onGround;
|
|
const targetHeight = p.ducking ? p.duckHeight : p.standingHeight;
|
|
if (targetHeight !== p.height) {
|
|
p.y += p.height - targetHeight;
|
|
p.height = targetHeight;
|
|
}
|
|
|
|
p.vx = move * p.speed;
|
|
const oldX = p.x;
|
|
p.x += p.vx * dt;
|
|
p.x = Math.max(0, Math.min(canvas.width - p.width, p.x));
|
|
|
|
if (p.x > oldX) {
|
|
state.stepCarry += p.x - oldX;
|
|
while (state.stepCarry >= 8) {
|
|
state.score += 1;
|
|
state.stepCarry -= 8;
|
|
}
|
|
}
|
|
|
|
p.vy += gravity * dt;
|
|
p.y += p.vy * dt;
|
|
|
|
if (p.y + p.height >= groundY) {
|
|
p.y = groundY - p.height;
|
|
p.vy = 0;
|
|
p.onGround = true;
|
|
}
|
|
}
|
|
|
|
function tick(ts) {
|
|
if (!state.running) return;
|
|
const dt = Math.min((ts - state.lastTs) / 1000, 0.05);
|
|
state.lastTs = ts;
|
|
|
|
updatePlayer(dt);
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
drawBackground();
|
|
drawTRex(state.player);
|
|
|
|
scoreEl.textContent = `Score: ${state.score}`;
|
|
|
|
requestAnimationFrame(tick);
|
|
}
|
|
|
|
requestAnimationFrame((ts) => {
|
|
state.lastTs = ts;
|
|
requestAnimationFrame(tick);
|
|
});
|