前回の質問では、オセロプログラムを添削していただき本当にありがとうございました。
自身の無知も相まって、前回は非常に多数のご指摘を受けたため、
その点をなるべく修正したものを、もう一度投稿することに致しました。
しかし大変恐縮ながら、前回とは違い、今回全てのソースコードが完成しておりません。
主な理由として、「処理を分ける」内容が実現できなかったことが挙げられます。
Javaにある継承ができれば解決できそうなのですが、
そのような機能が備わっていないJavaScriptでうまくまとめる方法が分からなかったのです。
また、「グローバル変数を減らす」内容も実現できたとは言い難い状態です。
未完成なコードでお恥ずかしい限りですが、「自分だったらこう書く」といったような点があれば、
些細な内容でも全く構いませんので、ご指摘のほどよろしくお願いいたします。
###ソースコード
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<meta http-equiv="content-language" content="ja"> 5<meta charset="UTF-8"> 6</head> 7 8<body> 9<div id="othello"></div> 10<script type="text/javascript" src="othello.js"></script> 11</body> 12</html>
JavaScript
1// 黒と白の画像を変数に格納 2var STONE_BLACK = 'url("http://i.imgur.com/CLEpdaJ.png")'; 3var STONE_WHITE = 'url("http://i.imgur.com/VZgXNBM.png")'; 4 5var BLACK = 1; 6var WHITE = 2; 7 8var turn = BLACK; // 先手は黒 9 10/* 10×10のフィールドを作る */ 11var field = [ 12 [9, 9, 9, 9, 9, 9, 9, 9, 9, 9], 13 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 14 [9, 0, 0, 0, 0, 0, 0, 0, 0, 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, 9, 9, 9, 9, 9, 9, 9, 9, 9] 22]; 23/* ------------------------------------------------------- */ 24// 黒と白の初期配置 25function setStone() { 26 field[4][5] = BLACK; 27 field[5][4] = BLACK; 28 field[4][4] = WHITE; 29 field[5][5] = WHITE; 30} 31 32// 盤面を描写する処理 33function showBoard() { 34 var element = document.getElementById("othello"); 35 var df = document.createDocumentFragment(); 36 37 for(var y = 1; y <= 8; y++){ 38 for(var x = 1; x <= 8; x++) { 39 var board = document.createElement("div"); 40 board.id = "p" + y + x; 41 board.setAttribute("style", "border: 1px solid black; float: left; height: 60px;\ 42 width: 60px; background: green; style: pointer"); 43 board.addEventListener("click", clickEvent, false); 44 45 // 8ピース毎に改行する 46 if((x % 8) == 1) board.style.clear = "both"; 47 48 // 初期配置の黒と白を描写する 49 if(field[y][x] !== 0){ 50 var image = (field[y][x] == BLACK) ? STONE_BLACK : STONE_WHITE; 51 board.style.backgroundImage = image; 52 } 53 df.appendChild(board); 54 } 55 } 56 element.appendChild(df); 57} 58 59// 現在の手番が石を置けるかどうか判別する 60function isReversible(y, x, player) { 61 var opponent = (player == BLACK) ? WHITE : BLACK; 62 var delta_y = [-1, -1, 0, 1, 1, 1, 0, -1]; 63 var delta_x = [0, 1, 1, 1, 0, -1, -1, -1]; 64 65 // 選択した箇所に既に石が置かれている場合、以降の処理を行わない 66 if(field[y][x] !== 0) return false; 67 68 // 選択した箇所の周囲8箇所に石が置けるかどうか判別する 69 for(var pos = 0; pos < 8; pos++){ 70 var n = y + pos_y[pos]; 71 var m = x + pos_x[pos]; 72 73 // 周囲8箇所に相手の石がない場合、以降の処理を行わない 74 if(field[n][m] !== opponent) continue; 75 76 // 周囲8箇所の延長線上に相手の石がある間繰り返す 77 while(field[n][m] === opponent){ 78 n += pos_y[pos]; 79 m += pos_x[pos]; 80 81 // 相手の石を挟んで自分の石がある場合、trueを返す 82 if(field[n][m] === player) return true; 83 } 84 } 85} 86 87function stoneReverse() { 88 /* TODO: 89 * 石をひっくり返す処理 90 * (isReversible()メソッドとソースコードはほぼ同じ) */ 91} 92 93function stoneNavigation() { 94 /* TODO: 95 * 自分の石を置くことができるマス目の色を変更する 96 * (field[1][1]~field[8][8]まで全てのマス目に対して 97 * "isReversible();"を実行、trueが返れば背景色変更) */ 98} 99 100function clickEvent() { 101 var element = document.getElementById(this.id); 102 103 // 設定したdividから配列の要素を得る 104 var y = parseInt(element.id.substr(-2, 1)); 105 var x = parseInt(element.id.substr(-1, 1)); 106 107 var check = isReversible(y, x, turn); 108 109 if(check){ 110 stoneReverse(); 111 turn = (turn == BLACK) ? WHITE : BLACK; 112 stoneNavigation(); 113 } 114} 115 116onload = function() { 117 setStone(); 118 showBoard(); 119}
###未完成部分のコードについて
主にstoneReverse()について、具体的な解説をいただければ幸いです。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/10/19 06:00