小游戏——js+h5[canvas]+cs3制作【五子棋】小游戏
五子棋小游戏学习——
有一个问题是，棋盘线的颜色，在canvas中，明明设置了灰色，但在我的预览中还是黑色的，很重的颜色。
以下是复刻的源码：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>五子棋游戏</title>
<meta name="Description" content="git上看到的一个很值得学习练习的简易h5+js制作的小游戏，很久没有摸键盘码代码了，刚好拿来练练手。" />
<style type="text/css">
canvas {
display: block;
margin: 50px auto;
-webkit-box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9;
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: #ee82ee;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
} div.unable span {
background: #d6d6d4;
color: #adacaa;
} #result-wrap {
text-align: center;
}
</style>
</head> <body>
<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>
<a href="https://github.com/wj704/wj704.github.io/blob/master/five_game.html">原文地址</a>
</body>
<script type="text/javascript">
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;
}
} //赢法的统计数组
var myWin = [];
var computerWin = []; //赢法数组
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++;
}
} //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.storkeStyle = '#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⊙)，悔棋中";
//撤销悔棋功能可用
returnbtn.className = returnbtn.className.replace(new RgeExp("(\\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]; //这个位置对方可能赢
}
} //计算机相应的悔棋
chressBord[_compi][_compj] = 0; //计算机，已占位置 还原
minusStep(_compi, _compj); //销毁棋子
for(var k = 0; k < count; k++) {
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;
}
} //计算机撤销相应的悔棋
chressBord[_compi][_compj] = 2; //计算机，已占位置
oneStep(_compi, _compj, false);
for(var k = 0; k < count; k++) { //将可能赢得情况减一
if(wins[_compi][_compj][k]) {
computerWin[k]++;
_myWin[k] = myWin[k];
myWin[k] = 6; //这个位置对方不可能赢
}
if(computerWin[k] == 5) {
resultTxt.innerHTML = "┗|｀O′|┛ 嗷~~，计算机赢了，继续加油！";
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; //计算机占据位置
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 = "┗|｀O′|┛ 嗷~~，计算机赢了，继续加油！";
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> </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；
注：
本代码纯属学习与练习之用
源代码及博文见掘金地址：https://juejin.im/post/594669d461ff4b006cf132ff
git地址：https://github.com/wj704/wj704.github.io/blob/master/five_game.html
小游戏——js+h5[canvas]+cs3制作【五子棋】小游戏的更多相关文章
- 第八讲：HTML5中canvas实现小球击打小方块游戏
源码:http://download.csdn.net/detail/liumingm900913/7469969 游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样能够控制画布居中的位置 ...
- nodejs五子棋online游戏开发视频教程，客户端cocos creator js
开发的游戏是五子棋online,网络版的,服务端部分和客户端部分都在这个教程里面,可以看一下目录! 服务器nodejs游戏开发教程 使用Nodejs开发网络服务器 游戏服务端 ,cocos creat ...
- Java五子棋小游戏（控制台纯Ai算法）
Java五子棋小游戏(控制台纯Ai算法) 继续之前的那个五子棋程序 修复了一些已知的小Bug 这里是之前的五子棋程序 原文链接 修复了一些算法缺陷 本次增加了AI算法 可以人机对战 也可以Ai对Ai看 ...
- three.js 制作逻辑转体游戏（上）
今天郭先生又出来制作游戏了,最近有小伙伴要做一个逻辑转体小游戏,我怎么能不先来试试呢.玩法可以看上面的连接,下面附几张图.线案例请点击博客原文. 游戏规则不懂得可以看自行百度哈,其实玩起来还挺有难度的 ...
- 💒 es6 + canvas 开源 盖楼小游戏 完整代码注释 从零教你做游戏（一）
盖楼游戏 一个基于 Canvas 的盖楼游戏 Demo 预览 在线预览地址 (Demo Link) 手机设备可以扫描下方二维码 github https://github.com/bmqb/tower ...
- JS高级---案例：贪吃蛇小游戏
案例:贪吃蛇小游戏 可以玩的小游戏,略复杂,过了2遍,先pass吧 先创建构造函数,再给原型添加方法.分别创建食物,小蛇和游戏对象. 食物,小蛇的横纵坐标,设置最大最小值,运动起来的函数,按上下左右键 ...
- H5 canvas绘制出现模糊的问题
在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...
- html5 canvas简易版捕鱼达人游戏源码
插件描述:html5利用canvas写的一个js版本的捕鱼,有积分统计,鱼可以全方位移动,炮会跟着鼠标移动,第一次打开需要鼠标移出背景图,再移入的时候就可以控制炮的转动,因为是用的mouseover触 ...
- 用Phaser来制作一个html5游戏——flappy bird （一）
Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希 ...
随机推荐
- Linux GPIO控制方法
Linux GPIO控制方法 kernel version 4.4.12 在文件系统层: 1. 进入 /sys/class/gpio/ 目录 2. 假设你想控制的GPIO0_29,步骤如下: 1. e ...
- win7怎么把软件加入开机启动项
点击开机菜单进入. 2 然后点击菜单栏中的所有程序. 3 在所有程序中找到‘启动’,这个启动就是开机启动项来的. 4 右键进行打开启动项. 5 把快捷方式复制到开机启动项中.如果找不到快捷方式可以右键 ...
- [JavaScript]JS调用PHP和PHP调用JS的方法举例
http://blog.csdn.net/pleasecallmewhy/article/details/8592571 body { background: #C7EDCC !important; ...
- WPF教程二：布局之StackPanel面板
应用程序界面设计中,合理的元素布局至关重要,它可以方便用户使用,并将信息清晰合理地展现给用户.WPF提供了一套功能强大的工具-面板(Panel),来控制用户界面的布局.你可以使用这些面板控件来排布元素 ...
- php 抽象 继承 多态
1.继承和重载 !!!php中使用extends单一继承的方法 被继承的类 父类(基类) 继承者 子类(派生类) 如果说我们需要将父类方法重载(方法覆盖),在派生类里使用与基类方法重名的方法名称 ...
- osql.exe 批处理sql 文件
.bat文件内容 "C:\Program Files\Microsoft SQL Server\110\Tools\Binn\osql.exe" -U sa -P sa -S 19 ...
- ti8127下godb 开发
http://download.cnet.com/GoDB/3000-2212_4-10306159.html源码rdk https://github.com/vasa-c/go-db github ...
- 剑指offer_面试题5_从尾到头打印链表（栈和递归实现）
题目:输入一个链表的头结点,从尾到头反过来打印出每一个节点的值 考察 单链表操作.栈.递归等概念. 理解:要实现单链表的输出,那么就须要遍历.遍历的顺序是从头到尾.而节点输出的顺序是从尾到头.因此,先 ...
- link with editor
在左侧explore上,有个双向的箭头,点一下,就会把路径和当前文件自动对应
- php通过字符串生存hashCode
/** * * 生存hashCode * */function hashCode($str){ if(empty($str)) return ''; $str = strtoupper($str); ...