プログラミングの基礎ばかりを学習し、実践経験が全くない者です。
そこでこの度、実際にオセロのプログラムコードをJavaScriptで書いてみました。
しかし、このように一つの形にしたプログラミングは今回が初めてで、
普段からプログラミングに慣れ親しんでおられる方には、
非常に汚いコードに見えることと思います。
「こういう書き方はまずい」、「自分だったらこう書く」といったような
添削をしていただけると、今後プログラミングをしていく上で非常に助かります。
長いプログラムコードではありますが、何卒よろしくお願いいたします。
###ソースコード
HTML5
1<script type="text/javascript"> 2<!-- 3 // 黒と白の画像を変数に格納 4 var black = 'url("http://i.imgur.com/CLEpdaJ.png")'; 5 var white = 'url("http://i.imgur.com/VZgXNBM.png")'; 6 7 var turn = 1; // 1が黒、2が白 8 9 var turnflg = false; 10 var endflg = false; 11 12 /* 10×10のフィールドを作る */ 13 var field = [ 14 [9, 9, 9, 9, 9, 9, 9, 9, 9, 9], 15 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 16 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 17 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 18 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 19 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 20 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 21 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 22 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 23 [9, 9, 9, 9, 9, 9, 9, 9, 9, 9] 24 ]; 25 26 /* ------------------------------------------------------- */ 27 28 function showBoard() { 29 var element = document.getElementById("othello"); 30 31 // 盤面を描写する処理 32 for(var y = 1; y <= 8; y++){ 33 for(var x = 1; x <= 8; x++) { 34 field[y][x] = document.createElement("div"); 35 field[y][x].id = "p" + y + x; 36 37 field[y][x].style.border = "1px solid black"; 38 field[y][x].style.cssFloat = "left"; 39 field[y][x].style.height = "60px"; 40 field[y][x].style.width = "60px"; 41 field[y][x].style.background = "green"; 42 field[y][x].style.cursor = "pointer"; 43 44 field[y][x].addEventListener("click", clickEvent, false); 45 46 // 8ピース毎に改行する 47 if((x % 8) == 1){ 48 field[y][x].style.clear = "both"; 49 } 50 element.appendChild(field[y][x]); 51 } 52 } 53 54 // 黒と白の初期配置 55 field[4][5].style.backgroundImage = black; 56 field[5][4].style.backgroundImage = black; 57 field[4][4].style.backgroundImage = white; 58 field[5][5].style.backgroundImage = white; 59 } 60 61 // 石を返すことができるかどうかを判別する 62 function checkAble(y, x){ 63 64 var pos_y = [-1, -1, 0, 1, 1, 1, 0, -1]; 65 var pos_x = [0, 1, 1, 1, 0, -1, -1, -1]; 66 67 // 選択した箇所に石が置かれていない場合のみ処理する 68 if(field[y][x].style.backgroundImage == "none"){ 69 var stone; 70 turn == 1 ? stone = black : stone = white 71 72 // 選択した箇所の周囲8箇所に石が置けるかどうか判別する 73 for(var pos = 0; pos < 8; pos++){ 74 var count = 0; 75 var n = y + pos_y[pos]; 76 var m = x + pos_x[pos]; 77 78 // 周囲8箇所が壁、自分の石、空白の場合、以降の処理を行わない 79 if(field[n][m] == 9 || field[n][m].style.backgroundImage == stone 80 || field[n][m].style.backgroundImage == "none"){ 81 continue; 82 } 83 84 // 周囲8箇所の延長線上に相手の石がある間繰り返す 85 while(field[n][m].style.backgroundImage != stone){ 86 n += pos_y[pos]; 87 m += pos_x[pos]; 88 89 count++; 90 91 // 相手の石を挟んで自分の石がある場合、間の相手の石をひっくり返す 92 if(field[n][m] != 9 && field[n][m].style.backgroundImage == stone){ 93 while(count >= 0){ 94 n -= pos_y[pos]; 95 m -= pos_x[pos]; 96 97 field[n][m].style.backgroundImage = stone; 98 count--; 99 } 100 101 // 手番を交代する 102 turnflg = true; 103 } 104 105 // 周囲8箇所の延長線上が壁、または相手の石を挟んで自分の石がない場合、 106 //何もせず処理を終了する 107 if(field[n][m] == 9 || field[n][m].style.backgroundImage == "none"){ 108 break; 109 } 110 } 111 } 112 } 113 } 114 115 function clickEvent() { 116 var element = document.getElementById(this.id); 117 var y, x; 118 119 // 設定したdividから配列の要素を得る 120 y = parseInt(element.id.substr(-2, 1)); 121 x = parseInt(element.id.substr(-1, 1)); 122 123 checkAble(y, x); 124 125 // ゲームが終了するまでターンを入れ替える 126 if(!endflg && turnflg){ 127 turn == 1 ? turn = 2 : turn = 1 128 turnflg = false; 129 } 130 } 131 132 onload = function() { 133 showBoard(); 134 } 135--> 136</script> 137 138// オセロプログラムを表示 139<div id="othello"></div>
###補足情報
仕様としては、一人で黒と白の石を持ち、相手の石を挟めるマス目にだけ置くことが可能で、
交互に打ち合うだけのものです。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/10/12 07:35
2015/10/12 07:52