AI game creator

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

No:774

204

←

Prev Next

→

trapeze
Developer User3025｜Date and time 23/6/17 17:21:03
Build time 37.809 sec｜Game capacity 3.53KB｜

Script

画面をタップしてブランコを揺らしてください

プレイする
概要：ブランコを揺らして、プレイヤーを高く飛ばすゲームです。画面をタップするとブランコの揺れ方が反転します。プレイヤーがどの程度飛んだかをスコアとして表示します。スマートフォンで操作可能なように、画面の大きさに合わせて自動調整されます。絵文字は使用していませんが、かわいいキャラクターと背景で楽しんでいただけます。

←

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 {
        font-family: Arial, sans-serif;
        text-align: center;
        background-color: #F7F7F7;
      }

#game-screen {
        margin: 0 auto;
        width: 300px;
        height: 400px;
        background-image: url("https://i.imgur.com/4M8Nm3w.png");
        background-size: contain;
        background-repeat: no-repeat;
        position: relative;
        overflow: hidden;
      }

#player {
        width: 50px;
        height: 50px;
        background-image: url("https://i.imgur.com/ziH4mG2.png");
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        bottom: 10%;
        left: 20%;
      }

#rope {
        width: 3px;
        height: 60%;
        background-color: #2B2B2B;
        position: absolute;
        top: 12%;
        left: 47%;
        border-radius: 2px;
        transform-origin: center bottom;
        transform: rotate(60deg);
      }

#instruction {
        font-size: 20px;
        margin-top: 20px;
      }

#score {
        font-size: 24px;
        margin-top: 20px;
      }

.button {
        display: inline-block;
        padding: 10px 20px;
        background-color: #2B2B2B;
        color: #F7F7F7;
        border-radius: 5px;
        text-decoration: none;
        margin-top: 20px;
      }

.button:hover {
        background-color: #363636;
      }
    </style>
  </head>
  <body>
    <div id="game-screen">
      <div id="player"></div>
      <div id="rope"></div>
    </div>
    <div id="instruction">画面をタップしてブランコを揺らしてください</div>
    <div id="score">0</div>
    <a href="#" class="button" onclick="startGame()">プレイする</a>

document.getElementById("game-screen").addEventListener("click", function() {
        step = -step;
      });
    </script>
  </body>
</html>

概要：ブランコを揺らして、プレイヤーを高く飛ばすゲームです。画面をタップするとブランコの揺れ方が反転します。プレイヤーがどの程度飛んだかをスコアとして表示します。スマートフォンで操作可能なように、画面の大きさに合わせて自動調整されます。絵文字は使用していませんが、かわいいキャラクターと背景で楽しんでいただけます。