景品表示のWebページを作ってみた
景品表示のWebページを作ってみた:
これはAdventure Advent Calendar 2018の11日目の記事です。（後追い）
ひと月で４本も記事を書くとか、本当に褒めて欲しい。
さて、1日の記事でも触れましたが、私はインフラエンジニアです。
インフラといえば、ユーザーから見ると一番裏側の役割の為、たまには目に見える物をやって見たいと思い、先人のお力を借りてビンゴの景品を抽選するWeb画面を作ってみました。
正確に言うと、
https://github.com/sifue/partybingo
のソースコードをカスタマイズした です。
会社の忘年会の司会を任命されたので作りましたが、日の目を見る事が無くなってしまったのでQiitaで公開します。
javascriptを触るのは人生で２回目でしたが、インフラと違って結果が目に見えて分かるので、凄く楽しいですね！！
（フロントエンジニアの方はこの記事は役に立たないので、そっとお戻りください）
gifなのでアレですが、
startボタンを押すとドラムロールが鳴り、
stopボタンを押すとジャーンとシンバルが鳴ります。
元ソースは、ビンゴの整数を表示する目的の為、カスタマイズする箇所を以下の3つにします。
展開する
展開する
展開する
展開する
これはAdventure Advent Calendar 2018の11日目の記事です。（後追い）
ひと月で４本も記事を書くとか、本当に褒めて欲しい。
さて、1日の記事でも触れましたが、私はインフラエンジニアです。
インフラといえば、ユーザーから見ると一番裏側の役割の為、たまには目に見える物をやって見たいと思い、先人のお力を借りてビンゴの景品を抽選するWeb画面を作ってみました。
正確に言うと、
https://github.com/sifue/partybingo
のソースコードをカスタマイズした です。
会社の忘年会の司会を任命されたので作りましたが、日の目を見る事が無くなってしまったのでQiitaで公開します。
javascriptを触るのは人生で２回目でしたが、インフラと違って結果が目に見えて分かるので、凄く楽しいですね！！
（フロントエンジニアの方はこの記事は役に立たないので、そっとお戻りください）
完成版
gifなのでアレですが、startボタンを押すとドラムロールが鳴り、
stopボタンを押すとジャーンとシンバルが鳴ります。
何処をカスタマイズするか？
元ソースは、ビンゴの整数を表示する目的の為、カスタマイズする箇所を以下の3つにします。- 整数表示から画像表示にして、最大値を絞る
- 画像のサイズを調整する
- stopボタンと押した時にシンバルを鳴らす
フォルダ構成
展開する. ├── README.md ├── asset │ ├── bootstrap-3.3.5-dist │ │ ├── css │ │ │ ├── bootstrap-theme.css │ │ │ ├── bootstrap-theme.css.map │ │ │ ├── bootstrap-theme.min.css │ │ │ ├── bootstrap.css │ │ │ ├── bootstrap.css.map │ │ │ └── bootstrap.min.css │ │ ├── fonts │ │ │ ├── glyphicons-halflings-regular.eot │ │ │ ├── glyphicons-halflings-regular.svg │ │ │ ├── glyphicons-halflings-regular.ttf │ │ │ ├── glyphicons-halflings-regular.woff │ │ │ └── glyphicons-halflings-regular.woff2 │ │ └── js │ │ ├── bootstrap.js │ │ ├── bootstrap.min.js │ │ └── npm.js │ ├── drumroll_sound_niconicomons.url │ ├── jquery-1.11.3.min.js │ ├── nc79078.mp3 │ ├── partybingo.css │ ├── partybingo.js │ ├── roll-finish1.mp3 // シンバルのジャーン！！って音 │ └── screenshot.png ├── img // 新規作成。ここに1.jpeg などの景品画像を置いていきます。 │ ├── 1.jpeg │ ├── 10.jpeg │ ├── 2.jpeg │ ├── 3.jpeg │ ├── 4.jpeg │ ├── 5.jpeg │ ├── 6.jpeg │ ├── 7.jpeg │ ├── 8.jpeg │ ├── 9.jpeg │ └── undefined.jpeg └── index.html
index.html
展開するindex.html
// ページを読み込んだ時に表示されている画像です。
// 00で固定されているので、undefined.jpegに差し替えます
// <span id="pingo-number">00</span></p>
<span id="pingo-number"><img src=img/undefined.jpeg class="keihin"></span></p>
---
// 音を読み込みます
// へー、最初にhtmlで読ませるんだ
<audio id="drum" preload="auto">
<source src="./asset/nc79078.mp3" type="audio/mp3">
</audio>
// シンバルの音を追加します
// 音は https://soundeffect-lab.info/sound/anime/ から拝借しました
<audio id="finish" preload="auto">
<source src="./asset/roll-finish1.mp3" type="audio/mp3">
</audio>
script src="asset/partybingo.js "></script>
asset/partybingo.js
展開するasset/partybingo.js
(function(){
var pingoNumber = $('#pingo-number');
var startButton = $('#start-button');
var resetButton = $('#reset-button');
var historiesDiv = $('#histories');
var drumAudio = $('#drum').get(0);
// シンバル音の変数を定義
var finishAudio = $('#finish').get(0);
---
// init number list and storage
var numberListAll = [];
// 景品の最大個数を指定
var maxNumber = 10
for(var num = 1; num <= maxNumber; num++) {
numberListAll.push(num);
}
---
// startボタン押した後の画像ループ
var isStarted = false;
function rourletto() {
if(isStarted) {
var n = getNumberRamdom();
// n の中に整数がランダムで入ってくるので
// id="pingo-number"の内容を画像に置き換える
// 元ソース見てもbingo-numberじゃなくpingo-numberだった
// class="keihin"は、CSSでサイズを指定する為
document.getElementById('pingo-number').innerHTML
= '<img src=img/'
+n
+'.jpeg class="keihin">';
setTimeout(rourletto, 3);
}
}
---
// stopボタンを押した時の動作
var stop = function(time) {
isStarted = false;
startButton.text('Start');
var n = removeNumberRamdom();
//pingoNumber.text(toBingoString(n));
document.getElementById('pingo-number').innerHTML
= '<img src=img/'
+n
+'.jpeg class="keihin">';
setTimeout(rourletto, 3);
addHistory(n);
// シンバル音の開始位置を最初にする
finishAudio.currentTime = 0;
drumAudio.pause();
// ジャーン！！
finishAudio.play();
};
---
// startボタンを押した時の動作
var start = function(){
isStarted = true;
startButton.text('Stop');
drumAudio.currentTime = 0;
// ジャーン！！ を止める
finishAudio.pause();
drumAudio.play();
rourletto();
};
var startClicked = function(e){
if(isStarted) {
stop(null);
} else {
start();
}
};
startButton.click(startClicked); // button
startButton.focus();
// リセットボタンを押した時の動作
var resetClicked = function() {
if (confirm('Do you really want to reset?')) {
resetLists();
// 最初に戻るので、画像をundefined.jpegを表示させる
document.getElementById('pingo-number').innerHTML
= '<img src=img/undefined.jpeg class="keihin">';
historiesDiv.empty();
drumAudio.pause();
// ジャーン！！を止める
finishAudio.pause();
startButton.focus();
}
};
resetButton.click(resetClicked);
asset/partybingo.css
展開する末尾に、画像サイズを指定するCSSを追記します
asset/partybingo.css
img.keihin{
width: 800px;
height: 600px;
}
コメント
コメントを投稿