สร้างเกมเติมน้ำ's game

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

No:36133

←

Prev Next

→

สร้างเกมเติมน้ำ
Developer Spy｜Date and time 24/1/16 23:43:39
Build time 12.291 sec｜Game capacity 3.157KB｜

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="400" height="600"></canvas>
    <script>
        // ฟังก์ชันเติมน้ำ
        function fillWater() {
            waterLevel += 10;
            
            if (waterLevel >= maxWaterLevel) {
                alert("คุณเติมน้ำเต็มแล้ว!");
                clearInterval(gameLoop);
            }
        }

// ฟังก์ชันสร้างเกม
        function createGame() {
            // สร้างเกมบน Canvas
            var canvas = document.getElementById("gameCanvas");
            var ctx = canvas.getContext("2d");

// กำหนดตัวแปร
            var waterLevel = 0;
            var maxWaterLevel = 100;

// โหลดรูปภาพ
            var faucetImg = new Image();
            faucetImg.src = "faucet.png";

var bucketImg = new Image();
            bucketImg.src = "bucket.png";

// วาดฉากหลัง
            function drawBackground() {
                ctx.fillStyle = "skyblue";
                ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.drawImage(faucetImg, 150, 50, 100, 100);
            }

// วาดรายละเอียด
            function drawDetails() {
                ctx.fillStyle = "black";
                ctx.font = "20px Arial";
                ctx.fillText("ระดับน้ำ: " + waterLevel + "/" + maxWaterLevel, 150, 200);

ctx.drawImage(bucketImg, 150, 250, 100, 100);
            }

// วาดฉาก
            function drawScene() {
                drawBackground();
                drawDetails();
            }

// ฟังก์ชันหลังจากทำการกดปุ่มเติมน้ำ
            function afterFillWater() {
                waterLevel += 10;

if (waterLevel >= maxWaterLevel) {
                    alert("คุณเติมน้ำเต็มแล้ว!");
                    clearInterval(gameLoop);
                }
            }

// ใช้ Event Listener เพื่อเติมน้ำเมื่อคลิกที่ภาพถังน้ำ
            canvas.addEventListener("click", function(event) {
                var rect = canvas.getBoundingClientRect();
                var x = event.clientX - rect.left;
                var y = event.clientY - rect.top;

if (x >= 150 && x <= 250 && y >= 250 && y <= 350) {
                    fillWater();
                    afterFillWater();
                }
            });

// ตั้งค่า Loop เกม
            var gameLoop = setInterval(function() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                drawScene();
            }, 30);
        }

// เริ่มต้นการทำงานเกม
        createGame();
    </script>
</body>
</html>