Beautiful and proper game.'s game

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

No:1497

120

←

Prev Next

→

Beautiful and proper game.
Developer User3349｜Date and time 23/6/18 17:37:29
Build time 18.607 sec｜Game capacity 1.902KB｜

Script

の開発には時間がかかるため、以下のように簡単なゲームを作成しました。

😀

Score: 0

このゲームは、Emoji Catchという名前で、画面上に表示される😀の絵文字をクリックしてスコアを稼ぐゲームです。😀は、一定時間が経過するとランダムな場所に移動します。スマホで遊べるように調整してあります。

←

Prev　Next

→ 　

Back　

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

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

の開発には時間がかかるため、以下のように簡単なゲームを作成しました。

<html>
<head>
<title>Emoji Catch</title>
<style>
    #box {
        width: 100%;
        height: 80%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: white;
        text-align: center;
        font-size: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    #emoji {
        position: relative;
        bottom: 10px;
        font-size: 80px;
        cursor: pointer;
    }
    
    #score {
        position: absolute;
        bottom: 10px;
        right: 10px;
        font-size: 40px;
    }
</style>
</head>
<body>
<div id="box">
    <div id="emoji">😀</div>
</div>
<div id="score">Score: 0</div>
<script>
    var score = 0;
    var timer = setInterval(moveEmoji, 3000);
    
    document.getElementById("emoji").onclick = function () {
        score++;
        document.getElementById("score").innerHTML = "Score: " + score;
    };
    
    function moveEmoji() {
        var box = document.getElementById("box");
        var emoji = document.getElementById("emoji");
        var boxWidth = box.offsetWidth;
        var boxHeight = box.offsetHeight;
        var emojiWidth = emoji.offsetWidth;
        var emojiHeight = emoji.offsetHeight;
        var randomX = Math.floor(Math.random() * (boxWidth - emojiWidth));
        var randomY = Math.floor(Math.random() * (boxHeight - emojiHeight));
        emoji.style.left = randomX + "px";
        emoji.style.top = randomY + "px";
    }
</script>
</body>
</html>