プログラマならカードマジックもプログラミングでやっちゃうよね？

この記事はだいぶ前に書かれたものなので情報が古いかもしれません

この記事を三行にまとめると

ハーマンパス
カードを入れ替える
カードを徐々に消す

この記事は以下の動画の中に出てきたサンプルコードを載せたものです。コピペなどが必要なときに使ってください。

カードを入れ替える

<div style="display:flex;align-items:center;justify-content:center;height:100vh">
  <img src="spade.png" id="card" style="max-width:80%" alt="カード" />
</div>
<script>
  card = document.getElementById('card');

  window.addEventListener('devicemotion', function(event){
    if(event.acceleration.x >= 10 || event.acceleration.y >= 10) {
      card.src = 'heart.png';
    }
  })
</script>

カードを徐々に消す

<div style="display:flex;align-items:center;justify-content:center;height:100vh">
  <img src="spade.png" id="card" style="max-width:80%;opacity:1" alt="カード" />
</div>
<script>
  card = document.getElementById('card');

  window.addEventListener('devicemotion', function(event){
    if(event.acceleration.x >= 10 || event.acceleration.y >= 10) {
      if(card.style.opacity >= 0) {
        card.style.opacity -= 0.01;
      }
    }
  })
</script>