<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五子棋</title>
<style>
canvas {
display: block;
margin: 50px auto;
box-shadow: -2px -2px 2px #efeefe, 5px 5px 5px #e9e9e9;
}
</style>
</head>
<body>
<canvas id="chess" height="450px" width="450px"></canvas>
<script>
var chess = document.getElementById("chess");
var context = chess.getContext("2d");
var flag = false; //判断是否有赢家以便于判断是否可以继续游玩
//棋盘上棋子情况,0:没有棋子,1有黑棋,2有白棋
var checkChess = [];
for (var i = 0; i < 15; i++) {
checkChess[i] = [];
for (var j = 0; j < 15; j++) {
checkChess[i][j] = 0;
}
}
//赢法数组###########
var wins = [];
//初始化棋盘
for (var i = 0; i < 15; i++) {
wins[i] = [];
for (var j = 0; j < 15; j++) {
wins[i][j] = [];
}
}
//赢法索引
var find = 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][find] = true;
}
find++;
}
}
//所有竖线
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][find] = true;
}
find++;
}
}
//所有斜线
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][find] = true;
}
find++;
}
}
//所有反斜线
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][find] = true;
}
find++;
}
}
//赢法统计
//等价于:如果在某种方法上得到了5分,就会结束游戏
//初始化:将每一种赢法在双方上置于0分
var user_win = [];
var con_win = [];
for (var i = 0; i < find; i++) {
user_win[i] = 0;
con_win[i] = 0;
}
//棋盘格子颜色
context.strokeStyle = "#bfbfbf";
//背景设置
var image = new Image();
image.src = "logo.png";
image.onload = function() {
//drawImage参数(图片路径,图片顶点位置,图片顶点位置,宽,高)
context.drawImage(image, 0, 0, 450, 450);
drawChessImage();
// drawArc(0, 0, true);
// drawArc(1, 1, false);
}
// console.log("监听点1");
//【交互】落子
var me = true;
chess.onclick = function(e) {
//判断是否结束游戏
if (flag) {
//window.alert("卧槽,你赢了");
return;
}
if (!me) {
return;
}
//只要在一定范围内点击都能算在最近一个交叉点落子
var x = Math.floor(e.offsetX / 30);
var y = Math.floor(e.offsetY / 30);
// console.log("监听点2");
if (checkChess[x][y] == 0) {
drawArc(x, y, me);
checkChess[x][y] = 1;
//基本运行完毕后遍历棋盘给在落子涉及的赢法加分
//因为onclick是我们落子,所以只需要给自己加分即可
for (var k = 0; k < find; k++) {
// console.log("监听点3");
if (wins[x][y][k]) {
user_win[k]++;
con_win[k] = 999;
if (user_win[k] == 5) {
window.alert("卧槽,你赢了");
flag = true;
}
}
}
if (!flag) {
// console.log("监听点4");
me = !me;
conPlayAI();
}
}
}
//##############电脑下棋
var conPlayAI = function() {
var userScore = [];
var conScore = [];
var max = 0; //保存最高落子权重
var u = 0;
var v = 0; //保存最高落子权重的坐标
// console.log("监听点5");
for (var i = 0; i < 15; i++) {
userScore[i] = [];
conScore[i] = [];
for (var j = 0; j < 15; j++) {
userScore[i][j] = 0;
conScore[i][j] = 0;
}
}
//####遍历棋盘找到可以下的点
for (var i = 0; i < 15; i++) {
for (var j = 0; j < 15; j++) {
//找到没有落子的点
if (checkChess[i][j] == 0) {
for (var k = 0; k < find; k++) {
//判断该点落子是否有价值
// console.log("监听点9");
if (wins[i][j][k]) {
//判断这个点拦截的价值
if (user_win[k] == 1) {
userScore[i][j] += 200;
} else if (user_win[k] == 2) {
userScore[i][j] += 400;
} else if (user_win[k] == 3) {
userScore[i][j] += 2000;
} else if (user_win[k] == 4) {
userScore[i][j] += 19999;
} else {;
//console.log("溢出点1");
}
//判断自己落子的权重
if (con_win[k] == 1) {
conScore[i][j] += 220;
} else if (con_win[k] == 2) {
conScore[i][j] += 440;
} else if (con_win[k] == 3) {
conScore[i][j] += 2100;
} else if (con_win[k] == 4) {
conScore[i][j] += 99999;
} else {;
//console.log("溢出点2");
}
}
//console.log("监听点10");
}
//console.log("监听点11");
//更新最高权重
//获取userScore和conScore最高的一个点
if (userScore[i][j] > max) {
max = userScore[i][j];
u = i;
v = j;
} else if (userScore[i][j] == max) {
if (conScore[i][j] > conScore[u][v]) {
u = i;
v = j;
}
} else {;
没有合适的资源?快使用搜索试试~ 我知道了~
【前端素材】小游戏-Js五子棋游戏源码.zip
共4个文件
png:1个
html:1个
js:1个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 44 浏览量
2024-04-04
14:42:48
上传
评论
收藏 474KB ZIP 举报
温馨提示
【技术分析】 HTML,是一种制作万维网页面的标准语言,它消除了不同计算机之间信息交流的障碍; CSS,可以帮助把网页外观做得更加美观; JavaScript,是一种轻量级的解释型编程语言; jQuery,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互; Bootstrap 是快速开发 Web 应用程序的前端工具包。它是一个 CSS,HTML 和 JS 的集合,它使用了最新的浏览器技术,给你的 Web 开发提供了时尚的版式; AJAX,创建交互式网页应用的网页开发技术。 前端游戏设计是游戏开发中至关重要的一部分,它涉及到游戏的外观、交互和用户体验等方面。以下是一些前端游戏设计的思路和关键点: 用户体验:确保游戏界面简洁直观,易于操作。考虑用户的需求和习惯,设计友好的用户界面,包括按钮、菜单、指引等,以提升用户体验。 视觉设计:选择合适的配色方案、图标和界面元素,保持视觉风格一致性。优秀的视觉设计可以提升游戏的吸引力和品质感。 动画效果:运用动画效果增强游戏的交互性和趣味性。动画可以使游戏更生动,提升用户参与感。 响应式设计:确保游戏在不同设备上都能正常展示和运行,包括PC、平板和手机等。响应式设计可以提高游戏的可访问性和用户覆盖范围。
资源推荐
资源详情
资源评论
收起资源包目录
【前端素材】小游戏-Js五子棋游戏源码.zip (4个子文件)
Js五子棋游戏源码
logo.png 485KB
chess.js 8KB
index.html 10KB
chess.css 117B
共 4 条
- 1
资源评论
枫蜜柚子茶
- 粉丝: 6820
- 资源: 5108
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功