<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五子棋</title>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 引入 Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.css" rel="stylesheet">
<!-- 整个棋盘用canvas实现 -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="css/button.min.css" >
<style>
img {border:none}
span { vertical-align:middle; }
.myout{
margin:0 auto;
display:table;
}
.myboard{
float: left;
margin-left: : 400px;
}
.mypanel{
height:450px ;
width: 450px;
float:right;
margin-top: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<!-- 页面头部分 -->
<div class="container">
<div class="row clearfix">
<div class="top">
<div class="page-header">
<p style="font-size: 100px">
<strong>Go Bang!</strong>
</p>
<p style="font-size: 25px">Welcome to Vicky's GoBang!<p>
</div>
</div>
<!-- 轮播部分 -->
<div class="topbelow">
<div class="carousel slide" id="carousel-702768">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel-702768">
</li>
<li data-slide-to="1" data-target="#carousel-702768">
</li>
<li data-slide-to="2" data-target="#carousel-702768">
</li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active text-center" >
<img alt="" src="image/thimg.jpg" class="center-block" />
<div class="carousel-caption">
<h4 style="color:#4F4F4F">
五子棋规则
</h4>
<p style="color: #4F4F4F">
五子棋是世界智力运动会竞技项目之一，是一种两人对弈的纯策略型棋类游戏，是世界智力运动会竞技项目之一，通常双方分别使用黑白两色的棋子，下在棋盘直线与横线的交叉点上，先形成5子连线者获胜。
</p>
</div>
</div>
<div class="item text-center" text-align="center">
<img alt="" src="image/secimg.jpg" class="center-block"/>
<div class="carousel-caption">
<h4 >
五子棋名称多样
</h4>
<p>
五子棋，日文亦有“连五子、五子连、串珠、五目、五目碰、五格、五石、五法、五联、京棋”等多种称谓，英文则称之为“FIR（Five In A Row的缩写）、Gomoku（日语“五目”的罗马拼音）、Gobang、connect 5、mo-rphion”。捷克语piskvorky，韩语omok……
</p>
</div>
</div>
<div class="item text-center" text-align="center">
<img alt="" src="image/timg.jpg" class="center-block"/>
<div class="carousel-caption">
<h4 style="color:#3C3C3C">
历史渊源流长
</h4>
<p style="color:#3C3C3C">
相传中华民族的祖先轩辕黄帝无意之中画下了十七条横线十七条竖线，这无意中的发明造就出了五子棋。棋具与围棋通用，起源于中国上古时代的传统黑白棋种之一。主要流行于华人和汉字文化圈的国家以及欧美一些地区，是世界上最古老的棋。
</p>
</div>
</div>
</div> <a class="left carousel-control" href="#carousel-702768" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-702768" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<!-- 轮播结束 -->
</div>
<!-- 头部结束 -->
</div>
<div class="myout">
<div class="myboard">
<!-- 整个棋盘用canvas实现 -->
<canvas id="chess" height="450px" width="450px"></canvas>
<!--js用文件夹css文件夹下的 -->
<script id="whichjs" type="text/javascript" src="js/mancomputerstyle.js"></script>
</div>
<div class="mypanel">
<h2>棋子颜色</h2>
<div id="bangcolor">
<input type="radio" id="black" name="whichcolor" value="true" checked style="font-size: large;">黑子</li>
<input type="radio" id="write" name="whichcolor" value="false" style="font-size: large;" >白子 </li>
<!-- <a id="black_btn" class="btn selected" href="#">黑子</a>
<a id="white_btn" class="btn" href="#">白子</a> -->
</div> <br/>
<h2>游戏模式</h2>
<button class="button green " id="mode1"> 人机模式</button>
<button class="button orange" id="mode2"> 双人模式</button>
<!-- button3重新玩 -->
<div class="svg-wrapper">
<svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
<rect id="shape" height="40" width="150" />
<div id="text">
<a href="" id="aclick" style="font-size: 15px;color: #5B00AE" ><span class="spot"></span ><strong>重新游戏</strong></a>
</div>
</svg>
</div>
<script type="text/javascript">
// 设置onclick事件
$("#mode1").click(function(){
//$('#whichjs').attr("src","js/script.js");
// document.getElementById('chess').src='js/script.js';
//$('script[src*="js/Doubleplayer.js"]').attr('src', $('script[src*="js/Doubleplayer.js"]').attr('src') //+'&'+new Date().getTime());
//whichjs.src="js/script.js";
document.location.reload();
});
$("#mode2").click(function(){
// $("#whichjs").attr("src","Doubleplayer.js");
//document.getElementById('chess').src='js/Doubleplayer.js';
//whichjs.src="js/script.js";
window.location.href="Doubleplayerstyle.html";
});
$("#aclick").click(function(){
document.location.reload();
})
</script>
</div>
</div>
</body>
</html>
JS实现五子棋带详细代码解释
需积分: 38 18 浏览量
2018-03-29
17:22:43
上传
评论 2
收藏 543KB RAR 举报
五子棋_代码解释.rar （12个子文件） 
五子棋 
mancomputerstyle.html 7KB js 
doubleplayerstyle.js 7KB mancomputerstyle.js 10KB Doubleplayerstyle.html 6KB image 
secimg.jpg 40KB topimg.jpg 17KB back.jpg 401KB thimg.jpg 40KB timg.jpg 26KB
feng.png 6KB css button.min.css 715B style.css 3KB
评论0
最新资源