JavaScriptで盤と駒を定義して、表示させることまではできたのですが、その後、駒を置く処理と駒を置いた際にひっくり返す処理がどのように記述したらよいかわからない状態です。お手数ですが、ご教授頂けないでしょうか?下記、コードとなります。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>オセロ</title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7</head> 8<body> 9<div id="wrapper"> 10 11 <div id="main"><!-- 左側 --> 12 <table id="board"></table> 13 </div><!-- 左側終わり --> 14 15 16 <div id="detail"><!-- 右側 --> 17 <div id="turn"> 18 <a id="now_turn">黒</a><a>の番です</a> 19 </div> 20 <div id="score"> 21 <div id="white"> 22 <a>白:</a><a id="white_score">10</a> 23 </div> 24 <div id="black"> 25 <a>黒:</a><a id="black_score">10</a> 26 </div> 27 </div> 28 <div id="start"> 29 <button>start</button> 30 </div> 31 <div id="reset"> 32 <button>reset</button> 33 </div> 34 </div><!-- 右側終わり --> 35 36</div> 37</body> 38<script type="text/javascript" src="index.js"></script> 39</html>
javascript
1// 初期設定 2// 駒を定義する 3var empty = 0; 4var black = 1; 5var white = 2; 6// 盤を初期化する 7function init() { 8 var board = []; 9 for (var i = 0; i < N; i ++) 10 for (var j = 0; j < N; i++) { 11 board[[i,j]] = empty; 12 } 13 return board; 14} 15//table id を取得し、盤を定義する 16var b = document.getElementById('board'); 17for (var i = 0; i < 8 ; i++) { 18 var tr = document.createElement('tr'); 19 for (var j = 0; j < 8 ; j++) { 20 var td = document.createElement('td'); 21 td.className = 'cell'; 22 td.id = 'cell' + i + j; 23 var a = document.createElement('a'); 24 a.className ='piece'; 25 a.id = 'piece' + i + j; 26 tr.appendChild(td); 27 td.appendChild(a); 28 var piece = document.getElementById('piece' + i + j); 29 a.innerHTML = "○"; 30 } 31 b.appendChild(tr); 32} 33 34function put(board,i,j,color){ 35 //駒が置けるかチェックする 36 if(check(board,i,j,color) == false){ 37 return false; 38 } 39 //駒をひっくり返す処理 40 board[i][j] = color; 41} 42 43function check(board,i,j,color){ 44 //すでに石がある場合 45 if(board[i],[j
css
1#board { 2 table-layout: fixed; 3 width: 300px; 4 height: 300px; 5 border-collapse: collapse; 6 background-color:green; 7} 8 9#board td { 10 border: 2px solid; 11 text-align: center; 12} 13#main{ 14 float: left; 15} 16#detail{ 17 margin:10px; 18 width:200px; 19 float: left; 20} 21#detail:after{ 22 clear: both; 23} 24#score > #white{ 25 margin:10px; 26 padding:10px; 27 border: 5px solid; 28 border-color:black; 29} 30 31#score > #black{ 32 margin:10px; 33 padding:10px; 34 border: 5px solid; 35 border-color:black; 36}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/05/08 04:00
2017/05/08 04:06 編集
退会済みユーザー
2017/05/08 06:43