昨日のエントリーでスロットを実装するプログラムの紹介をしましたが、それを編集して掲載さいているサイトがあったので、紹介。
jQuery + jQuery Easing Plugin
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Sample Slot:jQuery+jQuery Easing Plugin</title>
<script src="libs/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="libs/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="slots.js" type="text/javascript"></script>
<link href="slots.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p align="center">
回転スタートから停止までの時間：
<input id="txt_duration" type="text" value="3" size="3" maxlength="3" />
[秒]
</p>
<p align="center">
アニメーション（回転）方式：
<select id="sel_easing" size="1">
<option selected>jswing</option>
<option>easeInQuad</option>
<option>easeOutQuad</option>
<option>easeInOutQuad</option>
<option>easeInCubic</option>
<option>easeOutCubic</option>
<option>easeInOutCubic</option>
<option>easeInQuart</option>
<option>easeOutQuart</option>
<option>easeInOutQuart</option>
<option>easeInQuint</option>
<option>easeOutQuint</option>
<option>easeInOutQuint</option>
<option>easeInSine</option>
<option>easeOutSine</option>
<option>easeInOutSine</option>
<option>easeInExpo</option>
<option>easeOutExpo</option>
<option>easeInOutExpo</option>
<option>easeInCirc</option>
<option>easeOutCirc</option>
<option>easeInOutCirc</option>
<option>easeInElastic</option>
<option>easeOutElastic</option>
<option>easeInOutElastic</option>
<option>easeInBack</option>
<option>easeOutBack</option>
<option>easeInOutBack</option>
<option>easeInBounce</option>
<option>easeOutBounce</option>
<option>easeInOutBounce</option>
</select>
</p>
<div align="center">
<div style="width:306px;" align="center">
<div class="slots" id="slots_a">
<div class="wrapper" style="margin-top: -200px;"></div>
</div>
<div class="slots" id="slots_b">
<div class="wrapper" style="margin-top: -200px;"></div>
</div>
<div class="slots" id="slots_c">
<div class="wrapper" style="margin-top: -200px;"></div>
</div>
<div style="text-align:center;clear:both;">
<input id="btn_start" type="button" value="Start" onClick="go();" style="margin-top:4px;">
<input id="btn_reset" type="button" value="Reset" onClick="reset();" style="margin-top:4px;" disabled>
</div>
<p id="result" style="text-align:center;color:red;font-size:42px;margin-top:0px"></p>
</div>
</div>
</body>
</html>body {
background-color: white;
padding: 0px;
margin: 0px;
font-size: 12px;
}
.slots {
font-size: 100px;
font-family: arial, helvetica, sans-serif;
overflow: hidden;
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
}
.slots .wrapper {
margin-top: 3px;
width: 100px;
}
.slots .slot {
width: 100px;
height: 100px;
text-align: center;
}var opts = ['1357464992_github.png', '1357465001_ffffound.png', '1357465007_live-journal.png', '1357465012_bebo.png', '1357465021_icon-dock.png', '1357465029_metacafe.png', '1357465036_newsvine.png'];
var results = new Array(3);
var time;
var select;
var columns;
$(document).ready(function() {
onload();
});
function onload() {
// initialize drawed this html page.
columns = 0;
addSlots($("#slots_a .wrapper"));
addSlots($("#slots_b .wrapper"));
addSlots($("#slots_c .wrapper"));
}
function go() {
// initialize after pushed Start button.
time = parseInt($("#txt_duration").val()) * 1000;
select = document.getElementById('sel_easing');
$("#btn_start").attr("disabled", "disabled");
// addSlots($("#slots_a .wrapper"));
moveSlots($("#slots_a .wrapper"));
// addSlots($("#slots_b .wrapper"));
moveSlots($("#slots_b .wrapper"));
// addSlots($("#slots_c .wrapper"));
moveSlots($("#slots_c .wrapper"));
// refee.
$(this).delay(time + 1000).queue(function() {
if (results[0] == results[1] && results[1] == results[2]) {
$("#result").text("当たり！");
} else {
$("#result").text("はずれ～");
}
$("#btn_reset").removeAttr("disabled");
$(this).dequeue();
})
}
function reset() {
$("#slots_a .wrapper").children().remove();
$("#slots_a .wrapper").css({
"margin-top" : "-200px"
});
$("#slots_b .wrapper").children().remove();
$("#slots_b .wrapper").css({
"margin-top" : "-200px"
});
$("#slots_c .wrapper").children().remove();
$("#slots_c .wrapper").css({
"margin-top" : "-200px"
});
$("#btn_start").removeAttr("disabled");
$("#btn_reset").attr("disabled", "disabled");
$("#result").text("");
onload();
}
function addSlots(jqo) {
for (var i = 0; i < 15; i++) {
var ctr = Math.floor(Math.random() * opts.length);
jqo.append("<div class='slot'><img border='0' src='../images/" + opts[ctr] + "' /></div>");
if (i == 12) {
results[columns] = ctr;
columns++;
}
}
}
function moveSlots(jqo) {
time += Math.round(Math.random() * 1000);
var marginTop = parseInt(jqo.css("margin-top"), 10)
marginTop -= (10 * 100)
jqo.stop(true, true);
jqo.animate({
"margin-top" : marginTop + "px"
}, {
'duration' : time,
'easing' : select.options[select.selectedIndex].text
});
}
0 コメント:
コメントを投稿