大概思路
- 我们需要有一个登陆界面,然后将游戏界面的链接放在登陆界面里,一点击就跳转到界面
- 我们就要准备做游戏的界面,先是找到我们需要的素材,再画棋盘,需要用到canvas标签,然后画棋盘主要在js里做
- 棋盘画好后,就是画棋子
- 棋子画好后,我们需要让棋子能够交替执行
- 最后定义输赢的规则,也就是棋子的五颗相连。
我们先看看登录界面,在看代码理解会快一点
先看成品五子棋的界面
`html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开始游戏</title>
<style>
<!-- 因为登录界面不需要很多代码,所以所幸将原本css的代码放在html里面,但是正常情况不建议大家这样做-->
.wh{
/*设置边框的宽和高*/
width: 500px;
height: 500px;
padding: 10px;
border:2px solid blanchedalmond;
/*居中*/
margin: auto;
}
#head{
/*设计字体颜色,以及文字居中*/
background: crimson;
text-align: center;
}
#href{
/*给"开始游戏"设置字体大小 以及定位*/
background: aqua;
font-size: 25px;
font-weight: bold;
position: relative;
left: 230px;
}
/*设计一个 hover*/
#href:hover{
background-color: #ca7879;
}
#img{
width: 500px;
height: 380px;
margin: auto;
opacity: 0.5;
}
</style>
</head>
<body>
<!--我们应该尽量将标签装到块元素中-->
<div class="wh">
<!-- 弄一个标题-->
<h1 id="head">欢迎来到五子棋世界</h1>
<!--弄一个五子棋游戏的链接,这一步是必须的-->
<a href="five1.html" id="href">开始游戏</a>
<!--再插入一个背景图,要好看点-->
<img src="../image/五子棋.jfif" id="img">
</div>
</body>
</html>
接下来就是五子棋游戏的制作了,先看html的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五子棋</title>
</head>
<body id="body"