<!--
-- Uploaded on : https://haxor.my.id/open/subway.html
-- Official Web : https://prinsh.com
-- script-deface-generator.prinsh.com
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Subway Runner</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #222;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
}
#gameContainer {
position: relative;
width: 400px;
height: 600px;
background-color: #333;
overflow: hidden;
}
#gameCanvas {
position: absolute;
top: 0;
left: 0;
}
#scoreDisplay {
position: absolute;
top: 10px;
left: 10px;
color: white;
font-size: 24px;
z-index: 100;
}
#startScreen {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 200;
color: white;
}
#startButton {
margin-top: 20px;
padding: 10px 20px;
font-size: 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#gameOverScreen {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 200;
color: white;
}
#restartButton {
margin-top: 20px;
padding: 10px 20px;
font-size: 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="gameContainer">
<div id="scoreDisplay">Score: 0</div>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<div id="startScreen">
<h1>Subway Runner</h1>
<p>Use arrow keys to move</p>
<p>Avoid obstacles and collect coins</p>
<button id="startButton">Start Game</button>
</div>
<div id="gameOverScreen">
<h1>Game Over</h1>
<p id="finalScore">Score: 0</p>
<button id="restartButton">Play Again</button>
</div>
</div>
<script>
// Game variables
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreDisplay = document.getElementById('scoreDisplay');
const startScreen = document.getElementById('startScreen');
const gameOverScreen = document.getElementById('gameOverScreen');
const finalScore = document.getElementById('finalScore');
const startButton = document.getElementById('startButton');
const restartButton = document.getElementById('restartButton');
let gameRunning = false;
let score = 0;
let speed = 5;
let lanes = [100, 200, 300]; // Three lanes
let player = {
x: lanes[1],
y: 500,
width: 40,
height: 60,
lane: 1, // middle lane
color: '#3498db'
};
let obstacles = [];
let coins = [];
let keys = {};
// Event listeners
document.addEventListener('keydown', (e) => {
keys[e.key] = true;
});
document.addEventListener('keyup', (e) => {
keys[e.key] = false;
});
startButton.addEventListener('click', startGame);
restartButton.addEventListener('click', startGame);
// Start game function
function startGame() {
gameRunning = true;
score = 0;
speed = 5;
player.lane = 1;
player.x = lanes[player.lane];
obstacles = [];
coins = [];
startScreen.style.display = 'none';
gameOverScreen.style.display = 'none';
// Start game loop
requestAnimationFrame(gameLoop);
}
// Game loop
function gameLoop() {
if (!gameRunning) return;
update();
render();
requestAnimationFrame(gameLoop);
}
// Update game state
function update() {
// Move player between lanes
if (keys['ArrowLeft'] && player.lane > 0) {
player.lane--;
player.x = lanes[player.lane];
}
if (keys['ArrowRight'] && player.lane < 2) {
player.lane++;
player.x = lanes[player.lane];
}
// Generate obstacles and coins randomly
if (Math.random() < 0.02) {
obstacles.push({
x: lanes[Math.floor(Math.random() * 3)],
y: -50,
width: 40,
height: 40,
color: '#e74c3c'
});
}
if (Math.random() < 0.03) {
coins.push({
x: lanes[Math.floor(Math.random() * 3)],
y: -20,
width: 30,
height: 30,
color: '#f1c40f',
collected: false
});
}
// Move obstacles and coins down
obstacles.forEach(obstacle => {
obstacle.y += speed;
// Check collision with player
if (checkCollision(player, obstacle)) {
gameOver();
}
});
coins.forEach(coin => {
if (!coin.collected) {
coin.y += speed;
// Check collision with player
if (checkCollision(player, coin)) {
coin.collected = true;
score += 10;
scoreDisplay.textContent = `Score: ${score}`;
}
}
});
// Remove off-screen objects
obstacles = obstacles.filter(obstacle => obstacle.y < canvas.height);
coins = coins.filter(coin => !coin.collected && coin.y < canvas.height);
// Increase speed as score increases
speed = 5 + Math.floor(score / 100);
}
// Render game
function render() {
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw background (subway tracks)
ctx.fillStyle = '#2c3e50';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw tracks (lanes)
ctx.strokeStyle = '#95a5a6';
ctx.lineWidth = 3;
for (let lane of lanes) {
ctx.beginPath();
ctx.moveTo(lane, 0);
ctx.lineTo(lane, canvas.height);
ctx.stroke();
}
// Draw player
ctx.fillStyle = player.color;
ctx.fillRect(player.x - player.width/2, player.y - player.height, player.width, player.height);
// Draw obstacles
obstacles.forEach(obstacle => {
ctx.fillStyle = obstacle.color;
ctx.fillRect(obstacle.x - obstacle.width/2, obstacle.y - obstacle.height, obstacle.width, obstacle.height);
});
// Draw coins
coins.forEach(coin => {
if (!coin.collected) {
ctx.fillStyle = coin.color;
ctx.beginPath();
ctx.arc(coin.x, coin.y - coin.height/2, coin.width/2, 0, Math.PI * 2);
ctx.fill();
// Add shine to coin
ctx.fillStyle = 'rgba(255, 255, 255, 0.4)';
ctx.beginPath();
ctx.arc(coin.x - 5, coin.y - coin.height/2 - 5, 5, 0, Math.PI * 2);
ctx.fill();
}
});
}
// Check collision between two objects
function checkCollision(obj1, obj2) {
return obj1.x - obj1.width/2 < obj2.x + obj2.width/2 &&
obj1.x + obj1.width/2 > obj2.x - obj2.width/2 &&
obj1.y - obj1.height < obj2.y &&
obj1.y > obj2.y - obj2.height;
}
// Game over function
function gameOver() {
gameRunning = false;
finalScore.textContent = `Score: ${score}`;
gameOverScreen.style.display = 'flex';
}
</script>
</body>
</html>