基于JavaScript实现五子棋游戏
本文实例为大家分享了js实现五子棋的具体代码，供大家参考，具体内容如下
思路：
1、先用canvas画五子棋的棋盘
2、获取鼠标点击的位置
3、根据鼠标点击的位置判断，并画棋子
4、根据下的棋子判断是否赢了
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
canvas {
margin: 10px;
border: 2px solid #000;
}
#box {
display: inline-block;
position: absolute;
margin-top: 200px;
margin-left: 100px;
}
span {
font: 24px "微软雅黑";
display: inline-block;
height: 50px;
}
input {
margin-top: 30px;
display: block;
width: 100px;
height: 50px;
font: 16px "微软雅黑";
color: #fff;
background-color: #0099cc;
}
</style>
</head>
<body>
<canvas width="640" height="640" id="cas">
您的浏览器不支持canvas，请升级到最新的浏览器
</canvas>
<div id="box">
<span id="txt"></span>
<input type="button" id="btn" value="重新开始"/>
</div>
<script>
var flag = true; //true代表白棋下的棋子，false代表黑棋下的棋子
var isWin = false; //判断是否结束，true结束，false没有结束
var step = 40; //设置每个格子的宽高都是40
var txt = document.getElementById("txt");
var btn = document.getElementById("btn");
var cas = document.getElementById("cas");// 获取画布对象
var ctx = cas.getContext("2d"); //画布上下文
// 创建图片对象
var img_b = new Image();
img_b.src = "imgs/b.png";//设置黑棋图片路径
var img_w = new Image();
img_w.src = "imgs/w.png";//设置白棋图片路径
// 用二维数组来保存棋盘，0代表没有走过，1为白棋走过，2为黑棋走过
var arr = new Array(15); //声明一个一维数组
for (var i = 0; i < 15; i++) {
arr[i] = new Array(15); //每个值再声明一个一维数组，这样就组成了一个二维数组
for (var j = 0; j < 15; j++) {
arr[i][j] = 0;
}
}
//绘制棋盘
function drawLine() {
for (var i = 0; i < cas.width / step; i++) {
// 画竖线
ctx.moveTo((i + 1) * step, 0);
ctx.lineTo((i + 1) * step, cas.height);
// 画横线
ctx.moveTo(0, (i + 1) * step);
ctx.lineTo(cas.width, (i + 1) * step);
ctx.stroke();
}
}
//获取鼠标点击的位置
cas.onclick = function (e) {
// 先判断游戏是否结束
if (isWin) {
alert("游戏已经结束，请刷新重新开始！");
return 0;
}
//判断棋子显示的地方，四条边上不显示棋子，
//鼠标点击的位置减去边框距离页面的上和左的距离（10），减去一个格子宽高的一半（20）
var x = (e.clientX - 10 - 20) / 40;
var y = (e.clientY - 10 - 20) / 40;
//进行取整来确定棋子最终显示的区域
x = parseInt(x);
y = parseInt(y);
//如果超出棋盘或者在棋盘边界直接返回，边界上不能画棋子
if(x < 0 || x >= 15 || y < 0 || y >= 15) {
return;
}
//进行判断该位置是否已经显示过棋子
if (arr[x][y] != 0) {
alert("你不能在这个位置下棋");
return;
}
// 判断是显示黑子还是白子
if (flag) {//白子
flag = false; //将标志置为false,表示下次为黑子
drawChess(1, x, y); //调用函数来画棋子
} else {//黑子
flag = true; //将标志置为true,表示下次为白子
drawChess(2, x, y); //调用函数来画棋子
}
}
//画棋子
function drawChess(num, x, y) {
//根据x和y确定图片显示位置,让图片显示在十字线中间，因为一个格子为40，图片大小为30，所以40-30/2等于25，所以需要加上25
var x0 = x * step + 25;
var y0 = y * step + 25;
if (num == 1) {
//绘制白棋
ctx.drawImage(img_w, x0, y0);
arr[x][y] = 1; //白子
} else if (num == 2) {
// 绘制黑棋
ctx.drawImage(img_b, x0, y0);
arr[x][y] = 2; //黑子
}
//调用函数判断输赢
judge(num, x, y);
}
//判断输赢
function judge(num, x, y) {
var n1 = 0, //左右方向
n2 = 0, //上下方向
n3 = 0, //左上到右下方向
n4 = 0; // 右上到左下方向
//***************左右方向*************
//先从点击的位置向左寻找，相同颜色的棋子n1自加，直到不是相同颜色的棋子，则跳出循环
for (var i = x; i >= 0; i--) {
if (arr[i][y] != num) {
break;
}
n1++;
}
//然后从点击的位置向右下一个位置寻找，相同颜色的棋子n1自加，直到不是相同颜色的棋子，则跳出循环
for (var i = x + 1; i < 15; i++) {
if (arr[i][y] != num) {
break;
}
n1++;
}
//****************上下方向************
for (var i = y; i >= 0; i--) {
if (arr[x][i] != num) {
break;
}
n2++;
}
for (var i = y + 1; i < 15; i++) {
if (arr[x][i] != num) {
break;
}
n2++;
}
//****************左上到右下斜方向***********
for(var i = x, j = y; i >=0, j >= 0; i--, j--) {
if (i < 0 || j < 0 || arr[i][j] != num) {
break;
}
n3++;
}
for(var i = x+1, j = y+1; i < 15, j < 15; i++, j++) {
if (i >= 15 || j >= 15 || arr[i][j] != num) {
break;
}
n3++;
}
//****************右上到左下斜方向*************
for(var i = x, j = y; i >= 0, j < 15; i--, j++) {
if (i < 0 || j >= 15 || arr[i][j] != num) {
break;
}
n4++;
}
for(var i = x+1, j = y-1; i < 15, j >= 0; i++, j--) {
if (i >= 15 || j < 0 || arr[i][j] != num) {
break;
}
n4++;
}
//用一个定时器来延时，否则会先弹出对话框，然后才显示棋子
var str;
if (n1 >= 5 || n2 >= 5 || n3 >= 5 || n4 >= 5) {
if (num == 1) {//白棋
str = "白棋赢了，游戏结束！"
} else if (num == 2) {//黑棋
str = "黑棋赢了，游戏结束！"
}
txt.innerHTML = str;
isWin = true;
}
}
//重新开始
btn.onclick = function() {
flag = true;
isWin = false;
for (var i = 0; i < 15; i++) {
for (var j = 0; j < 15; j++) {
arr[i][j] = 0;
}
}
ctx.clearRect(0, 0, 640, 640);
txt.innerHTML = "";
drawLine();
}
drawLine();
</script>
</body>
</html>
代码链接地址：五子棋demo
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
原生JS+Canvas实现五子棋游戏
本文实例为大家分享了JS Canvas实现五子棋游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <style type='text/css'> canvas { display: block; margin: 50px auto; box-shadow: -2p
-
javascript 7行代码画出一个围棋棋盘
function qi(q){ var t=["┏","┯","┓","┠","┼","┨","┗","┷","┛","╋"],text=[]; for(y=0;y●":"●"; } } return text.join(""); } var q=[{x:5,
-
JavaScript 井字棋人工智能实现代码
/* Code Written by Cory Fogliani (Email: cory@ijustdontcare.com) Testers: Cory Fogliani, Chris Gordon Featured on JavaScript Kit (http://javascriptkit.com) For this and over 400+ free scripts, visit http://javascriptkit.com */ //if IE4/NS6, apply sty
-
诘屈聱牙之javascript中国象棋
IE6.0 Only 非XHTML标准,可能IE 7.0也看不了....哈哈 蓝方先走 * { font:24px arial, "宋体"; font-weight:bold; color:white; cursor:default; } table { table-layout:fixed; border-collapse:collapse; position:absolute; left:50px; top:50px; } td { width:80px; height:80px;
-
纯JS实现五子棋游戏兼容各浏览器(附源码)
纯JS五子棋(各浏览器兼容) 效果图: 代码下载 HTML代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;"> <title>五子棋</title> <link rel="stylesheet" type="text/
-
JS小游戏之象棋暗棋源码详解
本文实例讲述了JS小游戏的象棋暗棋源码,分享给大家供大家参考.具体如下: 游戏运行后如下图所示: Javascript 部分: /** chinese chess * Author: fdipzone * Date: 2012-06-24 * Ver: 1.0 */ var gameimg = ['images/a1.gif','images/a2.gif','images/a3.gif','images/a4.gif','images/a5.gif','images/a6.gif','imag
-
js 钻石棋网页游戏代码
钻石棋游戏 body{text-align:center; font-size:12px;} td{font-size:12px;text-align:center} table .qz{ border:1px solid #ccc; padding:0px; margin:0px;} .ayc{ background:#fff; background-image:none} table td{width:60px; height:60px;} table td input,.axs{ heig
-
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
这只是一个简单的JAVAscript和HTML5小程序,没有实现人机对战. 五子棋棋盘落子点对应的二维数组.数组的元素对应落子点.比如数组元素值为0表示该元素对应的落子点没有棋子,数组元素值为1表示该元素对应的落子点有白棋子,数组元素值为2表示该元素对应的落子点有黑棋子: 判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二维数组的操作来实现的. 判断五子棋赢棋算法 下边的函数可以实现判断五子棋赢棋的算法,也可以按照教材中相应的算法实现. 其中函数的参数xx.yy为数组下标,chess数组实现五
-
中国象棋js代码,仅演示,未能真下
www.jb51.net 中国象棋 我们 var st=""; var qipuid=new Array(); var qipux=new Array(); var qipuy=new Array(); var qipuc=0; qipust="27,8,5,2,3,3,"; qipust+="24,8,7,1,1,2,"; qipust+="29,6,3,15,5,7,"; qipust+="18,8,3,8,3,
-
原生JS+Canvas实现五子棋游戏实例
一.功能模块 先看下现在做完的效果: 线上体验:https://wj704.github.io/five_game.html 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 二.代码详解 2.1 人机对战功能实现 从效果图可以看到,棋盘的横竖可以放的位置为15*15,通过canvas画棋盘: //绘画棋盘 var drawChessBoard = function(){ for(var i = 0; i < 15; i++){ context.moveTo(15 + i *