H5+C3+JS實現(xiàn)雙人對戰(zhàn)五子棋游戲（UI篇）
更新時間：2020年05月28日 10:22:38 作者：成兮
這篇文章主要為大家詳細介紹了H5+C3+JS實現(xiàn)雙人對戰(zhàn)五子棋游戲，實現(xiàn)雙人對戰(zhàn)模式，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本篇文章實現(xiàn)的是雙人對戰(zhàn)模式，主要是實現(xiàn)除人機AI算法和判斷輸贏之外的其他功能，下一篇將會發(fā)布AI
框架搭建
<!Doctype html>
<html>
<head>
<!-- 百度爬蟲優(yōu)化 -->
<meta http-equiv="author" content="成兮，緣分五月" />
<meta http-equiv="Keywords" cotent="五子棋，人機大戰(zhàn)，單人游戲，雙人游戲，小游戲" />
<meta Charset="utf-8" />
<title>愛淘寶-五子棋</title>
<style>
#chess {
display: block;
margin: 50px auto;
box-shadow: -2px -2px 2px #efefef , 5px 5px 5px #b9b9b9;
}
#chess:hover{
cursor: pointer;
}
</style>
<script>
window.onload = function() {
} ;
</script>
</head>
<body>
<!-- 棋盤 -->
<canvas id="chess" width="450px" height="450px"></canvas>
</body>
</html>
定義一些需要用到的全局變量
<script>
//獲取棋盤canvas
var chess = document.getElementById("chess");
//獲取2d畫布
var context = chess.getContext('2d');
//指定當前是否黑色下，只在UI中使用
var me = true;
//指定當前位置是否下了其，1代表黑，2代表白，0代表空
var curIndex = [];
for(var i =0; i <15; i++) {
curIndex[i] = [];
for(var j =0; j <15; j++)
curIndex[i][j] = 0;
}
</script>
使用canvas繪制棋盤
<script>
function drawtable() {
//我們設置棋盤總共15根橫線15根總線，左右上下都有15px的邊距，其中每個棋子相距30px,因此繪制棋盤從15px開始
for(var i =0; i <15; i++)
for(var j =0; j <15; j++)
{
//繪制橫線
context.moveTo(15, 15 +j *30);
context.lineTo(435, 15 +j *30);
//繪制豎線
context.moveTo(15 +j *30, 15);
context.lineTo(15 +j *30, 435);
//使用灰色描邊
context.strokeStyle = "#bfbfbf";
context.stroke();
}
};
drawtable();
</script>
棋盤的onclick事件：在該位置上繪制一個棋子，每次點擊黑白相間
<script>
chess.onclick = function(event) {
//獲取要下的棋子的位置
var x = Math.floor(event.offsetX /30);
var y = Math.floor(event.offsetY /30);
//判斷該點是否已被下了
if(curIndex[x][y] != 0)
return;
//開始繪制
context.beginPath();
//繪制指定圓
context.arc(15 +x *30, 15 +y *30, 15, 0, 2 *Math.PI);
//進行填充
if(me) {
context.fillStyle = "#636766";
curIndex[x][y] = 1;
me = false;
}
else {
context.fillStyle = "#b9b9b9";
curIndex[x][y] = 2;
me = true;
}
context.fill();
//結束繪制
context.closePath();
};
</script>
最終效果圖
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
深入理解JavaScript創(chuàng)建對象的多種方式以及優(yōu)缺點
本篇文章主要介紹了JavaScript創(chuàng)建對象的多種方式以及優(yōu)缺點，主要介紹了5種方式，有興趣的可以了解下2017-06-06
javascript css在IE和Firefox中區(qū)別分析
我們討論的主題CSS網(wǎng)頁布局，最令大家頭疼的問題就是瀏覽器兼容性，雖然52CSS.com介紹過很多這方向的知識，但依然讓很多開發(fā)人員暈頭轉向，今天的這篇文章，將列出css和javascript在IE和Firefox中二十三個不同點，希望對大家的學習有所幫助。2009-02-02
js關閉瀏覽器窗口，不彈出提示框。支持ie6+，火狐，谷歌等瀏覽器，下面以一個示例為大家詳細介紹下具體的實現(xiàn)方法，感興趣的朋友可以參考下2013-09-09
這篇文章主要為大家詳細介紹了js自定義input文件上傳樣式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
下面小編就為大家?guī)硪黄鷍s仿jquery一些常用方法(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要介紹了javascript彈出頁面回傳值的方法,實例分析了由a1.html彈出的b1.html回傳值的實現(xiàn)方法,非常具有實用價值,需要的朋友可以參考下2015-01-01
javascript instanceof 內(nèi)部機制探析
在 JavaScript 中，可以用 instanceof 來判斷一個對象是不是某個類或其子類的實例。2010-10-10
json格式的時間顯示為：Date(1377828670436)需要轉換為正常年月日，具體的實現(xiàn)思路及代碼如下，感興趣的朋友可以參考下2013-09-09
模態(tài)窗口的滾動位置獲取辦法還有不知道的嗎？下面的方法或許對大家有所幫助，感興趣的朋友可以了解下，希望對大家有所幫助2013-08-08
微信小程序實現(xiàn)圖片上傳功能實例（前端+PHP后端）
這篇文章主要給大家介紹了關于微信小程序實現(xiàn)圖片上傳功能的相關內(nèi)容，文中詳細介紹了前端+PHP后端的示例代碼，對大家的理解和學習具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-01-01