原生JavaScript實現(xiàn)簡單五子棋游戲
更新時間：2021年06月28日 17:20:55 作者：程序員_Halo
這篇文章主要為大家詳細介紹了原生JavaScript實現(xiàn)簡單五子棋游戲，文中示例代碼注釋的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)簡單五子棋游戲的具體代碼，供大家參考，具體內(nèi)容如下
HTML頁面
注釋都很明確了，大家好好學(xué)習(xí)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
<title>五子棋</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.box {
border-spacing: 0px;
border: 1px solid #3c3c3c;
background-color: #e1e1e2;
margin: auto;
}
.piece {
border-spacing: 0px;
border: 1px solid;
}
</style>
</head>
<body>
<script type="text/javascript" src="./Gobang.js"></script>
</body>
</html>
Javascript
var ScreenWidth = {
documentWidth: 500,
containerWidth: 400, // 容器默認寬度
cellWidth: 20 // 單元格寬度
}
if (document.documentElement.clientWidth < 500) {
ScreenWidth.documentWidth = document.documentElement.clientWidth;
ScreenWidth.containerWidth = ScreenWidth.documentWidth * 0.8;
ScreenWidth.cellWidth = ScreenWidth.containerWidth * 0.05;
}
//常量
var reg = /\d{1,2}/g;
var white = []; // 放白子
var black = []; // 放黑子
var tempKey = false; // 判斷是走黑子還是白子
var notOver = true; // 判斷游戲是否結(jié)束
var tips = "白棋走"; // 提示走棋
var count = 0;//相連的個數(shù)
var bv = false; // 黑棋勝利
var wv = false; // 白棋勝利
var yCanWin = [];// 同一豎元素存放的數(shù)組
var xCanWin = [];// 同一橫元素存放的數(shù)組
var xyCanWin = [];// 同一正斜存放的數(shù)組
var yxCanWin = [];// 同一反斜存放的數(shù)組
// 用計時器監(jiān)聽是否勝利
var time = setInterval(function () {
if (bv) {
tips = "黑棋勝利";
document.getElementsByTagName("span")[0].innerText = tips;
for (var i = 0; i < document.getElementsByClassName("pieceBox").length; i++) {
document.getElementsByClassName("pieceBox")[i].onclick = null;
}
clearInterval(time);
}
if (wv) {
tips = "白棋勝利";
document.getElementsByTagName("span")[0].innerText = tips;
for (var i = 0; i < document.getElementsByClassName("pieceBox").length; i++) {
document.getElementsByClassName("pieceBox")[i].onclick = null;
}
clearInterval(time);
}
}, 100);
newGame();// 開始游戲
function newGame() {
if (document.getElementsByTagName("table").length) {
for (var i = 0; i < document.getElementsByTagName("table").length; i++) {
document.getElementsByTagName("table")[i].remove();
}
}
// 初始化以下內(nèi)容
bgInit();
pieceInit();
spanFn();
white = [];
black = [];
tempKey = false;
notOver = true;
tips = "白棋走";
count = 0;
bv = false;
xCanWin = [];
yCanWin = [];
xyCanWin = [];
yxCanWin = [];
}
function spanFn() {
var span = document.createElement("span");
document.body.insertBefore(span, document.getElementsByTagName("script")[0]);
span.innerText = tips;
}
// 棋盤初始化
function bgInit() {
var table = document.createElement("table");
table.className = "box"
for (var y = 0; y < 20; y++) {
var tr = document.createElement("tr");
for (var x = 0; x < 20; x++) {
var td = "<td class='box-" + y + "-" + x + "' style='width: " + ScreenWidth.cellWidth + "px; height: " + ScreenWidth.cellWidth + "px;border:1px solid #9c9c9c'></td>";
tr.innerHTML += td;
}
table.appendChild(tr);
}
document.body.insertBefore(table, document.getElementsByTagName("script")[0]);
}
// 棋子初始化
function pieceInit() {
var table = document.createElement("table");
table.className = "piece"
table.style = "position: absolute; top: 0; left:50%; margin-left:-" + (ScreenWidth.containerWidth + 42) / 2 + "px";
for (var y = 0; y < 20; y++) {
var tr = document.createElement("tr");
for (var x = 0; x < 20; x++) {
var td = "<td class='piece-" + y + "-" + x + " pieceBox' style='width: " + ScreenWidth.cellWidth + "px; height: " + ScreenWidth.cellWidth + "px;border:1px solid transparent;border-radius: 50%;'></td>";
tr.innerHTML += td;
}
table.appendChild(tr);
}
document.body.insertBefore(table, document.getElementsByTagName("script")[0]);
}
// 走棋
for (var i = 0; i < document.getElementsByClassName("pieceBox").length; i++) {
document.getElementsByClassName("pieceBox")[i].onclick = function () {
if (tempKey) {
this.style.backgroundColor = "#000";// 黑子
tempKey = false;
black.push(this.className.match(reg));
victory(black, 0);//判斷黑棋勝利與否
if (notOver) {
tips = tipsGo(tempKey);
document.getElementsByTagName("span")[0].innerText = tips;
}
} else {
this.style.backgroundColor = "#fff";// 白子
tempKey = true;
white.push(this.className.match(reg));
victory(white, 1);//判斷白棋勝利與否
if (notOver) {
tips = tipsGo(tempKey);
document.getElementsByTagName("span")[0].innerText = tips;
}
}
this.onclick = null;// 點擊之后取消點擊事件
}
}
// 提示走黑還是走白
function tipsGo(tempKey) {
if (tempKey) {
return "黑棋走";
} else {
return "白棋走";
}
}
/**
*判斷各種贏的方式
*x代表很坐標，y代表縱坐標
*1.豎贏，就是x值相同，取y值排序后比較
*2.橫贏，就是y值相同，取x值排序后比較
*3.正斜贏，x+y相同的值，取x或y排序后比較
*4.反斜贏，x-y相同的值，取x或y排序后比較
*/
function victory(target, c) {
if (target.length >= 5) {
// 1.豎贏yCanWin
for (var i = 0; i < target.length; i++) {
for (var j = 0; j < target.length; j++) {
if (target[j][1] == target[i][1]) {
yCanWin.push(target[j]);//把x相同的值放入數(shù)組yCanWin
}
}
yWin(yCanWin, c);
yCanWin = [];
}
// 2.橫贏xCanWin
for (var m = 0; m < target.length; m++) {
for (var n = 0; n < target.length; n++) {
if (target[n][0] == target[m][0]) {
xCanWin.push(target[n]);//把y相同的值放入數(shù)組xCanWin
}
}
xWin(xCanWin, c);
xCanWin = [];
}
// 3.正斜贏xyCanWin（左下到右上）
for (var a = 0; a < target.length; a++) {
for (var b = 0; b < target.length; b++) {
if (parseInt(target[b][0]) + parseInt(target[b][1]) == parseInt(target[a][0]) + parseInt(target[a][1])) {
xyCanWin.push(target[b])
}
}
yWin(xyCanWin, c);
xyCanWin = [];
}
// 4.反斜贏yxCanWin（左上到右下）
for (var v = 0; v < target.length; v++) {
for (var w = 0; w < target.length; w++) {
if (parseInt(target[w][0]) - parseInt(target[w][1]) == parseInt(target[v][0]) - parseInt(target[v][1])) {
yxCanWin.push(target[w])
}
}
xWin(yxCanWin, c);
yxCanWin = [];
}
}
}
// 棋的豎贏條件(棋的正斜贏條件)
function yWin(yCanWin, c) { // c = 0代表黑子 c = 1代表白子
var sortArray = [];//排序數(shù)組
for (var i = 0; i < yCanWin.length; i++) {
sortArray.push(yCanWin[i][0]);
}
sortArray.sort(function (x, y) {
return x - y;
});
// 數(shù)組排序后，前數(shù)和后數(shù)加一相比(注意數(shù)值類型的轉(zhuǎn)換)
for (var j = 0; j < sortArray.length; j++) {
if (sortArray[j + 1]) {
if (parseInt(sortArray[j]) + 1 == parseInt(sortArray[j + 1])) {
count++; // 每有一個連續(xù)則加一，一次不連續(xù)就清零
if (count == 4 && c == 0) {
bv = true;
notOver = false;// 游戲結(jié)束
return;
} else if (count == 4 && c == 1) {
wv = true;
notOver = false;
return;
}
} else {
count = 0;
}
}
}
count = 0;
}
// 棋的橫贏條件(棋的反斜贏條件)
function xWin(xCanWin, c) {
var sortArray = [];
for (var i = 0; i < xCanWin.length; i++) {
sortArray.push(xCanWin[i][1]);
}
sortArray.sort(function (x, y) {
return x - y;
});
for (var j = 0; j < sortArray.length; j++) {
if (sortArray[j + 1]) {
if (parseInt(sortArray[j]) + 1 == parseInt(sortArray[j + 1])) {
count++;
if (count == 4 && c == 0) {
bv = true;
notOver = false;
return;
} else if (count == 4 && c == 1) {
wv = true;
notOver = false;
return;
}
} else {
count = 0;
}
}
}
count = 0;
}
javascript經(jīng)典小游戲匯總的全部文章，請參考專題進行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于js解決pdf使用iframe打印報跨域錯誤問題的相關(guān)資料,文中通過代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用js具有一定的參考借鑒價值,需要的朋友可以參考下2024-03-03
WordPress中鼠標懸停顯示和隱藏評論及引用按鈕的實現(xiàn)
這篇文章主要介紹了WordPress中鼠標懸停顯示和隱藏評論及引用按鈕的實現(xiàn),順帶顯示和隱藏評論者信息的實現(xiàn)方法,非常實用,需要的朋友可以參考下2016-01-01
這篇文章主要給大家介紹了關(guān)于微信小程序中獲取設(shè)備信息的相關(guān)資料,微信小程序是一種在微信平臺上運行的應(yīng)用程序,它具有輕量化、便捷性和高兼容性的特點,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-07-07
JS對象與json字符串相互轉(zhuǎn)換實現(xiàn)方法示例
這篇文章主要介紹了JS對象與json字符串相互轉(zhuǎn)換實現(xiàn)方法,結(jié)合實例形式分析了js對象與json字符串相互轉(zhuǎn)換的相關(guān)操作技巧與注意事項,需要的朋友可以參考下
2018-06-06 
在javascritp中，有兩個關(guān)于定時器的專用函數(shù)，下面講解一下兩個定時器，有需要的朋友可以參考一下
2013-10-10 
這篇文章主要介紹了理解JavaScript單一職責原則，單一職責原則（SRP：Single?responsibility?principle）又稱單一功能原則，面向?qū)ο笪鍌€基本原則（SOLID）之一，下文更多相關(guān)介紹感興趣的小伙伴可以參考一下
2022-08-08 
javascript事件捕獲機制【深入分析IE和DOM中的事件模型】
這篇文章主要介紹了javascript事件捕獲機制,結(jié)合實例形式分析了冒泡的原理、事件捕獲、各瀏覽器事件處理機制與IE和DOM中的事件模型等,需要的朋友可以參考下
2016-12-12 
javascript一段創(chuàng)建層的代碼...
2007-10-10 
很多網(wǎng)站都有此功能，當瀏覽到底部時都會有一個打印按鈕，點擊打印按鈕就可以完成打印功能，功能非常不錯，人性化，下面通過本文給大家介紹JavaScript實現(xiàn)點擊按鈕就打印的代碼，需要的朋友參考下
2016-01-01