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

No:6473

379

←

Prev Next

→

Discard plates! Throw a lot and hit the target!
Developer User3589｜Date and time 23/7/2 14:24:48
Build time 24.482 sec｜Game capacity 2.962KB｜

Script

了解しました。以下は、スマートフォンでプレイできる「捨てる皿ゲーム」の例です。

捨てる皿ゲーム

Score: 0

このゲームでは、ターゲットの上に、ランダムな位置から皿が落ちてきます。プレイヤーはターゲットをクリックして皿を当て、スコアを上げることが目標です。スコアは画面上部に表示され、ゲームが自動的に進行します。ただし、この例では絵文字は使用していませんが、代わりに画像を表示しています。また、ゲームの画像素材（target.pngおよびplate.png）は、実際のゲームの要件に応じて用意してください。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

了解しました。以下は、スマートフォンでプレイできる「捨てる皿ゲーム」の例です。

```html
<!DOCTYPE html>
<html>
<head>
    <title>捨てる皿ゲーム</title>
    <style>
        #target {
            width: 200px;
            height: 200px;
            background-image: url("target.png");
            background-size: cover;
            margin: 0 auto;
            position: relative;
        }
        
        .plate {
            width: 50px;
            height: 50px;
            background-image: url("plate.png");
            background-size: cover;
            position: absolute;
            bottom: 0;
        }
    </style>
    <script>
        var target = document.getElementById("target");
        var score = 0;

target.onclick = function() {
            score++;
            updateScore();
        }

function updateScore() {
            document.getElementById("score").innerText = "Score: " + score;
        }

function throwPlate() {
            var plate = document.createElement("div");
            plate.className = "plate";

var x = Math.random() * (window.innerWidth - 50);
            plate.style.left = x + "px";
            target.appendChild(plate);

var interval = setInterval(function() {
                var y = plate.offsetTop;
                plate.style.top = (y - 5) + "px";
                
                if (y < 0) {
                    clearInterval(interval);
                    plate.remove();
                }
                
                var targetRect = target.getBoundingClientRect();
                var plateRect = plate.getBoundingClientRect();

if (intersect(targetRect, plateRect)) {
                    score++;
                    updateScore();
                    clearInterval(interval);
                    plate.remove();
                }
            }, 10);
        }

function intersect(rect1, rect2) {
            return !(rect1.right < rect2.left || 
                     rect1.left > rect2.right || 
                     rect1.bottom < rect2.top || 
                     rect1.top > rect2.bottom);
        }
    </script>
</head>
<body>
    <h1>捨てる皿ゲーム</h1>
    <div id="target"></div>
    <div id="score">Score: 0</div>
    <script>
        setInterval(throwPlate, 1000);
    </script>
</body>
</html>
```

このゲームでは、ターゲットの上に、ランダムな位置から皿が落ちてきます。プレイヤーはターゲットをクリックして皿を当て、スコアを上げることが目標です。スコアは画面上部に表示され、ゲームが自動的に進行します。

ただし、この例では絵文字は使用していませんが、代わりに画像を表示しています。また、ゲームの画像素材（target.pngおよびplate.png）は、実際のゲームの要件に応じて用意してください。