溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了原生js實現五子棋游戲的代碼詳解，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
html:
<body> <h3>五子棋游戲</h3> <div id="box"> <div id="box01"></div> <div id="box02">haha</div> </div> </body>
css:
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
/*overflow: hidden;*/
margin-top: 10px;
text-align: center;
background-color: #C7C7C7;
}
#box{
position: relative;
border: 1px solid;
margin: 20px auto;
width: 546px;
height: 546px;
background-color: #C7C7C7;
}
#box .squre{
width: 40px;
height: 40px;
border: 1px solid;
float: left;
}
#box01 .squre:hover{
background-color: pink;
}
#box01{
position: absolute;
/*border: 1px solid;*/
margin: 0 auto;
width: 588px;
height: 588px;
/*background-color: pink;*/
/*opacity: 0.5;*/
top: -20px;
left: -20px;
}
#box01 .qz{
width: 30px;
height: 30px;
border: 1px solid #C7C7C7;
float: left;
border-radius: 50%;
margin: 5px;
}
#box01 .qz:hover{
background-color: pink;
}
#box02{
position: absolute;
line-height: 546px;
font-size: 50px;
color: black;
width: 100%;
background-color: pink;
display: none;
opacity: 0.6;
}
</style>script:
<script type="text/javascript">
window.onload = function () {
let box = document.getElementById("box");
let box01 = document.getElementById("box01");
//畫棋盤
let arr = new Array();
for (let i=0;i<13;i++){
arr[i] = new Array();
for (let j=0;j<13;j++){
arr[i][j] = document.createElement("div");
arr[i][j].className = "squre";
box.appendChild(arr[i][j]);
}
}
//畫棋子
let arr01 = new Array();
for (let i=0;i<14;i++){
arr01[i] = new Array();
for (let j=0;j<14;j++){
arr01[i][j] = document.createElement("div");
arr01[i][j].className = "qz";
box01.appendChild(arr01[i][j]);
}
}
for (let m=0;m<14;m++){
for (let n=0;n<14;n++){
arr01[m][n].onclick = function () {
//下棋之前統計一下黑白棋的個數，以便黑白交換下棋
let count = 0;
for (let l = 0; l < 14; l++) {
for (let k = 0; k < 14; k++){
if (arr01[l][k].style.backgroundColor != "") {
count++;
}
}
}
// console.log(count);
if (this.className == "qz" && count % 2 == 0 && this.style.backgroundColor == "") {
//下棋
this.style.backgroundColor = "black";
//引入判斷函數
// console.log(m,n);
checkGame(m, n);
} else if (this.className == "qz" && count % 2 != 0 && this.style.backgroundColor == "") {
//下棋
this.style.backgroundColor = "white";
//引入判斷函數
checkGame(m, n);
}
}
}
}
//判斷哪方輸贏,四個方向（橫向、縱向、左斜、右斜）
//m是y軸，n是x軸
let a,b;
let flag = 0;
let box02 = document.getElementById("box02");
function checkGame(a,b) {
//判斷橫向
let qzColor = arr01[a][b].style.backgroundColor;
// console.log(qzColor);
for (let k=(b-4);k<=(b+4);k++){
if (k>=0 && k < 14){
if (qzColor == arr01[a][k].style.backgroundColor && arr01[a][k].style.backgroundColor != ""){
flag++;
if (flag == 5){
// alert(qzColor+" win!!");
box02.innerHTML = qzColor+" win!!";
box02.style.display = "block";
}
} else {
flag = 0;
}
} else {
flag = 0;
}
}
//判斷縱向
for (let k=(a-4);k<=(a+4);k++){
if (k>=0 && k < 14){
if (qzColor == arr01[k][b].style.backgroundColor && arr01[k][b].style.backgroundColor != ""){
flag++;
if (flag == 5){
// alert(qzColor+" win!!");
box02.innerHTML = qzColor+" win!!";
box02.style.display = "block";
}
} else {
flag = 0;
}
} else {
flag = 0;
}
}
//判斷左斜
let ax = (a-4);//ax用來記錄橫坐標的變化
for (let k=(b-4);k<=(b+4);k++){
if (k>=0 && k < 14 && ax>=0 && ax<14){
if (qzColor == arr01[ax][k].style.backgroundColor && arr01[ax][k].style.backgroundColor != ""){
flag++;
if (flag == 5){
// alert(qzColor+" win!!");
box02.innerHTML = qzColor+" win!!";
box02.style.display = "block";
}
} else {
flag = 0;
}
} else {
flag = 0;
}
ax++;
}
//判斷右斜
bx = a-4;
for (let k=(b+4);k>=(b-4);k--){
if (k>=0 && k < 14 && bx>=0 && bx<14){
if (qzColor == arr01[bx][k].style.backgroundColor && arr01[bx][k].style.backgroundColor != ""){
flag++;
if (flag == 5){
// alert(qzColor+" win!!");
box02.innerHTML = qzColor+" win!!";
box02.style.display = "block";
}
} else {
flag = 0;
}
} else {
flag = 0;
}
bx++;
}
}
}
</script>看完上述內容，是不是對原生js實現五子棋游戲的代碼詳解有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
