☆HTML☆
ビンゴシートの作成
ランダムなビンゴシートを作成します。
ただ、それだけ。
☆CSS☆
body{
font-family: 'Courier New',monospace;
margin: 0;
padding: 0;
width: 100%;
}
header{
background-color: rgb(255, 230, 86);
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
h1{
margin: 0;
}
p{
text-align: center;
line-height: 5px;
}
table{
padding-top: 40px;
margin-right: auto;
margin-left: auto;
}
th,td{
background-color: pink;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
}
☆JavaScript☆
'use strict';
{
function createColumn(col){
const source = [];
for(let i=0;i<15;i++){
source[i]=i+1+15*col;
}
const column = [];//B列の数値
for(let i=0;i<5;i++){
column[i] = source.splice(Math.floor(Math.random() * source.length),1)[0];
}
return column;
}
function createColumns(){
const columns =[];
for(let i=0;i<5;i++){
columns[i] = createColumn(i);
}
columns[2][2]='FREE';
return columns
}
function createBingo(columns){
const bingo = [];
for(let row=0;row<5;row++){
bingo[row]=[];
for(let col=0;col<5;col++){
bingo[row][col]=columns[col][row];
}
}//bingoシートの行列の反転
return bingo;
}
function renderBingo(bingo){
for(let row=0;row<5;row++){
const tr =document.createElement('tr');
for(let col=0;col<5;col++){
const td = document.createElement('td');
td.textContent = bingo[row][col];
tr.appendChild(td);
}
document.querySelector('tbody').appendChild(tr);
}
}
const columns = createColumns();
const bingo = createBingo(columns);
renderBingo(bingo);
// b[0] = source.splice(Math.floor(Math.random() * source.length),1)[0];//spliceは指定した配列（今回はsource配列）のランダムな位置のインデックスから一つ取り出し、取り出したものをその配列から消すという性質を持つ。これにより、今回の場合は、ビンゴシート内での数字の重複を防ぐことが出来る。
// b[1] = source.splice(Math.floor(Math.random() * source.length),1)[0];//[0]を付けることにより、spliceが要素を取り出すという命令になり、配列の中に配列を作ってしまうという現象を防ぐことが出来る。（spliceの返り値が複数になる事もある為、要素が一つでも配列になってしまう。）
// b[2] = source.splice(Math.floor(Math.random() * source.length),1)[0];
// b[3] = source.splice(Math.floor(Math.random() * source.length),1)[0];
// b[4] = source.splice(Math.floor(Math.random() * source.length),1)[0];
}