Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="result-message" id="result-message"></div>
    <div class="slot" id="slot">
      <div class="display-wrap" id="display-wrap">
        <div class="display" id="display">
          <div class="items items-left">
            <div class="item item-left"><i class="fa fa-heart color-pink" aria-hidden="true"></i>
            </div>
            <div class="item item-left"><i class="fa fa-bell color-gold" aria-hidden="true"></i>
            </div>
            <div class="item item-left"><i class="seven color-orange">7</i>
            </div>
            <div class="item item-left"><i class="fa fa-tree color-green" aria-hidden="true"></i>
            </div>
            <div class="item item-left"><i class="fa fa-car color-blue" aria-hidden="true"></i>
            </div>
          </div>
          <div class="items items-center">
            <div class="item item-center"><i class="fa fa-heart color-pink" aria-hidden="true"></i>
            </div>
            <div class="item item-center"><i class="fa fa-bell color-gold" aria-hidden="true"></i>
            </div>
            <div class="item item-center"><i class="seven color-orange">7</i>
            </div>
            <div class="item item-center"><i class="fa fa-tree color-green" aria-hidden="true"></i>
            </div>
            <div class="item item-center"><i class="fa fa-car color-blue" aria-hidden="true"></i>
            </div>
          </div>
          <div class="items items-right">
            <div class="item item-right"><i class="fa fa-heart color-pink" aria-hidden="true"></i>
            </div>
            <div class="item item-right"><i class="fa fa-bell color-gold" aria-hidden="true"></i>
            </div>
            <div class="item item-right"><i class="seven color-orange">7</i>
            </div>
            <div class="item item-right"><i class="fa fa-tree color-green" aria-hidden="true"></i>
            </div>
            <div class="item item-right"><i class="fa fa-car color-blue" aria-hidden="true"></i>
            </div>
          </div>
        </div>
        <div class="btns">
          <button class="btn-wrap" id="btn-left"><a class="btn-glass" href="#"></a></button>
          <button class="btn-wrap" id="btn-center"><a class="btn-glass" href="#"></a></button>
          <button class="btn-wrap" id="btn-right"><a class="btn-glass" href="#"></a></button>
        </div>
      </div>
      <div class="lever">
        <div class="lever-axis">
          <div class="lever-stick-wrap lever-stick-wrap-upper-half">
            <div class="lever-stick lever-stick-upper-half"></div>
            <div class="lever-ball lever-ball-top"></div>
          </div>
          <div class="lever-stick-wrap lever-stick-wrap-lower-half">
            <div class="lever-stick lever-stick-lower-half"></div>
            <div class="lever-ball lever-ball-bottom"></div>
          </div>
        </div>
      </div>
    </div>
    <button class="replay-btn btn-square" id="replay-btn">Replay!   </button>
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Shrikhand');
@import url('https://fonts.googleapis.com/css?family=Concert+One');
@mixin glassCircle($colorLight,$colorDark,$h,$w) {
    background: radial-gradient($colorLight 50%, $colorDark 80%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5),
        0 2px 10px rgba($colorLight, 0.7),
        inset 0 0 10px rgba(0, 0, 150, 0.6);
    border: 1px solid rgba(0, 0, 0, .5);
    border-radius: 100%;
    position: relative;
    display: block;
    height: $h;
    width: $w;
    &::before {
        background-image: linear-gradient(
            to bottom,
            rgba(250, 250, 255, 1) 0%,
            rgba(250, 250, 255, 0.7) 10%,
            rgba(250, 250, 255, 0) 100%
        );
        border-radius: 6vmin;//6em
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        top: -1.7vmin;//-.5em
        left: 0;
        transform: scale(0.8, 0.6);
        width: 100%;
        z-index: 3;
    }
}
@mixin gradient($start-color, $end-color, $orientation) {
    background: $start-color;
    @if $orientation == vertical {
        // vertical
        background: linear-gradient(to bottom, $start-color 0%, $end-color 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(
                startColorstr='$start-color',
                endColorstr='$end-color',
                GradientType=0
            );
    }
    @else if $orientation == horizontal {
        // horizontal
        background: linear-gradient(to right, $start-color 0%, $end-color 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(
                startColorstr='$start-color',
                endColorstr='$end-color',
                GradientType=1
            );
    }
    @else {
        // radial
        background: radial-gradient(
            ellipse at center,
            $start-color 0%,
            $end-color 100%
        );
        filter: progid:DXImageTransform.Microsoft.gradient(
                startColorstr='$start-color',
                endColorstr='$end-color',
                GradientType=1
            );
    }
}
html {
    box-sizing: border-box;
}
* {
    margin: 0;
    padding: 0;
}
*, *::before, *::after {
    box-sizing: inherit;
}
html, body {
    height: 100%;
}
body {
    background: #ccc; //#ccc
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    line-height: 1.8;
    overflow: hidden;
}
a {
    pointer-events: none;
}
.result-zoom {
    animation: zoom 1s 1;
}
.fadeout {
    opacity: 0;
    visibility: hidden;
}
.result-message {
    font-size: 20vmin;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    z-index: 100;
}
@keyframes zoom {
    0% {
        transform: scale(0.2);
        opacity: 1;
        visibility: visible;
    }
    70% {
        transform: scale(1);
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}
.slot {
    background-image: linear-gradient(#fcbdbd 0%, #e24a4a 100%);
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
    border-radius: 4em/20em;
    display: flex;
    margin-bottom: 6vmin;
    padding: 12vmin;
}
.display {
    border-radius: 2em/20em;
    display: flex;
    justify-content: space-around;
    height:40vmin;
    overflow: hidden;
    margin-bottom: 4vmin;
    position: relative;
    &::before {
        background: linear-gradient(
            180deg,
            #333 0%,
            transparent 30%,
            transparent 70%,
            #333 100%
        );
        content: '';
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
}
.items {
    background: #fff;
    border-radius: 0.2em/10em;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    padding:0 4.6vmin;
}
.item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    font-size: 6vmin;
    padding: 0.4vmin 0;
}
.lever {
    background-image: linear-gradient(#ededed 0%, #adadad 100%);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
    border-radius: 0.5em;
    height:40vmin;
    margin-left: 3vmin;
    padding: 2.4vmin;
    &-axis {
        background: linear-gradient(
            180deg,
            #333 0%,
            transparent 30%,
            transparent 70%,
            #333 100%
        );
        height:100%;
        width: 100%;
    }
    &-stick-wrap {
        height: 50%;
        position: relative;
        width: 4.8vmin;
    }
    &-stick {
        background: linear-gradient(
            90deg,
            #333 0%,
            transparent 30%,
            transparent 70%,
            #333 100%
        );
        border-radius: 2em;
        height:100%;
        position: absolute;
        left:0;
        width: 4.8vmin;
        z-index:0;
        &-upper-half {
            height:100%;
            bottom:0;
        }
        &-lower-half {
            height:0%;
            top:0;
        }
    }
    &-ball {
        @include glassCircle(#bcffd1,#26ef66,10vmin,10vmin);
        margin-left: -5vmin;
        position: absolute;
        left: 50%;
        z-index:5;
        &-top {
            top: -5vmin;
            &.hide {
                visibility: hidden;
            }
        }
        &-bottom {
            bottom: -5vmin;
            .hide {
                visibility: hidden;
            }
        }
    }
}
.btns {
    background-image: linear-gradient(#ffe3b7 0%, #fcbc55 100%);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
    border-radius: 0.5em;
    display: flex;
}
button {
    background: none;
    border: none;
}

.btn-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vmin;
}

.btn-glass {
    @include glassCircle(#fc6a6a, #fc1b1b,10vmin,10vmin);
}
.btn-square {
    background-image: linear-gradient(#6795fd 0%, #67ceff 100%);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
    border-bottom: solid 3px #5e7fca;
    border-radius: 4px;
    color: rgba(0, 69, 212, 0.47);
    display: inline-block;
    font-weight: bold;
    font-size:4vmin;
    padding: 4vmin 6vmin;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
    &:active {
        box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
        border-bottom: none;
        transform: translateY(4px);
    }
}
.hide {
    display: none;
}

.start-btn {
    font-family: 'Concert One', cursive;
}
.seven {
    font-family: 'Shrikhand', cursive;
    font-weight: bold;
}
.color-pink {
    color: #f9205a;
}
.color-gold {
    color: #f9c220;
}
.color-orange {
    color: #f45d33;
}
.color-green {
    color: #317036;
}
.color-blue {
    color: #3e6be8;
}

            
          
!
            
              (() => {
	abstract class Btn {

		//ボタン要素の参照を取得
		protected _elem: HTMLButtonElement;

		constructor(elem) {
			this._elem = document.getElementById(elem);
		}
	}
	
	class ReplayBtn extends Btn {

		//スロットマシーンをリセットするメソッド
		private reset;
		constructor(elem, reset) {
			super(elem);
			this.reset = reset;

			//初期状態ではリセットボタンを非表示
			this.hide();

			//リセットボタンが押されるとスロットマシーンをリセットする
			this._elem.addEventListener('click', () => this.reset());
		}

		//リプレイボタンを表示するメソッド
		public show() {
			this._elem.classList.remove("hide");
		}

		//リプレイボタンを非表示にするメソッド
		public hide() {
			this._elem.classList.add("hide");
		}
	}
	
	class Display {

		//#displayの参照を取得
		private elem: HTMLElement;

		//#displayの子要素を取得
		private inner: string;

		constructor() {
			this.elem = document.getElementById('display');
			this.inner = this.elem.innerHTML;
		}

		//ディスプレイ内をリセットするメソッド
		reset() {
			this.elem.innerHTML = this.inner;
		}
	}
	
	class ResultMsg {
		private elem: HTMLElement;
		constructor() {
			//.result-message要素の参照を取得
			this.elem = document.getElementById('result-message');

			//初期状態ではメッセージを非表示
			this.hide();
		}

		//結果メッセージの非表示・フェードアウト
		public hide() {
			this.elem.classList.remove("result-zoom");
		}

		//結果メッセージの表示・フェードイン
		public show() {
			this.elem.classList.add("result-zoom");
		}

		//Great!!!をフェードイン表示
		public get isGreat() {
			this.show();
			return this.elem.textContent = "Great!!!";
		}

		//Good!をフェードイン表示
		public get isGood() {
			this.show();
			return this.elem.textContent = "Good!";
		}

		//Regret...をフェードイン表示
		public get isRegret() {
			this.show();
			return this.elem.textContent = "Regret...";
		}

		//メッセージをリセット
		public empty() {
			this.elem.textContent = "";
		}
	}
	
	class Reel {

		//この配列内でリール内の要素を並び替える
		private _items;

		//リール要素の参照を取得
		private elem: Element;

		//cancelAnimationFrameに渡す為に必要
		private requestId: number;

		//リール内をリセットする際に必要
		private elemInner: string;

		constructor(elem) {
			this.elem = document.getElementsByClassName(elem)[0];

			//リール内のアイテムを取得
			this.elemInner = this.elem.innerHTML;
		}

		//リール内のアイテムの並びをリセットするメソッド
		reset() {
			this.elem.innerHTML = this.elemInner;
		}

		//リールを初期化するメソッド
		init() {

			//リール内の要素を取り出して配列化する。([item, item,...])
			this._items = Array.prototype.slice.call(this.elem.children);
		}

		//他のクラスで参照するためにgetterを定義
		get items() {
			return this._items;
		}

		//リールを動かすメソッド
		public move() {

			//moveメソッドを繰り返し実行する
			this.requestId = requestAnimationFrame(this.move.bind(this));

			//リール内から最後のアイコンを削除し、それを取得
			const lastItem = this._items.pop();

			//リール内の先頭に先ほど取得した最後のアイコンを追加
			this._items.unshift(lastItem);

			//リール内を更新
			for(let i = 0; i < this._items.length; i++) {
				this.elem.appendChild(this._items[i]);
			}
		}

		//リールを止めるメソッド
		public stop() {
			//アニメーション停止
			cancelAnimationFrame(this.requestId);
		}
	}
	
	class Reels {
		//3つのリールを生成
		private reelLeft: Reel;
		private reelJenter: Reel;
		private reelRight: Reel;

		//リールを一まとめにするための配列
		private _elems: Reel[] = [];
		constructor() {
			const reelLeft = new Reel('items-left');
			const reelCenter = new Reel('items-center');
			const reelRight = new Reel('items-right');
			this._elems = [reelLeft, reelCenter, reelRight];

			//全てのリールを初期化
			this.init();
		}

		//全てのリールを初期化するメソッド
		public init() {
			for(let i = 0; i < this._elems.length; i++) {
				this._elems[i].init();
			}
		}

		//3つのリールをリセットするメソッド
		public reset() {
			for(let i = 0; i < this._elems.length; i++) {
				this._elems[i].reset();
			}
		}

		//他のクラスで参照するためにgetterを定義
		public get elems() {
			return this._elems;
		}

		//3つのリールを動かすメソッド
		public move() {
			for(let i = 0; i < this._elems.length; i++) {
				this._elems[i].move();
			}
		}

		//i番目のリールを止めるメソッド
		public stop(i) {
			this._elems[i].stop();
		}
	}
	
	class StopBtn extends Btn {
		private reel: Reel;

		constructor(elem) {
			super(elem);
		}

		//他のクラスで参照するためにgetterを定義
		get elem() {
			return this._elem;
		}

		//ボタンを無効化にするメソッド
		public disabled() {
			this._elem.disabled = true;
		}

		//ボタンを有効化にするメソッド
		public enabled() {
			this._elem.disabled = false;
		}
	}
	
	class StopBtns {

		//ストップボタンを3つ生成
		private stopBtnLeft: StopBtn;
		private stopBtnCenter: StopBtn;
		private stopBtnRight: StopBtn;

		//ストップボタンを入れる配列
		private _elems: StopBtn[] = [];

		//3つのリール
		private reels;

		//リールが止まった回数
		private stopCount: number = 0;

		//判定するメソッド
		private judge;
		constructor(reels, judge) {
			this.reels = reels;
			this.judge = judge;
			this.stopBtnLeft = new StopBtn('btn-left');
			this.stopBtnCenter = new StopBtn('btn-center');
			this.stopBtnRight = new StopBtn('btn-right');
			this._elems = [this.stopBtnLeft, this.stopBtnCenter, this.stopBtnRight];

			for(let i = 0; i < this._elems.length; i++) {

				//初期状態ではストップボタンを無効化
				this._elems[i].disabled();

				//ストップボタンを押すと
				this._elems[i].elem.addEventListener('click', () => {

					//ストップボタンの真上に位置するリールを止める
					this.reels.stop(i);

					//リールが止まる度にインクリメント
					this.stopCount++;
					///console.log(StopBtns.stopCount);

					//押されたストップボタンを無効化
					this._elems[i].disabled();

					//全てのストップボタンが押されたら判定
					if(this.stopCount >= 3) {
						this.stopCount = 0;
						this.judge();
					}
				}, false);
			}   
		}

		//他のクラスで参照するためにgetterを定義
		public get elems() {
			return this._elems;
		}

		//ボタンを無効化にするメソッド
		public disabled() {
			for(let i = 0; i < this._elems.length; i++) {
				this._elems[i].disabled();
				//this._elems[i].style.filterかrgba
			}
		}
		//ボタンを有効化にするメソッド
		public enabled() {
			for(let i = 0; i < this._elems.length; i++) {
				this._elems[i].enabled();
				//this._elems[i].style.filterかrgba
			}
		}
	}
	
	class StartLever {
		//レバーのボール部分(以下ボールと呼ぶ)
		private ball: HTMLElement;

		//ボールの親要素からの相対y座標
		private ballY: number;

		//ボールの高さ
		private ballHeight: number;

		//レバー上半分
		private stickUpperHalf: HTMLElement;

		//レバー上半分の親要素からの相対y座標
		private stickUpperHalfY: number;

		//レバー上半分の高さ
		private stickUpperHalfHeight: number;

		//レバー下半分
		private stickLowerHalf: HTMLElement;

		//レバー下半分から追従するボール
		private ballBottom: HTMLElement;

		//ドラッグしているかどうか
		private isDragging: boolean;

		//ボールを押下したときのカーソルのy座標
		private dy: number;

		//ドラッグしているときのカーソルのy座標
		private my: number;

		//dyからmyまでの距離
		private distance: number;

		constructor() {
			this.ball = document.querySelector(".lever-ball-top");
			this.ballY = this.ball.offsetTop;
			this.ballHeight = this.ball.clientHeight;
			this.ballBottom = document.querySelector(".lever-ball-bottom");
			this.hideBall(this.ballBottom);
			this.stickUpperHalf = document.querySelector(".lever-stick-upper-half");
			this.stickUpperHalfY = this.stickUpperHalf.offsetTop;
			this.stickUpperHalfHeight = this.stickUpperHalf.clientHeight;
			this.stickLowerHalf = document.querySelector(".lever-stick-lower-half");
			this.isDragging = false;

			//addEventListenerメソッドでイベントターゲットにイベントが発生したときに実行されるコールバック関数を追加
			this.ball.addEventListener("mousedown", e => this.down(e), false);
			this.ball.addEventListener("touchstart", e => this.down(e), false);
			document.body.addEventListener("mousemove", e => this.move(e), false);
			document.body.addEventListener("touchmove", e => this.move(e), false);
			document.body.addEventListener("mouseup", e => this.up(e), false);
			document.body.addEventListener("mouseleave", e => this.up(e), false);
			document.body.addEventListener("touchend", e => this.up(e), false);
			document.body.addEventListener("touchleave", e => this.up(e), false);
		}

		//ボールを表示するメソッド
		private showBall(ball) {
			ball.classList.remove('hide');
		}

		//ボールを非表示にするメソッド
		private hideBall(ball) {
			ball.classList.add('hide');
		}

		//レバーをリセットするメソッド
		public reset() {
			//この記述がないと2回目以降にレバーをmousedownしただけで倒れてスタートしてしまった。
			this.distance = null;
			this.showBall(this.ball);
			this.ball.style.transform = "";//ボールに追加したスタイルを削除
			this.stickUpperHalf.style.height = "";
			this.stickLowerHalf.style.height = "";
			this.hideBall(this.ballBottom);
			this.isDragging = false;
		}

		//ボールを押下したときに実行されるメソッド
		private down(e) {
			//リールが動いている間はスタートレバーの操作を禁止とする。document.body.addEventListener...の後に書いてしまうと、すでにthis.move(e)が呼ばれているのでこの記述は意味がなくなる。
			if (slotMachine.isPlaying) {
				return;
			}

			//ドラッグ開始
			this.isDragging = true;
			console.log("down!");

			//タッチ・マウスイベントの差異を吸収
			let event;
			if (e.type === "mousedown") {
				event = e;
			} else {
				event = e.changedTouches[0];
			}

			//押下したときのカーソルのy座標
			this.dy = event.clientY;
		}

		//ボールが移動できる範囲を制限するユーティリティメソッド
		private static clamp(number, min, max) {
			return Math.max(min, Math.min(number, max));
		}

		//押下したまま動かしたときに実行されるメソッド
		private move(e) {
			//ドラッグ中であれば
			if (this.isDragging) {
				console.log('move');
				const stickUpperHalfY = this.stickUpperHalf.offsetTop;
				const stickUpperHalfHeight = this.stickUpperHalf.clientHeight;

				//タッチ・マウスイベントの差異を吸収
				let event;
				if (e.type === "mousemove") {
					event = e;
				} else {
					event = e.changedTouches[0];
				}

				//移動中のカーソルの絶対的なy座標
				this.my = event.clientY;

				//ドラッグ時にリール内のアイコンが選択されるのを防ぐ
				e.preventDefault();

				//this.dyからの相対的なカーソルの移動中のy座標
				this.distance = this.my - this.dy;

				//distanceの変化に合わせてボールを縦方向に移動させる
				this.ball.style.transform =
					"translateY(" +
					StartLever.clamp(
						this.distance,
						0,
						(stickUpperHalfY + stickUpperHalfHeight) * 2
					) +
					"px)";

				//distanceの変化に合わせて上半分のスティックの高さを0に向かって変化させる
				this.stickUpperHalf.style.height = `${StartLever.clamp((stickUpperHalfY + stickUpperHalfHeight) - this.distance, 0, (stickUpperHalfY + stickUpperHalfHeight))}px`;

				//上半分のスティックの高さが0以下になったら
				if(stickUpperHalfHeight <= 0) {
					//distanceの変化に合わせて下半分のスティックの高さを0からスティック半分の高さまで変化させる(上半分の逆)
					this.stickLowerHalf.style.height = `${StartLever.clamp(this.distance - (stickUpperHalfY + stickUpperHalfHeight), 0, (stickUpperHalfY + stickUpperHalfHeight))}px`;
				//0以上に戻ったら
				}else{
					//下半分のスティックを0に戻す
					this.stickLowerHalf.style.height = `${0}px`;
				}
			}
		}

		//ドロップしたときに実行されるメソッド
		private up(e) {
			//ドラッグ中であれば(現時点でドラッグ中ではないがスタート中にイベント(mouseup,mouseleave,touchend,touchleave)が反応してup(e)メソッドが実行されるのを防ぐために判定している)
			if (this.isDragging) {
				console.log('up');
				const stickUpperHalfY = this.stickUpperHalf.offsetTop;
				const stickUpperHalfHeight = this.stickUpperHalf.clientHeight;

				//ドラッグ終了
				this.isDragging = false;

				//スタートレバーを倒しきるのに十分な移動量であれば
				if (this.distance >= (stickUpperHalfY + stickUpperHalfHeight) * 2) {
					//上半分のスティックに追従していたボールを非表示
					this.hideBall(this.ball);

					//下半分のスティックに追従していたボールを表示
					this.showBall(this.ballBottom);

					//倒しきったのでスタートレバーを固定
					this.stickUpperHalf.style.height = `${0}%`;
					this.stickLowerHalf.style.height = `${100}%`;

					//スロットスタート
					slotMachine.isPlaying = true;
				} 

				//十分でなければ
				else {
					//スタートレバーを元の位置に戻す
					this.ball.style.transform = '';
					this.stickUpperHalf.style.height = "";
					this.stickLowerHalf.style.height = "";
				}
			}
		}
	}
	
	class SlotMachine {
		//スロットが動いたかどうか
		private _isPlaying: boolean = false;

		//インスタンス化
		private startLever: StartLever;
		private display: Display;
		private resultMsg: ResultMsg;
		private reels: Reels;
		private stopBtns: StopBtns;
		private replayBtn: ReplayBtn;
		constructor() {
			this.display = new Display;
			this.reels = new Reels;
			this.stopBtns = new StopBtns(this.reels, this.judge.bind(this));
			this.startLever = new StartLever;
			this.resultMsg = new ResultMsg;
			///this.replayBtn = new ReplayBtn('replay-btn', this.reels, this.display, this.resultMsg, this.startLever);
			this.replayBtn = new ReplayBtn('replay-btn', this.reset.bind(this));
		}

		//スロットを動かすメソッド
		run() {
			this.reels.move();
			this.stopBtns.enabled();
		}

		//判定を行うメソッド
		judge() {
			//リプレイボタンを表示
			this.replayBtn.show();

			//真ん中横・左斜め上・右斜め上1行全て7が揃ったら「Great!!!!!」
			const reels = this.reels;
			const result = this.resultMsg;
			//console.log(reels);
			if (
				reels.elems[0].items[2].innerHTML == '<span class="seven color-orange">7</span>' &&
				reels.elems[1].items[2].innerHTML == '<span class="seven color-orange">7</span>' &&
				reels.elems[2].items[2].innerHTML == '<span class="seven color-orange">7</span>' ||
				reels.elems[0].items[1].innerHTML == '<span class="seven color-orange">7</span>' &&
				reels.elems[1].items[2].innerHTML == '<span class="seven color-orange">7</span>' &&
				reels.elems[2].items[3].innerHTML == '<span class="seven color-orange">7</span>' ||
				reels.elems[0].items[3].innerHTML == '<span class="seven color-orange">7</span>' &&
				reels.elems[1].items[2].innerHTML == '<span class="seven color-orange">7</span>' &&
				reels.elems[2].items[1].innerHTML == '<span class="seven color-orange">7</span>'
			) {
				result.isGreat;
			} 

			//7以外で真ん中横1行or左斜め上or右斜め上が揃ったら
			else if (
				(reels.elems[0].items[2].innerHTML == reels.elems[1].items[2].innerHTML &&
					reels.elems[1].items[2].innerHTML == reels.elems[2].items[2].innerHTML) ||
				(reels.elems[0].items[1].innerHTML == reels.elems[1].items[2].innerHTML &&
					reels.elems[1].items[2].innerHTML == reels.elems[2].items[3].innerHTML) ||
				(reels.elems[0].items[3].innerHTML == reels.elems[1].items[2].innerHTML &&
					reels.elems[1].items[2].innerHTML == reels.elems[2].items[1].innerHTML)
			) {
				result.isGood;
			}

			//何も揃っていなければ
			else {
				result.isRegret;
			}
		}

		//スロットマシーンをリセットするメソッド
		reset() {
			this.resultMsg.empty();
			this.resultMsg.hide();
			this.startLever.reset();
			this.replayBtn.hide();
			this.isPlaying = false;
			this.reels.reset();
			this.reels.init();
		}

		//他のクラスで参照するためにgetterで定義
		get isPlaying() {
			return this._isPlaying;
		}

		//trueが代入されるとスロットマシーンを動かす
		set isPlaying(flag) {
			this._isPlaying = flag;
			if(flag) {
				this.run();
				console.log('run');
			}else{
				return;
			}
		}
	}
	
	const slotMachine = new SlotMachine;
})();

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console