新手如何用 js 写一个五子棋

最新推荐文章于 2024-06-27 10:26:13 发布

可爱丶妖小妖

最新推荐文章于 2024-06-27 10:26:13 发布

阅读量1k

点赞数 1

分类专栏：案例文章标签： html css html5

本文链接：https://blog.csdn.net/yao_huang_/article/details/120605104

版权

本文记录了一位新手使用JavaScript开发五子棋小游戏的过程，从HTML布局、CSS美化，到JavaScript实现棋盘、棋子及游戏规则。虽然存在一些bug，但基本功能已完成，包括棋盘绘制、棋子落点判断、五子连珠胜利检测等。开发者也提到，游戏胜利判断存在bug，尚未找到解决方案，并提示调整格子大小可能导致的问题。

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

最新一次的作业，需要用所学到的知识写一个前端小游戏，我想到了五子棋，想着容易做起来难啊！不过历经千辛万苦，最终磕磕巴巴写出来了一个简单的（有bug）五子棋。

首先贴起来html内容，很简单，就一个地图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div id="map" class="map"></div>
    <script src="js/index.js"></script>
</body>
</html>

然后稍微的设置了一下样式，看起来不是贴边，并且给添加了一个背景图片，看起来稍微的好一点（并不是因为不知道填充什么颜色好点）

* {
    padding: 0;
    margin: 0;
    list-style: none;
}
.map {
    width: 600px;
    height: 600px;
    margin: 10px auto;
    /* border: 5px solid #333; */
    border-radius: 5px;
    position: relative;
    background: url(../image/1.jpg) no-repeat center center;
    background-size: auto 610px;
}

接下来就是重头戏了，先构造一个棋子和棋盘网格的对象

// ========================== 棋子 ==============================
(function () {
    const ps = "absolute";
    const interval = 20;

    function Chess(option) {
        option = option instanceof Object ? option : {};
        this.width = option.width || 20;
        this.height = option.height || 20;
        this.color = option.color || "black";
        this.radius = option.radius || "50%";
        this.x = option.x || 0;
        this.y = option.y || 0;
        this.eles = [];
    }
    Chess.prototype.creatChess = function (map) {
        const ele = document.createElement("div");
        ele.style.width = this.width + "px";