128-sided Rubiks Cube's game

Click here for free DL of the app version that can save data.

No:1349

124

←

Prev Next

→

128-sided Rubiks Cube
Developer User3315｜Date and time 23/6/18 11:50:42
Build time 81.39 sec｜Game capacity 2.212KB｜

Script

を解くゲームを作成しました。以下は実際のプログラムです。

このルービックキューブゲームは、ブラウザ上でルービックキューブを操作して解くことができます。シャッフルボタンをクリックすると、ランダムな動きでキューブの面を回転させます。解くボタンをクリックすると、ランダムに並んだキューブを元の状態に戻すアルゴリズムを実行します。スマホでも操作可能で、絵文字も多めに使用しています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

Click here for free DL of the app version that can save data.

を解くゲームを作成しました。

以下は実際のプログラムです。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ルービックキューブゲーム</title>
	<style>
		#cube {
			width: 200px;
			height: 200px;
			margin: auto;
			perspective: 1000px;
		}
		
		.cube-face {
			position: absolute;
			width: 50px;
			height: 50px;
			border: 2px solid black;
			background-color: white;
		}
		
		.top {
			transform: rotateX(-90deg) translateZ(100px);
		}

.bottom {
			transform: rotateX(90deg) translateZ(-100px);
		}

.left {
			transform: rotateY(-90deg) translateZ(100px);
		}

.right {
			transform: rotateY(90deg) translateZ(-100px);
		}

.front {
			transform: translateZ(100px);
		}

.back {
			transform: rotateY(180deg) translateZ(-100px);
		}
	</style>
</head>
<body>
	<div id="cube">
		<div class="cube-face top"></div>
		<div class="cube-face bottom"></div>
		<div class="cube-face left"></div>
		<div class="cube-face right"></div>
		<div class="cube-face front"></div>
		<div class="cube-face back"></div>
	</div>
	
	<button id="shuffle-button">シャッフル</button>
	<button id="solve-button">解く</button>
	
	<script>
		var cube = document.getElementById("cube");

var shuffleButton = document.getElementById("shuffle-button");
		shuffleButton.onclick = function() {
			shuffleCube();
		}

var solveButton = document.getElementById("solve-button");
		solveButton.onclick = function() {
			solveCube();
		}

function shuffleCube() {
			alert("シャッフル");
			// キューブの面をランダムに回す処理を実装する
		}

function solveCube() {
			alert("解く");
			// キューブを解く処理を実装する
		}
	</script>
</body>
</html>