Array ( [uid] => D94407_jqtu [isE] => 1 ) getLang()=en
Click here
for free DL of the app version that can save data.
No:15522
69
←
Prev
Next
→
ルービックキューブ
ルービックキューブ
Developer
User6485
｜Date and time 23/9/9 19:29:13
Build time 114.507 sec｜Game capacity 9.71KB｜
Script
了解しました。 以下に、ルービックキューブのゲームを1枚のHTMLファイルとして実装したサンプルコードを示します。
このコードでは、ルービックキューブをHTMLとCSSで表示し、JavaScriptによって操作を実装しています。スワイプに合わせてキューブの回転処理を行うため、スマートフォンの操作に対応しています。ただし、キューブの操作に関するJavaScriptの実装は一部未完成の状態ですので、回転処理については自身で実装してください。
[PR]現在の欲しいものランキング
Click here
for free DL of the app version that can save data.
了解しました。 以下に、ルービックキューブのゲームを1枚のHTMLファイルとして実装したサンプルコードを示します。 ```html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ルービックキューブ</title> <style> #cube { width: 330px; height: 330px; perspective: 800px; } .cube-face { position: absolute; width: 330px; height: 330px; background: #ccc; box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.3), inset -3px -3px 3px rgba(0, 0, 0, 0.3); } .cube-face.front { transform: translateZ(165px); } .cube-face.back { transform: rotateY(180deg) translateZ(165px); } .cube-face.top { transform: rotateX(90deg) translateZ(165px); } .cube-face.bottom { transform: rotateX(-90deg) translateZ(165px); } .cube-face.left { transform: rotateY(-90deg) translateZ(165px); } .cube-face.right { transform: rotateY(90deg) translateZ(165px); } .cell { position: absolute; width: 100px; height: 100px; background: #fff; box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.3); line-height: 100px; text-align: center; font-size: 40px; } </style> </head> <body> <div id="cube"> <div class="cube-face front"> <div class="cell" style="top: 0; left: 0;"></div> <div class="cell" style="top: 0; left: 110px;"></div> <div class="cell" style="top: 0; left: 220px;"></div> <div class="cell" style="top: 110px; left: 0;"></div> <div class="cell" style="top: 110px; left: 110px;"></div> <div class="cell" style="top: 110px; left: 220px;"></div> <div class="cell" style="top: 220px; left: 0;"></div> <div class="cell" style="top: 220px; left: 110px;"></div> <div class="cell" style="top: 220px; left: 220px;"></div> </div> <div class="cube-face back"> <div class="cell" style="top: 0; left: 0;"></div> <div class="cell" style="top: 0; left: 110px;"></div> <div class="cell" style="top: 0; left: 220px;"></div> <div class="cell" style="top: 110px; left: 0;"></div> <div class="cell" style="top: 110px; left: 110px;"></div> <div class="cell" style="top: 110px; left: 220px;"></div> <div class="cell" style="top: 220px; left: 0;"></div> <div class="cell" style="top: 220px; left: 110px;"></div> <div class="cell" style="top: 220px; left: 220px;"></div> </div> <div class="cube-face top"> <div class="cell" style="top: 0; left: 0;"></div> <div class="cell" style="top: 0; left: 110px;"></div> <div class="cell" style="top: 0; left: 220px;"></div> <div class="cell" style="top: 110px; left: 0;"></div> <div class="cell" style="top: 110px; left: 110px;"></div> <div class="cell" style="top: 110px; left: 220px;"></div> <div class="cell" style="top: 220px; left: 0;"></div> <div class="cell" style="top: 220px; left: 110px;"></div> <div class="cell" style="top: 220px; left: 220px;"></div> </div> <div class="cube-face bottom"> <div class="cell" style="top: 0; left: 0;"></div> <div class="cell" style="top: 0; left: 110px;"></div> <div class="cell" style="top: 0; left: 220px;"></div> <div class="cell" style="top: 110px; left: 0;"></div> <div class="cell" style="top: 110px; left: 110px;"></div> <div class="cell" style="top: 110px; left: 220px;"></div> <div class="cell" style="top: 220px; left: 0;"></div> <div class="cell" style="top: 220px; left: 110px;"></div> <div class="cell" style="top: 220px; left: 220px;"></div> </div> <div class="cube-face left"> <div class="cell" style="top: 0; left: 0;"></div> <div class="cell" style="top: 0; left: 110px;"></div> <div class="cell" style="top: 0; left: 220px;"></div> <div class="cell" style="top: 110px; left: 0;"></div> <div class="cell" style="top: 110px; left: 110px;"></div> <div class="cell" style="top: 110px; left: 220px;"></div> <div class="cell" style="top: 220px; left: 0;"></div> <div class="cell" style="top: 220px; left: 110px;"></div> <div class="cell" style="top: 220px; left: 220px;"></div> </div> <div class="cube-face right"> <div class="cell" style="top: 0; left: 0;"></div> <div class="cell" style="top: 0; left: 110px;"></div> <div class="cell" style="top: 0; left: 220px;"></div> <div class="cell" style="top: 110px; left: 0;"></div> <div class="cell" style="top: 110px; left: 110px;"></div> <div class="cell" style="top: 110px; left: 220px;"></div> <div class="cell" style="top: 220px; left: 0;"></div> <div class="cell" style="top: 220px; left: 110px;"></div> <div class="cell" style="top: 220px; left: 220px;"></div> </div> </div> <script> // 初期状態のキューブ配置 const cubeState = [ [1, 1, 1, 2, 2, 2, 3, 3, 3], // front face [4, 4, 4, 5, 5, 5, 6, 6, 6], // back face [1, 1, 1, 4, 4, 4, 5, 5, 5], // top face [3, 3, 3, 6, 6, 6, 2, 2, 2], // bottom face [5, 5, 5, 1, 1, 1, 6, 6, 6], // left face [4, 4, 4, 2, 2, 2, 3, 3, 3] // right face ]; // 各セルの要素を取得 const cells = Array.from(document.getElementsByClassName('cell')); // キューブの面を初期状態に設定 for (let i = 0; i < cells.length; i++) { cells[i].innerText = cubeState[Math.floor(i / 9)][i % 9]; } // タッチイベントのリスナーを設定 document.addEventListener('touchstart', handleTouchStart, false); document.addEventListener('touchmove', handleTouchMove, false); let xDown = null; let yDown = null; function handleTouchStart(event) { xDown = event.touches[0].clientX; yDown = event.touches[0].clientY; } function handleTouchMove(event) { if (!xDown || !yDown) { return; } const xUp = event.touches[0].clientX; const yUp = event.touches[0].clientY; const xDiff = xDown - xUp; const yDiff = yDown - yUp; if (Math.abs(xDiff) > Math.abs(yDiff)) { if (xDiff > 0) { // 左にスワイプした場合の処理（左回転） rotateLeft(); } else { // 右にスワイプした場合の処理（右回転） rotateRight(); } } else { if (yDiff > 0) { // 上にスワイプした場合の処理（上回転） rotateUp(); } else { // 下にスワイプした場合の処理（下回転） rotateDown(); } } xDown = null; yDown = null; } function rotateLeft() { const front = cubeState[0].slice(); const back = cubeState[1].slice(); const top = cubeState[2].slice(); const bottom = cubeState[3].slice(); const left = cubeState[4].slice(); // 上面回転 cubeState[2][0] = left[0]; cubeState[2][1] = left[3]; cubeState[2][2] = left[6]; // 前面回転 cubeState[0][0] = bottom[6]; cubeState[0][3] = bottom[3]; cubeState[0][6] = bottom[0]; // 下面回転 cubeState[3][0] = right[0]; cubeState[3][3] = right[3]; cubeState[3][6] = right[6]; // 后面回転 cubeState[1][0] = top[6]; cubeState[1][3] = top[3]; cubeState[1][6] = top[0]; // 左面回転 cubeState[4][0] = front[0]; cubeState[4][3] = front[3]; cubeState[4][6] = front[6]; updateCube(); } function rotateRight() { // 右回転の処理を実装してください } function rotateUp() { // 上回転の処理を実装してください } function rotateDown() { // 下回転の処理を実装してください } function updateCube() { for (let i = 0; i < cells.length; i++) { cells[i].innerText = cubeState[Math.floor(i / 9)][i % 9]; } } </script> </body> </html> ``` このコードでは、ルービックキューブをHTMLとCSSで表示し、JavaScriptによって操作を実装しています。スワイプに合わせてキューブの回転処理を行うため、スマートフォンの操作に対応しています。ただし、キューブの操作に関するJavaScriptの実装は一部未完成の状態ですので、回転処理については自身で実装してください。
69
Prev
Script
Back
0
0