เกมเตะบอล's game

Click here for free DL of the app version that can save data.

No:43170

←

Prev Next

→

เกมเตะบอล
Developer User19114｜Date and time 24/2/14 16:20:05
Build time 11.184 sec｜Game capacity 3.481KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>เกมเตะบอล</title>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script>
        // สร้างตัวแปรคงที่สำหรับ canvas
        const canvas = document.getElementById("gameCanvas");
        const context = canvas.getContext("2d");

// ตั้งค่าตำแหน่งและขนาดของบอล
        let ballX = canvas.width / 2;
        let ballY = canvas.height - 30;
        const ballRadius = 10;

// ตั้งค่าการเคลื่อนที่ของบอล
        let dx = 2;
        let dy = -2;

// ฟังก์ชันการเคลื่อนที่ของบอล
        function drawBall() {
            context.beginPath();
            context.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
            context.fillStyle = "#0095DD";
            context.fill();
            context.closePath();
        }

// ฟังก์ชันการเลื่อนที่ของบอล
        function moveBall() {
            ballX += dx;
            ballY += dy;
        }

// ฟังก์ชันการเช็คชนะเลิศ
        function checkWin() {
            if (ballY + dy < ballRadius || ballY + dy > canvas.height - ballRadius) {
                dy = -dy;
            }
            
            if (ballX + dx < ballRadius || ballX + dx > canvas.width - ballRadius) {
                dx = -dx;
            }
        }

// ฟังก์ชันการเคลื่อนที่ของตัวเล่น (สมมุติเป็นมือถือ)
        function movePlayer(event) {
            const rect = canvas.getBoundingClientRect();
            const touchX = event.touches[0].clientX - rect.left;
            const touchY = event.touches[0].clientY - rect.top;
            // ให้ตัวเล่นเคลื่อนที่ตามตำแหน่งที่แตะ
            ballX = touchX;
            ballY = touchY;
        }

// ฟังก์ชันการเคลื่อนที่ของอัตราการเกิดเหตุการณ์
        function update() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawBall();
            moveBall();
            checkWin();         
        }

// ตั้งค่าการเริ่มต้นของเกม
        function startGame() {
            setInterval(update, 10);
        }
        
        // เริ่มเกมเมื่อหน้าเว็บโหลดเสร็จ
        window.onload = startGame;

// รับอินพุตเมื่อความสามารถในการแสดงผลเปลี่ยนแปลง สำหรับชื่อของลูกที่ใช้ในภาษาไทยหรือใด ๆ 
        window.addEventListener("orientationchange", function(event) {
            alert("The orientation has changed!");
        });
        
        // เริ่มการเคลื่อนที่ของบอลเมื่อผู้ใช้แตะที่หน้าจอ
        canvas.addEventListener("touchstart", movePlayer, false);
        
    </script>
</body>
</html>