現在、オセロゲームをJ Queryで作成しております。 初心者で全くわからない状況からの作成でいろいろと質問して解決しながら作成していきたいと思います。どのように、作成していったら良いかも?ですが、64マスが作成できましたので、次の段階としてマスの中に駒を置いていくのにどうしたら良いか?
質問1、 ゲームスタート時に4つの(白2つ 黒2つ)をどのように置けば良いかが?です
質問2、配列は2重配列になると思うのですが、xとYとで位置を指定していく方法が?です。
質問3、マスをクリックした時(黒の順番と白の順番に従って)その中に駒が置けるようにするのにはどのようにしたら良いでしょうか?
以下に、コードを記載したもの(全くわからない状況からの作成ですので)めちゃくちゃですが、アドバイスいただけましたらありがたいです。よろしくお願いします。参考にしましたソースコードは、https://teratail.com/questions/18050です。自分なりに、参考のコードをみながら書いてみたのですが、どのように書いていったら良いのかわからなくなってしまいました。アドバイスいただけましたらありがたいです。よろしくお願いします。
HTML+JS
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="style.css"> 6 <link rel="stylesheet" href="css/sanitize.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使用 16 $(document).ready(function(){ 17 var html=''; 18 for(var i=1; i<65; i++){ 19 html += '<p class="bord">' + String(i) + '</p>'; 20 if (i % 8 == 0) { 21 html += "<br/>"; 22 } 23 } 24 $(".flex").html(html); 25 }); 26 27//白と黒の石を変数に格納 (?) 28 var stone_b = 29 var stone_w = 30 31 Var stone_b = 1; 32 var stone_w = -1; 33 34//版のフィールドの作成 (?) 35 var field = [ 36 [9,9,9,9,9,9,9,9], 37 [9,0,0,0,0,0,0,9], 38 [9,0,0,0,0,0,0,9], 39 [9,0,0,0,0,0,0,9], 40 [9,0,0,0,0,0,0,9], 41 [9,0,0,0,0,0,0,9], 42 [9,0,0,0,0,0,0,9], 43 [9,9,9,9,9,9,9,9] 44 ]; 45 46//白と黒の初期配置 (?) 47 function setStone() { 48 field[4][5]=stone_b; 49 field[5][4]=stone_b; 50 field[4][4]=stone_w; 51 field[5][5]=stone_w; 52 } 53 54</script> 55 56 57 </head> 58 59 <body> 60 <h1 class="title">オセロ</h1> 61 <div class="stone_b"></div> 62 <div class="stone_w"></div> 63 <div class="wrapper"> 64 65 <div class="flex"> 66<!-- 67 <div class="stone_b"></div> 68 <div class="stone_w"></div> 69--> 70<!-- <p class="bord"></p>--> 71 <div class="stone_b"></div> 72 <div class="stone_w"></div> 73 74 </div> 75 </div> 76 77</body> 78</html> 79
CSS
1@charset "utf-8"; 2*{ 3 margin: 0; 4 padding: 0; 5} 6 7.title{ 8 text-align: center; 9 margin-bottom: 10px; 10} 11 12.wrapper{ 13 display: flex; 14 justify-content: center; 15} 16.flex{ 17 display: flex; 18 flex-direction: row; 19 justify-content: center; 20 flex-wrap: wrap; 21 width: 700px; 22/* text-align: center;*/ 23/* align-content: center;*/ 24} 25 26.bord{ 27 width:80px; height:80px; background:darkgreen; 28 border: 1px solid black; 29 border-collapse: collapse; 30} 31 32.stone_b{ 33 border-radius: 50%; 34 width:70px; height:70px; 35 background:black; 36} 37 38.stone_w{ 39 border-radius: 50%; 40 width:70px; height:70px; 41 background:skyblue; 42}
回答2件
あなたの回答
tips
プレビュー