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

No:31615

←

Prev Next

→

スイカゲームの逆
Developer User15205｜Date and time 23/12/27 22:01:34
Build time 15.255 sec｜Game capacity 1.648KB｜

Script

スイカゲームの逆

クリックするとスイカが消えるよ！でもスイカじゃないものをクリックしたらゲームオーバー・・・

Score: 0

←

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 {
            text-align: center;
            font-size: 40px;
            background-color: lightgreen;
        }

#score {
            font-size: 25px;
        }
    </style>
</head>
<body>
    <h1>スイカゲームの逆</h1>
    <p>クリックするとスイカが消えるよ！でもスイカじゃないものをクリックしたらゲームオーバー・・・</p>
    <img src="suika.png" alt="スイカ" id="suika">
    <p id="score">Score: 0</p>

suika.addEventListener('click', function() {
            score++;
            document.getElementById('score').textContent = 'Score: ' + score;
            suika.style.display = 'none';
            setTimeout(function() {
              suika.style.display = 'inline';
              positionSuika();
            }, 1000);
        });

function positionSuika() {
            var screenWidth = window.innerWidth;
            var screenHeight = window.innerHeight;
            var suikaWidth = suika.width;
            var suikaHeight = suika.height;
            var maxLeft = screenWidth - suikaWidth;
            var maxTop = screenHeight - suikaHeight;
            var newLeftPos = Math.floor(Math.random() * maxLeft);
            var newTopPos = Math.floor(Math.random() * maxTop);
            suika.style.left = newLeftPos + 'px';
            suika.style.top = newTopPos + 'px';
        }

positionSuika();
    </script>
</body>
</html>