JavaScript-右クリックで要素が回転する処理を実装する

  • 2020年11月26日
  • 2021年7月5日
  • JavaScript
  • 728view

はじめに

現在Reactでパズルを作っていて、その際に右クリックでパズルを回転させる処理を実装しました。

サンプルをcodepenに残しました。

こちらで動きを確認して下さい。

右クリックで画像を回転させるには

通常のメニューが出る右クリックイベントを阻止する

以下のコードで右クリックの通常イベントが阻止されます。

document.oncontextmenuにて右クリックでのイベントを書きます。

document.oncontextmenu = function () { 
  // 右クリックでメニューが出るのを阻止
 return false;
}

右クリックイベント内で90°回転する処理を実装する

先ほど書いた右クリックイベント内に、90°回転させる処理を加えていきます。

//回転軸を定義
 let d = 0;

//今回回転させたい要素をid=testで定義している
const e = document.getElementById("test");
e.oncontextmenu = function () { 
   //90°回転
   d = d + 90;
  e.style.transform = "rotate(" + d + "deg)";
  // 右クリックでメニューが出るのを阻止
 return false;
}

こうする事で、右クリックにて要素の回転が実現できます。

まとめ

今回触れた右クリックで要素を回転させる実装と、react-draggbleというドラッグ&ドロップのライブラリと組み合わせて、パズルゲームの1機能を作りました。

react-draggableでパーツをドラッグ&ドロップする(クリックイベントも追加する)

自分の母校の授業で使われた謎解きゲームが公開終了したので色々振り返る

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the compare bar
Compare
Compare ×
Let's Compare! Continue shopping