問題点
オセロゲームを作っています。
クリックしたら盤面（空いてる箇所ならどこでも）を白丸(class='shiro-koma')に変更したいのですが、
うまくいきません。
どなたかご教授いただけますでしょうか。
なぜか、既に設置してある黒丸(class='kuro-koma')の部分は、
クリックしたら（class='shiro-koma'）追加できます。
該当のソースコード
html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>オセロ</title> <link rel="stylesheet" href="sample.css"></head><body> <div class="contents"></div> <script src="sample.js"></script></body></html>
css
.contents { width: 500px; height: 500px; background-color: forestgreen;} .list { display: flex; align-items: center; height: 500px;} table { width: 90%; margin: 0 auto; border-collapse: collapse; border-spacing: 1px;} table tr td { height: 50px; border: 3px solid black; width: 50px; height: 50px;} .shiro-koma { background-color: white; border-radius: 50px; width: 50px; height: 50px;} .kuro-koma { background-color: black; border-radius: 50px; width: 50px; height: 50px;}
javascript
// 初期盤面 let contents = document.querySelector('.contents'); window.onload = function banmen() { let banmen = document.createElement('div'); let list_table = document.createElement('table'); banmen.classList.add('list'); contents.appendChild(banmen,contents); banmen.appendChild(list_table,banmen); for(let i=0;i<=7;i++){ let list_tr = document.createElement('tr'); list_table.appendChild(list_tr); for(let a=0;a<=7;a++){ let list_td = document.createElement('td'); list_tr.appendChild(list_td); let div = document.createElement('div'); list_td.appendChild(div); } } haichi(); click();} // 初期配置function haichi() { let list_div = document.querySelectorAll("td div"); list_div[35].classList.add("shiro-koma"); list_div[28].classList.add("shiro-koma"); list_div[36].classList.add("kuro-koma"); list_div[27].classList.add("kuro-koma");} // クリックして自分のコマを置いた時function click() { let list_div = document.querySelectorAll("td div"); list_div.forEach(function(item){ item.addEventListener("click", function(){ item.classList.add("shiro-koma"); }) })} // 相手が自分のコマを置いたときfunction 相手がコマを置く時() { } // 勝敗判定function 勝敗判定() { }
0 コメント