Skip to content

Instantly share code, notes, and snippets.

@motsu0
Last active June 22, 2022 04:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save motsu0/69941ba2fa49335d3f44f641c83b37c0 to your computer and use it in GitHub Desktop.
Save motsu0/69941ba2fa49335d3f44f641c83b37c0 to your computer and use it in GitHub Desktop.
#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;
}
}
<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>
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