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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>FC 25 Mobile</title>
<style>
body { margin: 0; background: #222; overflow: hidden; font-family: sans-serif; touch-action: none; }
canvas { display: block; margin: 0 auto; background: #2e8b57; }
/* UI Overlay */
#ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
#scoreboard { color: white; font-size: 24px; text-align: center; margin-top: 10px; font-weight: bold; text-shadow: 2px 2px 0 #000; }
/* Touch Controls */
.controls { position: absolute; bottom: 20px; width: 100%; height: 150px; pointer-events: auto; display: flex; justify-content: space-between; padding: 0 20px; box-sizing: border-box; }
.d-pad { position: relative; width: 120px; height: 120px; background: rgba(255,255,255,0.1); border-radius: 50%; }
.btn { position: absolute; background: rgba(255,255,255,0.3); border-radius: 50%; width: 40px; height: 40px; }
.btn:active { background: rgba(255,255,255,0.6); }
/* D-Pad Positioning */
#up { top: 0; left: 40px; }
#down { bottom: 0; left: 40px; }
#left { top: 40px; left: 0; }
#right { top: 40px; right: 0; }
/* Action Buttons (Shoot/Sprint) */
.actions { width: 120px; height: 120px; position: relative; }
#shoot { width: 70px; height: 70px; background: #ff4444; position: absolute; bottom: 10px; right: 10px; border-radius: 50%; border: 2px solid white; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; }
#shoot:active { background: #ff0000; }
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<div id="ui-layer">
<div id="scoreboard">YOU 0 - 0 CPU</div>
<div class="controls">
<div class="d-pad">
<div class="btn" id="up"></div>
<div class="btn" id="down"></div>
<div class="btn" id="left"></div>
<div class="btn" id="right"></div>
</div>
<div class="actions">
<div id="shoot">SHOOT</div>
</div>
</div>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// Resize canvas to fit mobile screen
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Game State
let player = { x: 100, y: canvas.height/2, radius: 15, color: 'blue', speed: 4 };
let cpu = { x: canvas.width - 100, y: canvas.height/2, radius: 15, color: 'red', speed: 2.5 };
let ball = { x: canvas.width/2, y: canvas.height/2, radius: 8, vx: 0, vy: 0, friction: 0.98 };
let score = { p1: 0, p2: 0 };
// Controls State
let keys = { up: false, down: false, left: false, right: false };
// Touch Event Listeners
function addTouch(id, key) {
const el = document.getElementById(id);
el.addEventListener('touchstart', (e) => { e.preventDefault(); keys[key] = true; });
el.addEventListener('touchend', (e) => { e.preventDefault(); keys[key] = false; });
}
addTouch('up', 'up');
addTouch('down', 'down');
addTouch('left', 'left');
addTouch('right', 'right');
document.getElementById('shoot').addEventListener('touchstart', (e) => {
e.preventDefault();
// Shoot mechanic: push ball hard if close
let dist = Math.hypot(player.x - ball.x, player.y - ball.y);
if(dist < 40) {
let dx = ball.x - player.x;
let dy = ball.y - player.y;
ball.vx = (dx/dist) * 15; // High speed shot
ball.vy = (dy/dist) * 15;
}
});
function update() {
// Player Movement
if (keys.up && player.y > 0) player.y -= player.speed;
if (keys.down && player.y < canvas.height) player.y += player.speed;
if (keys.left && player.x > 0) player.x -= player.speed;
if (keys.right && player.x < canvas.width) player.x += player.speed;
// CPU AI (Simple follow ball)
if(ball.x > canvas.width/2) { // Only chase if ball is in their half or close
if(cpu.x < ball.x) cpu.x += cpu.speed;
if(cpu.x > ball.x) cpu.x -= cpu.speed;
if(cpu.y < ball.y) cpu.y += cpu.speed;
if(cpu.y > ball.y) cpu.y -= cpu.speed;
}
// Ball Physics
ball.x += ball.vx;
ball.y += ball.vy;
ball.vx *= ball.friction;
ball.vy *= ball.friction;
// Wall Bounce
if(ball.y < 0 || ball.y > canvas.height) ball.vy = -ball.vy;
if(ball.x < 0 || ball.x > canvas.width) ball.vx = -ball.vx;
// Goal Logic (Simple ends of screen)
if(ball.x < 10 && Math.abs(ball.y - canvas.height/2) < 60) {
score.p2++; reset();
}
if(ball.x > canvas.width - 10 && Math.abs(ball.y - canvas.height/2) < 60) {
score.p1++; reset();
}
// Collisions (Player & CPU)
checkCollision(player);
checkCollision(cpu);
}
function checkCollision(p) {
let dist = Math.hypot(p.x - ball.x, p.y - ball.y);
if (dist < p.radius + ball.radius) {
let angle = Math.atan2(ball.y - p.y, ball.x - p.x);
ball.vx = Math.cos(angle) * 5;
ball.vy = Math.sin(angle) * 5;
}
}
function reset() {
ball.x = canvas.width/2;
ball.y = canvas.height/2;
ball.vx = 0; ball.vy = 0;
player.x = 100; player.y = canvas.height/2;
cpu.x = canvas.width - 100; cpu.y = canvas.height/2;
document.getElementById('scoreboard').innerText = `YOU ${score.p1} - ${score.p2} CPU`;
}
function draw() {
// Draw Pitch
ctx.fillStyle = "#2e8b57";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Center Line & Circle
ctx.strokeStyle = "rgba(255,255,255,0.5)";
ctx.lineWidth = 3;
ctx.beginPath(); ctx.moveTo(canvas.width/2, 0); ctx.lineTo(canvas.width/2, canvas.height); ctx.stroke();
ctx.beginPath(); ctx.arc(canvas.width/2, canvas.height/2, 50, 0, Math.PI*2); ctx.stroke();
// Goals
ctx.fillStyle = "rgba(255,255,255,0.3)";
ctx.fillRect(0, canvas.height/2 - 60, 10, 120); // Left Goal
ctx.fillRect(canvas.width - 10, canvas.height/2 - 60, 10, 120); // Right Goal
// Draw Player
ctx.fillStyle = player.color;
ctx.beginPath(); ctx.arc(player.x, player.y, player.radius, 0, Math.PI*2); ctx.fill();
// Draw CPU
ctx.fillStyle = cpu.color;
ctx.beginPath(); ctx.arc(cpu.x, cpu.y, cpu.radius, 0, Math.PI*2); ctx.fill();
// Draw Ball
ctx.fillStyle = "white";
ctx.beginPath(); ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2); ctx.fill();
ctx.strokeStyle = "black"; ctx.lineWidth = 1; ctx.stroke();
}
function loop() {
update();
draw();
requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
1
Requests
1
Domains
7KB
Transfer Size
7KB
Content Size
114.0ms
Dom Content Loaded
188.0ms
First Paint
114.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...