JS+Canvas實現(xiàn)五子棋游戲
更新時間：2020年08月26日 09:54:50 作者：小時俞
這篇文章主要為大家詳細介紹了原生JS+Canvas實現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS+Canvas實現(xiàn)五子棋游戲的具體代碼，供大家參考，具體內(nèi)容如下
布局+樣式部分代碼 ：
<style type='text/css'>
canvas {
display: block;
margin: 50px auto;
box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9;
cursor: pointer;
}
.btn-wrap {
display: flex;
flex-direction: row;
justify-content: center;
}
.btn-wrap div {
margin: 0 10px;
}
div>span {
display: inline-block;
padding: 10px 20px;
color: #fff;
background-color: #EE82EE;
border-radius: 5px;
cursor: pointer;
}
div.unable span {
background: #D6D6D4;
color: #adacaa;
}
#result-wrap {
text-align: center;
}
</style>
<h3 id="result-wrap">--五子棋--</h3>
<canvas id="chess" width="450px" height="450px"></canvas>
<div class="btn-wrap">
<div id='restart' class="restart">
<span>重新開始</span>
</div>
<div id='goback' class="goback unable">
<span>悔棋</span>
</div>
<div id='return' class="return unable">
<span>撤銷悔棋</span>
</div>
</div>
js部分代碼：
<script>
var over = false;
var me = true; //我
var _nowi = 0, _nowj = 0; //記錄自己下棋的坐標
var _compi = 0, _compj = 0; //記錄計算機當前下棋的坐標
var _myWin = [], _compWin = []; //記錄我，計算機贏的情況
var backAble = false, returnAble = false;
var resultTxt = document.getElementById('result-wrap');
var chressBord = [];//棋盤
for (var i = 0; i < 15; i++) {
chressBord[i] = [];
for (var j = 0; j < 15; j++) {
chressBord[i][j] = 0;
}
}
//贏法的統(tǒng)計數(shù)組
var myWin = [];
var computerWin = [];
//贏法數(shù)組
var wins = [];
for (var i = 0; i < 15; i++) {
wins[i] = [];
for (var j = 0; j < 15; j++) {
wins[i][j] = [];
}
}
var count = 0; //贏法總數(shù)
//橫線贏法
for (var i = 0; i < 15; i++) {
for (var j = 0; j < 11; j++) {
for (var k = 0; k < 5; k++) {
wins[i][j + k][count] = true;
}
count++;
}
}
//豎線贏法
for (var i = 0; i < 15; i++) {
for (var j = 0; j < 11; j++) {
for (var k = 0; k < 5; k++) {
wins[j + k][i][count] = true;
}
count++;
}
}
//正斜線贏法
for (var i = 0; i < 11; i++) {
for (var j = 0; j < 11; j++) {
for (var k = 0; k < 5; k++) {
wins[i + k][j + k][count] = true;
}
count++;
}
}
//反斜線贏法
for (var i = 0; i < 11; i++) {
for (var j = 14; j > 3; j--) {
for (var k = 0; k < 5; k++) {
wins[i + k][j - k][count] = true;
}
count++;
}
}
// debugger;
for (var i = 0; i < count; i++) {
myWin[i] = 0;
_myWin[i] = 0;
computerWin[i] = 0;
_compWin[i] = 0;
}
var chess = document.getElementById("chess");
var context = chess.getContext('2d');
context.strokeStyle = '#bfbfbf'; //邊框顏色
var backbtn = document.getElementById("goback");
var returnbtn = document.getElementById("return");
window.onload = function () {
drawChessBoard(); // 畫棋盤
}
document.getElementById("restart").onclick = function () {
window.location.reload();
}
// 我，下棋
chess.onclick = function (e) {
if (over) {
return;
}
if (!me) {
return;
}
// 悔棋功能可用
backbtn.className = backbtn.className.replace(new RegExp("(\\s|^)unable(\\s|$)"), " ");
var x = e.offsetX;
var y = e.offsetY;
var i = Math.floor(x / 30);
var j = Math.floor(y / 30);
_nowi = i;
_nowj = j;
if (chressBord[i][j] == 0) {
oneStep(i, j, me);
chressBord[i][j] = 1; //我，已占位置
for (var k = 0; k < count; k++) { // 將可能贏的情況都加1
if (wins[i][j][k]) {
// debugger;
myWin[k]++;
_compWin[k] = computerWin[k];
computerWin[k] = 6;//這個位置對方不可能贏了
if (myWin[k] == 5) {
// window.alert('你贏了');
resultTxt.innerHTML = '恭喜，你贏了！';
over = true;
}
}
}
if (!over) {
me = !me;
computerAI();
}
}
}
// 悔棋
backbtn.onclick = function (e) {
if (!backAble) { return; }
over = false;
me = true;
// resultTxt.innerHTML = 'o(╯□╰)o，悔棋中';
// 撤銷悔棋功能可用
returnbtn.className = returnbtn.className.replace(new RegExp("(\\s|^)unable(\\s|$)"), " ");
// 我，悔棋
chressBord[_nowi][_nowj] = 0; //我，已占位置 還原
minusStep(_nowi, _nowj); //銷毀棋子
for (var k = 0; k < count; k++) { // 將可能贏的情況都減1
if (wins[_nowi][_nowj][k]) {
myWin[k]--;
computerWin[k] = _compWin[k];//這個位置對方可能贏
}
}
// 計算機相應(yīng)的悔棋
chressBord[_compi][_compj] = 0; //計算機，已占位置 還原
minusStep(_compi, _compj); //銷毀棋子
for (var k = 0; k < count; k++) { // 將可能贏的情況都減1
if (wins[_compi][_compj][k]) {
computerWin[k]--;
myWin[k] = _myWin[i];//這個位置對方可能贏
}
}
resultTxt.innerHTML = '益智五子棋';
returnAble = true;
backAble = false;
}
// 撤銷悔棋
returnbtn.onclick = function (e) {
if (!returnAble) { return; }
// 我，撤銷悔棋
chressBord[_nowi][_nowj] = 1; //我，已占位置
oneStep(_nowi, _nowj, me);
for (var k = 0; k < count; k++) {
if (wins[_nowi][_nowj][k]) {
myWin[k]++;
_compWin[k] = computerWin[k];
computerWin[k] = 6;//這個位置對方不可能贏
}
if (myWin[k] == 5) {
resultTxt.innerHTML = '恭喜，你贏了！';
over = true;
}
}
// 計算機撤銷相應(yīng)的悔棋
chressBord[_compi][_compj] = 2; //計算機，已占位置
oneStep(_compi, _compj, false);
for (var k = 0; k < count; k++) { // 將可能贏的情況都減1
if (wins[_compi][_compj][k]) {
computerWin[k]++;
_myWin[k] = myWin[k];
myWin[k] = 6;//這個位置對方不可能贏
}
if (computerWin[k] == 5) {
resultTxt.innerHTML = '計算機贏了，繼續(xù)加油哦！';
over = true;
}
}
returnbtn.className += ' ' + 'unable';
returnAble = false;
backAble = true;
}
// 計算機下棋
var computerAI = function () {
var myScore = [];
var computerScore = [];
var max = 0;
var u = 0, v = 0;
for (var i = 0; i < 15; i++) {
myScore[i] = [];
computerScore[i] = [];
for (var j = 0; j < 15; j++) {
myScore[i][j] = 0;
computerScore[i][j] = 0;
}
}
for (var i = 0; i < 15; i++) {
for (var j = 0; j < 15; j++) {
if (chressBord[i][j] == 0) {
for (var k = 0; k < count; k++) {
if (wins[i][j][k]) {
if (myWin[k] == 1) {
myScore[i][j] += 200;
} else if (myWin[k] == 2) {
myScore[i][j] += 400;
} else if (myWin[k] == 3) {
myScore[i][j] += 2000;
} else if (myWin[k] == 4) {
myScore[i][j] += 10000;
}
if (computerWin[k] == 1) {
computerScore[i][j] += 220;
} else if (computerWin[k] == 2) {
computerScore[i][j] += 420;
} else if (computerWin[k] == 3) {
computerScore[i][j] += 2100;
} else if (computerWin[k] == 4) {
computerScore[i][j] += 20000;
}
}
}
if (myScore[i][j] > max) {
max = myScore[i][j];
u = i;
v = j;
} else if (myScore[i][j] == max) {
if (computerScore[i][j] > computerScore[u][v]) {
u = i;
v = j;
}
}
if (computerScore[i][j] > max) {
max = computerScore[i][j];
u = i;
v = j;
} else if (computerScore[i][j] == max) {
if (myScore[i][j] > myScore[u][v]) {
u = i;
v = j;
}
}
}
}
}
_compi = u;
_compj = v;
oneStep(u, v, false);
chressBord[u][v] = 2; //計算機占據(jù)位置
for (var k = 0; k < count; k++) {
if (wins[u][v][k]) {
computerWin[k]++;
_myWin[k] = myWin[k];
myWin[k] = 6;//這個位置對方不可能贏了
if (computerWin[k] == 5) {
resultTxt.innerHTML = '計算機贏了，繼續(xù)加油哦！';
over = true;
}
}
}
if (!over) {
me = !me;
}
backAble = true;
returnAble = false;
var hasClass = new RegExp('unable').test(' ' + returnbtn.className + ' ');
if (!hasClass) {
returnbtn.className += ' ' + 'unable';
}
}
//繪畫棋盤
var drawChessBoard = function () {
for (var i = 0; i < 15; i++) {
context.moveTo(15 + i * 30, 15);
context.lineTo(15 + i * 30, 435);
context.stroke();
context.moveTo(15, 15 + i * 30);
context.lineTo(435, 15 + i * 30);
context.stroke();
}
}
//畫棋子
var oneStep = function (i, j, me) {
context.beginPath();
context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);// 畫圓
context.closePath();
//漸變
var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);
if (me) {
gradient.addColorStop(0, '#0a0a0a');
gradient.addColorStop(1, '#636766');
} else {
gradient.addColorStop(0, '#d1d1d1');
gradient.addColorStop(1, '#f9f9f9');
}
context.fillStyle = gradient;
context.fill();
}
//銷毀棋子
var minusStep = function (i, j) {
//擦除該圓
context.clearRect((i) * 30, (j) * 30, 30, 30);
// 重畫該圓周圍的格子
context.beginPath();
context.moveTo(15 + i * 30, j * 30);
context.lineTo(15 + i * 30, j * 30 + 30);
context.moveTo(i * 30, j * 30 + 15);
context.lineTo((i + 1) * 30, j * 30 + 15);
context.stroke();
}
</script>
更多有趣的經(jīng)典小游戲?qū)崿F(xiàn)專題，分享給大家：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
在JavaScript中replace函數(shù)作為字符串替換函數(shù)，這是一個威力強大的字符串操作函數(shù)，對于常見字符串操作的推薦用法。這篇隨筆就來更加深入的理解它。2013-03-03
前端下載文件方法很多,url是文件地址,下面這篇文章主要給大家介紹了關(guān)于JS通過URL下載文件并重命名的兩種方式,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
使用JavaScript構(gòu)建一個動態(tài)交互式圖表
在Web開發(fā)中,JavaScript不僅是實現(xiàn)交互效果的關(guān)鍵,還可以用于構(gòu)建復(fù)雜的可視化組件,如動態(tài)交互式圖表,下面我們就來看看如何構(gòu)建一個動態(tài)交互式圖表吧2024-02-02
JavaScript 阻止超鏈接跳轉(zhuǎn)的操作方法(多種寫法)
很多朋友問小編能否通過JavaScript來阻止超鏈接的跳轉(zhuǎn)呢，今天給大家通過多種寫法來實現(xiàn)這一功能，具體實例代碼跟隨小編一起看看吧2021-06-06
微信小程序結(jié)合Storage實現(xiàn)搜索歷史效果
這篇文章主要為大家詳細介紹了微信小程序結(jié)合Storage實現(xiàn)搜索歷史效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的區(qū)別和應(yīng)用場景簡述
隨著web2.0的彪悍發(fā)展，以及瀏覽器端所承載的工作越來越大（在不是很影響性能的情況下，開發(fā)者都習(xí)慣把能用瀏覽器做的事兒都讓瀏覽器做，以減輕服務(wù)器的壓力和帶寬費用等）。2010-04-04
今天小編就為大家分享一篇Layui點擊圖片彈框預(yù)覽的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
如何提交含有CKEditor的表單，其實很簡單的在提交事件中加入這一句即可解決問題2014-01-01
Maps Javascript...2007-01-01