JavaScript五子棋
2016-05-27 20:27
441 查看
这个代码是按照网上一个JS教程写的。
这个代码有点bug吧，那就是一直封你的棋而不会去赢。
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>五子棋</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<canvas id="chess" width="450px" height="450px"></canvas>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
JS：
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.strokeStyle = "#BFBFBF";
//加载完代码立即运行函数的内容
onload = function()
{
if(over)return;
if(!me)return;
drawChessBoard();
}
//画棋盘
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();
}
}
//下棋（i，j）地方，me表示是计算机还是玩家
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,50,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();
}
chess.onclick = function(e){
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;
//枚举count种赢法
for(var k=0;k<count;++k){
if(wins[i][j][k]){
//第k种赢法玩家占有了
myWin[k]++;
//计算机不可能从第k种赢法赢
computerWin[k] = 6;
if(myWin[k] == 5){
window.alert("You Win!");
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;
}
}
//枚举整个棋盘的位置，每个位置的count种赢法
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] += 400;
}else if(myWin[k]==3){
myScore[i][j] += 2000;
}else if(myWin[k]==4){
myScore[i][j] += 10000;
}
}
if(computerWin[k]){
if(myWin[k] == 1){
computerScore[i][j] += 220;
}else if(computerWin[k]==2){
computerScore[i][j] += 420;
}else if(computerWin[k]==3){
computerScore[i][j] += 2200;
}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;
}
}
}
}
}
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("computer Win!");
over = true;
}
}
}
if(!over){
me = !me;
}
}
CSS：
canvas {
display: block;
margin: 50px auto;
box-shadow: -2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9;
}
这个代码有点bug吧，那就是一直封你的棋而不会去赢。
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>五子棋</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<canvas id="chess" width="450px" height="450px"></canvas>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
JS：
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.strokeStyle = "#BFBFBF";
//加载完代码立即运行函数的内容
onload = function()
{
if(over)return;
if(!me)return;
drawChessBoard();
}
//画棋盘
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();
}
}
//下棋（i，j）地方，me表示是计算机还是玩家
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,50,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();
}
chess.onclick = function(e){
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;
//枚举count种赢法
for(var k=0;k<count;++k){
if(wins[i][j][k]){
//第k种赢法玩家占有了
myWin[k]++;
//计算机不可能从第k种赢法赢
computerWin[k] = 6;
if(myWin[k] == 5){
window.alert("You Win!");
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;
}
}
//枚举整个棋盘的位置，每个位置的count种赢法
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] += 400;
}else if(myWin[k]==3){
myScore[i][j] += 2000;
}else if(myWin[k]==4){
myScore[i][j] += 10000;
}
}
if(computerWin[k]){
if(myWin[k] == 1){
computerScore[i][j] += 220;
}else if(computerWin[k]==2){
computerScore[i][j] += 420;
}else if(computerWin[k]==3){
computerScore[i][j] += 2200;
}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;
}
}
}
}
}
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("computer Win!");
over = true;
}
}
}
if(!over){
me = !me;
}
}
CSS：
canvas {
display: block;
margin: 50px auto;
box-shadow: -2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制：7 行代码学会 co 模块
- ES6 走马观花（ECMAScript2015 新特性）
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02：一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享