Skip to content

Commit

Permalink
add code of first release
Browse files Browse the repository at this point in the history
  • Loading branch information
@adeliae1316
adeliae1316 committed Dec 30, 2019
1 parent 1479b54 commit 82b4835
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 124 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,4 @@
|---|---|---|
|Quiz-Results(sound)|[CC BY 4.0](https://creativecommons.org/licenses/by/4.0/)|[OtoLogic](https://otologic.jp)|
|Ubuntu(Font)|[Ubuntu font licence Version 1.0](https://ubuntu.com/legal/font-licence)|[Dalton Maag](https://www.daltonmaag.com/)|
|[Materialize](https://materializecss.com/)|[MIT License](https://opensource.org/licenses/mit-license.php)||
24 changes: 7 additions & 17 deletions assets/css/bingo.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,25 +11,11 @@ h1 {
display: inline-block;
}

#gridcontainer {
display: grid;
grid-template-columns: 1fr 20%;
grid-template-areas:
"areaA areaB";
}

.griditem {

}

#list {
grid-area: areaA;
}

.flexcontainer {
display: flex;
flex-wrap: wrap;
align-content:space-around;
margin: auto 12px;
}

.item {
Expand All @@ -43,8 +29,7 @@ h1 {
background-color: rgb(240, 240, 240);
}

#numarea {
grid-area: areaB;
#viewarea {
display: flex;
justify-content: center;
width: auto;
Expand All @@ -66,3 +51,8 @@ h1 {
text-align: center;
font-size: 128px;
}

/* @override */
#modal {
width: 30%;
}
176 changes: 80 additions & 96 deletions assets/js/bingo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,140 +4,124 @@ window.addEventListener("DOMContentLoaded", function() {
e.returnValue = "本当にページ移動しますか？";
}, false);

// maxを設定（初期値は75）
let bingo_max_number;
let queries = getUrlQueries();
if(queries["max"] && queries["max"] > 0){
bingo_max_number = queries["max"];
} else {
bingo_max_number = 75;
}
var is_modal_open = false;

// 定数
const bingo_max_number = 75;
const logo = document.getElementById("logo");
const list = document.getElementById("list");
const numarea = document.getElementById("numarea");
const viewarea = document.getElementById("viewarea");
const upperbit = document.getElementById("upperbit");
const lowerbit = document.getElementById("lowerbit");
const player = new Audio();
player.src = "./assets/audio/drum_roll.mp3";

// 変数
let pre_elem, interval_id, num, is_started = false;

// 初期化
for(let i=0;i<bingo_max_number;i++){
// 数字表示用の領域を作成
let div = document.createElement("div");
div.id = "num_box_" + (i+1);
div.className = "item";
let str = (i+1) < 10 ? "0" + (i+1) : (i+1);
div.innerText = str;
list.appendChild(div);
}
upperbit.textContent = "0";
lowerbit.textContent = "0";

// keyevents
document.addEventListener("keydown", function(event) {
switch (event.key) {
case "Enter":
{
numarea.click();
break;
}
default:
{
break;
// モーダル終了後イベントコールバック関数 onCloseEnd
// 引数を渡す術が分からないため、グローバル変数
var num, pre_elem;
let onCloseEnd = function(){
let elem = document.getElementById("num_box_" + num);
elem.style.backgroundColor = "#d9c816";
elem.style.color = "#f0f0f0";
pre_elem = elem;
is_modal_open = false;
};

// モーダル開始後イベントコールバック関数 onOpenEnd
var id;
let onOpenEnd = function(){
player.play();
is_modal_open = true;
let i=0;
let j=5;
let count = 0;
id = setInterval(function(){
if(count > 46){
clearInterval(id);
}
}
upperbit.textContent = count < 46 ? parseInt(i++ % 10) : parseInt(num / 10);
lowerbit.textContent = count < 46 ? parseInt(j++ % 10) : parseInt(num % 10);
count++;
}, 100);
};

// 巻き機能
viewarea.addEventListener("click", function(){
player.pause();
player.currentTime = 0;
clearInterval(id);
upperbit.textContent = parseInt(num / 10);
lowerbit.textContent = parseInt(num % 10);
}, false);

// モーダル初期化
let elems = document.querySelectorAll('.modal');
let options = {
"preventScrolling": true,
"onCloseEnd": onCloseEnd,
"onOpenEnd": onOpenEnd
};
let instances = M.Modal.init(elems, options);

// 重複のないランダムな数列を用意
let array = getShuffledArray(null);
let array = getShuffledArray();

// numareaのクリックによるイベント発火
numarea.addEventListener("click", function() {
if(!is_started){
if(array.length > 0){
is_started = true;
// シャッフルする
reshuffled_array = getShuffledArray(array);
// 1つ取り出す
num = reshuffled_array.pop();
// 音楽を再生して数字を表示し色を変更
player.play();
let i=0, j=5;
let count = 0;
interval_id = setInterval(function(){
if(count > 46){
clearInterval(interval_id);
changeColor(num);
}
upperbit.textContent = count < 46 ? parseInt(i++ % 10) : parseInt(num / 10);
lowerbit.textContent = count < 46 ? parseInt(j++ % 10) : parseInt(num % 10);
count++;
}, 100);
// logoのクリックによるイベント発火
logo.addEventListener("click", function() {
// write code
if(array.length >0){
// 直前の要素の色を変更
if(pre_elem){
pre_elem.style.backgroundColor = "#367fa3";
pre_elem.style.color = "#f0f0f0";
}
} else {
// 巻き機能
player.pause();
player.currentTime = 0;
clearInterval(interval_id);
upperbit.textContent = parseInt(num / 10);
lowerbit.textContent = parseInt(num % 10);
changeColor(num);
is_started = false;
// 1つ取り出して色を変更
num = array.pop();
// モーダルを表示
var instance = M.Modal.getInstance(logo);
// モーダル終了後イベントコールバック関数を参照
// onCloseEnd
}
}, false);

function changeColor(num){
// 直前の要素の色を変更
if(pre_elem){
pre_elem.style.backgroundColor = "#367fa3";
pre_elem.style.color = "#f0f0f0";
document.addEventListener("keydown", function(event) {
// write code
if(event.key == "Enter"){
if(is_modal_open){
viewarea.click();
}else{
logo.click();
}
}
// 現在の要素の色を変更
let elem = document.getElementById("num_box_" + num);
elem.style.backgroundColor = "#d9c816";
elem.style.color = "#f0f0f0";
pre_elem = elem;
}
}, false);

// 引数が配列でない場合は配列を作成し、Fisher–Yatesによるシャッフルを実施する
// 引数が配列の場合は再度Fisher–Yatesによるシャッフルを実施する
function getShuffledArray(target){
function getShuffledArray(){
// 1~bingo_max_numberまでの数列を用意
if(!Array.isArray(target)){
target = new Array();
for(let i=0;i<bingo_max_number;i++){
target.push(i+1);
}
let array = new Array();
for(let i=0;i<bingo_max_number;i++){
array.push(i+1);
}
// ミリ秒 回ループ（なんでもいいけどランダムな数）
for(let j = 0;j<(new Date().getMilliseconds());j++){
// Fisher–Yates
for(let i = target.length - 1; i > 0; i--){
for(let i = array.length - 1; i > 0; i--){
let r = Math.floor(Math.random() * (i + 1));
let tmp = target[i];
target[i] = target[r];
target[r] = tmp;
let tmp = array[i];
array[i] = array[r];
array[r] = tmp;
}
}
return target;
}

// クエリ文字列を取得
function getUrlQueries() {
let ret = {};
const query_str = window.location.search.slice(1);
let queriy_array = query_str.split("&");
if(queriy_array.length == 0) return ret;
for(let query of queriy_array){
let keyval = query.split("=");
ret[keyval[0]] = keyval[1];
}
return ret;
return array;
}

}, false);
30 changes: 19 additions & 11 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,24 +19,32 @@
<meta name="theme-color" content="#ffffff">
<!-- stylesheet -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="./assets/css/bingo.css">
<!-- javascript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="./assets/js/bingo.js"></script>
</head>

<body>
<header></header>
<article>
<h1 id="logo">BINGO GAME</h1>
<div id="gridcontainer">
<div id="list" class="flexcontainer griditem"></div>
<div id="numarea" class="griditem">
<div id="upperbit"></div>
<div id="lowerbit"></div>
<body">
<header></header>
<article>
<h1 id="logo" data-target="modal" class="modal-trigger">BINGO GAME</h1>
<div id="list" class="flexcontainer"></div>
<!-- Modal Structure -->
<div id="modal" class="modal">
<div class="modal-content">
<div id="viewarea">
<div id="upperbit" class="odometer"></div>
<div id="lowerbit" class="odometer"></div>
</div>
</div>
</article>
<footer></footer>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">OK</a>
</div>
</div>
</article>
<footer></footer>
</body>

</html>

0 comments on commit 82b4835

Please sign in to comment.