Zenn
🥤

JavaScriptでソーダゲーム

2024/06/26に公開
JavaScript
ネタ
tech

昔 DS に「だれでもアソビ大全」というソフトがあり、その中に「ソーダゲーム」というものがあった。交代でソーダを振って、吹き出させた人が負けというゲームである。それをまねてつくった。

だれでもアソビ大全には NPC がいたが、私のつくったゲームにそんな高度なものはない。プレイヤーは一人だけなので、プレイすれば負けることが運命づけられている。

サンプル

https://nakai-toy-box.netlify.app/soda/

コード

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link href="style.css" rel="stylesheet" />
    <title>Soda</title>
  </head>
  <body>
    <div class="soda">ソーダ</div>
    <script src="index.js"></script>
  </body>
</html>
index.js
const soda = document.getElementsByClassName("soda")[0];
const sodaWidth = 50;
const sodaHeight = 100;
const gameOverDistance = 3000; // これ以上振ったらゲームオーバー
let movingDistance = 0; // ソーダの移動距離

// 初期表示
window.addEventListener("DOMContentLoaded", () => {
  soda.style.width = `${sodaWidth}px`;
  soda.style.height = `${sodaHeight}px`;
});

soda.addEventListener("pointermove", (e) => {
  // 泡が出たら、ソーダの移動を停止
  if (document.getElementsByClassName("bubble").length) {
    return;
  }

  // 一定量振ったら、泡を出す
  if (movingDistance > gameOverDistance) {
    const bubble = document.createElement("div");
    bubble.className = "bubble";
    bubble.style.width = `${sodaWidth / 2}px`;
    bubble.style.height = `${sodaWidth / 2}px`;
    bubble.style.left = `${soda.offsetLeft + sodaWidth / 4}px`;
    bubble.style.top = `${soda.offsetTop - sodaWidth / 2}px`;
    document.body.appendChild(bubble);
    return;
  }

  // カーソルに合わせてソーダを移動
  if (e.buttons) {
    soda.style.left = `${soda.offsetLeft + e.movementX}px`;
    soda.style.top = `${soda.offsetTop + e.movementY}px`;
    soda.setPointerCapture(e.pointerId);

    // ソーダの移動距離を積算
    movingDistance += Math.abs(e.movementX) + Math.abs(e.movementY);
  }
});
style.css
.soda {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  border: 1px solid black;
  writing-mode: vertical-lr;
}

.bubble {
  position: absolute;
  border: 1px solid black;
  border-radius: 100%;
  animation: bubble-animation 0.8s ease infinite;
}

@keyframes bubble-animation {
  0% {
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-100px);
  }
}

Discussion