Guess the sml character's game

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

No:52046

100

←

Prev Next

→

Guess the sml character
Developer User21347｜Date and time 24/3/17 13:21:10
Build time 0.985 sec｜Game capacity 0.172KB｜

Script

The AI could not be gamified with this prompt. Please try again with different prompts. .
Displays games created by AI in the past at random.

このアプリは、JavaScriptを使って3Dグラフィックのキューブ型の3Dモデルを表示するゲームです。十字キーを押すことで回転させることができ、見る角度(x軸、y軸、z軸)を変えることが可能です。スマホでも操作がしやすいように、見やすさを意識して絵文字を多用しました。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<p style='font-size:14px;background-color:#FF0'>The AI could not be gamified with this prompt. Please try again with different prompts. . <br>Displays games created by AI in the past at random.</p><!DOCTYPE html>
<html>
<head>
	<title>3D Cube Game</title>
	<style type="text/css">
		#container {
			-webkit-perspective: 800px;
			-moz-perspective: 800px;
			-o-perspective: 800px;
			perspective: 800px;
			margin: auto;
			width: 50%;
			height: 300px;
			position: relative;
		}

#cuboid {
			width: 100%;
			height: 100%;
			position: absolute;
			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			-o-transform-style: preserve-3d;
			transform-style: preserve-3d;
			-webkit-transform-origin: 50% 50%;
			-moz-transform-origin: 50% 50%;
			-o-transform-origin: 50% 50%;
			transform-origin: 50% 50%;
			-webkit-transition: -webkit-transform 2s linear;
			-moz-transition: -moz-transform 2s linear;
			-o-transition: -o-transform 2s linear;
			transition: transform 2s linear;
		}

#front {
			width: 100%;
			height: 100%;
			position: absolute;
			background-color: #f00;
			-webkit-transform: translateZ(150px);
			-moz-transform: translateZ(150px);
			-o-transform: translateZ(150px);
			transform: translateZ(150px);
		}

#back {
			width: 100%;
			height: 100%;
			position: absolute;
			background-color: #0f0;
			-webkit-transform: rotateY(180deg) translateZ(150px);
			-moz-transform: rotateY(180deg) translateZ(150px);
			-o-transform: rotateY(180deg) translateZ(150px);
			transform: rotateY(180deg) translateZ(150px);
		}

#left {
			width: 100%;
			height: 100%;
			position: absolute;
			background-color: #00f;
			-webkit-transform: rotateY(-90deg) translateZ(150px);
			-moz-transform: rotateY(-90deg) translateZ(150px);
			-o-transform: rotateY(-90deg) translateZ(150px);
			transform: rotateY(-90deg) translateZ(150px);
		}

#right {
			width: 100%;
			height: 100%;
			position: absolute;
			background-color: #ff0;
			-webkit-transform: rotateY(90deg) translateZ(150px);
			-moz-transform: rotateY(90deg) translateZ(150px);
			-o-transform: rotateY(90deg) translateZ(150px);
			transform: rotateY(90deg) translateZ(150px);
		}

#top {
			width: 100%;
			height: 100%;
			position: absolute;
			background-color: #f0f;
			-webkit-transform: rotateX(90deg) translateZ(150px);
			-moz-transform: rotateX(90deg) translateZ(150px);
			-o-transform: rotateX(90deg) translateZ(150px);
			transform: rotateX(90deg) translateZ(150px);
		}

#bottom {
			width: 100%;
			height: 100%;
			position: absolute;
			background-color: #0ff;
			-webkit-transform: rotateX(-90deg) translateZ(150px);
			-moz-transform: rotateX(-90deg) translateZ(150px);
			-o-transform: rotateX(-90deg) translateZ(150px);
			transform: rotateX(-90deg) translateZ(150px);
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="cuboid">
			<div id="front"></div>
			<div id="back"></div>
			<div id="left"></div>
			<div id="right"></div>
			<div id="top"></div>
			<div id="bottom"></div>
		</div>
	</div>