五子棋
2016-04-11 12:49
316 查看
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<style>
canvas {
display: block;
margin: 50px auto;
box-shadow: -2px -2px 2px #EFEFEF, 5px 5px 5px #B9B9B9;
}
</style>
</head>
<body>
<canvas id="chess" width="450px" height="450px" ></canvas>
<script>
var chessBoard = [];
var me = true;
var over = false;
//赢法数组
var wins = [];
//赢法统计数组
var myWin = [];
var computerWin = [];
for (var i = 0; i < 15; i++) {
chessBoard[i] = [];
for (var j = 0; j < 15; j++) {
chessBoard[i][j] = 0;
}
}
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++;
}
}
console.log(count);
for (var i = 0; i < count; i++) {
myWin[i] = 0;
computerWin[i] = 0;
}
var chess = document.getElementById('chess');
var context = chess.getContext('2d');
context.strokesstyle = "#BFBFBF";
window.onload = function () {
drawChessBoard();
}
var drawChessBoard = function () {
for (var i = 0; i < 15; i++) {
context.moveTo(15 + i * 30, 15);
context.lineTo(15 + i * 30, 435);
context.strokeStyle = "green";
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); //arc() 方法使用一个中心点和半径，为一个画布的当前子路径添加一条弧。
context.closePath();
var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0); //createRadialGradient添加渐变
if (me) {
gradient.addColorStop(0, "#0A0A0A"); //addColorStop方法在渐变中的某一点添加一个颜色变化。
gradient.addColorStop(1, "#636766");
} else {
gradient.addColorStop(0, "#D1D1D1");
gradient.addColorStop(1, "#F9F9F9");
}
context.fillStyle = gradient;
context.fill();
}
chess.onclick = function (e) {
if (over) {
return;
}
if (!me) {
return;
}
var x = e.offsetX;
var y = e.offsetY;
var i = Math.floor(x / 30);
var j = Math.floor(y / 30);
if (chessBoard[i][j] == 0) {
oneStep(i, j, me);
chessBoard[i][j] = 1;
for (var k = 0; k < count; k++) {
if (wins[i][j][k]) {
myWin[k]++;
computerWin[k] = 6;
if (myWin[k] == 5) {
window.alert("你赢了计算机");
over = true;
}
}
}
if (!over) {
me = !me;
computerAI();
}
}
}
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 (chessBoard[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] += 500;
} else if (myWin[k] == 3) {
myScore[i][j] += 3000;
} else if (myWin[k] == 4) {
myScore[i][j] += 10000;
}
if (computerWin[k] == 1) {
computerWin[i][j] += 220;
} else if (computerWin[k] == 2) {
computerWin[i][j] += 550;
} else if (computerWin[k] == 3) {
computerWin[i][j] += 3500;
} else if (computerWin[k] == 4) {
computerWin[i][j] += 25000;
}
}
}
if (myScor
4000
e[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;
}
}
}
}
}
oneStep(u, v, false);
chessBoard[u][v] = 2;
for (var k = 0; k < count; k++) {
if (wins[u][v][k]) {
computerWin[k]++;
myWin[k] = 6;
if (computerWin[k] == 5) {
window.alert("你输了 ");
over = true;
}
}
}
if (!over) {
me = !me;
}
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- SVN使用教程总结
- YTUOJ之删除相同元素(线性表)
- Android自定义实现微信标题栏
- IE6-8中Date不支持toISOString方法
- 从ImageNet数据集上的卷积神经网络可以学到什么What I learned from competing against a ConvNet on ImageNet
- VIM mark功能
- Objective-C的对象模型和runtime机制
- 一个基于RSA算法的Java数字签名例子
- Android中高亮变色显示文本中的关键字
- 编程小练习
- Android去除烦人的默认闪退Dialog
- IE6-IE9中tbody的innerHTML不能赋值bug
- android app 跳转到微信
- 在iOS上使用AirPrint实现无线打印功能
- Qt不规则界面及组件的实现
- Android两种监听器设置
- ROC曲线-阈值评价标准
- 5.4 桥接模式(4.2)
- 编程小练习
- 盘点全世界最早注册的前十个.com域名