教你用Js寫一個簡單的五子棋小游戲
更新時間：2022年07月05日 07:54:13 作者：對半
聽說這是一道騰訊的面試題,可能網(wǎng)上已經(jīng)有不少答案了,晚上沒事看到這道題就自己做了下,下面這篇文章主要給大家介紹了關于如何用Js寫一個簡單的五子棋小游戲的相關資料,需要的朋友可以參考下
這里的五子棋只做一些基礎的功能，對于相對專業(yè)的規(guī)則不做處理。
那么該五子棋實現(xiàn)的規(guī)則和功能如下：
- 整體功能采用canvas實現(xiàn)
- 行列都規(guī)定 20 個數(shù)量，那么棋子的行列數(shù)量是 20 + 1
- 棋盤數(shù)據(jù)采用稀疏數(shù)組格式
- 棋子：0 為黑色，1 為白色
- 可以悔棋
- 勝負結束判斷
棋盤繪制
<template>
<div class="gobang">
<canvas id="my-canvas" ref="canvasRef" width="640" height="640" @click="canvasClick">
</canvas>
</div>
</template>
<script lang="ts" setup>
type GobangData = (0 | 1 | undefined)[][]
/* 一些常量 */
// canvas dom 元素
const canvasRef = ref<InstanceType<typeof HTMLCanvasElement>>()
// 行列數(shù)
const rcs = 20
// 行列的間隔距離
const gap = 30
// 棋子的半徑
const radius = 12
// 棋盤的邊距
const padding = 20
// 是否結束標記
const gameOver = ref(false)
// 當前下棋方
let current = ref<0 | 1>(1)
// canvas 的 2d 實例
let ctx: CanvasRenderingContext2D
// 初始化棋盤數(shù)據(jù)
let data: GobangData = new Array(rcs + 1).fill(0).map(() => new Array(rcs + 1))
</script>
<style lang="scss" scope>
.gobang {
width: 640px;
margin: 0 auto;
}
.header {
margin-bottom: 10px;
display: flex;
justify-content: space-between;
.btns button {
margin-left: 10px;
padding: 0 5px;
}
}
#my-canvas {
background-color: #e6a23c;
border-radius: 4px;
}
</style>
棋盤繪制
/**
* 繪制棋盤
* @param ctx canvas的2d實例
* @param number 行列數(shù)
* @param gap 行列間隔距離
* @param padding 棋盤邊距
*/
const drawChessboard = (
ctx: CanvasRenderingContext2D, rcs: number, gap: number, padding: number
) => {
ctx.beginPath()
ctx.lineWidth = 1
// 行
for (let i = 0; i <= rcs; i++) {
ctx.moveTo(padding + gap * i, padding)
ctx.lineTo(padding + gap * i, padding + gap * rcs)
}
// 列
for (let i = 0; i <= rcs; i++) {
ctx.moveTo(padding, padding + gap * i)
ctx.lineTo(padding + gap * rcs, padding + gap * i)
}
ctx.strokeStyle = '#000'
ctx.stroke()
ctx.closePath()
// 繪制中心圓點
ctx.beginPath()
ctx.arc(
padding + gap * rcs / 2, padding + gap * rcs / 2, 5, 0, 2 * Math.PI
)
ctx.fillStyle = '#000'
ctx.fill()
ctx.closePath()
}
棋子的繪制
我們需要在行列線條交接的地方需要放置棋子，所以我們每次繪制需要循環(huán)棋盤的數(shù)據(jù)，根據(jù)棋盤數(shù)據(jù)在指定的地方繪制棋子
/**
* 繪制棋子，先循環(huán)列，再循環(huán)行
* @param ctx canvas的2d實例
* @param data 棋盤數(shù)據(jù)
* @param number 行列數(shù)
* @param gap 行列間隔距離
* @param padding 棋盤邊距
* @param radius 棋子的半徑
*/
const drawPieces = (
ctx: CanvasRenderingContext2D,
data: GobangData,
gap: number,
padding: number,
radius = 12
) => {
const m = data.length, n = data[0].length
for (let i = 0; i < m; i++) {
const cj = i * gap + padding + 6 - padding
const sj = padding + i * gap
for (let j = 0; j < n; j++) {
// 值為 undefined 時跳過
if (data[i][j] === undefined) {
continue
}
const ci = j * gap + padding + 6 - padding
const si = padding + j * gap
if (!data[i][j]) {
// 值為 1 時，繪制黑棋
drawBlackPieces(
ctx, ci, cj, si, sj, radius
)
} else {
// 值為 0 時，繪制黑棋
drawWhitePieces(
ctx, ci, cj, si, sj, radius
)
}
}
}
}
黑白子的繪制，只是顏色不一樣
// 繪制白子
function drawWhitePieces(
ctx: CanvasRenderingContext2D, ci: number, cj: number, si: number, sj: number, radius = 12
) {
ctx.beginPath()
const lg2 = ctx.createRadialGradient(
ci, cj, 5, ci, cj, 20
)
// 向圓形漸變上添加顏色
lg2.addColorStop(0.1, '#fff')
lg2.addColorStop(0.9, '#ddd')
ctx.fillStyle = lg2
ctx.arc(
si, sj, radius, 0, 2 * Math.PI
)
ctx.fill()
ctx.closePath()
}
// 繪制黑子
function drawBlackPieces(
ctx: CanvasRenderingContext2D, ci: number, cj: number, si: number, sj: number, radius = 12
) {
ctx.beginPath()
const lg2 = ctx.createRadialGradient(
ci, cj, 5, ci, cj, 20
)
// 向圓形漸變上添加顏色
lg2.addColorStop(0.1, '#666')
lg2.addColorStop(0.9, '#000')
ctx.fillStyle = lg2
ctx.arc(
si, sj, radius, 0, 2 * Math.PI
)
ctx.fill()
ctx.closePath()
}
其中 ci 和 cj 是用于棋子上漸變的坐標，si 和 sj 是用于棋子繪制的圓心坐標。
在點擊 canvas 的時候獲取相對于棋盤數(shù)據(jù)的坐標點
const canvasClick = (e: MouseEvent) => {
if (gameOver.value) {
return
}
const { offsetX, offsetY } = e
const posi = getPostions(
offsetX, offsetY, gap, padding, radius
)
// 當前位置在放置棋子范圍內(nèi)且沒有放置棋子
if (posi && !data[posi[0]][posi[1]]) {
data[posi[0]][posi[1]] = current.value
init()
pushStack(data)
const res = isOver(data)
if (res) {
gameOver.value = true
setTimeout(() => {
const msg = (Array.isArray(res) ? `${data[res[0]][res[1]] ? '白' : '黑'}方獲勝！` : '平局！')
alert('游戲結束，' + msg)
}, 50)
}
}
}
/**
* 根據(jù)點擊的坐標來獲取棋盤數(shù)據(jù)的坐標
* @param offsetX 相對于父級元素的 x => 列位置
* @param offsetY 相對于父級元素的 Y => 行位置
* @param gap 行列間隔距離
*/
const getPostions = (
offsetX: number, offsetY: number, gap: number, padding: number, r = 12
): [number, number] | false => {
const x = Math.round((offsetY - padding) / gap)
const y = Math.round((offsetX - padding) / gap)
// x1, y1 為圓心坐標
const x1 = x * gap + padding, y1 = y * gap + padding
const nr = Math.pow(Math.pow(x1 - offsetY, 2) + Math.pow(y1 - offsetX, 2), 0.5)
if (nr <= r) {
return [x, y]
}
return false
}
這里來判斷點擊的當前位置是否是有效的，并且具體坐標的規(guī)則是：
- 首先需要獲取當前點最靠近哪一個棋子的圓心坐標
- 然后因為棋子的半徑是 12，所以點擊的位置距離棋子圓心的距離不能超過 12
- 滿足則返回具體坐標，不滿足則返回 false
是否結束
游戲結束分為兩種情況：
- 所有格子全部填滿，平局
- 已有相同的 5 顆棋子連成一條線，判勝負
在每一次棋子放下之后，就需要判斷一次是否結束，我們每次需要判斷一個坐標點的八個方向是否有相同的 4 顆棋子連成一條線。但是我們是依照從左至右，從上往下的順序來檢查的，所以具體檢查只需要四個方向即可。
/**
* 判斷是否結束
* 從當前點查詢八個方向的連續(xù)5個位置是否能連城線
* 但是在具體的邏輯判斷中，是從左往右，從上往下一次判斷的，
* 所以在真正的執(zhí)行過程中，只需要判斷4個方向即可
* 這里選擇的四個方向是：右上、右、右下、下
* @param {GobangData} data 棋盤數(shù)據(jù)
*/
const isOver = (data: GobangData) => {
const m = data.length, n = data[0].length
let nullCnt = m * n
for (let i = 0; i < m; i++) {
for (let j = 0; j < n; j++) {
if (data[i][j] !== undefined) {
nullCnt--
if (getPostionResult(data, i, j, m, n)) {
return [i, j]
}
}
}
}
// 是否所有格子都已已有棋子
return !nullCnt
}
/**
* 判讀當前坐標是否滿足結束要求
* @param {GobangData} data 棋盤數(shù)據(jù)
* @param {number} x x 軸
* @param {number} y y 軸
* @param {number} m 最大行數(shù)
* @param {number} n 最大列數(shù)
* @returns {boolean}
*/
function getPostionResult(
data: GobangData, x: number, y: number, m: number, n: number
) {
// 右上 右 右下 下
const ds = [[-1, 1], [0, 1], [1, 1], [1, 0]]
const val = data[x][y]
for (let i = 0; i < ds.length; i++) {
const [dx, dy] = ds[i]
let nx = x, ny = y, flag = true
for (let i = 0; i < 4; i++) {
nx += dx
ny += dy
// 是否是有效坐標，且值是否一樣
if (!(nx >= 0 && nx < m && ny >= 0 && ny < n) || data[nx][ny] !== val) {
flag = false
break
}
}
// 已有 5 顆連成一條線
if (flag) {
return true
}
}
return false
}
關于是否結束的優(yōu)化
是否結束還有一個優(yōu)化的點，就是我們不需要判斷所有坐標點是否滿足，我們只需要判斷最后一個放置棋子的點是否滿足結束條件，但是如果只判斷單個點的話，我們需要判斷這個點的八個方向，所以可以優(yōu)化下：
// 右上 左下 右 左 右下 左上 下 上
const ds = [[[-1, 1], [1, -1]], [[0, 1], [0, -1]], [[1, 1], [-1, -1]], [[1, 0], [-1, 0]]]
/**
* 判讀當前坐標是否滿足結束要求
* @param {GobangData} data 棋盤數(shù)據(jù)
* @param {number} x x 軸
* @param {number} y y 軸
* @param {number} m 最大行數(shù)
* @param {number} n 最大列數(shù)
* @returns {boolean}
*/
function getPostionResult(
data: GobangData, x: number, y: number, m: number, n: number
) {
const val = data[x][y]
for (let i = 0; i < ds.length; i++) {
const [[lx, ly], [rx, ry]] = ds[i]
let nx = x, ny = y, cnt = 1
for (let j = 0; j < 4; j++) {
nx += lx
ny += ly
if (!(nx >= 0 && nx < m && ny >= 0 && ny < n) || data[nx][ny] !== val) {
break
}
cnt++
}
nx = x
ny = y
for (let j = 0; j < 4; j++) {
nx += rx
ny += ry
if (!(nx >= 0 && nx < m && ny >= 0 && ny < n) || data[nx][ny] !== val) {
break
}
cnt++
}
if (cnt >= 5) {
return true
}
}
return false
}
/**
* 判斷是否結束
* 從當前點查詢八個方向的連續(xù)5個位置是否能連城線
* 所有格子是否全部填滿
* 最后下棋的坐標是否連城線
* @param {GobangData} data 棋盤數(shù)據(jù)
* @param {[number, number]} posi 最后一個是否滿足結束的坐標點
*/
export const isOver = (data: GobangData, posi: [number, number]) => {
const m = data.length, n = data[0].length
let nullCnt = m * n
// 先判斷最后一個點是否滿足結束
if (getPostionResult(data, posi[0], posi[1], m, n)) {
return posi
}
for (let i = 0; i < m; i++) {
for (let j = 0; j < n; j++) {
if (data[i][j] !== undefined) {
nullCnt--
}
}
}
return !nullCnt
}
悔棋功能
悔棋，也就是撤銷功能，在放子的時候，保存當前的棋盤數(shù)據(jù)的快照，在悔棋的時候，拿到前一個快照的數(shù)據(jù)渲染出來。在做數(shù)據(jù)深拷貝的時候，用 JSON 的字符串解析方法，和 lodash 的深拷貝方法，都會講原稀疏數(shù)組的空值都會填滿，會破壞稀疏數(shù)組的結構定義，所以就自己根據(jù)場景寫了一個拷貝方法：
// 深拷貝稀疏數(shù)組
function cloneDeep<T extends GobangData>(data: T):T {
const m = data.length, n = data[0].length
const res = new Array(m).fill(0).map(() => new Array(n)) as T
for (let i = 0; i < m; i++) {
for (let j = 0; j < n; j++) {
if (data[i][j] !== undefined) {
res[i][j] = data[i][j]
}
}
}
return res
}
// 緩存
const cacheData: GobangData[] = [cloneDeep<GobangData>(data)]
const cacheIndex = ref(0)
const pushStack = (data: GobangData) => {
cacheData.push(cloneDeep<GobangData>(data))
cacheIndex.value++
}
const popStack = () => {
if (cacheIndex.value && !gameOver.value) {
data = cloneDeep(cacheData[--cacheIndex.value])
cacheData.length = cacheIndex.value + 1
init()
}
}
到這里，一個簡單的五子棋就完成了。
總結
到此這篇關于教你用Js寫一個簡單的五子棋小游戲的文章就介紹到這了,更多相關Js寫五子棋內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
js中的觸發(fā)事件對象event.srcElement與event.target詳解
這篇文章主要給大家介紹了js中的觸發(fā)事件對象event.srcElement與event.target的相關資料，文中介紹的非常詳細，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
數(shù)組扁平化指的是：將一個多層嵌套的數(shù)組，處理成只有一層的數(shù)組。本文主要和大家介紹了幾個常用的JS數(shù)組扁平化方法，希望對大家有所幫助2023-04-04
js實現(xiàn)千分符和保留幾位小數(shù)的簡單實例
下面小編就為大家?guī)硪黄猨s實現(xiàn)千分符和保留幾位小數(shù)的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
網(wǎng)頁頁面客戶端腳本跳轉實現(xiàn)代碼。一般后臺語言多需要輸出一些js跟前臺的結合。2009-12-12
這篇文章主要為大家詳細介紹了js省市區(qū)級聯(lián)查詢，包括插件版和無插件版，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
js 數(shù)組的for循環(huán)到底應該怎么寫？
說實話，我是個比較喜歡懷疑權威的人，但是在有些權威的問題一直在我面前閃，閃啊閃，我就開始不懷疑他們了，因為有10000個人說這個東西是對的，我就會覺得它的確是對的吧。2010-05-05
彈窗居中比較煩人的是怎么才能在任意分辨率下實現(xiàn)居中顯示，為了解決此問題，本文測試了一下案例在此與大家分享，有類似需求的朋友可以學習下2013-08-08
微信小程序動態(tài)設置導航欄標題的實現(xiàn)步驟
實際開發(fā)中很多時候我們需要通過上個頁面?zhèn)鬟^來的值動態(tài)的更改標題欄文字,下面這篇文章主要給大家介紹了關于微信小程序動態(tài)設置導航欄標題的實現(xiàn)步驟,需要的朋友可以參考下2023-02-02
javascript鼠標跟隨運動3種效果（眼球效果，蘋果菜單，方向跟隨）
在很多網(wǎng)站上能看到圖片跟隨鼠標移動的JS特效，其實做法很簡單，本文就介紹了很多javascript鼠標跟隨運動，在這里與大家分享下。2016-10-10
這篇文章主要介紹了MUI Scroll插件的使用詳解,需要的朋友可以參考下2017-04-04