Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
```html
<!DOCTYPE html>
<html lang="te">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Indian Block Bike 3D-Craft</title>
<style>
* {
box-sizing: border-box;
user-select: none;
-webkit-user-select: none;
}
body {
margin: 0;
padding: 0;
background-color: #222;
font-family: Arial, sans-serif;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
#gameContainer {
position: relative;
width: 100%;
max-width: 400px;
height: 70vh;
background: #444;
border: 4px solid #fff;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
background: #555;
}
#scoreBoard {
position: absolute;
top: 10px;
left: 10px;
color: #fff;
font-size: 20px;
font-weight: bold;
text-shadow: 2px 2px #000;
background: rgba(0,0,0,0.5);
padding: 5px 10px;
border-radius: 5px;
}
#gameOverScreen {
display: none;
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.8);
color: white;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 24px;
}
#restartBtn {
margin-top: 20px;
padding: 10px 20px;
font-size: 18px;
background: #ff5722;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#controls {
width: 100%;
max-width: 400px;
height: 25vh;
display: flex;
justify-content: space-around;
align-items: center;
background: #111;
padding: 10px;
}
.btn {
width: 80px;
height: 80px;
background: #333;
border: 3px solid #ff5722;
border-radius: 50%;
color: white;
font-size: 30px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 5px #222;
}
.btn:active {
background: #ff5722;
box-shadow: 0 2px #222;
transform: translateY(3px);
}
#gasBtn {
background: #4caf50;
border-color: #4caf50;
}
#gasBtn:active {
background: #45a049;
}
</style>
</head>
<body>
<div id="gameContainer">
<div id="scoreBoard">Score: <span id="score">0</span></div>
<canvas id="gameCanvas"></canvas>
<div id="gameOverScreen">
<p>GAME OVER! 💥</p>
<p>మీ స్కోర్: <span id="finalScore">0</span></p>
<button id="restartBtn" onclick="resetGame()">మళ్ళీ ఆడు</button>
</div>
</div>
<div id="controls">
<div class="btn" id="leftBtn">◀</div>
<div class="btn" id="rightBtn">▶</div>
<div class="btn" id="gasBtn">GO</div>
</div>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 600;
let score = 0;
let gameOver = false;
let isMovingLeft = false;
let isMovingRight = false;
let isAccelerating = false;
let speed = 2;
const bike = {
x: 180,
y: 480,
width: 40,
height: 70,
color: "#ff5722",
wheelColor: "#111"
};
let blocks = [];
function spawnBlock() {
if (gameOver) return;
const size = 50;
const x = Math.random() * (canvas.width - size);
const colors = ["#4caf50", "#8d6e63", "#00bcd4", "#ffeb3b"];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
blocks.push({ x: x, y: -size, size: size, color: randomColor });
setTimeout(spawnBlock, Math.max(1000 - speed * 50, 400));
}
const leftBtn = document.getElementById("leftBtn");
const rightBtn = document.getElementById("rightBtn");
const gasBtn = document.getElementById("gasBtn");
leftBtn.addEventListener("touchstart", (e) => { e.preventDefault(); isMovingLeft = true; });
leftBtn.addEventListener("touchend", () => isMovingLeft = false);
rightBtn.addEventListener("touchstart", (e) => { e.preventDefault(); isMovingRight = true; });
rightBtn.addEventListener("touchend", () => isMovingRight = false);
gasBtn.addEventListener("touchstart", (e) => { e.preventDefault(); isAccelerating = true; });
gasBtn.addEventListener("touchend", () => { isAccelerating = false; speed = 2; });
window.addEventListener("keydown", (e) => {
if(e.key === "ArrowLeft") isMovingLeft = true;
if(e.key === "ArrowRight") isMovingRight = true;
if(e.key === "ArrowUp") isAccelerating = true;
});
window.addEventListener("keyup", (e) => {
if(e.key === "ArrowLeft") isMovingLeft = false;
if(e.key === "ArrowRight") isMovingRight = false;
if(e.key === "ArrowUp") { isAccelerating = false; speed = 2; }
});
function update() {
if (gameOver) return;
if (isAccelerating) {
speed = 7;
score += 1;
}
if (isMovingLeft && bike.x > 0) bike.x -= 5;
if (isMovingRight && bike.x < canvas.width - bike.width) bike.x += 5;
for (let i = 0; i < blocks.length; i++) {
blocks[i].y += speed;
if (
bike.x < blocks[i].x + blocks[i].size &&
bike.x + bike.width > blocks[i].x &&
bike.y < blocks[i].y + blocks[i].size &&
bike.y + bike.height > blocks[i].y
) {
endGame();
}
if (blocks[i].y > canvas.height) {
blocks.splice(i, 1);
score += 10;
document.getElementById("score").innerText = score;
i--;
}
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = "#666";
ctx.lineWidth = 2;
for(let i=0; i<canvas.width; i+=40) {
ctx.beginPath();
ctx.moveTo(i, 0);
ctx.lineTo(i, canvas.height);
ctx.stroke();
}
for (let b of blocks) {
ctx.fillStyle = b.color;
ctx.fillRect(b.x, b.y, b.size, b.size);
ctx.strokeStyle = "#222";
ctx.lineWidth = 4;
ctx.strokeRect(b.x, b.y, b.size, b.size);
}
ctx.fillStyle = bike.color;
ctx.fillRect(bike.x, bike.y + 10, bike.width, bike.height - 20);
ctx.fillStyle = bike.wheelColor;
ctx.fillRect(bike.x + 12, bike.y, 16, 15);
ctx.fillRect(bike.x + 12, bike.y + bike.height - 15, 16, 15);
ctx.fillStyle = "#222";
ctx.fillRect(bike.x + 8, bike.y + 25, bike.width - 16, 20);
}
function gameLoop() {
update();
draw();
requestAnimationFrame(gameLoop);
}
function endGame() {
gameOver = true;
document.getElementById("gameOverScreen").style.display = "flex";
document.getElementById("finalScore").innerText = score;
}
function resetGame() {
blocks = [];
score = 0;
speed = 2;
bike.x = 180;
gameOver = false;
document.getElementById("score").innerText = "0";
document.getElementById("gameOverScreen").style.display = "none";
}
spawnBlock();
gameLoop();
</script>
</body>
</html>
```
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
1
Requests
1
Domains
9KB
Transfer Size
9KB
Content Size
172.0ms
Dom Content Loaded
232.0ms
First Paint
175.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...