目录
一、简介
此版包括了单人模式(人机模式)和双人模式
只需要双人模式的可以看这篇：JS实现双人五子棋简易游戏(上)
成品效果：五子棋
二、游戏实现效果如下
三、以下为源码
1.HTML
<!DOCTYPE HTML>
<html>
<head>
<title> 五子棋 </title>
<link rel="stylesheet" type="text/css" href="css/style2.css">
</head>
<body>
<div class='btns'>
<button id='startBtn' class='btn'>新游戏</button>
<button id='oneBtn' class='btn'>单人</button>
<button id='twoBtn' class='btn'>双人</button>
<p>点击"新游戏"</p>
<p>开始游戏</p>
<p>默认黑棋先手</p>
<p>当前模式为:</p>
<p class='part'>单人</p>
</div>
<canvas id='canvas' width='480' height='480'></canvas>
</body>
<script src="js/tool1.js"></script>
</html>2.CSS
body{
margin: 0;
background-color: #ccc;
}
div.btns{
width: 110px;
margin: 45px;
border-radius: 5px; /* 圆角 */
position: fixed; /* 元素的位置相对于浏览器窗口是固定位置 */
background-color: #666;
opacity: 0.8;/*透明度*/
}
p{
color: #eee;
margin: 5px;
text-align:center;/* 文本居中 */
}
p.part{
color: #9F9;
}
#canvas{
display: block; /* 块元素 */
margin: 20px auto;
background-color: #8B4513;
}
.btn{
display: block; /* 块元素 */
margin: 20px auto;
width: 100px;
font-size: 18px;
color: #fff;
background-color: #000;
border-radius:10px; /* 圆角 */
border: 2px solid #eee; /* 按钮边框 */
}
.btn:hover {/* 按钮鼠标悬停 */
color: #000;
background-color: #fff;
cursor: pointer; /* 显示的光标的类型 */
box-shadow: 0 5px 15px #999; /* 按钮添加阴影 */
}
.btn:active {/* 按钮鼠标点击 */
color: #fff;
background-color: #666;
box-shadow: 0 5px 5px #666;
transform: translateY(4px);/*对按钮进行移动*/
}3.JS
代码太长分了两部分：
var canvas = document.querySelector('#canvas');//获取画布元素
var startBtn = document.getElementById('startBtn');//获取按钮元素
var oneBtn = document.getElementById('oneBtn');//
最低0.47元/天 解锁文章
832
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
