<!DOCTYPE html>
<html lang="en">
<head>
<title>五子棋</title>
<meta charset="utf-8">
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#chess {
position: relative;
width: 762px;
height: 762px;
margin: 50px auto 0px auto;
background-image: url("imgs/timg.jpg");
background-size: 100% 100%;
}
.grid {
width: 50px;
height: 50px;
position: absolute;
padding: 5px;
box-sizing: border-box;
border-radius: 25px;
background-origin: content-box;
background-size: 100% 100%;
background-repeat: no-repeat;
line-height: 50px;
text-align: center;
color: aqua;
}
</style>
</head>
<body>
<div id="chess"></div>
</body>
<script type="text/javascript">
var chess;//棋盘对象
var grid;//二维数组，记录棋盘点是否有棋子，什么棋子
var chessWidth = 15;//棋盘格数
var count = 0;//棋子数，根据棋子数判定当前该是白棋还是黑棋
var block = false;//点击时间锁
var AI = false;//AI开关
function createGrid(x, y) {//创建棋盘节点div
var temp = document.createElement("div");
temp.classList.add("grid");
temp.style.left = (7 + x * 50 )+ "px";
temp.style.top = (7 + y * 50) + "px";
temp.x = x;
temp.y = y;
temp.value = 0;//0为空位，1为黑子，2为白子
return temp;
}
function checkLine(x, y) {//检查是否横向，纵向，斜上，斜下构成五子
var result1 = 3, result2 = 3, result3 = 3, result4 = 3;
for (var i = 0 ; i < 5 ; i ++) {
//三目元算符
result1 &= y + i > 14 ? 0 : grid[x][y + i].value;//判断横向五子
result2 &= x + i > 14 ? 0 : grid[x + i][y].value;//判断纵向五子
result3 &= x + i > 14 || y - i < 0 ? 0 : grid[x + i][y - i].value;//判断斜上五子
result4 &= x + i > 14 || y + i > 14 ? 0 : grid[x + i][y + i].value;//判断斜下五子
}
return result1 | result2 | result3 | result4;
}
function checkFinish() {//检查是否有获胜的一方
for (var i = 0 ; i < grid.length ; i ++) {
for (var j = 0 ; j < grid[i].length ; j ++) {
if (grid[i][j].value == 0) {
continue;
}
var result = checkLine(i, j);
if (result > 0) {
return result;
}
}
}
return 0;
}
function init() {//初始化方法
grid = new Array(chessWidth);
for (var i = 0 ; i < grid.length ; i ++) {//初始化二维棋盘
grid[i] = new Array(chessWidth);
for (var j = 0 ; j < grid[i].length ; j ++) {
grid[i][j] = createGrid(j, i);
grid[i][j].onclick = function() {//棋盘节点点击事件
if (this.value > 0 || block) {//被锁住时或者已有棋子时直接return
return;
}
block = true;//开启锁
this.style.backgroundImage = "url('imgs/" + (count % 2 + 1) + ".png')";//将节点背景更换，根据count计算当前时白子还是黑子。
this.value = count % 2 + 1;//设置节点的value
count += 1;//棋盘棋子数+1
var result = checkFinish();//检查是否结束
if (result == 0) {//没结束
if (AI && count % 2 == 1) {//判断是否有AI
block = false;//关闭锁
aiAction();//AI落子
}
block = false;//关闭锁
} else {//结束了
setTimeout(function () {
alert(result == 1 ? "黑棋胜" : "白棋胜");//弹出获胜方
}, 200);
}
}
chess.appendChild(grid[i][j]);
}
}
}
window.onload = function () {
chess = document.getElementById("chess");
init();
}
</script>
<!-- AI 是电脑计算棋子的下落 -->
<script type="text/javascript">
AI = true;
var debug = false;
function analysisScore(arr) {
var greater3 = 0;
var equal3 = 0;
var greater2 = 0;
var equal2 = 0;
var greater1 = 0;
var equal1 = 0;
for (var i = 0 ; i < arr.length ; i ++) {
if (arr[i] >= 4) {
return 100;
}else if (arr[i] > 3) {
greater3 += 1;
} else if (arr[i] == 3) {
equal3 += 1;
} else if (arr[i] > 2) {
greater2 += 1;
} else if (arr[i] == 2) {
equal2 += 1;
} else if (arr[i] > 1) {
greater1 += 1;
} else if (arr[i] == 1) {
equal1 += 1;
}
}
if (greater3 + equal3 > 1) {//双四
return 95;
}
if (greater3 > 0) {//活四
return 90;
}
if (equal3 > 0 && greater2 > 0) {//四三，下一手上活四
return 85;
}
if (greater2 > 1) {//双三
return 80;
}
if (equal3 > 0) {//冲四
return 60;
}
if (greater2 > 0 && equal2 > 0) {//活三 + 眠三
return 50;
}
if (greater2 > 0 && greater1 > 0) {//活三，可继续连招
return 30;
}
if (greater2 > 0) {//活三
return 25;
}
if (greater1 > 1) {//活二
return 20;
}
if (greater1 > 0) {//活二
return 15;
}
if (equal2 > 1) {//多眠三
return 10;
}
if (equal2 > 0) {//眠三
return 5;
}
if (equal1 > 1) {//绝地
return -1;
}
if (equal1 > 0) {//勉强连着
return 1;
}
return 0;
}
function getRealScore(leftRow, leftCol, rightRow, rightCol, val) {
if (leftRow < 0 || leftRow > 14 || leftCol < 0 || leftCol > 14 || rightRow < 0 || rightRow > 14 || rightCol < 0 || rightCol > 14) {
return false;
}
if ((grid[leftRow][leftCol].value == 0 || grid[leftRow][leftCol].value == val) && (grid[rightRow][rightCol].value == 0 || grid[rightRow][rightCol].value == val)) {
return true;
} else {
return false;
}
}
function getScore(arr, val) {
var result = 0;
for (var i = 0 ; i < arr.length ; i ++) {
if (arr[i].value == 0) {
continue;
} else if (arr[i].value == val) {
result += 1;
} else {
return 0;
}
}
return result;
}
function analysisObliUpLine(row ,col, val) {//斜上方向分析
var maxScore = 0;
for (var i = 0 ; i < 5 ; i ++) {
if (row + 4 - i > 14 || row + 4 - i < 4 || col - 4 + i < 0 || col - 4 + i > 10) {
continue;
}
var arr = [];
for (var j = 0 ; j < 5 ; j ++) {
arr.push(grid[row + 4 - i - j][col - 4 + i + j]);
}
var score = getScore(arr, val);
var realPower = getRealScore(row + 5 - i, col - 5 + i, row - i + 1, col + i + 1, val);
var total = score * (realPower ?
五子棋游戏.rar （4个子文件） 
五子棋游戏 
五子棋game.html 15KB imgs 
1.png 17KB
timg.jpg 37KB 2.png 18KB资源评论
金色龙王
- 粉丝: 21
- 资源: 6
最新资源
- python入门-17.最大子段和-团结！.py
- python入门-test-18.车厢重组.py
- 第56课 枚举2-20241227131043.pdf
- 基于 Flask 和 React 的前后端分离论坛全部资料+详细文档.zip
- 基于 Flask 和 WebSocket 实现的聊天室程序全部资料+详细文档.zip
- 基于 Scrapy 的新闻智能分类微信小程序，目的是打造出一个可以对新闻进行智能分类的微信小程序。技术栈：Python + Scrapy + MongoDB +
- 基于Flask 与Material Design的博客全部资料+详细文档.zip
- 基于bert4keras的命名实体识别flask展示全部资料+详细文档.zip
- 基于bert4keras关系抽取的flask展示全部资料+详细文档.zip
- 基于flask+MySQL的日程管理系统全部资料+详细文档.zip
- 基于Flask、MySQL和Bootstrap开发的图片分享社交网站。全部资料+详细文档.zip
- 基于Flask+Python3.6的电影网站项目全部资料+详细文档.zip
- 基于flask的web端三维模型重建系统-毕业设计全部资料+详细文档.zip
- 基于Flask的自然语言处理Web应用：人物观点提取，文本摘要，点评情感分类全部资料+详细文档.zip
- 基于Flask构建的无人机物流管理系统全部资料+详细文档.zip
- 基于flask框架的轻量级新闻资讯网站全部资料+详细文档.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
