昔のプログラムを改修してたメモ 3

ダイヤモンドゲーム javascript

今年もまぁなんとかダイヤモンドゲームの更新できました。次は夏休みでしょうか。。

今年のGWはノーマルモードの設定画面を主にjQuery仕様に変更。
まとめると以下。

  1. cssの当て直し
  2. htmlの修正
  3. ファイル名とか場所の変更
  4. JSをjQuery仕様に変更
  5. 各ブラウザで確認

今回jQueryに変更したところ、実は一回直してるんですよね。

ので直すのは２回目なのですが、、２回直してもまだ改善の余地があるように思えます。
そうなってくると仕様が悪い感じがしますね。いい感じに作れるようにしてみたいものです。。

以下、JSまわりの改修の詳細です。

昔のプログラムをちょっと直してみた - お勉強orz日和 の改修点について

まぁ要は「各プレイヤーが最初に選択している色の番号を格納する」という処理についてです。
以前はjsで取得して保持していましたが、やめまして、hiddenタグで保持することにしました。

＊変更前

function initialize(){
         color1 = boxSet(document.config.prayer1);
	 color2 = boxSet(document.config.prayer2);
	 color3 = boxSet(document.config.prayer3);
}	 

function boxSet(checkbox) {
 length = checkbox.length;
 for(i=0;i<length;i++){
        if(checkbox[i].checked == true){
             return checkbox[i].value;
        }
 }
}

＊変更後

      <input type="hidden" id="player1_color_selected" value="1">
      <input type="hidden" id="player2_color_selected" value="2">
      <input type="hidden" id="player3_color_selected" value="3">

直値です！ラジオボタン側も直値なので。
しかし直値はちょっと微妙かもですね。まぁでもとりあえずほっときます。。

昔のプログラムをちょっと直してみた その２ - お勉強orz日和 の改修点について

これは「各プレイヤーの種別的なものと色を取得して、それをパラメータとして次ページへ移動する」といった処理です。
パラメータの作りがひどいことに気がつきましたが、渡される側はまだ直さないので今回はパラメータの値はそのままで、書き方だけ直しました。

＊変更前

//駒の場所と順番の値の確保
function set(){
   prayer1 = boxSet(document.config.red);
   prayer2 = boxSet(document.config.green);
   prayer3 = boxSet(document.config.yellow);
   
//駒の色をまとめる
   color = sum(color1,prayer1) + "," + sum(color2,prayer2) + "," + sum(color3,prayer3);

//それぞれのリンクにとばせ！
  location.href = "nomal.html"+"?"+color;

}
	
//それぞれのプレイヤーの色と種類の値をまとめる
function sum(color,prayer){
  return parseInt(prayer) * 10 + parseInt(color) + 1;
}

＊変更後

//パラメータをセットして次のページへ
function pageMove() {
  //プレイヤーの種類セット(10->PC,20->CP,30->なし,
  //駒の場所と順番の値の確保
  var params = new Array();
  var players = $("#player_select :input:checked");
  players.each(function () {
     var player_data = sum($(this).attr("value"), $("#color_select :input:checked[name='" + $(this).attr("name") + "_color']").attr("value"));
     params.push(player_data);
  });

  //いどぅ
  location.href = "nomal.html"+"?"+params.join(',');
}

//それぞれのプレイヤーの色と種類の値をまとめる
function sum(prayer, color){
  return parseInt(prayer) * 10 + parseInt(color);
}

パラメータの作成はプレイヤー数分eachでまわすようにして可変にしてみました。
そのため、カンマ区切りはjoin()でやるようにしました。join便利ですね！
color側のvalue値取得のセレクタ指定あたりは結構な無理矢理感がただよってます。

昔のプログラムをちょっと直してみた その３ - お勉強orz日和 の改修点について

ここが一番めんどうな場所の、色をかぶらないようにするところです。
ちゃんというと「選択した色が別のプレイヤーの色として選ばれていた場合に、該当の別プレイヤーの色を選択側の元の色と入れ替える」といった処理です。
ややこしい！
故に変更後のコメントがうざったいくらいになりました。

＊変更前

//色がかぶってないか確かめる。かぶってたら交換する
function change(prayerNumber,number){

  if(prayerNumber == 1){
     if(document.config.prayer2[number].checked == true){
	        color2 = changeBox(document.config.prayer2,color1);
     }else if(document.config.prayer3[number].checked == true){
		color3 = changeBox(document.config.prayer3,color1);
     }
     color1 = document.config.prayer1[number].value;
	 
  }else if(prayerNumber == 2){
     if(document.config.prayer1[number].checked == true){
		color1 = changeBox(document.config.prayer1,color2);
     }else if(document.config.prayer3[number].checked == true){
		color3 = changeBox(document.config.prayer3,color2);
     }
     color2 = document.config.prayer2[number].value;
  }else if(prayerNumber == 3){
     if(document.config.prayer1[number].checked == true){
		color1 = changeBox(document.config.prayer1,color3);
     }else if(document.config.prayer2[number].checked == true){
		color2 = changeBox(document.config.prayer2,color3);
     }
     color3 = document.config.prayer3[number].value;
  }
}

//色を交換
  function changeBox(checkBox,color) {
     checkBox[color].checked = true;
	 return checkBox[color].value;
  }

＊変更後

function colorChenge(select_player) {

  //どれを選択したか、nameとvalueを取得
  var select_name = $(select_player).attr("name");
  var select_value = $(select_player).attr("value");

  //選択した側の元の色を取得
  var save_selected_color = $("#" + select_name + "_selected");

  //選択された色と同じ色が別の人に選択されていないか調べる。
  var checked_player = $("#color_select :input:radio[value='" + select_value +"']:checked");

  //checked_playerをループでまわして、他人に同じ色が選択されていた場合に選択した側の元の色と他人の色を交換
  checked_player.each(function () {
    if (select_name != $(this).attr("name")) {
      //他人のものとの色のラジオボタン取得
      var change_input = $("#color_select :input:radio[name='" + $(this).attr("name") + "'][value='" + $(save_selected_color).attr("value") + "']");
      change_input.attr("checked", true);
      //元の色を保持しているhiddenの中身を変更する。
      $("#" + $(this).attr("name") + "_selected").attr("value", $(change_input).attr("value"));
    }
  });
  // 選択側の保持色を新しいのに変更する
  save_selected_color.attr("value", select_value);
}

とりあえず個人的にif文が減ったのがとても嬉しいのですが、セレクタ指定がひどいかなと思います。
nameとvalueを指定する以外に指定のラジオボタンを取得するいい方法、ありませんかね。。
最初に全部オブジェクトにつっこんで〜とか考えてみましたが、結局二次元配列みたいなのにしまう必要があるのかなという気がして微妙かなとか。。
あと、はじめjQuery UIのselectableを使ってどうにかかっこよく頑張ってみようと思ったのですが、うまい使い方がわからずに断念しましたorz
if分は少なくなりましたが、解り難さは相変わらずで悲しいですね。

以上です！
久々にJS触ったらさっぱり忘れてましたorz
次の改修箇所はでっかいので、もうちょっとお勉強しないとやばそうです。
次はノーマルモードの改修です。やっとゲーム自体の改修です。遅いですね。。

しかしjQueryももう1.6まででてるのですね。早いですね。
html5とかもありますし、、気になりますが全然触れてないのが現状orz

とりあえず全体を改修してから、もっと早くいい感じに既存を新しくしつつ、早く続き作りたいです！pq