Ahmad Belal Mehraban

Hello so I made a Dodge game in python

so here you can look at the index.html code

DODGE

Here you can see the java script

const canvas = document.getElementById(“gameCanvas”); const ctx = canvas.getContext(“2d”); let player = { x: 300, y: 200, size: 25, speed: 6, trail: [] }; let enemy = { x: Math.random() * 550, y: Math.random() * 350, size: 30, speed: 2.5, pulse: 0 }; let score = 0; let gameOver = false; let shake = 0; let keys = {}; document.addEventListener(“keydown”, (e) => keys[e.key] = true); document.addEventListener(“keyup”, (e) => keys[e.key] = false); function movePlayer() { if (keys[“ArrowUp”]) player.y -= player.speed; if (keys[“ArrowDown”]) player.y += player.speed; if (keys[“ArrowLeft”]) player.x -= player.speed; if (keys[“ArrowRight”]) player.x += player.speed; player.x = Math.max(0, Math.min(canvas.width – player.size, player.x)); player.y = Math.max(0, Math.min(canvas.height – player.size, player.y)); player.trail.push({ x: player.x, y: player.y }); if (player.trail.length > 20) player.trail.shift(); } function moveEnemy() { if (enemy.x < player.x) enemy.x += enemy.speed; if (enemy.x > player.x) enemy.x -= enemy.speed; if (enemy.y < player.y) enemy.y += enemy.speed; if (enemy.y > player.y) enemy.y -= enemy.speed; enemy.pulse += 0.1; } function checkCollision() { if ( player.x < enemy.x + enemy.size && player.x + player.size > enemy.x && player.y < enemy.y + enemy.size && player.y + player.size > enemy.y ) { gameOver = true; shake = 20; } } function drawBackground() { let gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height); gradient.addColorStop(0, “#00111a”); gradient.addColorStop(1, “#000000”); ctx.fillStyle = gradient; ctx.fillRect(0, 0, canvas.width, canvas.height); } function drawPlayer() { for (let i = 0; i < player.trail.length; i++) { let t = player.trail[i]; ctx.fillStyle = `rgba(0, 255, 255, ${i / player.trail.length})`; ctx.shadowColor = "#00ffff"; ctx.shadowBlur = 20; ctx.fillRect(t.x, t.y, player.size, player.size); } ctx.fillStyle = "#00eaff"; ctx.shadowColor = "#00eaff"; ctx.shadowBlur = 25; ctx.fillRect(player.x, player.y, player.size, player.size); } function drawEnemy() { let pulseSize = Math.sin(enemy.pulse) * 5; ctx.fillStyle = "#ff0044"; ctx.shadowColor = "#ff0044"; ctx.shadowBlur = 30; ctx.fillRect( enemy.x - pulseSize / 2, enemy.y - pulseSize / 2, enemy.size + pulseSize, enemy.size + pulseSize ); } function drawScore() { ctx.shadowBlur = 0; ctx.fillStyle = "white"; ctx.font = "22px Orbitron"; ctx.fillText("Score: " + score, 10, 25); } function update() { if (gameOver) { ctx.fillStyle = "white"; ctx.font = "45px Orbitron"; ctx.fillText("GAME OVER", 180, 200); ctx.font = "22px Orbitron"; ctx.fillText("Press R to Restart", 210, 250); document.addEventListener("keydown", (e) => { if (e.key === “r”) location.reload(); }); return; } if (shake > 0) { ctx.save(); ctx.translate(Math.random() * shake – shake / 2, Math.random() * shake – shake / 2); shake–; } drawBackground(); movePlayer(); moveEnemy(); checkCollision(); score++; drawPlayer(); drawEnemy(); drawScore(); if (shake > 0) ctx.restore(); requestAnimationFrame(update); } update();

and here you see the style.css

body {
    background: radial-gradient(circle at top, #1a1a1a, #000);
    color: #e0e0e0;
    font-family: 'Orbitron', sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}


h1 {
    margin-top: 25px;
    font-size: 40px;
    color: #00eaff;
    text-shadow: 0 0 10px #00eaff, 0 0 20px #0088aa;
    animation: glow 2s infinite alternate;
}

@keyframes glow {
    from { text-shadow: 0 0 10px #00eaff; }
    to { text-shadow: 0 0 25px #00eaff; }
}


#gameCanvas {
    background: #111;
    border: 4px solid #00eaff;
    border-radius: 10px;
    display: block;
    margin: 30px auto;
    box-shadow: 0 0 20px #00eaff, 0 0 40px #005577;
    transition: 0.3s;
}

#gameCanvas:hover {
    transform: scale(1.02);
    box-shadow: 0 0 30px #00eaff, 0 0 60px #0088aa;
}


button {
    padding: 12px 25px;
    font-size: 18px;
    border: none;
    border-radius: 8px;
    background: #00eaff;
    color: #000;
    cursor: pointer;
    margin-top: 15px;
    font-weight: bold;
    transition: 0.2s;
    box-shadow: 0 0 10px #00eaff;
}

button:hover {
    background: #0088aa;
    box-shadow: 0 0 20px #00eaff;
    transform: translateY(-3px);
}

here you can how its look like

thanks for watching.