用HTML和CSS和JS写一个五子棋小游戏

最新推荐文章于 2024-06-02 15:46:49 发布

追蝴蝶的皮卡

最新推荐文章于 2024-06-02 15:46:49 发布

阅读量1.0k

点赞数 3

文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_49016878/article/details/116372414

版权

本文介绍了如何使用HTML、CSS和JavaScript制作一个五子棋小游戏。首先，创建登录界面，接着设计游戏界面，利用canvas绘制棋盘。然后，通过JavaScript实现棋子的绘制和交替落子功能。最后，设置规则判断棋子是否形成五子连珠以决定胜负。文章提供完整的代码顺序指导，并附带素材。

摘要由CSDN通过智能技术生成

大概思路

我们需要有一个登陆界面，然后将游戏界面的链接放在登陆界面里，一点击就跳转到界面
我们就要准备做游戏的界面，先是找到我们需要的素材，再画棋盘，需要用到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"

最低0.47元/天解锁文章

追蝴蝶的皮卡

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
用HTML和CSS和JS写一个五子棋小游戏

大概思路我们需要有一个登陆界面，然后将游戏界面的链接放在登陆界面里，一点击就跳转到界面我们就要准备做游戏的界面，先是找到我们需要的素材，再画棋盘，需要用到canvas标签,然后画棋盘主要在js里做棋盘画好后，就是画棋子棋子画好后，我们需要让棋子能够交替执行最后定义输赢的规则，也就是棋子的五颗相连。我们先看看登录界面，在看代码理解会快一点先看成品五子棋的界面`html<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫