Zenn
🍸

JavaScriptでシェイクする何かをつくる

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

つくったもの

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

コード

index.html
<!DOCTYPE html>
<html lang='ja'>
  <head>
    <meta charset='UTF-8' />
    <link href='style.css' rel='stylesheet' />
    <title>Shaker</title>
  </head>
  <body>
    <div class="shaker">シェイカー</div>
    <script src='index.js'></script>
  </body>
</html>
index.js
const shaker = document.getElementsByClassName("shaker")[0];

shaker.addEventListener("pointermove", (e) => {
  // 押下しているときだけシェイカーを動かす
  if (!e.buttons) return;

  shaker.style.left = `${shaker.offsetLeft + e.movementX}px`;
  shaker.style.top = `${shaker.offsetTop + e.movementY}px`;

  // マウスがシェイカーから離れてもpointermoveイベントを発生させる
  shaker.setPointerCapture(e.pointerId);
});
style.css
.shaker {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 100px;
  border: 1px solid black;
  /* 縦書き */
  writing-mode: vertical-rl;
  /* 文字の選択不可 */
  user-select: none;
}

今後

ボーリングゲームとか作りたい

参考

https://qiita.com/www-tacos/items/5614b61d3742d6db34b7

Discussion