未完待续。。。。。。。
<html>
<head>
<style type="text/css">
canvas {
display: block;
margin: 100px auto;
background-color: darkslategray;
box-shadow: -2px -2px 2px #EFEFEF, 5px 5px 5px #B9B9B9;
}
</style>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var context = canvas.getContext("2d");
context.strokeStyle = "red"; //画笔的颜色
drawLine()
// piece()
oneStep(0, 0, true);
oneStep(1, 1, false);
}
//画网格
function drawLine() {
for (var i = 0; i < 15; i++) {
//context.beginPath();
context.moveTo(15, 15 + i * 30);
context.lineTo(435, 15 + i * 30);
context.stroke();
context.moveTo(15 + i * 30, 15);
context.lineTo(15 + i * 30, 435);
context.stroke();
}
}
//画棋子
// function piece() {
// context.beginPath();
// context.arc(200, 200, 100, 0, 2 * Math.PI);
// context.closePath();
// context.fill();
// var gradient = context.createRadialGradient(200, 200, 50, 200, 200, 20);
// gradient.addColorStop(0, "#0a0a0a");
// gradient.addColorStop(1, "#636766");
// context.fillStyle = gradient;
// context.fill();
// }
function oneStep(i, j, me) { //i,j分别是在棋盘中的定位，me代表白棋还是黑棋
context.beginPath();
context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI); //圆心会变的，半径改为13
context.closePath();
var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 15, 15 + i * 30, 15 + j * 30,
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();
}
//定义一个空的15*15的二维数组（函数自执行）
var chessBoard = [];
(function arr() {
for (var i = 0; i < 15; i++) {
chessBoard[i] = [];
for (var j = 0; j < 15; j++) {
chessBoard[i][j] = 0;
}
}
})()
//同一位置不能重复点击，且黑白交替点击
var me = true;
canvas.onclick = function(e) {
if (over) { //判断游戏是否结束
return;
}
// console.log(chessBoard)
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);
if (me) {
chessBoard[i][j] = 2;
} else {
chessBoard[i][j] = 1;
}
me = !me;
//落下子后需要进行统计
for (var k = 0; k < count; k++) {
if (wins[i][j][k]) { //某种赢的某子true
myWin[k]++; //离胜利又进一步
computerWin[k] = 6; //该种赢法计算机没有机会了
if (myWin[k] == 5) { //如果达到5就赢了
window.alert("厉害，你赢了！！");
over = true;
}
}
}
}
}
//赢法数组容器
var wins = [];
(function() {
for (var i = 0; i < 15; i++) {
wins[i] = [];
for (var j = 0; j < 15; j++) {
wins[i][j] = [];
}
}
})()
var count = 0;
(function(){
win()
})()
function win() {
//赢法统计
//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); //572
}
//游戏结束
var over = false;
//统计记法数组
var myWin = [];
var computerWin = [];
//统计数组的实例化
(function() {
for (var i = 0; i < count; i++) {
myWin[i] = 0;
computerWin[i] = 0;
}
})()
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="450px" height="450px"></canvas>
</body>
</html>
网友评论