2. 程式人生 > >CSS3實現五子棋Web小遊戲，Canvas畫布和DOM兩種實現，並且具有悔棋和撤銷悔棋功能。

CSS3實現五子棋Web小遊戲，Canvas畫布和DOM兩種實現，並且具有悔棋和撤銷悔棋功能。

阿新 • • 發佈：2017-05-27
posit oct padding 角色 sar pac osi fse ech

用Canvas實現五子棋的思路：

1、點擊棋盤，獲取坐標x，y，計算出棋子的二維數組坐標i和j，

2、棋子的實現，先arc一個圓，再填充漸變色。

3、下完一步棋後切換畫筆和角色。

4、贏法算法的實現：計算出整個15*15的棋盤有多少種贏法，定義一個win[]三維數組，數組的初始化如下。

//贏法數組

var wins = [];
for (var i = 0; i < 15; i++) {
wins[i] = [];
for (var j = 0; j < 15; j++) {
wins[i][j] = [];
}
}

var count = 0; //贏法總數
//橫線贏法
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++;
}
}

tip：win數組表達的是某個坐標的棋子有多少種贏法線條（本例中有15*11*5），並且有贏法線條的編號。這在後面下完棋後，需要判斷該棋子是否在某個贏法線條上，然後讓blackWin[k]數組+1，等blackWin[k]==5時就贏了

for (var k = 0; k < count; k++) {
if (wins[i][j][k]) {
blackWin[k]++;

if (blackWin[k] == 5) {
over = true;
$("#info").text("黑子已勝！再來一盤！");
break;
}

}

}

用DOM實現五子棋小遊戲的思路：

1、先把所有棋子的坑用td填充，那麽就有15*15個坑，給每個td加上id=i-j

2、每次點擊棋盤的時候，獲取該td的id，然後解析出來坐標i和j

3、判斷贏法算法同上

悔棋的實現：

1、消除棋子：如果是DOM實現，則將td的backgroundImage=none；如果是Canvas實現，則用context.clearRec(x,y,width,height)，清除畫布中某個棋子區域

2、去除blackWin[k]數組的標記，逆向減法

for (var k = 0; k < count; k++) {
if (wins[i][j][k]) {
blackWin[k]--;
}
}

3、將切換的角色切換回來，me=!me

撤銷悔棋的實現：

1、畫棋子：如果是DOM實現，則將td的backgroundImage=url(black.png)；如果是Canvas實現，則先arc圓，再填充漸變色

2、贏法數組統計

for (var k = 0; k < count; k++) {
if (wins[i][j][k]) {
blackWin[k]++;
}
}

總結：

這樣，五子棋的實現原理脈絡大概清楚了，最後再貼上完整代碼，不用謝。

//DOM實現

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>五子棋</title>
<style>

div#chess {
display: flex;
width: 450px;
height: 450px;
padding: 0px;
display: block;
margin: 50px auto 0px auto;
box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9;
background-image: url(bg.png);
align-items: center;
justify-content:center;
}
div.chessArea {
display: block;
width: 480px;
height: 450px;
padding: 0px;
}
.chessArea table {
border-collapse: collapse;
position:relative;
}

.chessAreaItem {
width: 30px;
height: 30px;
box-sizing: border-box;
margin: 0px;
top: 0px;
bottom: 0px;

}
.info {
width:450px;
height:30px;
color:red;
font-size:15px;
padding-left:20px;
margin:0px auto;
line-height:30px;
box-sizing:border-box;
}
.buttonGroup {
width: 500px;
margin: 20px auto;
display: flex;
justify-content: space-around;
}

.buttonGroup div:hover {
cursor: pointer;
}

.restart {
text-align: center;
background-color: #45c01a;
border-radius: 5px;
}

.revert, .removeRevert {
text-align: center;
background-color: #b9b9b9;
border-radius: 5px;
}

.restart > span, .revert > span, .removeRevert > span {
display: inline-block;
padding: 10px 20px;
color: #fff;
}
</style>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="chess" class="chess" style="display:flex;">
<div class="chessArea"></div>
</div>
<div class="info" id="info"></div>
<div class="buttonGroup">
<div id=‘restart‘ class="restart">
<span>重新開始</span>
</div>

<div id=‘revert‘ class="revert" onclick="revert()">
<span>悔棋</span>
</div>
<div id=‘removeRevert‘ class="removeRevert" onclick="removeRevert()">
<span>撤銷悔棋</span>
</div>
</div>


</body>
</html>


<script>
var over = false;
var me = true; //我

var chressBord = [];//棋盤
for (var i = 0; i < 15; i++) {
chressBord[i] = [];
for (var j = 0; j < 15; j++) {
chressBord[i][j] = 0;
}
}

//贏法的統計數組
var blackWin = [];
var whiteWin = [];

//贏法數組
var wins = [];
for (var i = 0; i < 15; i++) {
wins[i] = [];
for (var j = 0; j < 15; j++) {
wins[i][j] = [];
}
}

var count = 0; //贏法總數
//橫線贏法
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++;
}
}

for (var i = 0; i < count; i++) {
blackWin[i] = 0;
whiteWin[i] = 0;
}

function isLightBackground(id, isLight) {
var $this = document.getElementById(id);
if (isLight) {
$this.style.backgroundColor = "#45c01a";
} else {
$this.style.backgroundColor = "#b9b9b9";
}

}

function drawChess(id,me) {
if (me) {
$("#" + id).css("backgroundImage", "url(black.png)");
} else {
$("#" + id).css("backgroundImage", "url(white.png)");
}
}

function removeChess(id) {
$("#" + id).css("backgroundImage", "none");
}

var i, j;
var id;
function chessAreaItemClick(aid) {
id = aid;
if (over) {
return;
}
drawChess(id,me);
i = id.split(‘-‘)[0];
j = id.split(‘-‘)[1];
if (me) {
if (chressBord[i][j] == 0) {
chressBord[i][j] = 1;//黑子
debugger;
for (var k = 0; k < count; k++) {
if (wins[i][j][k]) {
blackWin[k]++;
whiteWin[k] = 6;//這個位置對方不可能贏了
if (blackWin[k] == 5) {
over = true;
isLightBackground(‘revert‘, false);
isLightBackground(‘removeRevert‘, false);
$("#info").text("黑子已勝！再來一盤！");
break;
}
}
}

}
} else {
if (chressBord[i][j] == 0) {
chressBord[i][j] = 2;//白子
for (var k = 0; k < count; k++) {
if (wins[i][j][k]) {
whiteWin[k]++;
blackWin[k] = 6;
if (whiteWin[k] == 5) {
over = true;
isLightBackground(‘revert‘, false);
isLightBackground(‘removeRevert‘, false);
$("#info").text("白子已勝！再來一盤！");
break;
}
}
}
}
}
if (!over) {
me = !me;
//悔棋的樣式點亮
isLightBackground(‘revert‘, true);
}

}

var revertFlag = false;
//悔棋事件
function revert() {
if (!over && !revertFlag) {
removeChess(id);
chressBord[i][j] = 0;
if (!me) {
for (var k = 0; k < count; k++) {
if (wins[i][j][k]) {
blackWin[k]--;
}
}
} else {
for (var k = 0; k < count; k++) {
if (wins[i][j][k]) {
whiteWin[k]--;
}
}
}
me = !me;
revertFlag = true;
//撤銷悔棋的樣式點亮，悔棋樣式disabled
isLightBackground(‘revert‘, false);
isLightBackground(‘removeRevert‘, true);
}
}

//撤銷悔棋事件
function removeRevert() {
if (!over && revertFlag) {
if (me) {
if (chressBord[i][j] == 0) {
drawChess(id,me);
chressBord[i][j] = 1;//黑子
for (var k = 0; k < count; k++) {
if (wins[i][j][k]) {
blackWin[k]++;
}
}

}
} else {
if (chressBord[i][j] == 0) {
drawChess(id, me);
chressBord[i][j] = 2;//白子
for (var k = 0; k < count; k++) {
if (wins[i][j][k]) {
whiteWin[k]++;
}
}
}
}
if (!over) {
me = !me;
}
revertFlag = false;

//悔棋的樣式點亮，撤銷悔棋樣式disabled
isLightBackground(‘revert‘, true);
isLightBackground(‘removeRevert‘, false);
}
}

//重新開始
document.getElementById("restart").onclick = function () {
window.location.reload();
}

//畫所有的棋子
function initChess() {
var $chessArea = document.getElementById("chessArea");
$tbody = $(".chessArea").append(‘<table cellspacing="0px"><tbody></tbody></table>‘);
for (var i = 0; i < 15; i++) {
var $tr = $tbody.append(‘<tr></tr>‘);
for (var j = 0; j < 15; j++) {
$tr.append(‘<td class="chessAreaItem" id=‘ + i +‘-‘+ j + ‘ onclick="chessAreaItemClick(id)"></td>‘);
}
}
}
initChess();

</script>

//Canvas實現

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>五子棋</title>
<style>
canvas {
display: block;
margin: 50px auto;
box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9;
background-image: url(bg.png);
}

.buttonGroup {
width: 500px;
margin: 50px auto;
display: flex;
justify-content: space-around;
}

.buttonGroup div:hover {
cursor: pointer;
}

.restart {
text-align: center;
background-color: #45c01a;
border-radius: 5px;
}

.revert, .removeRevert {
text-align: center;
background-color: #b9b9b9;
border-radius: 5px;
}

.restart > span, .revert > span, .removeRevert > span {
display: inline-block;
padding: 10px 20px;
color: #fff;

}
</style>
</head>
<body>
<canvas id="chess" width="450px" height="450px"></canvas>
<div class="buttonGroup">
<div id=‘restart‘ class="restart">
<span>重新開始</span>
</div>

<div id=‘revert‘ class="revert" onclick="revert()">
<span>悔棋</span>
</div>
<div id=‘removeRevert‘ class="removeRevert" onclick="removeRevert()">
<span>撤銷悔棋</span>
</div>
</div>


</body>
</html>


<script>
var over = false;
var me = true; //我

var chressBord = [];//棋盤
for (var i = 0; i < 15; i++) {
chressBord[i] = [];
for (var j = 0; j < 15; j++) {
chressBord[i][j] = 0;
}
}

//贏法的統計數組
var blackWin = [];
var whiteWin = [];

//贏法數組
var wins = [];
for (var i = 0; i < 15; i++) {
wins[i] = [];
for (var j = 0; j < 15; j++) {
wins[i][j] = [];
}
}

var count = 0; //贏法總數
//橫線贏法
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++;
}
}

for (var i = 0; i < count; i++) {
blackWin[i] = 0;
whiteWin[i] = 0;
}

var chess = document.getElementById("chess");
var context = chess.getContext(‘2d‘);
context.strokeStyle = ‘#bfbfbf‘; //邊框顏色

//繪畫棋盤
//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();
// }
//}
//drawChessBoard();
function isLightBackground(id, isLight) {
var $this = document.getElementById(id);
if (isLight) {
$this.style.backgroundColor = "#45c01a";
} else {
$this.style.backgroundColor = "#b9b9b9";
}

}
var i, j;
chess.onclick = function (e) {
if (over) {
return;
}
var x = e.offsetX;
var y = e.offsetY;
i = Math.floor(x / 30);
j = Math.floor(y / 30);
if (me) {
if (chressBord[i][j] == 0) {
oneStep(i, j, true);
chressBord[i][j] = 1;//黑子
for (var k = 0; k < count; k++) {
if (wins[i][j][k]) {

blackWin[k]++;
whiteWin[k] = 6;//這個位置對方不可能贏了
if (blackWin[k] == 5) {
window.alert(‘黑子贏了‘);
over = true;
isLightBackground(‘revert‘,false);
isLightBackground(‘removeRevert‘,false);
break;
}
}
}

}
} else {
if (chressBord[i][j] == 0) {
oneStep(i, j, false);
chressBord[i][j] = 2;//白子
for (var k = 0; k < count; k++) {
if (wins[i][j][k]) {
whiteWin[k]++;
blackWin[k] = 6;
if (whiteWin[k] == 5) {
window.alert(‘白子贏了‘);
over = true;
isLightBackground(‘revert‘, false);
isLightBackground(‘removeRevert‘, false);
break;
}
}
}
}
}
if (!over) {
me = !me;
//悔棋的樣式點亮
isLightBackground(‘revert‘, true);
}

}

var revertFlag = false;
//悔棋事件
function revert() {
if (!over && !revertFlag) {
context.clearRect(i * 30, j * 30, 30, 30);
chressBord[i][j] = 0;
if (!me) {
for (var k = 0; k < count; k++) {
if (wins[i][j][k]) {
blackWin[k]--;
}
}
} else {
for (var k = 0; k < count; k++) {
if (wins[i][j][k]) {
whiteWin[k]--;
}
}
}
me = !me;
revertFlag = true;
//撤銷悔棋的樣式點亮，悔棋樣式disabled
isLightBackground(‘revert‘, false);
isLightBackground(‘removeRevert‘, true);
}
}

//撤銷悔棋事件
function removeRevert() {
if (!over&&revertFlag) {
if (me) {
if (chressBord[i][j] == 0) {
oneStep(i, j, true);
chressBord[i][j] = 1;//黑子
for (var k = 0; k < count; k++) {
if (wins[i][j][k]) {
blackWin[k]++;
}
}

}
} else {
if (chressBord[i][j] == 0) {
oneStep(i, j, false);
chressBord[i][j] = 2;//白子
for (var k = 0; k < count; k++) {
if (wins[i][j][k]) {
whiteWin[k]++;
}
}
}
}
if (!over) {
me = !me;
}
revertFlag = false;

//悔棋的樣式點亮，撤銷悔棋樣式disabled
isLightBackground(‘revert‘, true);
isLightBackground(‘removeRevert‘, false);
}
}

//畫棋子
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();
return true;
}

document.getElementById("restart").onclick = function () {
window.location.reload();
}

</script>

CSS3實現五子棋Web小遊戲，Canvas畫布和DOM兩種實現，並且具有悔棋和撤銷悔棋功能。

相關推薦

CSS3實現五子棋Web小遊戲，Canvas畫布和DOM兩種實現，並且具有悔棋和撤銷悔棋功能。

posit oct padding 角色 sar pac osi fse ech 用Canvas實現五子棋的思路： 1、點擊棋盤，獲取坐標x，y，計算出棋子的二維數組坐標i和j， 2、棋子的實現，先arc一個圓，再填充漸變色。 3、下完一步棋後切換畫筆和角色。 4、贏法算法

servlet創建項目過程中，servlet內容重寫的兩種搭建，tomcat的配置，class的存放位置，web.xml的搭建等註意事項與易錯點

ext destroy 工作 nbsp jar rri 配置tomcat location cep 運行一個servlet項目；需要做這些前提工作； 1、配置tomcat，在server選項卡的設置也就基本的設置，HTTP port與JMX port等端口號；基本都是默認的

使用javascript和jquery兩種方法，實現密碼明文和密文的轉換

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>&

js將number數值轉化成為貨幣格式，貨幣格式化，金錢過濾器，貨幣過濾器，vue貨幣過濾金錢過濾全域性和區域性兩種實現方式

js中使用 js程式碼 const digitsRE = /(\d{3})(?=\d)/g function currency (value, currency, decimals) { value = parseFloat(value) if (

計時器的 time_t 和 clock_t 兩種實現方法

        想給自己初步完成的相空間搜尋演算法計算一下執行時間，於是嘗試瞭如下使用 time_t 型別的方式 #include <stdlib.h> #include <iostream> #include <time.h> #inc

HTTP HTTPS POST GET(包含curl版本和winhttp兩種實現)

玩過抓包，網路協議分析的朋友肯定都知道http https post get，web端和使用者的互動主要是通過post get完成的。今天帶給大家的是C++版本的http https get post,只會易語言的朋友請移步。我這裡有兩種實現：1：libcurl實現的CH

移動端HTML5導航欄吸頂：IOS（sticky）和Android兩種實現方式

混合App，前端H5頁面，實現導航欄滑動到的時候貼頂。 注意： 首先寫的時候，監聽scroll事件，滑動到指定位置時改為定位 position:fixed;，實際運用過程中，IOS無法實時監聽scroll事件，在滾動停止之後才觸發的 $(wind

HttpClient傳送請求，get和post兩種方式，分別帶引數和不帶引數

（一）、匯入HttpCLient的jar包 <dependencies> <dependency> <groupId>org.apache.httpcomponents</groupId> <arti

Android--RadioGroup和Tablayout兩種實現底部導航的方式詳解

        自從Android3.0引入Fargment之後，在Activity中使用底部導航進行Fragment的切換已經越來越普遍,或者可以說已經成為了移動應用的標配，而本篇文章我總結了專案中常用的幾種實現導航的方式，分別是RadioGroup、Tablayout、

設定UILabel背景和文字的透明度（程式碼和SB兩種實現）

分別介紹UILabel程式碼和SB設定透明問題 1-UILabel字型背景同時透明 storyboard設定： 在屬性欄裡設定當前控制元件的alpha的值，0-1表示從全透明到不透明 程式碼設定： UILabel.alpha = 0.5; //表示

前端仔教你一步步實現人人對戰五子棋小遊戲【canvas詳細版】

線上地址--gobang online pc上使用谷歌瀏覽器比較友好@～@ 程式碼倉庫--gobang tutorial 歡迎對此倉庫進行擴充套件或star啦 @～@ 前置知識點: 阮生的es6教程和MDN的canvas教程 以上，兵馬未動，糧草先行。看官可以先體驗下小遊戲並且粗略瞭解

[微信小遊戲+Three.JS]給場景添加反射材質，實現3D水珠移動效果

rac webgl round 圖片 nmap 微信小遊戲 ops In 繪制 前幾篇博客，我分別加好了3D移動盒子，也給場景加好了天空盒 這篇博客，就給場景再加一些效果 繪制的水珠的源代碼來自Three.JS在GitHub上的demo 小遊戲所用到的，修改過的JS庫

『HTML5實現人工智慧』小遊戲《井字棋》釋出，據說IQ上200才能贏【演算法&程式碼講解+資源打包下載】

一，什麼是TicTacToe（井字棋）本遊戲為在下用lufylegend開發的第二款小遊戲。此遊戲是大家想必大家小時候都玩過，因為玩它很簡單，只需要一張草稿紙和一隻筆就能開始遊戲，所以廣受兒童歡迎。可能我說了半天，對它名字不熟悉的朋友也不懂我在說神馬。那沒關係，我就引用Wik

Python基礎入門-實現猜數字小遊戲

結束 選擇 提示 int pri 返回 重新開始 系統默認 pan 今天呢，我們來通過前面學過的一些知識點來完成一個猜數字大小的遊戲程序設計。那麽呢，一般人寫代碼直接上來就幹，沒有分析，這樣的做法是沒有產出的，除非你是大牛，今天呢，我會把我學習編程的思路分享給大家，我的思路

C語言實現簡易2048小遊戲

blog 而在 而是 null 移動 是我 我們 空指針 主體 一直很喜歡玩這個小遊戲，簡單的遊戲中包含運氣與思考與策略，喜歡這種簡約又不失內涵的遊戲風格。於是萌生了用C語言實現一下的想法。 具體代碼是模仿這個：https://www.cnblogs.com/judgeyo

原生JS實現的h5小遊戲-植物大戰僵屍

完成後 資源 life css lan posit 獲得 抽象 dom 代碼地址如下：http://www.demodashi.com/demo/12755.html 項目介紹 本項目是利用原生js實現的h5小遊戲-植物大戰僵屍，主要結合了一下自己對於h5小遊戲的理解，

Java實現貪吃蛇小遊戲（附完整原始碼）

今天我就從零開始來完成這個小遊戲，完成的方式也是一步一步的新增功能這樣的方式來實現。 第一步完成的功能：寫一個介面 大家見到的貪吃蛇小遊戲，介面肯定是少不了的。因此，第一步就是寫一個小介面。 實現程式碼如下： 第二步完成的功能：在介面上畫成一格一格的 我們見過的貪吃蛇遊戲

nodejs服務端實現微信小遊戲登入

nodejs服務端實現微信小遊戲登入的驗證與解密資訊 本文章主要借鑑於微信公眾平臺開放介面進行相應功能的開發，參照流程時序圖如： 目錄 文章目錄 nodejs服務端實現微信小遊戲登入的驗證與解密資訊 目錄 小遊戲客戶端

c語言實現 **三子棋小遊戲**

| 備註都寫在程式碼中 標頭檔案 game.h #ifndef __GAME_H_ #define __GAME_H_ #define ROW 3 #define COL 3 #define _CRT_SECURE_NO_WARNINGS #include&

java實現人機猜拳小遊戲

通過構建玩家類，計算機類，遊戲類，三個類，實現了簡單的人機猜拳小遊戲。 /** * @author 萬星明 * @version 建立時間：2018年10月20日 下午3:01:09 * 計算機類 */ public class Computer { p