Last active
June 22, 2022 04:13
-
-
Save motsu0/69941ba2fa49335d3f44f641c83b37c0 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#bt-fullscreen{ | |
display: block; | |
padding: 8px 12px; | |
margin: 20px auto; | |
cursor: pointer; | |
} | |
#screen{ | |
box-sizing: border-box; | |
height: 95vh; | |
border: 1px solid #777; | |
background-color: #fff; | |
} | |
#settings{ | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
align-items: center; | |
height: 100%; | |
font-size: 24px; | |
} | |
#settings.hide{ | |
display: none; | |
} | |
.settings-row{ | |
margin: 12px 0; | |
line-height: 36px; | |
} | |
.sel-settings{ | |
height: 28px; | |
line-height: 36px; | |
vertical-align: 4px; | |
cursor: pointer; | |
} | |
#bt-start{ | |
display: block; | |
padding: 8px 12px; | |
margin: 12px 0; | |
font-size: inherit; | |
cursor: pointer; | |
} | |
/* */ | |
.board{ | |
width: 100%; | |
margin: 0 auto; | |
border-collapse: collapse; | |
table-layout: fixed; | |
background-color: #4CAF50; | |
} | |
.board-td{ | |
box-sizing: border-box; | |
position: relative; | |
border: 3px solid #333; | |
cursor: pointer; | |
} | |
.board-td::after{ | |
display: block; | |
content: ""; | |
padding-top: 100%; | |
} | |
.piece{ | |
position: absolute; | |
width: 80%; | |
height: 80%; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%,-50%); | |
border-radius: 50%; | |
} | |
.piece.b{ | |
background-color: #000; | |
} | |
.piece.w{ | |
background-color: #fff; | |
} | |
.piece.none{ | |
width: 100%; | |
height: 100%; | |
top: 0; | |
left: 0; | |
transform: none; | |
border-radius: 0; | |
} | |
/* */ | |
#remember-area,#answer-area{ | |
height: 100%; | |
} | |
#remain-box,#answer-control{ | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
height: 10%; | |
} | |
#remain-box.hide,#answer-control.hide{ | |
display: none; | |
} | |
#remain-name{ | |
margin-right: 20px; | |
font-size: 20px; | |
} | |
#remain-time{ | |
font-size: 32px; | |
} | |
#remember-body{ | |
box-sizing: border-box; | |
height: 80%; | |
padding: 8px; | |
margin: 0 auto; | |
} | |
#answer-page{ | |
margin: 0 12px; | |
font-size: 32px; | |
text-align: center; | |
} | |
.bt-page{ | |
padding: 4px 12px; | |
font-size: 20px; | |
cursor: pointer; | |
} | |
#answer-bt{ | |
display: flex; | |
justify-content: flex-end; | |
align-items: center; | |
height: 10%; | |
} | |
#answer-bt.hide{ | |
display: none; | |
} | |
#bt-answer{ | |
margin-right: 8px; | |
cursor: pointer; | |
} | |
/* */ | |
#result{ | |
box-sizing: border-box; | |
margin: 60px 0; | |
border: 2px solid #777; | |
border-radius: 4px; | |
} | |
.res-title{ | |
padding: 4px 0; | |
text-align: center; | |
} | |
.res-row{ | |
display: grid; | |
grid-template-columns: 1fr 1fr; | |
grid-template-rows: auto auto auto; | |
margin: 0 8px; | |
border-top: 1px dashed #777; | |
} | |
.res-name{ | |
grid-column: 1/3; | |
grid-row: 1/2; | |
padding-top: 8px; | |
text-align: center; | |
} | |
.res-table-box{ | |
grid-row: 2/3; | |
padding: 8px; | |
} | |
.res-board-td{ | |
cursor: initial; | |
border-width: 1px; | |
} | |
.res-title{ | |
text-align: center; | |
} | |
.res-info{ | |
grid-column: 1/3; | |
grid-row: 3/4; | |
margin: 8px; | |
} | |
/* */ | |
.hide{ | |
display: none; | |
} | |
@media screen and (min-width:769px) { | |
.res-board-td{ | |
border-width: 3px; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<button id="bt-fullscreen">全画面でプレイ</button> | |
<div id="screen"> | |
<div id="settings"> | |
<div class="settings-row"> | |
記憶時間: | |
<select id="sel-time" class="sel-settings"> | |
<option value="0.5">0.5</option> | |
<option value="1" selected>1</option> | |
<option value="2">2</option> | |
<option value="3">3</option> | |
<option value="4">4</option> | |
<option value="5">5</option> | |
<option value="6">6</option> | |
<option value="7">7</option> | |
<option value="8">8</option> | |
<option value="9">9</option> | |
<option value="10">10</option> | |
<option value="11">11</option> | |
<option value="12">12</option> | |
<option value="13">13</option> | |
<option value="14">14</option> | |
<option value="15">15</option> | |
<option value="16">16</option> | |
<option value="17">17</option> | |
<option value="18">18</option> | |
<option value="19">19</option> | |
<option value="20">20</option> | |
<option value="21">21</option> | |
<option value="22">22</option> | |
<option value="23">23</option> | |
<option value="24">24</option> | |
<option value="25">25</option> | |
<option value="26">26</option> | |
<option value="27">27</option> | |
<option value="28">28</option> | |
<option value="29">29</option> | |
<option value="30">30</option> | |
<option value="31">31</option> | |
<option value="32">32</option> | |
<option value="33">33</option> | |
<option value="34">34</option> | |
<option value="35">35</option> | |
<option value="36">36</option> | |
<option value="37">37</option> | |
<option value="38">38</option> | |
<option value="39">39</option> | |
<option value="40">40</option> | |
<option value="41">41</option> | |
<option value="42">42</option> | |
<option value="43">43</option> | |
<option value="44">44</option> | |
<option value="45">45</option> | |
<option value="46">46</option> | |
<option value="47">47</option> | |
<option value="48">48</option> | |
<option value="49">49</option> | |
<option value="50">50</option> | |
<option value="51">51</option> | |
<option value="52">52</option> | |
<option value="53">53</option> | |
<option value="54">54</option> | |
<option value="55">55</option> | |
<option value="56">56</option> | |
<option value="57">57</option> | |
<option value="58">58</option> | |
<option value="59">59</option> | |
<option value="60">60</option> | |
<option value="61">61</option> | |
<option value="62">62</option> | |
<option value="63">63</option> | |
<option value="64">64</option> | |
<option value="65">65</option> | |
<option value="66">66</option> | |
<option value="67">67</option> | |
<option value="68">68</option> | |
<option value="69">69</option> | |
<option value="70">70</option> | |
<option value="71">71</option> | |
<option value="72">72</option> | |
<option value="73">73</option> | |
<option value="74">74</option> | |
<option value="75">75</option> | |
<option value="76">76</option> | |
<option value="77">77</option> | |
<option value="78">78</option> | |
<option value="79">79</option> | |
<option value="80">80</option> | |
<option value="81">81</option> | |
<option value="82">82</option> | |
<option value="83">83</option> | |
<option value="84">84</option> | |
<option value="85">85</option> | |
<option value="86">86</option> | |
<option value="87">87</option> | |
<option value="88">88</option> | |
<option value="89">89</option> | |
<option value="90">90</option> | |
<option value="91">91</option> | |
<option value="92">92</option> | |
<option value="93">93</option> | |
<option value="94">94</option> | |
<option value="95">95</option> | |
<option value="96">96</option> | |
<option value="97">97</option> | |
<option value="98">98</option> | |
<option value="99">99</option> | |
</select> | |
分 | |
</div> | |
<div class="settings-row"> | |
盤面数: | |
<select id="sel-board-num" class="sel-settings"> | |
<option value="1">1</option> | |
<option value="2">2</option> | |
<option value="3">3</option> | |
<option value="4">4</option> | |
<option value="5">5</option> | |
<option value="6">6</option> | |
<option value="7">7</option> | |
<option value="8">8</option> | |
<option value="9">9</option> | |
<option value="10">10</option> | |
<option value="11">11</option> | |
<option value="12">12</option> | |
<option value="13">13</option> | |
<option value="14">14</option> | |
<option value="15">15</option> | |
<option value="16">16</option> | |
<option value="17">17</option> | |
<option value="18">18</option> | |
<option value="19">19</option> | |
<option value="20">20</option> | |
<option value="21">21</option> | |
<option value="22">22</option> | |
<option value="23">23</option> | |
<option value="24">24</option> | |
<option value="25">25</option> | |
<option value="26">26</option> | |
<option value="27">27</option> | |
<option value="28">28</option> | |
<option value="29">29</option> | |
<option value="30">30</option> | |
<option value="31">31</option> | |
<option value="32">32</option> | |
<option value="33">33</option> | |
<option value="34">34</option> | |
<option value="35">35</option> | |
<option value="36">36</option> | |
<option value="37">37</option> | |
<option value="38">38</option> | |
<option value="39">39</option> | |
<option value="40">40</option> | |
<option value="41">41</option> | |
<option value="42">42</option> | |
<option value="43">43</option> | |
<option value="44">44</option> | |
<option value="45">45</option> | |
<option value="46">46</option> | |
<option value="47">47</option> | |
<option value="48">48</option> | |
<option value="49">49</option> | |
<option value="50">50</option> | |
<option value="51">51</option> | |
<option value="52">52</option> | |
<option value="53">53</option> | |
<option value="54">54</option> | |
<option value="55">55</option> | |
<option value="56">56</option> | |
<option value="57">57</option> | |
<option value="58">58</option> | |
<option value="59">59</option> | |
<option value="60">60</option> | |
<option value="61">61</option> | |
<option value="62">62</option> | |
<option value="63">63</option> | |
<option value="64">64</option> | |
<option value="65">65</option> | |
<option value="66">66</option> | |
<option value="67">67</option> | |
<option value="68">68</option> | |
<option value="69">69</option> | |
<option value="70">70</option> | |
<option value="71">71</option> | |
<option value="72">72</option> | |
<option value="73">73</option> | |
<option value="74">74</option> | |
<option value="75">75</option> | |
<option value="76">76</option> | |
<option value="77">77</option> | |
<option value="78">78</option> | |
<option value="79">79</option> | |
<option value="80">80</option> | |
<option value="81">81</option> | |
<option value="82">82</option> | |
<option value="83">83</option> | |
<option value="84">84</option> | |
<option value="85">85</option> | |
<option value="86">86</option> | |
<option value="87">87</option> | |
<option value="88">88</option> | |
<option value="89">89</option> | |
<option value="90">90</option> | |
<option value="91">91</option> | |
<option value="92">92</option> | |
<option value="93">93</option> | |
<option value="94">94</option> | |
<option value="95">95</option> | |
<option value="96">96</option> | |
<option value="97">97</option> | |
<option value="98">98</option> | |
<option value="99">99</option> | |
</select> | |
個 | |
</div> | |
<button id="bt-start">スタート</button> | |
</div> | |
<div id="remember-area" class="hide"> | |
<div id="remain-box"> | |
<div id="remain-name"></div> | |
<div id="remain-time"></div> | |
</div> | |
<div id="answer-control" class="hide"> | |
<button id="bt-prev" class="bt-page">prev</button> | |
<div id="answer-page">1</div> | |
<button id="bt-next" class="bt-page">next</button> | |
</div> | |
<div id="remember-body"></div> | |
<div id="answer-bt" class="hide"> | |
<button id="bt-answer">回答を終了</button> | |
</div> | |
</div> | |
</div> | |
<div id="result"> | |
<div class="res-title">結果</div> | |
<div id="res-body"></div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const bt_fullscreen = document.getElementById('bt-fullscreen'); | |
const screen = document.getElementById('screen'); | |
const settings = document.getElementById('settings'); | |
const sel_time = document.getElementById('sel-time'); | |
const sel_board_num = document.getElementById('sel-board-num'); | |
const bt_start = document.getElementById('bt-start'); | |
const remember_area = document.getElementById('remember-area'); | |
const remain_box = document.getElementById('remain-box'); | |
const remain_name = document.getElementById('remain-name'); | |
const remain_time_box = document.getElementById('remain-time'); | |
const remember_body = document.getElementById('remember-body'); | |
const answer_control = document.getElementById('answer-control'); | |
const answer_page = document.getElementById('answer-page'); | |
const answer_board = document.getElementsByClassName('answer-board'); | |
const bt_page = document.getElementsByClassName('bt-page') | |
const answer_bt= document.getElementById('answer-bt'); | |
const bt_answer = document.getElementById('bt-answer'); | |
const result = document.getElementById('result'); | |
const res_body = document.getElementById('res-body'); | |
let answer; | |
let time_limit; | |
let remain_time; | |
let total_board; | |
let round; | |
let ans_page; | |
let player_answer; | |
let gameEnd = false; | |
document.exitFullscreen = document.exitFullscreen || document.cancelFullScreen || document.webkitCancelFullScreen; | |
bt_start.addEventListener('click',appStart); | |
[...bt_page].forEach((el,i)=>{ | |
el.addEventListener('click',()=>{pageChange(i)}); | |
}); | |
bt_answer.addEventListener('click',endAnswer); | |
bt_fullscreen.addEventListener('click',fullScreen); | |
document.addEventListener('fullscreenchange',movetoResult); | |
function fullScreen(){ | |
screen.requestFullscreen(); | |
} | |
function movetoResult(){ | |
if(gameEnd){ | |
const goalY = window.pageYOffset + result.getBoundingClientRect().top; | |
window.scroll({ | |
top: goalY, | |
behavior: 'smooth' | |
}); | |
gameEnd = false; | |
} | |
} | |
function appStart(){ | |
//画面遷移 | |
settings.classList.add('hide'); | |
remember_area.classList.remove('hide'); | |
//盤面サイズ調整 | |
const w = remember_body.clientWidth; | |
const h = remember_body.clientHeight; | |
if(w>h){ | |
remember_body.style.width = h+'px'; | |
} | |
//初期化 | |
time_limit = Number(sel_time.value)*60; | |
total_board = Number(sel_board_num.value); | |
answer = []; | |
round = 0; | |
res_body.textContent = ''; | |
// | |
makeRememberBoard(); | |
} | |
function makeRememberBoard(){ | |
//盤面作成 | |
remember_body.textContent = ''; | |
const ans = []; | |
const table = document.createElement('table'); | |
table.classList.add('board'); | |
for(let r=0;r<=7;r++){ | |
const tr = document.createElement('tr'); | |
for(let c=0;c<=7;c++){ | |
const td = document.createElement('td'); | |
td.classList.add('board-td'); | |
const piece = document.createElement('div'); | |
piece.classList.add('piece'); | |
const bw = randomMN(1,100); | |
if(bw%2==0){ | |
piece.classList.add('b'); | |
ans.push('b'); | |
}else{ | |
piece.classList.add('w'); | |
ans.push('w'); | |
} | |
td.appendChild(piece); | |
tr.appendChild(td); | |
} | |
table.appendChild(tr); | |
} | |
answer.push(ans); | |
remember_body.appendChild(table); | |
//カウントダウン開始 | |
remain_time = time_limit; | |
remain_name.textContent = `(盤面${round+1})`; | |
remain_time_box.textContent = remain_time; | |
const timer = setInterval(()=>{ | |
remain_time--; | |
remain_time_box.textContent = remain_time; | |
if(remain_time==0){ | |
clearInterval(timer); | |
round++; | |
if(round==total_board){ | |
endRemember(); | |
}else{ | |
makeRememberBoard(); | |
} | |
} | |
},1000); | |
} | |
function endRemember(){ | |
remain_box.classList.add('hide'); | |
remember_body.textContent = ''; | |
player_answer = []; | |
ans_page = 1; | |
answer_page.textContent = `盤面${ans_page}`; | |
// | |
for(let i=0;i<total_board;i++){ | |
player_answer.push((new Array(64)).fill('none')); | |
const table = document.createElement('table'); | |
table.classList.add('board'); | |
table.classList.add('answer-board'); | |
if(i!=0) table.classList.add('hide'); | |
for(let r=0;r<=7;r++){ | |
const tr = document.createElement('tr'); | |
for(let c=0;c<=7;c++){ | |
const td = document.createElement('td'); | |
td.classList.add('board-td'); | |
const piece = document.createElement('div'); | |
piece.classList.add('piece'); | |
piece.classList.add('none'); | |
td.addEventListener('click',()=>{ | |
changePiece(piece,i,r,c); | |
}); | |
td.appendChild(piece); | |
tr.appendChild(td); | |
} | |
table.appendChild(tr); | |
} | |
remember_body.appendChild(table); | |
} | |
answer_control.classList.remove('hide'); | |
answer_bt.classList.remove('hide'); | |
} | |
function changePiece(piece,i,r,c){ | |
if(player_answer[i][r*8+c]=='none'){ | |
player_answer[i][r*8+c] = 'b'; | |
piece.classList.add('b'); | |
piece.classList.remove('none'); | |
}else if(player_answer[i][r*8+c]=='b'){ | |
player_answer[i][r*8+c] = 'w'; | |
piece.classList.add('w'); | |
piece.classList.remove('b'); | |
}else{ | |
player_answer[i][r*8+c] = 'none'; | |
piece.classList.add('none'); | |
piece.classList.remove('w'); | |
} | |
} | |
function pageChange(i){ | |
const dist = i*2-1; | |
ans_page += dist; | |
if(ans_page<1){ | |
ans_page = total_board; | |
}else if(ans_page>total_board){ | |
ans_page = 1; | |
} | |
[...answer_board].forEach((el,j)=>{ | |
if(ans_page-1==j){ | |
el.classList.remove('hide'); | |
}else{ | |
el.classList.add('hide'); | |
} | |
}); | |
answer_page.textContent = `盤面${ans_page}`; | |
} | |
function endAnswer(){ | |
//画面遷移 | |
remember_body.textContent = ''; | |
remember_area.classList.add('hide'); | |
remain_box.classList.remove('hide'); | |
answer_control.classList.add('hide'); | |
answer_bt.classList.add('hide'); | |
settings.classList.remove('hide'); | |
// | |
let total_point = 0; | |
for(let i=0;i<total_board;i++){ | |
const res_row = document.createElement('div'); | |
res_row.classList.add('res-row'); | |
let point = 0; | |
//盤面名 | |
const res_name = document.createElement('div'); | |
res_name.classList.add('res-name'); | |
res_name.textContent = `盤面${i+1}`; | |
res_row.appendChild(res_name); | |
//回答エリア 正解エリア | |
const piece_list = [player_answer, answer]; | |
const title_list = ['プレイヤーの回答','正解']; | |
for(let j=0;j<=1;j++){ | |
const table_box = document.createElement('div'); | |
table_box.classList.add('res-table-box'); | |
const table = document.createElement('table'); | |
table.classList.add('board'); | |
for(let r=0;r<=7;r++){ | |
const tr = document.createElement('tr'); | |
for(let c=0;c<=7;c++){ | |
const td = document.createElement('td'); | |
td.classList.add('board-td'); | |
td.classList.add('res-board-td'); | |
const piece = document.createElement('div'); | |
piece.classList.add('piece'); | |
piece.classList.add(piece_list[j][i][r*8+c]); | |
td.appendChild(piece); | |
tr.appendChild(td); | |
// | |
if(j==0&&answer[i][r*8+c]==player_answer[i][r*8+c]){ | |
point++; | |
total_point++; | |
} | |
} | |
table.appendChild(tr); | |
} | |
const title = document.createElement('div'); | |
title.classList.add('res-title'); | |
title.textContent = title_list[j]; | |
table_box.appendChild(table); | |
table_box.appendChild(title); | |
res_row.appendChild(table_box); | |
} | |
//正解数 正解率 | |
const rate = Math.round(point*1000/64)/10; | |
const res_info = document.createElement('div'); | |
res_info.classList.add('res-info'); | |
res_info.innerHTML = `正解数:${point}/64<br>正解率:${rate}%`; | |
res_row.appendChild(res_info); | |
// | |
res_body.appendChild(res_row); | |
} | |
//全体の正解数 正解率 | |
if(total_board>1){ | |
const total_row = document.createElement('div'); | |
total_row.classList.add('res-row'); | |
const total_info = document.createElement('div'); | |
total_info.classList.add('res-info'); | |
const total_rate = Math.round(total_point*1000/(64*total_board))/10; | |
total_info.innerHTML = `盤面数:${total_board}<br>全体の正解数:${total_point}/${64*total_board}<br>全体の正解率:${total_rate}%`; | |
total_row.appendChild(total_info); | |
res_body.prepend(total_row); | |
} | |
gameEnd = true; | |
if(document.fullscreenElement!=null){ | |
document.exitFullscreen(); | |
}else{ | |
movetoResult(); | |
} | |
} | |
function randomMN(m,n){ | |
const d = Math.max(m,n)-Math.min(m,n); | |
return Math.floor(Math.random()*(d+1)+Math.min(m,n)); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment