JSFiddle - React, Tailwind, and code Playground

by interlife

HTML

<div id="wrap">
	<div class="stage">
		<div class="dice">
			<div class="item">1</div>
			<div class="item -main">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
			<div class="item">6</div>
		</div>
	</div>
	<div class="button_wrap">
		<button class="js-dice">サイコロを振る</button>
	</div>
	<p class="leftovers-caption">【残りの値】</p>
	<div id="leftovers"></div>
</div>

SCSS

/* サイコロ本体 */
.dice {
	display:block;
	position:relative;
	margin:0 auto;
	width:100px;
	height:100px;
	transform-style:preserve-3d;
}
/* 目 */
.dice .item {
	border-radius: 3px;
	position:absolute;
	left:0;
	right:0;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
	box-sizing:border-box;
	border:1px solid #333;
	width:100px;
	height:100px;
	background-color:rgba(#005bac, 0.7);
	font-size:2rem;
	text-align:center;
	color:#fff;
	&:nth-child(1) {
		transform:translate3d(0, -50px, 0) rotateX(-90deg);
	}
	//rotateがないのが正面
	&:nth-child(2) {
		transform:translate3d(0, 0, 50px);
	}
	&:nth-child(3) {
		transform:translate3d(50px, 0, 0) rotateY(90deg);
	}
	&:nth-child(4) {
		transform:translate3d(-50px, 0, 0) rotateY(-90deg);
	}
	&:nth-child(5) {
		transform:translate3d(0, 0, -50px) rotateY(180deg);
	}
	&:nth-child(6) {
		transform:translate3d(0, 50px, 0) rotateX(-90deg);
	}
}

//回転アニメーション：遠近
@keyframes rotate-animation {
	0% { transform:rotate3d(0); }
	100% { transform:rotate3d(0.5,0.75,0.5, 360deg); }
}
@keyframes rotate-animation1 {
	0% { transform:rotate3d(0); }
	100% { transform:rotate3d(1,0,1, -360deg); }
}
@keyframes rotate-animation2 {
	0% { transform:rotate3d(0); }
	100% { transform:rotate3d(0,1,1, -360deg); }
}
//ストップモーションアニメーション
@keyframes stopmotion {
	0% { transform:scale(0.5); }
	50% { transform:scale(1.2); }
	100% { transform:scale(1); }
}

//その他
#wrap {
	padding: 0 0 80px;
}
.stage {
  margin: 60px auto;
	perspective: 300px;
	transition: transform 0s;
	.dice {
		animation:rotate-animation 10s linear infinite;
		//サイコロを斜めに
		//transform:rotateX(-25deg) rotateY(-45deg);
	}
	//アニメ中style
	&.animation {
		transition: transform .3s;
		transform: scale(0.5);
		.dice {
			transform: none;
			animation:rotate-animation1 .3s linear infinite;
		}
		&.plus .dice{
			animation:rotate-animation2 .3s linear infinite;
		}
	}
	//結果画面
	&.stop...

JavaScript

//settimeout用変数
var timerId;

//結果用配列
var resultArray = [
	"佐藤",
	"鈴木",
	"田中",
	"渡辺",
	"山本",
	"★"
]

//HTMLに配列の値を追加
for (var key in resultArray) {
	var num = parseInt(key) + 1;
  $('.dice .item:nth-child('+num+')').text(resultArray[key]);
}

//配列の値を指定のIDにテキストとして追加
$('#leftovers').text(JSON.stringify(resultArray));


//配列の値の数を取得
//オブジェクト（連想配列）の時の撮り方 → var res = Object.keys(resultArray).length;
var res = resultArray.length;

$('.js-dice').on('click',function(){

	//配列の残りの数が0以上なら実行
	if(res > 0) {

		//アニメーション中にボタンが押されたら
		if($(this).hasClass('start')) {
			//class="animation"を除去してclass="stop"を追加
			$('.stage').removeClass('animation').addClass('stop');
			//ボタンからもclass="start"を除去して、テキスト変更
			$(this).removeClass('start').text('サイコロを振る');
			//setIntervalを解除
			window.clearInterval(timerId);
			//サイコロの目のテキストを変更
			let saikoro = Math.floor( Math.random() * res) +1;
			$('.-main').text(resultArray[saikoro - 1]);

			//サイコロででた値を配列から削除
			res = res - 1;
			resultArray.splice( saikoro - 1, 1 );

			//値の減った配列の値をテキストにして出力
			$('#leftovers').text(JSON.stringify(resultArray));

			//配列に何も残ってなかったらボタンのテキストを変更
			if(res == 0) {
				$(this).removeClass('start').text('本日の抽選は以上です');
			}

		//アニメが停止中にボタンが押されたら
		} else {

				//class="stop"を除去してclass="animation"を追加
				$('.stage').addClass('animation').removeClass('stop');
				//ボタンにclass="start"を追加して、テキスト変更
				$(this).addClass('start').text('とめる');
				//サイコロの動きに変化をつけるようsetIntervalでclassを付け替え
				timerId = setInterval(function() {
					$('.stage').toggleClass('plus');
				}, 500);

		}
	}

});