<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页版五子棋小游戏HTML5源码 - 站长素材</title>
<link rel="stylesheet" type="text/css" href="./css/common.css">
<link rel="stylesheet" type="text/css" href="./css/qi.css">
<script src="./js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="main">
<div class="btnWrap">
<button id="reStartBtn">重新开始</button>
<button id="backBtn">悔一步</button>
</div>
<div id="container2" style="box-shadow:#ccc 1px 1px 6px ;">
<canvas id="myCanvas" width="840" height="840"></canvas>
</div>
<div id="win_msg">测试信息</div>
</div>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
//var canvas = $("#myCanvas");
var ctx = canvas.getContext("2d");
//线条的颜色
ctx.strokeStyle="#000";
//线条的宽度像素
ctx.lineWidth=1;
var space = 60;//棋盘边界与画布边界的间距
var cell_num = 18;//一共几个格子
var width = $("#container2").width() - space * 2;// 棋盘的宽度
var height = $("#container2").height() - space * 2;// 棋盘的高度
var cell_width = width / cell_num;// 每个格子的宽度
var cell_height = height / cell_num;// 每个格子的宽度
var chess_size = cell_width / 2 - 2; //棋子的直径
var game_status = 1;
var qi = "black";
var chess = new Array();
var step=0;//存储下棋步骤
var has_chess = false;
var is_win = false;
init();
function init(){
draw();
}
//重新开始
function rePlay(){
game_status = 1;
qi = "black";
chess = new Array();//重置棋数组
step=0;//存储下棋步骤
has_chess = false;
is_win = false;
/*canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);*/
canvas.setAttribute("height",$("#container2").height());
draw();
}
/**
* 重新加载画面（刷新画面）
* @param {Object} chess
*/
function reload(chess){
//重新绘制棋盘跟棋子.
canvas.setAttribute("height",$("#container2").height());
draw();
qi = qi=="black"?"white":"black";
chess.forEach(item=>{
draw_chess(item.x, item.y, item.color, item.step);
});
}
/**
* 绘制棋盘
*/
function draw(){
//画横线
for(let i=0;i<cell_num+1;i++){
let y=i * cell_width + space;
let endx = width + space;
//console.log(endx);
ctx.beginPath();
ctx.lineTo(space, y);
ctx.lineTo(endx, y);
ctx.stroke();
}
//画竖线
for(let j=0;j<cell_num+1;j++){
let x = j * cell_width + space;
let endy = height + space;
ctx.beginPath();
ctx.lineTo(x, space);
ctx.lineTo(x, endy);
ctx.stroke();
}
for(let sx=1;sx<=3;sx++){
for(let sy=1;sy<=3;sy++){
//画星位
ctx.beginPath();//重置路径
ctx.fillStyle="#000";//设置背景黑色
//ctx.arc(cell_width*3, cell_height*3,15, 0, Math.PI*2,true);
ctx.arc(cell_width*3*(sx*2-1) + space, cell_height*3*(sy*2-1) + space,5,0,Math.PI*2,true);
//ctx.arc(3, 3,18,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
//console.log(sx, sy);
}
}
}
/**
* 落子
*/
$("#myCanvas").click(function(){
var cx = event.pageX - $(this).offset().left; //获取鼠标点击的x坐标点
var cy = event.pageY - $(this).offset().top; //获取鼠标点击的y坐标点
//console.log("event.pageY, canvas.getBoundingClientRect().top", event.pageY, canvas.getBoundingClientRect().top);
//console.log(cx, cy);
var xi = Math.round((cx - space) / cell_width); //获取所在行
var yi = Math.round((cy - space) / cell_height); //获取所在列
// 显示步数
console.log("xi,yi", xi, yi);
if(xi < 0 || xi > cell_num || yi < 0 || yi > cell_num){
return;
}
play(xi, yi);
//console.log("-----------------------------------");
});
/**
* 退一步
*/
$("#backBtn").click(function(){
console.log(is_win);
if(is_win){
alert("游戏已经结束， 不能悔棋， 请重新开局");
return;
}
step --;//步数-1
chess.pop();//移除最后一颗棋子
reload(chess);
});
/**
* 重新开始
*/
$("#reStartBtn").click(function(){
rePlay();
});
// 开始落子 计算
function play(xi, yi){
if(game_status != 1){
/*ctx.beginPath();
ctx.fillStyle="red";
ctx.font="48px '微软雅黑'";
ctx.textAlign="center";
ctx.fillText("游戏已经结束，不能再落子，请重新开始！", cell_num/2*cell_width + space,cell_num/2*cell_height + space);
ctx.restore();
ctx.closePath();*/
alert("游戏已经结束，不能再落子，请重新开始！");
return;
}
step ++; //步数+1
var pos = {'x':xi,'y':yi,'step':step,'color':qi}; // 存储当前棋子的信息 所在行列数、步数、颜色
chess.forEach(item=>{
if(item.x==xi && item.y==yi){
has_chess = true;
}
})
if(has_chess){
step --; // 如果存在棋子， 步数减回去
has_chess = false; // 重新设置是否找到棋子
return;
}
chess.push(pos);
draw_chess(xi, yi, qi, step);
if(check_win(chess, qi)){
let msg = game_status==2?"黑棋赢了":"白棋赢了";
//$("#win_msg").html(msg);
//$("#win_msg").show();
ctx.beginPath();
ctx.fillStyle="red";
ctx.font="48px '微软雅黑'";
ctx.textAlign="center";
ctx.fillText(msg, cell_num/2*cell_width + space,cell_num/2*cell_height + space);
ctx.restore();
ctx.closePath();
return;
}
qi = qi=="black"?"white":"black";
}
/**
* 绘制棋子
* @param x坐标 xi
* @param y坐标 yi
* @param 棋子颜色 qi
* @param 当前步数 curr_step
*/
function draw_chess(x, y, qi, curr_step){
ctx.fillStyle = '#EB852A';
ctx.shadowOffsetX = 0; // 阴影Y轴偏移
ctx.shadowOffsetY = 0; // 阴影X轴偏移
ctx.shadowBlur = 10; // 模糊尺寸
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // 颜色
//var color
//画棋子
ctx.beginPath(); //重置路径
ctx.fillStyle = qi; //设置棋子颜色
ctx.arc(x*cell_width + space, y*cell_height + space, chess_size, 0, Math.PI*2, true); //画圆
ctx.closePath(); //关闭路径
ctx.fill(); // 填充路径（即填充棋子颜色）
//flag = chess.indexOf(pos)==-1?false:true;
//console.log(chess);
step_color = qi=="black"?"white":"black";
//显示步骤
ctx.fillStyle=step_color;
ctx.font="14px '微软雅黑'";
ctx.textAlign = "center";
ctx.fillText(curr_step, x*cell_width + space, y*cell_height+ cell_height/8 + space);
ctx.restore();
ctx.closePath();
}
/**
* 检查是否赢了
* @param 当前棋子数组 ck_chess
* @param {Object} color
*/
function check_win(ck_chess, color){
//横竖十九个交叉点，定义一个19x19的数组去存储当前行棋方所有的棋子的位置
var m = new Array();
for(var i=0;i<cell_num+1;i++){
m.push([]);
for(let j=0;j<cell_num+1;j++){
m[i].push(0);
}
//console.log(m[i]);
}
//console.log(ck_chess);
for(let c in ck_chess){
//console.log("c", ck_chess[c]);
if(ck_chess[c].color == color){
//x表示列，y表示行
m[ck_chess[c].y][ck_chess[c].x] = 1;
}
}
//console.log(cell_num+1);
//console.log("test");
//console.log("m", m);
var direct_arr = [
[[-1, 0], [1, 0]],
[[0, -1], [0, 1]],
[[-1, -1], [1, 1]],
[[-1, 1], [1, -1]]
];
var dx = 0;
var dy = 0;
var num1 = 0;
var num2 = 0;
var lx = ck_chess[ck_chess.length-1].x;
var ly = ck_chess[ck_chess.length-1].y;
//console.log("lx,ly", lx ,ly);
for(var i=0;i<direct_arr.length;i++){
dx = direct_arr[i][0][0];
dy = direct_arr[i][0][1];
num1 = calc_one_line(lx, ly, dx, dy, m);
dx = direct_arr[i][1][0];
dy = dir
HTML5网页版五子棋小游戏源码下载.zip （4个子文件） 
16854 css 
common.css 2KB qi.css 937B
index.html 9KB js jquery-3.5.1.js 281KB
程序员小编
- 粉丝: 1
- 资源: 44
最新资源
- 2025计量基础知识考试题库及答案.doc
- 2025金属冶炼(炼钢)安全员考试题库（含答案）.pptx
- 2025健康管理师三级专业能力考核试卷及答案.doc
- 2025交管12123驾驶证学法减分题库附含答案.doc
- 建筑工程员工工资表.xls
- 工程部薪酬2018年6月.doc
- 工程施工操作员薪酬管理制度.doc
- 2025教育心理学与德育工作基础知识点大全.doc
- 2025教育心理学与德育工作基础知识点整理总复习资料.doc
- 2025基本公共卫生知识考试题及答案.docx
- 2025基本公共卫生知识题库及答案.docx
- 2025基础知识与规范要求技能大赛题库及答案.docx
- 2025脊柱术后脑脊液漏应急预案考试试题（含答案）.docx
- 2025计量基础知识题库及答案.docx
- 2025计算机二级考试全真试题库及答案（通用版）.docx
- 2025计算机基础理论信息安全基本知识试题及答案.docx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0