1、首先我們生成3個隨機數，範圍在1到3之間。分別用 slotOne、slotTwo、slotThree來儲存著3個隨機數。

Math.floor(Math.random() * (3 - 1 + 1)) + 1;

2、現在我們的老虎機每次生成3個隨機數，我們得去檢查隨機數是否全部相等的情況。

如果全部相等，我們應該提示使用者他們贏了，並返回中獎號碼，否則我們應該返回null。

當這3個隨機數相等的時候，判定使用者贏。建立一個if條件語句，用多個條件按順序來檢查它們是否相等。類似於：

if (slotOne === slotTwo && slotTwo === slotThree){

  return slotOne;

} else {

}

當3個隨機數都一樣的時候，我們把 "It's A Win" 追加到class logger的html中。

3、用 jQuery 選擇器 $(".slot") 獲得所有老虎機。

一旦獲取到所有老虎機，我們可以通過中括號操作符獲取到每一個老虎機：

$($(".slot")[0]).html(slotOne);

jQuery將會獲取到第一個老虎機，並更新它的HTML為正確的數字。

4、給老虎機加圖片。可以通過不同的索引來獲取每個圖片。

$($('.slot')[0]).html('<img src = "' + images[slotOne-1] + '">');

<script>
function runSlots() {
var slotOne;
var slotTwo;
var slotThree;

var images = ["https://www.w3cschool.cn/statics/codecamp/images/9H17QFk.png", "https://www.w3cschool.cn/statics/codecamp/images/9RmpXTy.png", "https://www.w3cschool.cn/statics/codecamp/images/VJnmtt5.png"];
//產生隨機數
slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
slotThree = Math.floor(Math.random() * (3 - 1 + 1)) + 1;



//加圖片
$($('.slot')[0]).html('<img src = "' + images[slotOne-1] + '">');
$($('.slot')[1]).html('<img src = "' + images[slotTwo-1] + '">');
$($('.slot')[2]).html('<img src = "' + images[slotThree-1] + '">');



if (slotOne === slotTwo && slotTwo === slotThree) {
$('.logger').html("It's A Win");
return null;
}

if (slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){
$(".logger").html(slotOne + " " + slotTwo + " " + slotThree);
}

$('.logger').append(" Not A Win");

return [slotOne, slotTwo, slotThree];
}

$(document).ready(function() {
 $('.go').click(function() {
 runSlots();
 });
 });
</script>
 //結構
<div>
 <div class = 'container inset'>
 <div class = 'header inset'>
 <img src='/statics/codecamp/images/freecodecamp_logo.svg' alt='learn to code JavaScript at Free Code Camp logo' class='img-responsive nav-logo'>
 <h2>FCC Slot Machine</h2>
 </div>
 <div class = 'slots inset'>
 <div class = 'slot inset'>
 
 </div>
 <div class = 'slot inset'>
 
 </div>
 <div class = 'slot inset'>
 
 </div>
 </div>
 <br/>
 <div class = 'outset'>
 <button class = 'go inset'>
 Go
 </button>
 </div>
 <br/>
 <div class = 'foot inset'>
 <span class = 'logger'></span>
 </div>
 </div>
</div>
//樣式
<style>
 .slot > img {
margin: 0!important;
height: 71px;
width: 50px;
 }
 .container {
 background-color: #4a2b0f;
 height: 400px;
 width: 260px;
 margin: 50px auto;
 border-radius: 4px;
 }
 .header {
 border: 2px solid #fff;
 border-radius: 4px;
 height: 55px;
 margin: 14px auto;
 background-color: #457f86
 }
 .header h2 {
 height: 30px;
 margin: auto;
 }
 .header h2 {
 font-size: 14px;
 margin: 0 0;
 padding: 0;
 color: #fff;
 text-align: center;
 }
 .slots{
 display: flex;
 background-color: #457f86;
 border-radius: 6px;
 border: 2px solid #fff;
 }
 .slot{
 flex: 1 0 auto;
 background: white;
 height: 75px;
 width: 50px;
 margin: 8px;
 border: 2px solid #215f1e;
 border-radius: 4px;
 text-align: center;
 }
 .go {
 width: 100%;
 color: #fff;
 background-color: #457f86;
 border: 2px solid #fff;
 border-radius: 2px;
 box-sizing: none;
 outline: none!important;
 }
 .foot {
 height: 150px;
 background-color: 457f86;
 border: 2px solid #fff;
 }
 
 .logger {
 color: white;
 margin: 10px;
 }
 
 .outset {
 -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
 -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
 box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
 }
 
 .inset {
 -webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
 -moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
 box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);
 }
</style>