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

No:2053

2073

←

Prev Next

→

Stacking Pancakes game
Developer User3472｜Date and time 23/6/19 22:43:46
Build time 27.642 sec｜Game capacity 2.316KB｜

Script

Pancake Stacking Game

🥞🥞🥞🥞🥞

Tilt your phone to stack pancakes.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>パンケーキ積み重ねゲーム</title>
<style>
    body {
        background-color: #f5deb3;
        font-family: sans-serif;
    }
    
    #pancakes {
        position: relative;
        height: 400px;
    }
    
    .pancake {
        position: absolute;
        bottom: 0;
        width: 120px;
        height: 25px;
        border-radius: 5px;
        background-color: #8b5a2b;
        text-align: center;
        font-size: 20px;
        color: white;
        cursor: pointer;
        transition: bottom 0.1s linear;
    }
    
    #score {
        font-size: 30px;
        margin-top: 10px;
        text-align: center;
    }
    
    .emoji {
        font-size: 50px;
    }
</style>
</head>
<body>
    <h1>パンケーキ積み重ねゲーム</h1>
    <p class="emoji">🥞🥞🥞🥞🥞</p>
    <p>スマホを傾けてパンケーキを積み上げよう。</p>
    <div id="pancakes">
        <div class="pancake" onclick="dropPancake(this)"></div>
    </div>
    <div id="score">0</div>
    <script>
        let score = 0;
        
        function dropPancake(pancake) {
            let bottom = parseInt(pancake.style.bottom);
            if (bottom >= 375) {
                score++;
                document.getElementById("score").innerHTML = score;
                let newPancake = document.createElement("div");
                newPancake.className = "pancake";
                newPancake.onclick = function() { dropPancake(this) };
                newPancake.style.bottom = bottom + "px";
                document.getElementById("pancakes").appendChild(newPancake);
            } else {
                gameOver();
            }
        }
        
        function gameOver() {
            alert("ゲームオーバー！ スコア：" + score);
            location.reload();
        }
        
        window.addEventListener("deviceorientation", movePan, true);
        
        function movePan(event) {
            let x = event.gamma;
            x = Math.min(Math.max(x, -30), 30);
            let pancakes = document.getElementsByClassName("pancake");
            for (let i = 0; i < pancakes.length; i++) {
                pancakes[i].style.left = (50 + x/3) + "%";
            }
        }
    </script>
</body>
</html>