得先說這拉霸有點粗糙，不過是我努力練習的作品XD，這次有機會做這個拉霸機，是因為行雲者在期初成果展的抽獎拉霸機風評還不錯，不過想再專題成果展上展現的話，似乎要做些修改，不如就重新做一個真正的拉霸機吧，當天點擊率還頗高（得意的笑~），還真的有點成就感，之前研究的辛苦總算是有代價。
這次是實作這個網址的JQuery，JQuey slot machine，GitHub難度在哪呢？就是我根本不會JavaScript阿，而且CSS我也不熟，根本GG！
整個只能靠之前的程式邏輯去猜測，貫徹『大膽假設，細心證實』，這種學習模式花的時間會很多，而且剛開始會很盲目，不過越摸索會越了解整個的架構，所以這樣學習模式好不好呢？對我自己是不錯啦，不過事後一定要找時間再從基礎學好，把整個技術銜接起來，這才是紮實的方法。
head的部份
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CMRDB Slot Machine</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=2.0">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="dist/jquery.slotmachine.js"></script>
<link href="css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="dist/bootstrap-dialog.min.js"></script>
有點亂@@，不過主要就是載入
body的部份
<span id="Sound"></span>
<div style="text-align:center;background-color:#d5242e;width:100%;height:10%;">
<div class="line">
</div>
</div>
<div class="back" style="height:90%;width:100%;">
<div class="content container" style="text-align: center">
<div class="rule">3個相同 得 籌碼x10倍<br>2個相同 得 籌碼x0.5倍<br>沒有相同 扣 籌碼x1倍</div>
<div class="row">
<div class="col-xs-12 col-md-9 col-md-offset-2 slotmachineimg">
<!--black box-->
<div class="col-md-8 col-md-offset-1 machineContainer">
<div id="machine1" class="slotMachine">
<div class="slot slot1"></div>
<div class="slot slot2"></div>
<div class="slot slot3"></div>
<div class="slot slot4"></div>
<div class="slot slot5"></div>
<div class="slot slot6"></div>
</div>
<div id="machine2" class="slotMachine">
<div class="slot slot1"></div>
<div class="slot slot2"></div>
<div class="slot slot3"></div>
<div class="slot slot4"></div>
<div class="slot slot5"></div>
<div class="slot slot6"></div>
</div>
<div id="machine3" class="slotMachine">
<div class="slot slot1"></div>
<div class="slot slot2"></div>
<div class="slot slot3"></div>
<div class="slot slot4"></div>
<div class="slot slot5"></div>
<div class="slot slot6"></div>
</div>
</div>
<div id="score" class="score">2000</div>
<div id="buttom100" class="btn" style="position:absolute;left:350px;top:235px;">100</div>
<div id="buttom500" class="slotMachineButton" style="position:absolute;left:450px;top:235px;">500</div>
<div id="buttom1000" class="slotMachineButton" style="position:absolute;left:550px;top:235px;">1000</div>
<div class="col-md-2 col-md-offset-1" style="left:14px;top:10px;">
<div id="slotMachineButton1" class="button"></div>
</div>
</div>
</div>
</div>
</div>
當中有些CSS是內嵌，當初求快，事後看起來有點醜XDDDD
宣告(script的部份)
<script>
$(document).ready(function(){
arr = new Array(3);
score = 2000;
lock = false;
counter = 100;
bt100 = true;
bt500 = false;
bt1000 = false;
var machine1 = $("#machine1").slotMachine({
active : 0,
delay : 500
});
var machine2 = $("#machine2").slotMachine({
active : 0,
delay : 500
});
var machine3 = $("#machine3").slotMachine({
active : 0,
delay : 500
});
執行(script的部份)
function onComplete(active){
x = this.active;
if(this.element[0].id=='machine1'){
arr[0]=x;
}else if(this.element[0].id=='machine2'){
arr[1]=x;
}else if(this.element[0].id=='machine3'){
arr[2]=x;
}
}
執行(script的部份)
function num(active){
if(arr[0]==arr[1]&&arr[0]==arr[2]){
score=score+(counter*10);
$("#score").text(score);
}else if(arr[0]==arr[1]||arr[0]==arr[2]||arr[1]==arr[2]){
score=score+(counter/2);
$("#score").text(score);
}else{
score=score-counter;
$("#score").text(score);
}
}
其他function(script的部份)
function onlock(active){
lock=false ;
}
function myrefresh(){
window.location.reload();
}
function getsound(){
console.log('SOUND');
$('#Sound').html('<embed id="audio" src="audio/123.wav" width="0" height="0" >');
}
function scoreisgood(){
if(score < 100){
BootstrapDialog.show({
title: 'Information',
message: 'You are loss'
});
//BootstrapDialog.alert('');
setTimeout(function(){myrefresh();},2000);
}
}
點擊籌碼按鈕事件(script的部份)
$("#buttom100").click(
function(){
if(score >= 100 && lock==false){
if(bt100 == false){
var str = document.getElementById('buttom100');
var str1 = document.getElementById('buttom500');
var str2 = document.getElementById('buttom1000');
str.className="btn";
str1.className="slotMachineButton";
str2.className="slotMachineButton";
bt100 = true;
bt500 = false;
bt1000 = false;
counter = 100;
}}
});
$("#buttom500").click(
function(){
if(score >= 500 && lock==false){
if(bt500 == false){
var str = document.getElementById('buttom100');
var str1 = document.getElementById('buttom500');
var str2 = document.getElementById('buttom1000');
str1.className="btn";
str.className="slotMachineButton";
str2.className="slotMachineButton";
bt100 = false;
bt500 = true;
bt1000 = false;
counter = 500;
}
}
});
$("#buttom1000").click(
function(){
if(score >= 1000 && lock==false){
if(bt1000 == false){
var str = document.getElementById('buttom100');
var str1 = document.getElementById('buttom500');
var str2 = document.getElementById('buttom1000');
str2.className="btn";
str1.className="slotMachineButton";
str.className="slotMachineButton";
bt100 = false;
bt500 = false;
bt1000 = true;
counter = 1000;
}
}
});
點拉霸的事件(script的部份)
$("#slotMachineButton1").click(
function(){
if(lock==false){
lock = true ;
$(this).animate({ top: 70, height:'130px',width:'130px',fontSize: 100, 'line-height':'200px',duration: '5000',
easing: 'easeOutBounce'},500);
$(this).animate({ top: 0 , height:'100px',width:'100px',fontSize: 60,'line-height':'150px',duration: '5000',
easing: 'easeOutBounce'}, 500);
getsound();
machine1.shuffle(5,onComplete);
setTimeout(function(){machine2.shuffle(5, onComplete);}, 500);
setTimeout(function(){machine3.shuffle(5, onComplete);}, 1000);
setTimeout(function(){num();}, 5000);
setTimeout(function(){onlock();}, 5000);
setTimeout(function(){scoreisgood();}, 5000);
}}
)
});
</script>
</body>
</html>