编写一个五子棋html小游戏
时间: 2024-01-27 07:02:28 浏览: 24
以下是一个简单的五子棋 HTML 小游戏，你可以参考一下。
```html
<!DOCTYPE html>
<html>
<head>
<title>五子棋小游戏</title>
<style type="text/css">
body {
background-color: #eee;
}
#board {
margin: auto;
margin-top: 50px;
border: 1px solid #333;
width: 500px;
height: 500px;
position: relative;
}
.piece {
position: absolute;
border-radius: 50%;
box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.black {
background-color: #000;
}
.white {
background-color: #fff;
}
.win {
background-color: #f00;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="board"></div>
<script type="text/javascript">
var board = document.getElementById('board');
var context = board.getContext('2d');
var me = true; // 是否我方下棋
var over = false; // 是否结束游戏
var chessBoard = []; // 棋盘
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++;
}
}
// 初始化赢法统计数组
for (var i = 0; i < count; i++) {
myWin[i] = 0;
computerWin[i] = 0;
}
// 绘制棋盘
function drawBoard() {
context.strokeStyle = '#333';
for (var i = 0; i < 15; i++) {
context.moveTo(15 + i * 30, 15);
context.lineTo(15 + i * 30, 465);
context.stroke();
context.moveTo(15, 15 + i * 30);
context.lineTo(465, 15 + i * 30);
context.stroke();
}
}
// 绘制棋子
function drawPiece(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();
}
// 下棋
board.onclick = function(e) {
if (over || !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) {
drawPiece(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) {
alert('你赢了！');
over = true;
}
}
}
if (!over) {
me = !me;
computerAI();
}
}
}
// 电脑下棋
function computerAI() {
var myScore = [];
var computerScore = [];
var max = 0;
var u = 0;
var 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] += 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;
}
}
}
}
}
drawPiece(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) {
alert('电脑赢了！');
over = true;
}
}
}
if (!over) {
me = !me;
}
}
drawBoard();
</script>
</body>
</html>
```
在浏览器中打开该 HTML 文件，即可开始游戏。
相关推荐
最新推荐
C++面向对象实现五子棋小游戏
本文介绍了如何运用面向对象思想进行五子棋游戏的设计与开发，与面向过程程序设计比较,面向对象程序设计更易于实现对现实世界的描述,提高软件的扩展性和可维护性。附上最终的程序源码，推荐给大家，有需要的小伙伴...
python pygame实现五子棋小游戏
主要为大家详细介绍了python pygame实现五子棋小游戏，代码注释很详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javafx实现五子棋游戏
主要为大家详细介绍了javafx实现五子棋游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
MATLAB实现五子棋游戏（双人对战、可悔棋）
主要为大家详细介绍了MATLAB实现五子棋游戏，可以进行双人对战、也可悔棋，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于c++ ege图形库实现五子棋游戏
主要为大家详细介绍了基于c++ ege图形库实现五子棋游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
MATLAB柱状图在信号处理中的应用：可视化信号特征和频谱分析
# 1. MATLAB柱状图概述**
MATLAB柱状图是一种图形化工具，用于可视化数据中不同类别或组的分布情况。它通过绘制垂直条形来表示每个类别或组中的数据值。柱状图在信号处理中广泛用于可视化信号特征和进行频谱分析。
柱状图的优点在于其简单易懂，能够直观地展示数据分布。在信号处理中，柱状图可以帮助工程师识别信号中的模式、趋势和异常情况，从而为信号分析和处理提供有价值的见解。
# 2. 柱状图在信号处理中的应用
柱状图在信号处理
用Spring boot和vue写一个登录注册界面
好的，这是一个比较常见的技术问题，我可以为您提供一些参考资料和思路。首先，您可以使用Spring Boot作为后端框架来处理用户认证和注册的逻辑，比如使用Spring Security实现用户登录认证。同时，您还需要设计相应的数据模型和数据库表结构来存储用户信息。在前端方面，您可以使用Vue.js作为框架来构建登录注册页面，使用Axios来发起API请求并和后端进行交互。当然，在实现过程中，还需要考虑一些具体细节，比如数据校验、安全性和用户体验等方面。希望这些信息能够帮助到您。
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。