前言：
现时姐妹们对“css3动画画圆”大致比较关注，小伙伴们都需要了解一些“css3动画画圆”的相关内容。那么小编也在网上汇集了一些对于“css3动画画圆””的相关内容，希望兄弟们能喜欢，大家一起来学习一下吧！五子棋小游戏学习——
有一个问题是，棋盘线的颜色，在canvas中，明明设置了灰色，但在我的预览中还是黑色的，很重的颜色。
以下是复刻的源码：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>五子棋游戏</title> 7 <meta name="Description" content="git上看到的一个很值得学习练习的简易h5+js制作的小游戏，很久没有摸键盘码代码了，刚好拿来练练手。" /> 8 <style type="text/css"> 9 canvas { 10 display: block; 11 margin: 50px auto; 12 -webkit-box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9; 13 box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9; 14 cursor: pointer; 15 } 16 17 .btn_wrap { 18 display: flex; 19 flex-direction: row; 20 justify-content: center; 21 } 22 23 .btn_wrap div { 24 margin: 0 10px; 25 } 26 27 div>span { 28 display: inline-block; 29 padding: 10px 20px; 30 color: #FFF; 31 background: #ee82ee; 32 -webkit-border-radius: 5px; 33 -moz-border-radius: 5px; 34 border-radius: 5px; 35 cursor: pointer; 36 } 37 38 div.unable span { 39 background: #d6d6d4; 40 color: #adacaa; 41 } 42 43 #result-wrap { 44 text-align: center; 45 } 46 </style> 47 </head> 48 49 <body> 50 <h3 id="result-wrap">--五子棋游戏--</h3> 51 <canvas id="chess" width="450px" height="450px"></canvas> 52 <div class="btn_wrap"> 53 <div id="restart" class="restart"> 54 <span>重新开始</span> 55 </div> 56 <div id="goback" class="goback unable"> 57 <span>悔棋</span> 58 </div> 59 <div id="return" class="return unable"> 60 <span> 61 撤销悔棋 62 </span> 63 </div> 64 </div> 65 <a href="">原文地址</a> 66 </body> 67 <script type="text/javascript"> 68 var over = false; 69 var me = true; //我 70 var _nowi = 0, 71 _nowj = 0; 72 var _compi = 0, 73 _compj = 0; 74 var _myWin = [], 75 _compWin = []; 76 var backAble = false, 77 returnAble = false; 78 var resultTxt = document.getElementById('result-wrap'); 79 80 var chressBord = []; 81 for(var i = 0; i < 15; i++) { 82 chressBord[i] = []; 83 for(var j = 0; j < 15; j++) { 84 chressBord[i][j] = 0; 85 } 86 } 87 88 //赢法的统计数组 89 var myWin = []; 90 var computerWin = []; 91 92 //赢法数组 93 var wins = []; 94 for(var i = 0; i < 15; i++) { 95 wins[i] = []; 96 for(var j = 0; j < 15; j++) { 97 wins[i][j] = []; 98 } 99 }100 101 var count = 0; //赢法总数102 //横线赢法103 for(var i = 0; i < 15; i++) {104 for(var j = 0; j < 11; j++) {105 for(var k = 0; k < 5; k++) {106 wins[i][j + k][count] = true;107 }108 count++;109 }110 }111 112 //竖线赢法113 for(var i = 0; i < 15; i++) {114 for(var j = 0; j < 11; j++) {115 for(var k = 0; k < 5; k++) {116 wins[j + k][i][count] = true;117 }118 count++;119 }120 }121 122 //正斜线赢法123 for(var i = 0; i < 11; i++) {124 for(var j = 0; j < 11; j++) {125 for(var k = 0; k < 5; k++) {126 wins[i + k][j + k][count] = true;127 }128 count++;129 }130 }131 132 //反斜线赢法133 for(var i = 0; i < 11; i++) {134 for(var j = 14; j > 3; j--) {135 for(var k = 0; k < 5; k++) {136 wins[i + k][j - k][count] = true;137 }138 count++;139 }140 }141 142 //debugger143 for(var i = 0; i < count; i++) {144 myWin[i] = 0;145 _myWin[i] = 0;146 computerWin[i] = 0;147 _compWin[i] = 0;148 }149 var chess = document.getElementById('chess');150 var context = chess.getContext('2d')151 context.storkeStyle = '#bfbfbf'; //边框颜色152 var backbtn = document.getElementById('goback');153 var returnbtn = document.getElementById('return');154 window.onload = function() {155 drawChessBoard();156 }157 158 document.getElementById('restart').onclick = function() {159 window.location.reload();160 }161 //我，下棋162 chess.onclick = function(e) {163 if(over) {164 return;165 }166 if(!me) {167 return;168 }169 //悔棋功能可用170 backbtn.className = backbtn.className.replace(new RegExp("(\\s|^)unable(\\s|$)"), " ");171 var x = e.offsetX;172 var y = e.offsetY;173 var i = Math.floor(x / 30);174 var j = Math.floor(y / 30);175 _nowi = i;176 _nowj = j;177 if(chressBord[i][j] == 0) {178 oneStep(i, j, me);179 chressBord[i][j] = 1; //我，已占位置180 for(var k = 0; k < count; k++) { //将可能赢的情况都加1181 if(wins[i][j][k]) {182 //debugger183 myWin[k]++;184 _compWin[k] = computerWin[k];185 computerWin[k] = 6; //这个位置对方不可能赢了186 if(myWin[k] == 5) {187 //window.alert('你赢了');188 resultTxt.innerHTML = '恭喜，你赢了！';189 over = true;190 }191 }192 }193 if(!over) {194 me = !me;195 computerAI();196 }197 }198 }199 200 //悔棋201 backbtn.onclick = function(e) {202 if(!backAble) {203 return;204 }205 over = false;206 me = true;207 //resultTxt.innerHTMl = "(⊙o⊙)，悔棋中";208 //撤销悔棋功能可用209 returnbtn.className = returnbtn.className.replace(new RgeExp("(\\s|^)unable(\\s|$)"), " ");210 //我，悔棋211 chressBord[_nowi][_nowj] = 0; //我，已占位置 还原212 minusStep(_nowi, _nowj); //销毁棋子213 for(var k = 0; k < count; k++) { //将可能赢得情况都减1214 if(wins[_nowi][_nowj][k]) {215 myWin[k]--;216 computerWin[k] = _compWin[k]; //这个位置对方可能赢217 }218 }219 220 //计算机相应的悔棋221 chressBord[_compi][_compj] = 0; //计算机，已占位置 还原222 minusStep(_compi, _compj); //销毁棋子223 for(var k = 0; k < count; k++) {224 if(wins[_compi][_compj][k]) {225 computerWin[k]--;226 myWin[k] = _myWin[i]; //这个位置对方可能赢227 }228 }229 resultTxt.innerHTML = "--益智五子棋--";230 returnAble = true;231 backAble = false;232 }233 234 //撤销悔棋235 returnbtn.onclick = function(e) {236 if(!returnAble) {237 return;238 }239 //我，撤销悔棋240 chressBord[_nowi][_nowj] = 1; //我，已占位置241 oneStep(_nowi, _nowj, me);242 for(var k = 0; k < count; k++) {243 244 if(wins[_nowi][_nowj][k]) {245 myWin[k]++;246 _compWin[k] = computerWin[k];247 computerWin[k] = 6; //这个位置对方不可能赢248 }249 if(myWin[k] == 5) {250 resultTxt.innerHTML = '恭喜，你赢了！';251 over = true;252 }253 }254 255 //计算机撤销相应的悔棋256 chressBord[_compi][_compj] = 2; //计算机，已占位置257 oneStep(_compi, _compj, false);258 for(var k = 0; k < count; k++) { //将可能赢得情况减一259 if(wins[_compi][_compj][k]) {260 computerWin[k]++;261 _myWin[k] = myWin[k];262 myWin[k] = 6; //这个位置对方不可能赢263 }264 if(computerWin[k] == 5) {265 resultTxt.innerHTML = "┗|｀O′|┛ 嗷~~，计算机赢了，继续加油！";266 over = true;267 }268 }269 returnbtn.className += " " + "unable";270 returnAble = false;271 backAble = true;272 }273 274 //计算机下棋275 var computerAI = function() {276 var myScore = [];277 var computerScore = [];278 var max = 0;279 var u = 0,280 v = 0;281 for(var i = 0; i < 15; i++) {282 myScore[i] = [];283 computerScore[i] = [];284 for(var j = 0; j < 15; j++) {285 myScore[i][j] = 0;286 computerScore[i][j] = 0;287 }288 }289 for(var i = 0; i < 15; i++) {290 for(var j = 0; j < 15; j++) {291 if(chressBord[i][j] == 0) {292 for(var k = 0; k < count; k++) {293 if(wins[i][j][k]) {294 295 if(myWin[k] == 1) {296 myScore[i][j] += 200;297 } else if(myWin[k] == 2) {298 myScore[i][j] += 400;299 } else if(myWin[k] == 3) {300 myScore[i][j] += 2000;301 } else if(myWin[k] == 4) {302 myScore[i][j] += 10000;303 }304 305 if(computerWin[k] == 1) {306 computerScore[i][j] += 220;307 } else if(computerWin[k] == 2) {308 computerScore[i][j] += 420;309 } else if(computerWin[k] == 3) {310 computerScore[i][j] += 2100;311 } else if(computerWin[k] == 4) {312 computerScore[i][j] += 20000;313 }314 }315 }316 if(myScore[i][j] > max) {317 max = myScore[i][j];318 u = i;319 v = j;320 } else if(myScore[i][j] == max) {321 if(computerScore[i][j] > computerScore[u][v]) {322 u = i;323 v = j;324 }325 }326 if(computerScore[i][j] > max) {327 max = computerScore[i][j];328 u = i;329 v = j; 330 } else if(computerScore[i][j] == max) {331 if(myScore[i][j] > myScore[u][v]) {332 u = i;333 v = j;334 }335 }336 337 }338 }339 }340 341 _compi = u;342 _compj = v;343 oneStep(u, v, false);344 chressBord[u][v] = 2; //计算机占据位置345 for(var k = 0; k < count; k++) {346 if(wins[u][v][k]) {347 computerWin[k]++;348 _myWin[k] = myWin[k];349 myWin[k] = 6; //这个位置对方不可能赢了；350 if(computerWin[k] == 5) {351 resultTxt.innerHTML = "┗|｀O′|┛ 嗷~~，计算机赢了，继续加油！";352 over = true;353 }354 }355 }356 if(!over) {357 me = !me;358 }359 backAble = true;360 returnAble = false;361 var hasClass = new RegExp('unable').test("" + returnbtn.className + "");362 if(!hasClass) {363 returnbtn.className += " " + "unable";364 }365 }366 367 //绘画键盘；368 var drawChessBoard = function() {369 for(var i = 0; i < 15; i++) {370 context.moveTo(15 + i * 30, 15);371 context.lineTo(15 + i * 30, 435);372 context.stroke();373 context.moveTo(15, 15 + i * 30);374 context.lineTo(435, 15 + i * 30);375 context.stroke();376 }377 }378 379 //画棋子380 var oneStep = function(i, j, me) {381 context.beginPath();382 context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI); //画圆383 context.closePath();384 //渐变385 var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);386 387 if(me) {388 gradient.addColorStop(0, '#0a0a0a');389 gradient.addColorStop(1, '#636766');390 } else {391 gradient.addColorStop(0, '#d1d1d1');392 gradient.addColorStop(1, '#f9f9f9');393 }394 context.fillStyle = gradient;395 context.fill();396 }397 398 //销毁棋子399 var minusStep = function(i, j) {400 //擦除该圆401 context.clearRect((i) * 30, (j) * 30, 30, 30);402 403 //重画该圆周围的格子404 context.beginPath();405 context.moveTo(15 + i * 30, j * 30);406 context.lineTo(15 + i * 30, j * 30 + 30);407 context.moveTo(i * 30, j * 30 + 15);408 context.lineTo((i + 1) * 30, j * 30 + 15);409 context.stroke();410 }411 </script>412 413 </html>以下是对源码的分析与学习笔记：
五子棋小游戏代码详解：
结构上：
一个h3用来放标题，给了个id同时为了后期就可以更改提示信息放进去。
放一块画布
放三个按钮，分别是重来，悔棋，放弃悔棋。
样式中：
一：box-shadow
Box-shadow值得注意：一个box同时用了两个box-shadow;如下：
box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9;
做一个案例彻底分析下：
box-shadow: -2px -2px 2px #f00, 5px 5px 5px #164A84;
为了看着明白，特地弄了对比明显的颜色。
色值说明：#f00【红色】, #164A84【蓝色】
X，y值得说明：-2px -2px, 5px 5px；【这么写,阴影是在是坐上和右下】
角度和x,y取值的关系表：
x,y的取值
阴影所在的角度
有阴影的两条边是
总结：
+x,+y
右下角
右边和下边
从左上角开始想象：
+x,-y
右上角
右边和上边
X负责左右，正右负左；
-x,+y
左下角
左边和下边
Y负责上下，正下负上；
-x,-y
左上角
左边和上边
二、display：flex；
Flex浏览器支持情况很差，仅火狐和谷歌通用。Ie10还不支持，手机上的浏览器全军覆没。
兼容写法：
display：-webkit-flex；
display： -moz-flex；
一个flexbox布局是有一个伸缩容器（flex containers）和这个容器里的伸缩内容（flex items）组成。
伸缩容器（flex containers）是一个HTML标签元素，并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目（flex items）。
三、Flex-direction：row（默认值）；
四、Justify-content： center；
注：
本代码纯属学习与练习之用
源代码及博文见掘金地址：
git地址：
关注何天，只发干货
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
