みなさんこんにちは。ブルーローズです。
みなさんはダブルスの試合をやっていて、特に審判をやっているときにこんな経験はありませんか？
- あれ？今何点だっけ？
- サーバーは誰だっけ？
- レシーバーは俺であってる？
と分からなくなってしまうことがよくあるでしょう。
初心者の方や覚えたての方にはダブルスが難解すぎて戸惑ってしまうことも多いと思います。
そこで私ブルーローズはあるものを開発してしまいました。
その名も
サーバーミツカール(仮)
です。(名称募集中)
サーバーミツカール(仮)はどんな代物かというと
- 点数の表示
- サーバーとレシーバーの表示を行ってくれるシステム
です。
動画はコチラ
サーバーミツカールはコチラ
使い方の前にまず、ものをお見せします。
0
–
0
試合開始
リセット
VS
サーバーミツカールの使い方
使い方は簡単です。
- 名前を入力
- 試合開始をクリック
- 得点したチームをクリック
- リセットをクリックするとリロードします
とたったこれだけ。
まず選手の名前を入力します。ちなみにコートの位置と選手の位置は対応させてください。
そしたら試合開始をタップ。
するとこうなるので、あとは得点の入ったペアのコートをクリックしていくだけ。
今後の改善点・問題点
ここからは覚書程度なのでよまなくてOKです。
問題点
- 点数を間違えたときに戻せない
- 初期状態のサーバーの位置を変えられない
- リセットがリロードなので重い
- コードがぐちゃぐちゃ
改善したい点
- セカンドゲームの機能
仕組み 汚いコードはコチラ
ぐちゃぐちゃ&無駄が多いです。
'use strict'
// コートに関するクリック
var ateam = document.getElementById('ateam');
var bteam = document.getElementById('bteam');
var one = document.getElementById('one');
var two = document.getElementById('two');
var three = document.getElementById('three');
var four = document.getElementById('four');
// リセット
var start = document.getElementById('start');
var reset = document.getElementById('reset');
// 点数表示
var name1 = document.getElementById('1');
var out1 = document.getElementById('out1');
var name2 = document.getElementById('2');
var out2 = document.getElementById('out2');
var name3 = document.getElementById('3');
var out3 = document.getElementById('out3');
var name4 = document.getElementById('4');
var out4 = document.getElementById('out4');
var scoreA = 0;
var scoreB = 0;
var sa = document.getElementById('sa');
var sb = document.getElementById('sb');
start.addEventListener('click', function(){
start.classList.add('hide');
reset.classList.remove('hide');
var str1 = name1.value;
out1.innerHTML = str1;
var str2 = name2.value;
out2.innerHTML = str2;
var str3 = name3.value;
out3.innerHTML = str3;
var str4 = name4.value;
out4.innerHTML = str4;
ateam.addEventListener('click', function(){
var o1 = out1.textContent;
var o2 = out2.textContent;
if(one.classList.contains('server')){
out1.innerHTML = o2;
out2.innerHTML = o1;
}else if(two.classList.contains('server')){
out1.innerHTML = o2;
out2.innerHTML = o1;
};
if(scoreA % 2 != 0){
one.classList.remove('server');
two.classList.remove('server');
three.classList.remove('server');
four.classList.remove('server');
one.classList.remove('receiver');
two.classList.remove('receiver');
three.classList.remove('receiver');
four.classList.remove('receiver');
two.classList.add('server');
three.classList.add('receiver');
sa.innerHTML = ++scoreA;
}else{
one.classList.remove('server');
two.classList.remove('server');
three.classList.remove('server');
four.classList.remove('server');
one.classList.remove('receiver');
two.classList.remove('receiver');
three.classList.remove('receiver');
four.classList.remove('receiver');
one.classList.add('server');
four.classList.add('receiver');
sa.innerHTML = ++scoreA;
};
});
bteam.addEventListener('click', function(){
var o3 = out3.textContent;
var o4 = out4.textContent;
if(three.classList.contains('server')){
out3.innerHTML = o4;
out4.innerHTML = o3;
}else if(four.classList.contains('server')){
out3.innerHTML = o4;
out4.innerHTML = o3;
};
if(scoreB % 2 != 0){
one.classList.remove('server');
two.classList.remove('server');
three.classList.remove('server');
four.classList.remove('server');
one.classList.remove('receiver');
two.classList.remove('receiver');
three.classList.remove('receiver');
four.classList.remove('receiver');
three.classList.add('server');
two.classList.add('receiver');
sb.innerHTML = ++scoreB;
}else{
one.classList.remove('server');
two.classList.remove('server');
three.classList.remove('server');
four.classList.remove('server');
one.classList.remove('receiver');
two.classList.remove('receiver');
three.classList.remove('receiver');
four.classList.remove('receiver');
four.classList.add('server');
one.classList.add('receiver');
sb.innerHTML = ++scoreB;
};
});
});
// reset
reset.addEventListener('click', function(){
location.reload();
});