AI game creator

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

No:313

2115

←

Prev Next

→

curling
Developer User2955｜Date and time 23/6/12 0:45:46
Build time 45.263 sec｜Game capacity 4.169KB｜

Script

得点:

※このコードはゲームに必要な最低限の要素しか含まれていません。より詳細な仕様やルールがある場合は、それに応じたコード修正が必要になる可能性があります。

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>カーリングゲーム</title>
    <style>
      body {
        overflow: hidden;
        font-size: 3vh;
        background-color: #EEEEEE;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .score {
        position: absolute;
        top: 0;
        right: 0;
        padding: 5px;
      }
      #board {
        width: 40vh;
        height: 40vh;
        background-color: #FFFFFF;
        border-radius: 50%;
        box-shadow: 0px 0px 0px 5px #CCCCCC;
        position: relative;
        margin-top: 10vh;
      }
      #button {
        font-size: 3vh;
        background-color: #FFD700;
        border: none;
        border-radius: 5px;
        padding: 10px;
        margin-top: 5vh;
      }
      #button:hover {
        cursor: pointer;
        box-shadow: 0px 0px 5px #FFD700;
      }
      #rock {
        width: 5vh;
        height: 5vh;
        background-color: #000000;
        border-radius: 50%;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%);
        transition: all 0.1s;
      }
      #rock:hover {
        cursor: pointer;
        box-shadow: 0px 0px 3px #FFFFFF;
      }
    </style>
  </head>
  <body>
    <div class="score">得点: <span id="score"></span></div>
    <div id="board">
      <div id="rock"></div>
    </div>
    <button id="button">リセット</button>
    <script>
      let score = 0;
      let rockX = 0;
      let rockY = 0;
      let rockMoving = false;
      let board = document.getElementById("board");
      let rock = document.getElementById("rock");
      let scoreDisplay = document.getElementById("score");
      let button = document.getElementById("button");
      
      rock.addEventListener("mousedown", startDrag);
      rock.addEventListener("touchstart", startDrag);
      
      board.addEventListener("mousemove", moveRock);
      board.addEventListener("touchmove", moveRock);
      
      rock.addEventListener("mouseup", endDrag);
      rock.addEventListener("touchend", endDrag);
      
      button.addEventListener("click", resetGame);
      
      function startDrag(event) {
        rockMoving = true;
        event.preventDefault();
        let touch = event.targetTouches ? event.targetTouches[0] : event;
        rockX = touch.pageX - board.offsetLeft;
        rockY = touch.pageY - board.offsetTop;
      }
      
      function moveRock(event) {
        if (rockMoving) {
          event.preventDefault();
          let touch = event.targetTouches ? event.targetTouches[0] : event;
          let x = touch.pageX - board.offsetLeft;
          let y = touch.pageY - board.offsetTop;
          let dx = x - rockX;
          let dy = y - rockY;
          let left = parseInt(rock.style.left) + dx;
          let top = parseInt(rock.style.top) + dy;
          let distance = Math.sqrt(Math.pow(left - board.clientWidth / 2, 2) + Math.pow(top - board.clientHeight, 2));
          if (distance < board.clientWidth / 2 - rock.clientWidth / 2) {
            rock.style.left = left + "px";
            rock.style.top = top + "px";
          }
          rockX = x;
          rockY = y;
        }
      }
      
      function endDrag(event) {
        rockMoving = false;
        if (rock.style.left == board.clientWidth / 2 - rock.clientWidth / 2 + "px" && rock.style.top == board.clientHeight - rock.clientHeight + "px") {
          score += 1;
          scoreDisplay.innerHTML = score;
        }
      }
      
      function resetGame() {
        score = 0;
        scoreDisplay.innerHTML = score;
        rock.style.left = board.clientWidth / 2 - rock.clientWidth / 2 + "px";
        rock.style.top = board.clientHeight - rock.clientHeight + "px";
      }
      
      resetGame();
    </script>
  </body>
</html>