Meta Description" name="description" />
<!DOCTYPE html>
<html>
<head>
<title>Neon Dash</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
body { margin: 0; overflow: hidden; background: #111; font-family: sans-serif; }
canvas { display: block; background: #222; margin: auto; }
#ui { position: absolute; top: 20px; left: 20px; color: #0ff; font-size: 24px; pointer-events: none; }
</style>
</head>
<body>
<div id="ui">Score: 0</div>
<canvas id="gameCanvas"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('ui');
// Set canvas to mobile screen size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let score = 0;
let gravity = 0.4;
let velocity = 0;
let player = { x: 50, y: canvas.height / 2, size: 30 };
let obstacles = [];
let frame = 0;
function drawPlayer() {
ctx.fillStyle = '#0ff';
ctx.shadowBlur = 15;
ctx.shadowColor = '#0ff';
ctx.fillRect(player.x, player.y, player.size, player.size);
}
function createObstacle() {
let gap = 150;
let topHeight = Math.random() * (canvas.height / 2);
obstacles.push({ x: canvas.width, y: 0, w: 50, h: topHeight });
obstacles.push({ x: canvas.width, y: topHeight + gap, w: 50, h: canvas.height });
}
function update() {
velocity += gravity;
player.y += velocity;
if (frame % 100 === 0) createObstacle();
obstacles.forEach((obs, i) => {
obs.x -= 3;
// Collision check
if (player.x < obs.x + obs.w && player.x + player.size > obs.x &&
player.y < obs.y + obs.h && player.y + player.size > obs.y) {
resetGame();
}
if (obs.x + obs.w < 0) {
obstacles.splice(i, 1);
score += 0.5; // Two blocks per gap
scoreElement.innerText = `Score: ${Math.floor(score)}`;
}
});
if (player.y > canvas.height || player.y < 0) resetGame();
}
function resetGame() {
player.y = canvas.height / 2;
velocity = 0;
obstacles = [];
score = 0;
scoreElement.innerText = `Score: 0`;
}
function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlayer();
ctx.fillStyle = '#f0f';
ctx.shadowColor = '#f0f';
obstacles.forEach(obs => ctx.fillRect(obs.x, obs.y, obs.w, obs.h));
update();
frame++;
requestAnimationFrame(loop);
}
window.addEventListener('touchstart', () => velocity = -8);
window.addEventListener('mousedown', () => velocity = -8);
loop();
</script>
</body>
</html>1
1
3KB
3KB
112.0ms
188.0ms
113.0ms