js實(shí)現(xiàn)雙人五子棋小游戲
更新時(shí)間：2020年05月28日 10:33:22 作者：原映雪
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)雙人五子棋小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)雙人五子棋小游戲的具體代碼，供大家參考，具體內(nèi)容如下
這是自己自學(xué)js的時(shí)候，在網(wǎng)上找的js源碼，由于是自學(xué)，花了數(shù)小時(shí)才把這個(gè)源碼大致弄明白。
大致算法 自定義棋盤規(guī)格，直接在棋盤建新div就可以，長度寬度用計(jì)算就可以了。下棋，在div里再建class，這里要給每個(gè)class標(biāo)一個(gè)site值，由site值寫出該棋子豎直方向和橫向的坐標(biāo)，由坐標(biāo)可以寫出棋子勝利的條件。而棋子的黑白走是用標(biāo)識符，偶的標(biāo)識符則是白棋子的class。奇的標(biāo)識符則是黑棋子的class。
ps 我遇到的一些問題在代碼中有注釋
<!DOCTYPE html>
<html>
<head>
<title>五子棋</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<style>
/* 簡單初始化 */
html,body,section,div,p{
padding: 0;
margin: 0;
font-size: 12px;
}
body{
width: 100%;
height: 100%;
position: fixed;
}
/* 棋盤 */
#chessboard{
width: 90vmin;
min-height: 89vmin;
margin: calc(50vh - 46vmin + 2px) auto;
background: #f5ca69;
border: 2px solid #000;
border-radius: 7px;
-webkit-box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5),
-.1rem -.1rem .05rem rgba(0,0,0,.5) ;
box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5),
-.1rem -.1rem .05rem rgba(0,0,0,.5) ;
}
/* after偽元素,載入chessboard后發(fā)生 */
#chessboard::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#chessboard div{
width: calc(9vmin - 2px);
height: calc(9vmin - 2px);
float: left;
border: 1px solid #000;
border-radius: 5px;
}
#chessboard div p{
width: 97%;
height: 97%;
margin: 1.5% auto;
border-radius: 100%;
}
/* 白棋子 */
.white{
background: -webkit-radial-gradient(at 35% 35%,#FFF,#CCC,#FFF);
background: -o-radial-gradient(at 35% 35%,#FFF,#CCC,#FFF);
background: -moz-radial-gradient(at 35% 35%,#FFF,#CCC,#FFF);
background: radial-gradient(at 35% 35%,#FFF,#CCC,#FFF);
box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5);
}
/* 黑棋子 */
.black{
background: -webkit-radial-gradient(at 30% 30%,#999 -13%,#000 35%,#999 200%);
background: -o-radial-gradient(at 30% 30%,#999 -13%,#000 35%,#999 200%);
background: -moz-radial-gradient(at 30% 30%,#999 -13%,#000 35%,#999 200%);
background: radial-gradient(at 30% 30%,#999 -13%,#000 35%,#999 200%);
box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5);
}
#mask{
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0,0,0,.7);
}
.conBox{
display: block;
width: 300px;
height: 200px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #fff;
border-radius: 3px;
box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5);
}
.conBox h1{
width: 100%;
float: left;
margin: 0;
line-height: 45px;
text-align: center;
}
.conBox p{
display: block;
width: 40px;
height: 40px;
float: left;
margin-top: 40px;
font-size: 32px;
text-align: center;
line-height: 40px;
cursor: pointer;
}
.conBox p:nth-child(2){
margin-left: 60px;
}
.conBox p:nth-child(3){
width: 100px;
font-size: 20px;
cursor: initial;
}
.conBox button{
width: 80px;
float: left;
margin-top: 30px;
margin-left: 110px;
color: #fff;
font-size: 14px;
text-align: center;
line-height: 28px;
background-color: #f60;
border: none;
outline: none;
}
.clear::after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.border,
.borderTop,
.borderBot
{
position: relative;
}
.border:after{
content: " ";
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
box-sizing: border-box;
}
.borderBot:after{
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.borderTop:before{
content: " ";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid rgba(0, 0, 0, 0.2);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
</style>
<script>
// onload為瀏覽器對象中的事件,頁面載入時(shí)觸發(fā)
window.function(){
var grid;
var chessArr = [];
var timer = 0;
var lineNum = parseInt(gridNum.innerHTML);
// 獲取元素
var box = document.getElementById('chessboard');
var chessBox = box.getElementsByTagName('div');
var submitBtn = document.getElementById('submitBtn');
// 減去規(guī)格
subBtn.onclick = function(){
if ( lineNum > 8 ) {
lineNum--;
}
// innerHTML為gridNum的全元素
gridNum.innerHTML = lineNum;
}
// 加上規(guī)格
addBtn.onclick = function(){
if ( lineNum < 14 ) {
lineNum++;
}
gridNum.innerHTML = lineNum;
}
//棋盤初始化
submitBtn.onclick = function(){
var chessMaxNum = lineNum * lineNum;
var chessWH = 90/lineNum;
for (var i = 0; i < chessMaxNum; i++) {
// 設(shè)置棋盤里小格子div元素
grid = document.createElement('div');
grid.style.width = 'calc(' + chessWH + 'vmin - 2px)';
grid.style.height = 'calc(' + chessWH + 'vmin - 2px)';
grid.id=i;
box.appendChild(grid);
chessArr[i] = 0;
grid.onclick = function(x){
// target 事件屬性可返回事件的目標(biāo)節(jié)點(diǎn)（觸發(fā)該事件的節(jié)點(diǎn)），如生成事件的元素、文檔或窗口。
var index = x.target.id||x.target.parentNode.id;
return playChess(index);
};
};
mask.style.display = 'none';
}
//棋子對象
function Chess(){
this.color = 'white';
this.site = 0;
// 創(chuàng)建一個(gè)class
this.chessDom = function(){
// 創(chuàng)造新節(jié)點(diǎn)
var dom = document.createElement('p');
// 將這個(gè)名字給class
dom.setAttribute('class',this.color);
return dom;
}
this.ligature = function(arr){
// map() 方法返回一個(gè)新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。
//是就返回這個(gè)site
// 給白棋一個(gè)標(biāo)識號,方便在下列judge中判斷
var whiteChess = arr.map(function(s){
// parseInt() 函數(shù)可解析一個(gè)字符串，并返回一個(gè)整數(shù)。
return (s.color == 'white')?parseInt(s.site):0;
});
var blackChess = arr.map(function(s){
return (s.color == 'black')?parseInt(s.site):0;
});
judge(whiteChess,'白子');
judge(blackChess,'黑子');
function judge(che,color){
// length 屬性可返回字符串中的字符數(shù)目
for (var i = 0;i < che.length;i++) {
// 棋子橫坐標(biāo)
var x = che[i]%lineNum;
// 棋子豎坐標(biāo)
var y = parseInt(che[i]/lineNum);
// \這樣的傾斜判斷
if ( x <= lineNum - 5 && y <= lineNum - 5 && che[i] != 0 ) {
if( che[i+1*lineNum+1] != 0 && che[i+2*lineNum+2] != 0 && che[i+3*lineNum+3] != 0 && che[i+4*lineNum+4] != 0 ){
alert(color+'獲勝!');
// 勝利后刷新頁面
location.replace(location);
return true;
}
};
// |這樣的豎直判斷
if ( y <= lineNum - 5 && che[i] != 0 ) {
if( che[i+1*lineNum] != 0 && che[i+2*lineNum] != 0 && che[i+3*lineNum] != 0 && che[i+4*lineNum] != 0 ){
alert(color+'獲勝!');
// Location 對象方法replace() 用新的文檔替換當(dāng)前文檔
location.replace(location);
return true;
}
};
// /這樣的傾斜判斷
if ( x >= 4 && y <= lineNum - 5 && che[i] != 0 ) {
if( che[i+1*lineNum-1] != 0 && che[i+2*lineNum-2] != 0 && che[i+3*lineNum-3] != 0 && che[i+4*lineNum-4] != 0 ){
alert(color+'獲勝!');
location.replace(location);
return true;
}
};
// ——這樣的平行判斷
if ( x <= lineNum - 5 && che[i] != 0 ) {
if( che[i+1] != 0 && che[i+2] != 0 && che[i+3] != 0 && che[i+4] != 0 ){
alert(color+'獲勝!');
location.replace(location);
return true;
}
};
};
}
}
}
function playChess(i){
if(chessArr[i] == 0){
// 標(biāo)識符
timer++;
// 用new創(chuàng)建新的對象
chessArr[i] = new Chess();
timer%2==0?chessArr[i].color = 'black':chessArr[i].color = 'white';
// 給每個(gè)小格子設(shè)置一個(gè)site值
chessArr[i].site = i;
// appendChild() 方法向節(jié)點(diǎn)添加最后一個(gè)子節(jié)點(diǎn)
// 意思就是在小格子div里加上棋子的class
chessBox[i].appendChild(chessArr[i].chessDom());
// 給這個(gè)class的棋子賦予site值
chessArr[i].ligature(chessArr);
}else{
alert('此處有子!');
}
}
};
</script>
</head>
<body>
<section id="chessboard" class="clear">
</section>
<section id="mask">
<aside class="conBox">
<h1 class="borderBot">小依，選擇棋盤規(guī)格哇。</h1>
<p id="subBtn" class="border">-</p>
<p id="gridNum" value="10" class="borderTop borderBot">10</p>
<p id="addBtn" class="border">+</p>
<button id="submitBtn">確認(rèn)</button>
</aside>
</section>
<div style="text-align:center;">
</div>
</body>
</html>
更多有趣的經(jīng)典小游戲?qū)崿F(xiàn)專題，分享給大家：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript?變量聲明?var,let,const?的區(qū)別
這篇文章主要介紹了javascript?變量聲明?var,let,const?的區(qū)別,變量聲明，每種編程語言必不可少的語法，在javascript中，變量的聲明相對其他語言來說，算是比較簡單的。更多相關(guān)的具體內(nèi)容需要的小伙伴可以參考一下2022-06-06
看CSDN上別人的代碼，感覺比較精煉，拿來主義,需要的朋友可以看下。2009-08-08
TypeScript類型系統(tǒng)自定義數(shù)據(jù)類型教程示例
這篇文章主要為大家介紹了TypeScript類型系統(tǒng)自定義數(shù)據(jù)類型教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
js使用split函數(shù)按照多個(gè)字符對字符串進(jìn)行分割的方法
這篇文章主要介紹了js使用split函數(shù)按照多個(gè)字符對字符串進(jìn)行分割的方法,實(shí)例分析了split函數(shù)的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
本文主要分享了用JavaScript實(shí)現(xiàn)購物車特效的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要為大家分析了js閉包引起的事件注冊問題，感興趣的小伙伴們可以參考一下2016-03-03
微信小程序?qū)崿F(xiàn)通過雙向滑動縮放圖片大小的方法
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)通過雙向滑動縮放圖片大小的方法,結(jié)合實(shí)例形式分析了微信小程序事件響應(yīng)及圖片元素屬性動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-12-12
代碼重構(gòu)涉及在不改變其外部功能的情況下對現(xiàn)有代碼進(jìn)行改進(jìn)，這是編程的核心部分之一，所以下面我們將研究一些技巧，這些技巧可以幫助我們以更好的方式重構(gòu)代碼，希望對大家有所幫助2023-06-06
純js網(wǎng)頁畫板(Graphics)類簡介及實(shí)現(xiàn)代碼
今天需要在網(wǎng)頁上畫一個(gè)圖譜，想到用JS，經(jīng)過學(xué)習(xí)，和網(wǎng)上搜索，經(jīng)過整理優(yōu)化得到下面代碼，注意不是用HTML5的canvas，而是用的純js,需要了解的朋友可以參考下2012-12-12
文本框輸入數(shù)據(jù)后使用回車進(jìn)行提交，想必大家都嘗試過吧，在本文有個(gè)不錯的示例，喜歡的朋友可以參下2013-09-09