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

No:811

215

←

Prev Next

→

A game to cook takoyaki without burning them
Developer User3147｜Date and time 23/6/17 19:18:26
Build time 79.385 sec｜Game capacity 7.097KB｜

Script

たこ焼きを焦がさずに焼くゲーム

たこ焼きを焦がさずに焼いてください。

スマホを傾けるとたこ焼きを回転させることができます。

十分に焼けたたこ焼きを取り出すと得点が加算されます。

5個のたこ焼き焦がすとゲームオーバーです。

得点: 0

残りチャンス: 5

←

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>
  </head>
  <body>
    <h1>たこ焼きを焦がさずに焼くゲーム</h1>

<div id="gameboard">
      <p>たこ焼きを焦がさずに焼いてください。</p>
      <p>スマホを傾けるとたこ焼きを回転させることができます。</p>
      <p>十分に焼けたたこ焼きを取り出すと得点が加算されます。</p>
      <p>5個のたこ焼き焦がすとゲームオーバーです。</p>

<p id="scoretext">得点: 0</p>
      <p id="lifetext">残りチャンス: 5</p>
    </div>

// 画面の読み込みが完了したら
      window.onload = function() {
        var startBtn = document.getElementById("startbtn");
        startBtn.onclick = startGame;
      }

function startGame() {
        gameStatus = true;

var gameArea = document.getElementById("gamearea");
        gameArea.style.display = "block";

var startBtn = document.getElementById("startbtn");
        startBtn.style.display = "none";

document.addEventListener("devicemotion", function(event) {
          if (gameStatus) {
            var x = event.accelerationIncludingGravity.x;
            var y = event.accelerationIncludingGravity.y;
            moveOctopus(x, y);
          }
        }, true);

// タイマー処理
        setInterval(function() {
          if (gameStatus) {
            createTakoyaki();
          }
        }, 2000);
      }

// たこ焼きを作成する
      function createTakoyaki() {
        var gameArea = document.getElementById("gamearea");
        var newTakoyaki = document.createElement("div");
        newTakoyaki.setAttribute("class", "takoyaki");
        newTakoyaki.setAttribute("data-done", "false");

// たこ焼きの初期位置をランダムに決定
        var x = Math.floor(Math.random() * (gameArea.offsetWidth - 100));
        var y = Math.floor(Math.random() * (gameArea.offsetHeight - 100));
        newTakoyaki.style.left = x + "px";
        newTakoyaki.style.top = y + "px";

gameArea.appendChild(newTakoyaki);
      }

// タコパッドを移動する
      function moveOctopus(x, y) {
        var octopus = document.getElementById("octopus");
        var gameArea = document.getElementById("gamearea");

var maxX = gameArea.offsetWidth - 100;
        var maxY = gameArea.offsetHeight - 100;

// 画面の端に到達したら反転する
        if (x > 5) {
          octopus.style.transform = "rotate(180deg)";
          if (parseInt(octopus.style.left) + 5 < maxX) {
            octopus.style.left = (parseInt(octopus.style.left) + 5) + "px";
          }
        } else if (x < -5) {
          octopus.style.transform = "rotate(0deg)";
          if (parseInt(octopus.style.left) - 5 > 0) {
            octopus.style.left = (parseInt(octopus.style.left) - 5) + "px";
          }
        }

if (y > 5) {
          if (parseInt(octopus.style.top) + 5 < maxY) {
            octopus.style.top = (parseInt(octopus.style.top) + 5) + "px";
          }
        } else if (y < -5) {
          if (parseInt(octopus.style.top) - 5 > 0) {
            octopus.style.top = (parseInt(octopus.style.top) - 5) + "px";
          }
        }

// たこ焼きとの当たり判定
        var takoyakis = document.querySelectorAll(".takoyaki");
        for (var i = 0; i < takoyakis.length; i++) {
          var takoyaki = takoyakis[i];
          if (takoyaki.getAttribute("data-done") == "false") {
            if (hitTest(octopus, takoyaki)) {
              takoyaki.setAttribute("data-done", "true");
              takoyaki.style.background = "#ffcc00";
              score += 100;
              var scoreText = document.getElementById("scoretext");
              scoreText.innerHTML = "得点: " + score;
            }
          }
        }
      }

// 当たり判定を行う
      function hitTest(obj1, obj2) {
        var left1 = parseInt(obj1.style.left);
        var top1 = parseInt(obj1.style.top);
        var right1 = left1 + parseInt(obj1.offsetWidth);
        var bottom1 = top1 + parseInt(obj1.offsetHeight);

var left2 = parseInt(obj2.style.left);
        var top2 = parseInt(obj2.style.top);
        var right2 = left2 + parseInt(obj2.offsetWidth);
        var bottom2 = top2 + parseInt(obj2.offsetHeight);

if (left1 < right2 && right1 > left2 && top1 < bottom2 && bottom1 > top2) {
          return true;
        } else {
          return false;
        }
      }
    </script>

h1 {
        font-size: 32px;
        text-align: center;
        margin-bottom: 20px;
      }

#gameboard {
        text-align: center;
        margin: 20px;
      }

#gamearea {
        position: relative;
        width: 100%;
        height: 400px;
        margin: 20px 0;
        display: none;
      }

#octopus {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
        width: 100px;
        height: 100px;
        background: url("https://cdn.shortpixel.ai/client/q_lqip,ret_wait,w_100,h_100/https://new.gamelearn.jp/wp-content/uploads/tako.png") center center no-repeat;
        background-size: 100% auto;
      }

.takoyaki {
        position: absolute;
        width: 50px;
        height: 50px;
        background: url("https://cdn.shortpixel.ai/client/q_lqip,ret_wait,w_50,h_50/https://www.takoboca.com/wp-content/uploads/2021/08/タコス.jpg") center center no-repeat;
        background-size: 100% auto;
        background-color: #fff;
        border-radius: 50%;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
      }

#plate {
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -50px;
        width: 100px;
        height: 20px;
        border-radius: 50%;
        background-color: #993300;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
      }

#scoretext,
      #lifetext {
        margin-top: 20px;
        font-size: 20px;
        font-weight: bold;
      }

#scoretext:before {
        content: "\1F4AF";
        margin-right: 10px;
      }

#lifetext:before {
        content: "\2764";
        margin-right: 10px;
      }

button {
        font-size: 20px;
        padding: 10px 20px;
        border-radius: 5px;
        background-color: #ffcc00;
        border: none;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        cursor: pointer;
      }

button:hover {
        background-color: #ffdd44;
      }
    </style>
  </body>
</html>