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">
<title>Advanced Mobile Fighting Game</title>
<style>
body { margin:0; background:#111; overflow:hidden; }
canvas { background:#222; display:block; margin:0 auto; }
.controls {
position:fixed; bottom:10px; left:0; width:100%;
display:flex; justify-content:space-around;
}
.btn {
width:70px; height:70px;
background:#555; border-radius:50%;
opacity:0.75; color:white; font-size:22px;
display:flex; justify-content:center; align-items:center;
user-select:none;
}
</style>
</head>
<body>
<canvas id="game" width="900" height="450"></canvas>
<div class="controls">
<div class="btn" id="left">←</div>
<div class="btn" id="right">→</div>
<div class="btn" id="jump">⤒</div>
<div class="btn" id="punch">👊</div>
<div class="btn" id="kick">🦵</div>
</div>
<script>
// ========== GAME ENGINE =============
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
function shakeScreen() {
canvas.style.transform = "translate(" + (Math.random()*6-3) + "px, " + (Math.random()*6-3) + "px)";
setTimeout(()=> canvas.style.transform="translate(0,0)", 100);
}
// ========== FIGHTER CLASS ===========
class Fighter {
constructor(x, color) {
this.x = x;
this.y = 350;
this.w = 50;
this.h = 100;
this.color = color;
this.hp = 100;
this.velX = 0;
this.velY = 0;
this.isJumping = false;
this.facing = 1;
this.punchCD = 0;
this.kickCD = 0;
}
draw() {
// Body
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y - this.h, this.w, this.h);
// Face / simple animation
ctx.fillStyle = "white";
ctx.fillRect(this.x + 15 * this.facing, this.y - this.h + 20, 10, 10);
// HP Bar
ctx.fillStyle="red";
ctx.fillRect(this.x, this.y - this.h - 12, this.w, 6);
ctx.fillStyle="lime";
ctx.fillRect(this.x, this.y - this.h - 12, this.w * (this.hp/100), 6);
}
move() {
this.x += this.velX;
if (this.x < 0) this.x = 0;
if (this.x + this.w > canvas.width) this.x = canvas.width - this.w;
if (this.y < 350) {
this.velY += 1;
this.y += this.velY;
} else {
this.velY = 0;
this.y = 350;
this.isJumping = false;
}
if (this.punchCD>0) this.punchCD--;
if (this.kickCD>0) this.kickCD--;
}
punch(enemy) {
if (this.punchCD>0) return;
if (Math.abs(this.x - enemy.x) < 80) {
shakeScreen();
enemy.hp -= 7;
}
this.punchCD = 25;
}
kick(enemy) {
if (this.kickCD>0) return;
if (Math.abs(this.x - enemy.x) < 100) {
shakeScreen();
enemy.hp -= 12;
}
this.kickCD = 40;
}
}
const player = new Fighter(200, "cyan");
const cpu = new Fighter(650, "orange");
// ========== ENEMY AI =================
function cpuAI() {
// Face the player
cpu.facing = player.x < cpu.x ? -1 : 1;
// Follow player
if (cpu.x < player.x-60) cpu.velX = 2;
else if (cpu.x > player.x+60) cpu.velX = -2;
else cpu.velX = 0;
// Jump randomly
if (!cpu.isJumping && Math.random()<0.005) {
cpu.velY = -18;
cpu.isJumping = true;
}
// Attack if close
if (Math.abs(cpu.x - player.x) < 90) {
if (Math.random() < 0.5) cpu.punch(player);
else cpu.kick(player);
}
}
// ========== GAME LOOP ===============
function loop() {
ctx.clearRect(0,0,canvas.width,canvas.height);
// Move + draw
player.move();
cpu.move();
cpuAI();
player.draw();
cpu.draw();
if (player.hp <= 0 || cpu.hp <= 0) {
ctx.fillStyle="white";
ctx.font="40px Arial";
ctx.fillText("GAME OVER", 350, 200);
return;
}
requestAnimationFrame(loop);
}
loop();
// ========== MOBILE CONTROLS ==========
let left=false, right=false;
document.getElementById("left").ontouchstart = () => left = true;
document.getElementById("left").ontouchend = () => left = false;
document.getElementById("right").ontouchstart = () => right = true;
document.getElementById("right").ontouchend = () => right = false;
document.getElementById("jump").ontouchstart = () => {
if (!player.isJumping) {
player.velY = -18;
player.isJumping = true;
}
};
document.getElementById("punch").ontouchstart = () => player.punch(cpu);
document.getElementById("kick").ontouchstart = () => player.kick(cpu);
setInterval(()=>{
player.facing = right ? 1 : left ? -1 : player.facing;
if (left) player.velX = -5;
else if (right) player.velX = 5;
else player.velX = 0;
}, 20);
</script>
</body>
</html>Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
1
Requests
1
Domains
6KB
Transfer Size
6KB
Content Size
129.0ms
Dom Content Loaded
180.0ms
First Paint
129.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...