扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue实现五子棋小游戏
  • 496

0
分享到

Vue实现五子棋小游戏

2024-04-02 19:04:59 496人浏览 独家记忆
摘要

本文实例为大家分享了Vue实现五子棋小游戏的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head>   

本文实例为大家分享了Vue实现五子棋小游戏的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>五子棋</title>
    <script src="./configjs/vue.js"></script>
    <script src="./configJS/Jquery 1.10.2.js"></script>
    <style>
        .fiveInRow {
            position: absolute;
            width: 100%;
        }

        .fiveStar {
            position: absolute;
            display: flex;
            width: 542px;
            height: 720px;
            margin: -24px 65px;
            justify-content: space-around;
            align-items: center;
        }

        .starGroup {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        .star {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: black;
        }

        .boxRow {
            position: absolute;
            display: flex;
            margin: 20px;
            border: 1px solid black;
            box-sizing: border-box;
        }

        .box {
            width: 45px;
            height: 45px;
            border: 1px solid black;
            box-sizing: border-box;
        }

        .chessBlock {
            position: absolute;
            margin: 20px;
        }

        .chessBox {
            position: absolute;
            z-index: 9;
            width: 42px;
            height: 42px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .chess {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid black;
            box-sizing: border-box;
        }

        .overCover {
            position: absolute;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 632px;
            height: 632px;
            color: red;
            z-index: 11;
        }

        .btnGroup {
            position: absolute;
            top: 700px;
            left: 235px;
            display: flex;
        }

        .btnGroup button {
            margin: 0 10px;
        }
    </style>
</head>

<body>
    <div class="fiveInRow">
        <!-- 棋盘五星层 -->
        <div class="fiveStar">
            <div class="starGroup">
                <div class="star"></div>
                <div class="star"></div>
            </div>
            <div class="star"></div>
            <div class="starGroup">
                <div class="star"></div>
                <div class="star"></div>
            </div>
        </div>
        <!-- 落子层 -->
        <div class="chessBlock"></div>
        <!-- 棋盘网格层 -->
        <div class="boxRow" @click="downChess($event)"></div>
        <!-- 功能BTN -->
        <div class="btnGroup">
            <button @click="giveUp()">认输</button>
            <button @click="regret()">悔棋</button>
            <button @click="openNew()">重开</button>
        </div>
    </div>
</body>

<script>
    new Vue({
        el: ".fiveInRow",
        data: {
            boxSize: 15, //棋盘大小
            chessType: "black", //棋子类型,默认为黑
            blackList: [], //黑子列表
            whiteList: [], //白子列表
            totleNum: 0, //落子总数
            isOver: 0 //游戏是否结束
        },
        created() {
            this.createBox()
        },
        watch: {
            totleNum(val) {
                // 监听棋盘落子数
                let boxRow = $(".boxRow")[0];
                let overCover = `<div class="overCover">
                    <h1 style="color:red;">棋盘满了,下一把吧!!!</h1>
                </div>`;
                if (val === this.boxSize * this.boxSize) {
                    boxRow.innerHTML += overCover;
                    this.isOver = 1;
                }
            }
        },
        methods: {
            createBox() {
                // 创建棋盘网格
                let box = `<div class="box"></div>`;
                let boxRow = $(".boxRow")[0];
                for (let i = 1; i < this.boxSize; i++) {
                    let boxCloum = `<div class="boxCloum">`;
                    for (let j = 1; j < this.boxSize; j++) {
                        boxCloum += box;
                    }
                    boxRow.innerHTML += boxCloum + `</div>`;
                }
            },
            downChess(ev) {
                // 判断落子
                if (!this.isOver) {
                    this.down(ev);
                } else {
                    let overCover = $(".overCover")[0];
                    let newSpan = `<h2>游戏已经结束了,请重新开始!</h2>`;
                    if (overCover.children.length <= 3) overCover.innerHTML += newSpan;
                }
            },
            down(ev) {
                // 落子
                let chessBlock = $(".chessBlock")[0];
                let layerX = this.getLayer(ev.layerX);
                let layerY = this.getLayer(ev.layerY);
                if (layerX >= 0 && layerY >= 0) {
                    let chessTemp = `<div 
                        class="chessBox" style="left:${layerX-21}px;top:${layerY-21}px;"
                    ><span class="chess" style="background:${this.chessType};"></span></div>`;
                    chessBlock.innerHTML += chessTemp;
                    this.totleNum++;
                    if (this.chessType === "black") {
                        this.blackList.push([layerX, layerY]);
                        this.isFive(this.blackList);
                        this.chessType = "white";
                    } else {
                        this.whiteList.push([layerX, layerY]);
                        this.isFive(this.whiteList);
                        this.chessType = "black";
                    }
                } else {
                    console.log("瞅哪呢?看准点下!");
                }
            },
            getLayer(val) {
                // 获取落点相对位置
                if (val % 45 <= 20) {
                    return val - val % 45;
                } else if (val % 45 >= 25) {
                    return val - val % 45 + 45;
                } else {
                    return -1;
                }
            },
            isFive(list) {
                // 判断是否落成五子
                this.isFiveInStraight(list, 0, 1);
                this.isFiveInStraight(list, 1, 0);
                this.isFiveInSlope(list, -1);
                this.isFiveInSlope(list, 1);
            },
            isFiveInStraight(list, a, b) {
                // 判断五子是否在水平线或垂直线
                let listSGT = {};
                for (let i = 0; i < list.length; i++) {
                    if (!listSGT[list[i][b]]) {
                        listSGT[list[i][b]] = [list[i][a]];
                    } else {
                        listSGT[list[i][b]].push(list[i][a]);
                        this.isFiveNearby(listSGT[list[i][b]]);
                    }
                }
            },
            isFiveInSlope(list, slope) {
                // 判断五子是否在正斜线或反斜线
                let listSLP = {};
                for (let i = 0; i < list.length; i++) {
                    let b = list[i][1] - slope * list[i][0];
                    if (!listSLP[b]) {
                        listSLP[b] = [list[i][0]];
                    } else {
                        listSLP[b].push(list[i][0]);
                        this.isFiveNearby(listSLP[b]);
                    }
                }
            },
            isFiveNearby(arr) {
                // 判断五子是否相邻,连成一线
                let idx = 0;
                let player = this.chessType === "black" ? "Black(黑)" : "White(白)";
                if (arr.length >= 5) {
                    arr.sort((a, b) => a - b)
                    for (let i = 1; i < arr.length; i++) {
                        idx = arr[i] - arr[i - 1] === 45 ? idx + 1 : 0;
                        if (idx === 4) this.gameOver(player);
                    }
                }
            },
            gameOver(player) {
                // 游戏结束
                console.log(player + " Win!!!");
                let boxRow = $(".boxRow")[0];
                let overCover = `<div class="overCover"><h1>${player} Win!!!</h1></div>`;
                boxRow.innerHTML += overCover;
                this.isOver = 1;
            },
            giveUp() {
                // 认输投降
                let player = this.chessType === "black" ? "White(白)" : "Black(黑)";
                if (!this.isOver) this.gameOver(player);
            },
            regret() {
                // 悔棋
                if (this.totleNum > 0 && !this.isOver) {
                    let chessBlock = $(".chessBlock")[0];
                    chessBlock.removeChild(chessBlock.children[--this.totleNum]);
                    if (this.chessType === "black") {
                        this.whiteList.pop();
                        this.chessType = "white";
                    } else {
                        this.blackList.pop();
                        this.chessType = "black";
                    }
                } else {
                    console.log("一个子都没有,悔个鸡儿悔!");
                }
            },
            openNew() {
                // 重新开始
                let chessBlock = $(".chessBlock")[0];
                let boxRow = $(".boxRow")[0];
                for (let i = this.totleNum - 1; i >= 0; i--) {
                    chessBlock.removeChild(chessBlock.children[i]);
                }
                if (boxRow.children[14]) boxRow.removeChild(boxRow.children[14]);
                this.chessType = "black";
                this.blackList = [];
                this.whiteList = [];
                this.totleNum = this.isOver = 0;
            }
        }
    })
</script>

</html>

主要思路

1.画棋盘

小雨采用了最直接, 最暴力的方式, 就是把一堆小方块堆起来, 加上边框, 棋盘有了…什么? 你问我那五个点怎么画上去的? 页面上试出来的.

2.落子

落子是比较讲究的. 首先获取鼠标点击事件中的layerX, layerY, 这是鼠标点击的相对位置, 在本例中是比较好用的. 然后通过 getLayer() 函数获取点击点最近的网格点, 如下图, 鼠标点击在红框内则落子. 最后在相比网格点半个棋子位的地方落子就OK了.

3.判断获胜条件

isFive(list) {
                // 判断是否落成五子
                this.isFiveInStraight(list, 0, 1);
                this.isFiveInStraight(list, 1, 0);
                this.isFiveInSlope(list, -1);
                this.isFiveInSlope(list, 1);
            },
            isFiveInStraight(list, a, b) {
                // 判断五子是否在水平线或垂直线
                let listSGT = {};
                for (let i = 0; i < list.length; i++) {
                    if (!listSGT[list[i][b]]) {
                        listSGT[list[i][b]] = [list[i][a]];
                    } else {
                        listSGT[list[i][b]].push(list[i][a]);
                        this.isFiveNearby(listSGT[list[i][b]]);
                    }
                }
            },
            isFiveInSlope(list, slope) {
                // 判断五子是否在正斜线或反斜线
                let listSLP = {};
                for (let i = 0; i < list.length; i++) {
                    let b = list[i][1] - slope * list[i][0];
                    if (!listSLP[b]) {
                        listSLP[b] = [list[i][0]];
                    } else {
                        listSLP[b].push(list[i][0]);
                        this.isFiveNearby(listSLP[b]);
                    }
                }
            },
            isFiveNearby(arr) {
                // 判断五子是否相邻,连成一线
                let idx = 0;
                let player = this.chessType === "black" ? "Black(黑)" : "White(白)";
                if (arr.length >= 5) {
                    arr.sort((a, b) => a - b)
                    for (let i = 1; i < arr.length; i++) {
                        idx = arr[i] - arr[i - 1] === 45 ? idx + 1 : 0;
                        if (idx === 4) this.gameOver(player);
                    }
                }
            },

这里主要有4个函数: isFive(), isFiveInStraight(), isFiveInSlope() 和 isFiveNearby().

isFive(): 这个只是调用后续函数的函数, 它将获胜条件分成了4类: 横线获胜, 竖线获胜, 斜率为1的斜线获胜 和 斜率为-1的斜线获胜.

isFiveInStraight(): 判断 横线获胜 和 竖线获胜 的功能函数. 这里的主要难点就是listSGT 对象的创建, 能否想到要用对象来实现落子的分类, 是这个函数的关键. 在 横线获胜 中, 将落子的layerY 坐标作为对象的属性, 将有相同layerY 坐标的棋子的layerX 组成一个数组作为属性的值. 竖线获胜 同理.

isFiveInSlope(): 判断 斜率为1的斜线获胜 和 斜率为-1的斜线获胜 的功能函数. 与 isFiveInStraight() 不同的是, 在创建listSLP 对象时, 以直线函数 y = k x + b y = kx+by=kx+b 中截距(b) 作为对象的属性, 以落子的layerX 坐标组成的数组作为属性的值, 其实用落子的layerY坐标也是一样的.

isFiveNearby(): 判断五子是否相邻的功能函数. 此函数直接获取上两个函数中所创建对象的值, 也就是落子坐标组成的数组. 首先判断数组长度是否大于5, 毕竟能少走一步是一步嘛. 之后将数组从小到大排序, 计算相邻两位的差, 并记录. 连续记录4次获胜.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

--结束END--

本文标题: Vue实现五子棋小游戏

本文链接: https://lsjlt.com/news/148305.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vue实现五子棋小游戏
    本文实例为大家分享了Vue实现五子棋小游戏的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head>   ...
    99+
    2024-04-02
  • C++实现五子棋小游戏
    本文实例为大家分享了C++实现五子棋小游戏的具体代码，供大家参考，具体内容如下 思路：先用用system（“color 70”）改变控制台的背景色为灰白色，前...
    99+
    2024-04-02
  • Android Studio实现五子棋小游戏
    项目目录 一、项目概述二、开发环境三、详细设计1、布局设计2、验证码3、AI人机4、背景音乐 四、运行演示五、项目总结六、源码获取 一、项目概述 五子棋是一种两人对弈的策略型棋类游戏，...
    99+
    2023-10-23
    android studio android ide 安卓app 移动应用开发
  • pythonPyGame五子棋小游戏
    目录前言五子棋小游戏1、简介2、环境准备3、初始化环境4、棋盘5、黑白棋子6、对局信息7、AI8、完善总结前言 PyGame 是一个专门设计来进行游戏开发设计的 Python 模块，...
    99+
    2024-04-02
  • 基于flask实现五子棋小游戏
    本文实例为大家分享了基于flask实现五子棋小游戏的具体代码，供大家参考，具体内容如下 前言 首先说明一下，本人方向是java后端，只因老师布置了一个作业，要用flask来做一个五子...
    99+
    2024-04-02
  • java五子棋小游戏实现代码
    前言 之前学完java基础课程，试着简单做了一下java的一个五子棋小游戏，记录下来。 界面 由于直接用的java库中的一些基本控件写的一个GUI，并没有做过多优化，感觉比较丑 下面...
    99+
    2024-04-02
  • python实现简单五子棋小游戏
    用python实现五子棋简单人机模式的练习过程，供大家参考，具体内容如下 最近在初学python，今天就用自己的一些粗浅理解，来记录一下这几天的python简单人机五子棋游戏的练习，...
    99+
    2024-04-02
  • C++代码实现五子棋小游戏
    简单C++代码实现五子棋任务，供大家参考，具体内容如下 首先先展示一下运行的图片 话也不多说，直接分不同代码板块来介绍程序不同功能以及是如何实现的 首先，对于一个五子棋程序，我们要...
    99+
    2024-04-02
  • 基于C++实现五子棋小游戏
    本文实例为大家分享了C++实现五子棋小游戏的具体代码，供大家参考，具体内容如下  （这是一个颜色会变化的呦） #include <iostream> usi...
    99+
    2024-04-02
  • Java实现简易五子棋小游戏
    本文实例为大家分享了Java实现简易五子棋小游戏的具体代码，供大家参考，具体内容如下 五子棋是一个简单小游戏，首先我们先想想五子棋都有什么东西，棋子，棋盘； 首先我们可以定义一个棋子...
    99+
    2024-04-02
  • flask如何实现五子棋小游戏
    这篇文章主要介绍了flask如何实现五子棋小游戏，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。准备工作**1.**python环境、安装flask**2.**导入需要用到的包...
    99+
    2023-06-15
  • JavaScript实现网页五子棋小游戏
    本文实例为大家分享了JavaScript实现网页五子棋小游戏的具体代码，供大家参考，具体内容如下 设计思路如下： 1.先采用的Math.random（）方法决定哪一方先行; 2.设置...
    99+
    2024-04-02
  • Java实现五子棋游戏
    本文实例为大家分享了Java实现五子棋游戏的具体代码，供大家参考，具体内容如下 一、功能分析 五子棋的实现还是较为简单的，通过下期的流程我们可以知道大概要实现一下功能： 1、格界面 ...
    99+
    2024-04-02
  • 用C语言实现五子棋小游戏
    简介 本次五子棋使用的是光标控制移动，通过按空格键（键值32）来落子，实现游戏的。 我们额外用到的头文件有： #include<getch.h>  Q...
    99+
    2024-04-02
  • C++实现简易的五子棋小游戏
    本文实例为大家分享了C++实现简易五子棋小游戏的具体代码，供大家参考，具体内容如下 游戏界面： 这是一个简易的五子棋游戏，由c语言编写，每次循环输入两个位置的坐标，通过其奇偶性判...
    99+
    2024-04-02
  • 微信小程序实现五子棋游戏
    本文实例为大家分享了微信小程序实现五子棋游戏的具体代码，供大家参考，具体内容如下 效果图 .wxml <view class="title">   <view ...
    99+
    2024-04-02
  • java实现简单五子棋小游戏(1)
    本文实例为大家分享了java实现简单五子棋小游戏的具体代码，供大家参考，具体内容如下 讲解 五子棋，实际上就是用一个数组来实现的。没有其他很复杂的结构。首先我们制作五子棋，先要有一个...
    99+
    2024-04-02
  • java实现简单五子棋小游戏(2)
    本文实例为大家分享了java实现简单五子棋小游戏游戏的具体代码，供大家参考，具体内容如下 讲解 在第一步实现的基础上，添加游戏结束条件。五子棋游戏中的相同棋子如果同时有五个连接成一条...
    99+
    2024-04-02
  • Java实现五子棋游戏(2.0)
    本文实例为大家分享了Java实现五子棋游戏的具体代码，供大家参考，具体内容如下 简介 相比之前，做出了以下修改： 1.新增菜单栏，将重新开始和退出的按钮移到了菜单栏；2.可以实时显示...
    99+
    2024-04-02
  • JavaScript+canvas实现五子棋游戏
    本文实例为大家分享了JavaScript+canvas实现五子棋游戏的具体代码，供大家参考，具体内容如下 效果截图： 代码实现： <!DOCTYPE html> &l...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作