JS+Canvas实现五子棋游戏实现五子棋游戏
主要为大家详细介绍了原生JS+Canvas实现五子棋游戏,文中示例代码介绍的非常详细,具有一定的参考价
值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS+Canvas实现五子棋游戏的具体代码,供大家参考,具体内容如下
布局+样式部分代码 :
<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;
}
}
//赢法的统计数组