質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

オセロプログラムの添削をお願いします

the_saidaa
the_saidaa

総合スコア27

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

3回答

0評価

3クリップ

6315閲覧

投稿2015/10/11 07:22

編集2015/10/11 07:41

プログラミングの基礎ばかりを学習し、実践経験が全くない者です。
そこでこの度、実際にオセロのプログラムコードをJavaScriptで書いてみました。

しかし、このように一つの形にしたプログラミングは今回が初めてで、
普段からプログラミングに慣れ親しんでおられる方には、
非常に汚いコードに見えることと思います。

「こういう書き方はまずい」、「自分だったらこう書く」といったような
添削をしていただけると、今後プログラミングをしていく上で非常に助かります。

長いプログラムコードではありますが、何卒よろしくお願いいたします。

###ソースコード

HTML5

<script type="text/javascript"> <!-- // 黒と白の画像を変数に格納 var black = 'url("http://i.imgur.com/CLEpdaJ.png")'; var white = 'url("http://i.imgur.com/VZgXNBM.png")'; var turn = 1; // 1が黒、2が白 var turnflg = false; var endflg = false; /* 10×10のフィールドを作る */ var field = [ [9, 9, 9, 9, 9, 9, 9, 9, 9, 9], [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], [9, 9, 9, 9, 9, 9, 9, 9, 9, 9] ]; /* ------------------------------------------------------- */ function showBoard() { var element = document.getElementById("othello"); // 盤面を描写する処理 for(var y = 1; y <= 8; y++){ for(var x = 1; x <= 8; x++) { field[y][x] = document.createElement("div"); field[y][x].id = "p" + y + x; field[y][x].style.border = "1px solid black"; field[y][x].style.cssFloat = "left"; field[y][x].style.height = "60px"; field[y][x].style.width = "60px"; field[y][x].style.background = "green"; field[y][x].style.cursor = "pointer"; field[y][x].addEventListener("click", clickEvent, false); // 8ピース毎に改行する if((x % 8) == 1){ field[y][x].style.clear = "both"; } element.appendChild(field[y][x]); } } // 黒と白の初期配置 field[4][5].style.backgroundImage = black; field[5][4].style.backgroundImage = black; field[4][4].style.backgroundImage = white; field[5][5].style.backgroundImage = white; } // 石を返すことができるかどうかを判別する function checkAble(y, x){ var pos_y = [-1, -1, 0, 1, 1, 1, 0, -1]; var pos_x = [0, 1, 1, 1, 0, -1, -1, -1]; // 選択した箇所に石が置かれていない場合のみ処理する if(field[y][x].style.backgroundImage == "none"){ var stone; turn == 1 ? stone = black : stone = white // 選択した箇所の周囲8箇所に石が置けるかどうか判別する for(var pos = 0; pos < 8; pos++){ var count = 0; var n = y + pos_y[pos]; var m = x + pos_x[pos]; // 周囲8箇所が壁、自分の石、空白の場合、以降の処理を行わない if(field[n][m] == 9 || field[n][m].style.backgroundImage == stone || field[n][m].style.backgroundImage == "none"){ continue; } // 周囲8箇所の延長線上に相手の石がある間繰り返す while(field[n][m].style.backgroundImage != stone){ n += pos_y[pos]; m += pos_x[pos]; count++; // 相手の石を挟んで自分の石がある場合、間の相手の石をひっくり返す if(field[n][m] != 9 && field[n][m].style.backgroundImage == stone){ while(count >= 0){ n -= pos_y[pos]; m -= pos_x[pos]; field[n][m].style.backgroundImage = stone; count--; } // 手番を交代する turnflg = true; } // 周囲8箇所の延長線上が壁、または相手の石を挟んで自分の石がない場合、 //何もせず処理を終了する if(field[n][m] == 9 || field[n][m].style.backgroundImage == "none"){ break; } } } } } function clickEvent() { var element = document.getElementById(this.id); var y, x; // 設定したdividから配列の要素を得る y = parseInt(element.id.substr(-2, 1)); x = parseInt(element.id.substr(-1, 1)); checkAble(y, x); // ゲームが終了するまでターンを入れ替える if(!endflg && turnflg){ turn == 1 ? turn = 2 : turn = 1 turnflg = false; } } onload = function() { showBoard(); } --> </script> // オセロプログラムを表示 <div id="othello"></div>

###補足情報
仕様としては、一人で黒と白の石を持ち、相手の石を挟めるマス目にだけ置くことが可能で、
交互に打ち合うだけのものです。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。