Meta Description" name="description" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>لعبتي</title>
<style>
body { text-align:center; background:#111; color:white; }
canvas { background:#222; margin-top:20px; }
</style>
</head>
<body>
<h2>🎮 جمع النقاط</h2>
<p>استعمل الأسهم ⬅️➡️⬆️⬇️</p>
<p>النقاط: <span id="score">0</span></p>
<canvas id="game" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
let player = { x:200, y:200, size:20 };
let point = { x:100, y:100, size:10 };
let score = 0;
function drawPlayer() {
ctx.fillStyle = "lime";
ctx.fillRect(player.x, player.y, player.size, player.size);
}
function drawPoint() {
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(point.x, point.y, point.size, 0, Math.PI*2);
ctx.fill();
}
function movePoint() {
point.x = Math.random() * (canvas.width - 20);
point.y = Math.random() * (canvas.height - 20);
}
function checkCollision() {
if (
player.x < point.x + point.size &&
player.x + player.size > point.x &&
player.y < point.y + point.size &&
player.y + player.size > point.y
) {
score++;
document.getElementById("score").textContent = score;
movePoint();
}
}
function update() {
ctx.clearRect(0,0,canvas.width,canvas.height);
drawPlayer();
drawPoint();
checkCollision();
requestAnimationFrame(update);
}
document.addEventListener("keydown", function(e) {
if (e.key === "ArrowUp") player.y -= 10;
if (e.key === "ArrowDown") player.y += 10;
if (e.key === "ArrowLeft") player.x -= 10;
if (e.key === "ArrowRight") player.x += 10;
});
movePoint();
update();
</script>
</body>
</html>1
1
2KB
2KB
177.0ms
196.0ms
177.0ms