基于JavaScript實現(xiàn)五子棋游戲
更新時間：2020年08月26日 09:53:45 作者：安靜的對折
這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)五子棋的具體代碼，供大家參考，具體內(nèi)容如下
思路：
1、先用canvas畫五子棋的棋盤
2、獲取鼠標點擊的位置
3、根據(jù)鼠標點擊的位置判斷，并畫棋子
4、根據(jù)下的棋子判斷是否贏了
代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
canvas {
margin: 10px;
border: 2px solid #000;
}
#box {
display: inline-block;
position: absolute;
margin-top: 200px;
margin-left: 100px;
}
span {
font: 24px "微軟雅黑";
display: inline-block;
height: 50px;
}
input {
margin-top: 30px;
display: block;
width: 100px;
height: 50px;
font: 16px "微軟雅黑";
color: #fff;
background-color: #0099cc;
}
</style>
</head>
<body>
<canvas width="640" height="640" id="cas">
您的瀏覽器不支持canvas，請升級到最新的瀏覽器
</canvas>
<div id="box">
<span id="txt"></span>
<input type="button" id="btn" value="重新開始"/>
</div>
<script>
var flag = true; //true代表白棋下的棋子，false代表黑棋下的棋子
var isWin = false; //判斷是否結(jié)束，true結(jié)束，false沒有結(jié)束
var step = 40; //設(shè)置每個格子的寬高都是40
var txt = document.getElementById("txt");
var btn = document.getElementById("btn");
var cas = document.getElementById("cas");// 獲取畫布對象
var ctx = cas.getContext("2d"); //畫布上下文
// 創(chuàng)建圖片對象
var img_b = new Image();
img_b.src = "imgs/b.png";//設(shè)置黑棋圖片路徑
var img_w = new Image();
img_w.src = "imgs/w.png";//設(shè)置白棋圖片路徑
// 用二維數(shù)組來保存棋盤，0代表沒有走過，1為白棋走過，2為黑棋走過
var arr = new Array(15); //聲明一個一維數(shù)組
for (var i = 0; i < 15; i++) {
arr[i] = new Array(15); //每個值再聲明一個一維數(shù)組，這樣就組成了一個二維數(shù)組
for (var j = 0; j < 15; j++) {
arr[i][j] = 0;
}
}
//繪制棋盤
function drawLine() {
for (var i = 0; i < cas.width / step; i++) {
// 畫豎線
ctx.moveTo((i + 1) * step, 0);
ctx.lineTo((i + 1) * step, cas.height);
// 畫橫線
ctx.moveTo(0, (i + 1) * step);
ctx.lineTo(cas.width, (i + 1) * step);
ctx.stroke();
}
}
//獲取鼠標點擊的位置
cas.onclick = function (e) {
// 先判斷游戲是否結(jié)束
if (isWin) {
alert("游戲已經(jīng)結(jié)束，請刷新重新開始！");
return 0;
}
//判斷棋子顯示的地方，四條邊上不顯示棋子，
//鼠標點擊的位置減去邊框距離頁面的上和左的距離（10），減去一個格子寬高的一半（20）
var x = (e.clientX - 10 - 20) / 40;
var y = (e.clientY - 10 - 20) / 40;
//進行取整來確定棋子最終顯示的區(qū)域
x = parseInt(x);
y = parseInt(y);
//如果超出棋盤或者在棋盤邊界直接返回，邊界上不能畫棋子
if(x < 0 || x >= 15 || y < 0 || y >= 15) {
return;
}
//進行判斷該位置是否已經(jīng)顯示過棋子
if (arr[x][y] != 0) {
alert("你不能在這個位置下棋");
return;
}
// 判斷是顯示黑子還是白子
if (flag) {//白子
flag = false; //將標志置為false,表示下次為黑子
drawChess(1, x, y); //調(diào)用函數(shù)來畫棋子
} else {//黑子
flag = true; //將標志置為true,表示下次為白子
drawChess(2, x, y); //調(diào)用函數(shù)來畫棋子
}
}
//畫棋子
function drawChess(num, x, y) {
//根據(jù)x和y確定圖片顯示位置,讓圖片顯示在十字線中間，因為一個格子為40，圖片大小為30，所以40-30/2等于25，所以需要加上25
var x0 = x * step + 25;
var y0 = y * step + 25;
if (num == 1) {
//繪制白棋
ctx.drawImage(img_w, x0, y0);
arr[x][y] = 1; //白子
} else if (num == 2) {
// 繪制黑棋
ctx.drawImage(img_b, x0, y0);
arr[x][y] = 2; //黑子
}
//調(diào)用函數(shù)判斷輸贏
judge(num, x, y);
}
//判斷輸贏
function judge(num, x, y) {
var n1 = 0, //左右方向
n2 = 0, //上下方向
n3 = 0, //左上到右下方向
n4 = 0; // 右上到左下方向
//***************左右方向*************
//先從點擊的位置向左尋找，相同顏色的棋子n1自加，直到不是相同顏色的棋子，則跳出循環(huán)
for (var i = x; i >= 0; i--) {
if (arr[i][y] != num) {
break;
}
n1++;
}
//然后從點擊的位置向右下一個位置尋找，相同顏色的棋子n1自加，直到不是相同顏色的棋子，則跳出循環(huán)
for (var i = x + 1; i < 15; i++) {
if (arr[i][y] != num) {
break;
}
n1++;
}
//****************上下方向************
for (var i = y; i >= 0; i--) {
if (arr[x][i] != num) {
break;
}
n2++;
}
for (var i = y + 1; i < 15; i++) {
if (arr[x][i] != num) {
break;
}
n2++;
}
//****************左上到右下斜方向***********
for(var i = x, j = y; i >=0, j >= 0; i--, j--) {
if (i < 0 || j < 0 || arr[i][j] != num) {
break;
}
n3++;
}
for(var i = x+1, j = y+1; i < 15, j < 15; i++, j++) {
if (i >= 15 || j >= 15 || arr[i][j] != num) {
break;
}
n3++;
}
//****************右上到左下斜方向*************
for(var i = x, j = y; i >= 0, j < 15; i--, j++) {
if (i < 0 || j >= 15 || arr[i][j] != num) {
break;
}
n4++;
}
for(var i = x+1, j = y-1; i < 15, j >= 0; i++, j--) {
if (i >= 15 || j < 0 || arr[i][j] != num) {
break;
}
n4++;
}
//用一個定時器來延時，否則會先彈出對話框，然后才顯示棋子
var str;
if (n1 >= 5 || n2 >= 5 || n3 >= 5 || n4 >= 5) {
if (num == 1) {//白棋
str = "白棋贏了，游戲結(jié)束！"
} else if (num == 2) {//黑棋
str = "黑棋贏了，游戲結(jié)束！"
}
txt.innerHTML = str;
isWin = true;
}
}
//重新開始
btn.onclick = function() {
flag = true;
isWin = false;
for (var i = 0; i < 15; i++) {
for (var j = 0; j < 15; j++) {
arr[i][j] = 0;
}
}
ctx.clearRect(0, 0, 640, 640);
txt.innerHTML = "";
drawLine();
}
drawLine();
</script>
</body>
</html>
代碼鏈接地址：五子棋demo
更多有趣的經(jīng)典小游戲?qū)崿F(xiàn)專題，分享給大家：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
一個多層疊的TAB選項卡，自適應(yīng)寬度(自行更改nonstop的width測試效果)。2010-01-01
JavaScript使用lodash實現(xiàn)命名轉(zhuǎn)換和函數(shù)封裝
Lodash?是一個?JavaScript?的工具庫,它提供了一系列的函數(shù)來簡化代碼編寫,本文主要為大家介紹了如何使用lodash實現(xiàn)命名轉(zhuǎn)換和函數(shù)封裝,感興趣的小伙伴可以了解下2023-11-11
網(wǎng)站加入flash廣告代碼，利用DIV層來控制進度的狀態(tài)，如果加載swf文件到100%的時候就顯示出flash，把AD層隱藏掉，請看下面實現(xiàn)方法。2010-04-04
前進后退實現(xiàn)的前提是：images文件夾下圖片的命名是從1~5.jpg有規(guī)律的，感興趣的朋友可以參考下哈，希望可以幫助到你2013-04-04
用JavaScript計算在UTF-8下存儲字符串占用字節(jié)數(shù)
想辦法在JavaScript中判斷在UTF-8下存儲的String的字節(jié)數(shù)，在網(wǎng)上找到很多關(guān)于Unicode介紹的文檔，最重要的是字符編碼數(shù)值對應(yīng)的存儲長度2013-08-08
這篇文章主要介紹了js前端對于大量數(shù)據(jù)的展示方式及處理方法，幫助大家更好的理解和使用js，感興趣的朋友可以了解下2020-12-12
JavaScript箭頭函數(shù)_動力節(jié)點Java學院整理
這篇文章主要為大家詳細介紹了JavaScript箭頭函數(shù)的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
JavaScript正則表達式小結(jié)(test|match|search|replace|split|exec)
這篇文章主要介紹了JavaScript正則表達式小結(jié)(test|match|search|replace|split|exec)的相關(guān)資料，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2016-12-12
這篇文章主要給大家介紹了關(guān)于JavaScript中極易出錯的操作符運算的相關(guān)資料,包括了算術(shù)運算符、比較運算符、邏輯運算符、賦值運算符、一元運算符以及運算優(yōu)先級等問題,需要的朋友可以參考下2021-08-08
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單的音樂播放器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08