Restart var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var popup = document.getElementById("popup"); var popupMessage = document.getElementById("popup-message"); var restartBtn = document.getElementById("restart-btn"); var x = canvas.width / 2; var y = canvas.height - 30; var dx = 2; var dy = -2; var ballRadius = 10; var pressureCount = 0; var maxPressureCount = 5; var gameRunning = true; function drawBall() { ctx.beginPath(); ctx.arc(x, y, ballRadius, 0, Math.PI * 2); ctx.fillStyle = "red"; // Mengubah warna bola menjadi merah ctx.fill(); ctx.closePath(); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBall(); if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) { dx = -dx; } if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) { dy = -dy; } x += dx; y += dy; if (pressureCount >= maxPressureCount) { gameRunning = false; showPopup("You Lose"); } } function showPopup(message) { popup.style.display = "block"; popupMessage.textContent = message; } function hidePopup() { popup.style.display = "none"; } function restartGame() { x = canvas.width / 2; y = canvas.height - 30; dx = 2; dy = -2; pressureCount = 0; gameRunning = true; hidePopup(); } function handleMouseClick(event) { if (!gameRunning) return; var rect = canvas.getBoundingClientRect(); var mousePosX = event.clientX - rect.left; var mousePosY = event.clientY - rect.top; var distance = Math.sqrt(Math.pow(mousePosX - x, 2) + Math.pow(mousePosY - y, 2)); if (distance = maxPressureCount) { gameRunning = false; showPopup("You Win"); } } else { pressureCount = 0; } } restartBtn.addEventListener("click", restartGame); canvas.addEventListener("click", handleMouseClick); setInterval(draw, 10);
Ma Desain Tutorial Desain Grafis
