Q&A
『うまくいっておりません』とは具体的には何が起きていますか？ 「こうなると想定しこのコードを書いたが結果はこうだった」のように書いていただくと分かりやすいかと思います。
オセロ初期設定した駒を表示させたいのですが、いくつか実施してみたのですがうまくいっておりません。
例 document.writeなどアドバイスいただければと思います。よろしくお願いします。
javascript
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="css/sanitize.css"> 6 <link rel="stylesheet" href="css/style.css"> 7 <script 8 src="https://code.jquery.com/jquery-3.3.1.min.js" 9 integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 10 crossorigin="anonymous"></script> 11 12 <title>オセロ</title> 13 14 <script> 15// オセロの盤面の表示 J Query使用 html += '<p class="bord">' + String(i) + '</p>'; 16 $(function(){ 17 var html=''; 18 for(var i=0; i<64; i++){ 19 html += '<p class="bord">' + '</p>'; 20 if (i % 8 == 0) { 21 html += "<br/>"; 22 } 23 } 24 $(".flex").html(html); 25 }); 26 27//白と黒の石を変数に格納 28 29 var stone_b = 1; 30 var stone_w = -1; 31 32//版のフィールドの作成 33 var field = [ 34 [0,0,0,0,0,0,0,0], 35 [0,0,0,0,0,0,0,0], 36 [0,0,0,0,0,0,0,0], 37 [0,0,0,-1,1,0,0,0], 38 [0,0,0,1,-1,0,0,0], 39 [0,0,0,0,0,0,0,0], 40 [0,0,0,0,0,0,0,0], 41 [0,0,0,0,0,0,0,0], 42 ]; 43 44 for (var index_y = 0; index_y < field.length; index_y++) { 45 for (var index_x = 0; index_x < field[index_y].length; index_x++) { 46 console.log(field[index_y][index_x]) 47 48 } 49 50 51 } 52 53 54// //白と黒の初期配置 55 function setStone() { 56 field[3][3]=stone_w; 57 field[4][4]=stone_w; 58 field[3][4]=stone_b; 59 field[4][3]=stone_b; 60 alert 61 } 62 63 64// function Init() 65// { m_t[3][3] = 1; 66// m_t[3][4] = 2; 67// m_t[4][3] = 2; 68// m_t[4][4] = 1; 69// 70// } 71 72</script> 73 74 75 </head> 76 77 <body> 78 <h1 class="title">オセロ1</h1> 79 <div class="stone_b"></div> 80 <div class="stone_w"></div> 81 <div class="wrapper"> 82 83 <div class="flex"> 84<!-- 85 <div class="stone_b"></div> 86 <div class="stone_w"></div> 87--> 88<!-- <p class="bord"></p>--> 89 <div class="stone_b"></div> 90 <div class="stone_w"></div> 91 92 </div> 93 </div> 94 95</body> 96</html>
CSS
1コード 2@charset "utf-8"; 3*{ 4 margin: 0; 5 padding: 0; 6} 7 8.title{ 9 text-align: center; 10 margin-bottom: 10px; 11} 12 13.wrapper{ 14 display: flex; 15 justify-content: center; 16} 17.flex{ 18 display: flex; 19 flex-direction: row; 20 justify-content: center; 21 flex-wrap: wrap; 22 width: 700px; 23/* text-align: center;*/ 24/* align-content: center;*/ 25} 26 27.bord{ 28 width:80px; height:80px; background:darkgreen; 29 border: 1px solid black; 30 border-collapse: collapse; 31} 32 33.stone_b{ 34 border-radius: 50%; 35 width:70px; height:70px; 36 background:black; 37} 38 39.stone_w{ 40 border-radius: 50%; 41 width:70px; height:70px; 42 background:skyblue; 43}
オセロの駒を表示させる方法で、まずはdocument.writeを使って表示させようと思うのですが、具体的にどのように試したら良いのかで迷っています。
ということは、「うまくいっていない」ところまで達していないということですね。では、がんばって「うまくいっていない」コードを書いてみましょう。現在の質問者のスキルに比べ、取り組んでいるものが大きすぎる気がします。現在のコードを離れ、オセロの駒をひとつ表示するところから始めてみては？
回答1件
0
質問の文章を見たときに何を作ろうとして，どこでおかしいのか，記述されてはどうでしょうか．
ソースを見た感じですが
HTML
1if (i % 8 == 0) { 2 html += "<br/>"; 3}
まずこのあたりでうまく動かないのではないでしょうか．
また，<p></p>を並べていますが，
HTML
1<!-- for(8回) --> 2<div> 3 <!-- forの2(8回) --> 4 <div></div> 5 <!-- forの2おわり --> 6</div> 7<!-- forおわり -->
などのようにレイアウトボックスを2重ループで記述してみたほうが悩まずにクリアできると思います．
また，ブラウザでF12等を押してデバッグモードでエレメントの配置などを確認しながらレイアウト作成されることをおすすめします．
投稿2018/03/23 00:04
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
