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

No:9525

109

←

Prev Next

→

Hubble Space Telescope
Developer User4369｜Date and time 23/7/26 0:13:50
Build time 19.517 sec｜Game capacity 2.133KB｜

Script

了解です。以下にハッブル宇宙望遠鏡をテーマにした簡単なゲームを実装したHTMLファイルを示します。JavaScriptのコードはscriptタグ内に含めています。

Hubble Space Telescope Game

Score: 0

🔭

このゲームでは、「🔭」という絵文字で表現されたハッブル宇宙望遠鏡をスマホ操作で動かし、クリックすることでスコアを上げることが目標です。スマホの画面をタップしてハッブル宇宙望遠鏡を動かしたり、クリックしたりすることで遊ぶことができます。

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hubble Space Telescope Game</title>
    <style>
        body {
            text-align: center;
            font-size: 36px;
        }
        
        #score {
            font-size: 24px;
        }
        
        #hubble {
            font-size: 72px;
        }
    </style>
</head>
<body>
    <h1>Hubble Space Telescope Game</h1>
    <p id="score">Score: 0</p>
    <p id="hubble">🔭</p>

function moveHubble(event) {
            switch(event.key) {
                case "ArrowUp":
                    hubble.style.top = parseInt(hubble.style.top) - 10 + "px";
                    break;
                case "ArrowDown":
                    hubble.style.top = parseInt(hubble.style.top) + 10 + "px";
                    break;
                case "ArrowLeft":
                    hubble.style.left = parseInt(hubble.style.left) - 10 + "px";
                    break;
                case "ArrowRight":
                    hubble.style.left = parseInt(hubble.style.left) + 10 + "px";
                    break;
            }
        }

function increaseScore() {
            score++;
            document.getElementById("score").textContent = "Score: " + score;
        }

function init() {
            hubble.addEventListener("click", increaseScore);
            window.addEventListener("keydown", moveHubble);
        }

init();
    </script>
</body>
</html>
```