🎮 [JOC BROWSER] Paddle Duel – Bate PC-ul într-un joc rapid cu reflexe!

COSMIN · July 17, 2025

Numele jocului: Paddle Duel – Tu vs PC
Tip joc: 2D arcade, reflexe rapide
Mod de joc: 1 jucător (contra AI)
Platformă: Browser (nu necesită instalare)
Control:

W – sus
S – jos
D – trage glonț
Scop:
Fii primul care ajunge la 5 puncte pentru a câștiga! PC-ul trage automat, iar tu trebuie să te miști rapid și să lovești.
Jocul se resetează automat după fiecare victorie.
Puteti testa jocul pe acest link: https://gamelife.ro/games/paddle_duel_vs_ai_final.html

Cod HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Paddle Duel - VS Computer</title>
<style>
html, body {
margin: 0;
height: 100%;
background: radial-gradient(circle, #0f0f0f, #000000);
font-family: Arial, sans-serif;
overflow: hidden;
}
#overlay {
position: absolute;
top: 15px;
width: 100%;
text-align: center;
color: cyan;
font-size: 24px;
font-weight: bold;
text-shadow: 0 0 10px cyan;
}
#score {
position: absolute;
top: 50px;
width: 100%;
text-align: center;
color: white;
font-size: 20px;
font-weight: bold;
}
canvas {
display: block;
margin: auto;
background: #111;
border: 2px solid #444;
box-shadow: 0 0 20px cyan;
}
</style>
</head>
<body>
<div id="overlay">Paddle Duel - Tu vs PC (W/S/D)</div>
<div id="score">0 : 0</div>
<canvas width="700" height="500" id="game"></canvas>

<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
const scoreDisplay = document.getElementById("score");
const overlay = document.getElementById("overlay");

const grid = 15;
const paddleHeight = grid * 3;
const maxY = canvas.height - grid - paddleHeight;
const bulletSpeed = 7;
const winScore = 5;

const scores = { left: 0, right: 0 };

const players = {
left: {
x: grid * 2,
y: canvas.height / 2 - paddleHeight / 2,
width: grid,
height: paddleHeight,
dy: 0,
cooldown: 0,
color: '#0ff',
},
right: {
x: canvas.width - grid * 3,
y: canvas.height / 2 - paddleHeight / 2,
width: grid,
height: paddleHeight,
dy: 0,
cooldown: 0,
color: '#f0f',
ai: true
}
};

const bullets = [];

function drawPaddle(p) {
ctx.fillStyle = p.color;
ctx.shadowColor = p.color;
ctx.shadowBlur = 10;
ctx.fillRect(p.x, p.y, p.width, p.height);
ctx.shadowBlur = 0;
}

function drawBullet(b) {
ctx.fillStyle = 'yellow';
ctx.shadowColor = 'yellow';
ctx.shadowBlur = 8;
ctx.fillRect(b.x, b.y, b.width, b.height);
ctx.shadowBlur = 0;
}

function collides(a, b) {
return a.x < b.x + b.width &&
a.x + a.width > b.x &&
a.y < b.y + b.height &&
a.y + a.height > b.y;
}

function resetPositions() {
players.left.y = players.right.y = canvas.height / 2 - paddleHeight / 2;
bullets.length = 0;
players.left.cooldown = players.right.cooldown = 0;
}

function resetGame() {
scores.left = 0;
scores.right = 0;
updateScore();
resetPositions();
overlay.textContent = 'Paddle Duel - Tu vs PC (W/S/D)';
overlay.style.color = 'cyan';
}

function updateScore() {
scoreDisplay.textContent = `${scores.left} : ${scores.right}`;
}

function scorePoint(winner) {
scores[winner]++;
updateScore();
resetPositions();

if (scores[winner] >= winScore) {
overlay.textContent = `${winner === 'left' ? 'Ai câștigat!

' : 'PC-ul a câștigat!

'}`;
overlay.style.color = winner === 'left' ? '#0ff' : '#f0f';
setTimeout(resetGame, 3000); // după 3 secunde, jocul o ia de la cap
} else {
overlay.textContent = `Punct pentru ${winner === 'left' ? 'TINE!' : 'PC!'}`;
overlay.style.color = winner === 'left' ? '#0ff' : '#f0f';
setTimeout(() => {
overlay.textContent = 'Paddle Duel - Tu vs PC (W/S/D)';
overlay.style.color = 'cyan';
}, 2000);
}
}

function loop() {
requestAnimationFrame(loop);
ctx.clearRect(0, 0, canvas.width, canvas.height);

for (let p of [players.left, players.right]) {
p.y += p.dy;
if (p.y < grid) p.y = grid;
else if (p.y > maxY) p.y = maxY;
if (p.cooldown > 0) p.cooldown--;
}

// AI movement
if (players.right.ai) {
let target = players.left.y;
players.right.dy = (target > players.right.y) ? 2 : -2;

// AI fires bullet
if (players.right.cooldown === 0) {
bullets.push({
x: players.right.x - 10,
y: players.right.y + 20,
width: 10,
height: 5,
dx: -bulletSpeed
});
players.right.cooldown = 45; // AI fire rate
}
}

// Move bullets
bullets.forEach((b, i) => {
b.x += b.dx;
drawBullet(b);

if (collides(b, players.left)) scorePoint("right");
else if (collides(b, players.right)) scorePoint("left");

if (b.x < 0 || b.x > canvas.width) bullets.splice(i, 1);
});

drawPaddle(players.left);
drawPaddle(players.right);

ctx.fillStyle = '#444';
ctx.fillRect(0, 0, canvas.width, grid);
ctx.fillRect(0, canvas.height - grid, canvas.width, grid);
}

document.addEventListener('keydown', e => {
switch (e.which) {
case 87: players.left.dy = -5; break;
case 83: players.left.dy = 5; break;
case 68:
if (players.left.cooldown === 0) {
bullets.push({
x: players.left.x + 15,
y: players.left.y + 20,
width: 10,
height: 5,
dx: bulletSpeed
});
players.left.cooldown = 25;
}
break;
}
});

document.addEventListener('keyup', e => {
if ([87, 83].includes(e.which)) players.left.dy = 0;
});

updateScore();
loop();
</script>
</body>
</html>

Captură:

Sign In

🎮 [JOC BROWSER] Paddle Duel – Bate PC-ul într-un joc rapid cu reflexe!

Recommended Posts

COSMIN

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Forums

Store

Important Information