原生js-五子棋游戏

最新推荐文章于 2024-04-19 20:00:59 发布
最新推荐文章于 2024-04-19 20:00:59 发布
阅读量822 收藏
点赞数
文章标签： 五子棋 原生JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44038355/article/details/84944060
版权
html:
<body>
    <h2>五子棋游戏</h2>
    <div id="box">
        <div id="box01"></div>
        <div id="box02">haha</div>
    </div>
</body>
css:
<style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            /*overflow: hidden;*/
            margin-top: 10px;
            text-align: center;
            background-color: #C7C7C7;
        }
        #box{
            position: relative;
            border: 1px solid;
            margin: 20px auto;
            width: 546px;
            height: 546px;
            background-color: #C7C7C7;
        }
        #box .squre{
            width: 40px;
            height: 40px;
            border: 1px solid;
            float: left;
        }
        #box01 .squre:hover{
            background-color: pink;
        }
        #box01{
            position: absolute;
            /*border: 1px solid;*/
            margin: 0 auto;
            width: 588px;
            height: 588px;
            /*background-color: pink;*/
            /*opacity: 0.5;*/
            top: -20px;
            left: -20px;
        }
        #box01 .qz{
            width: 30px;
            height: 30px;
            border: 1px solid #C7C7C7;
            float: left;
            border-radius: 50%;
            margin: 5px;
        }
        #box01 .qz:hover{
            background-color: pink;
        }
        #box02{
            position: absolute;
            line-height: 546px;
            font-size: 50px;
            color: black;
            width: 100%;
            background-color: pink;
            display: none;
            opacity: 0.6;
        }
    </style>
script:
<script type="text/javascript">
        window.onload = function () {
            let box = document.getElementById("box");
            let box01 = document.getElementById("box01");
            //画棋盘
            let arr = new Array();
            for (let i=0;i<13;i++){
                arr[i] = new Array();
                for (let j=0;j<13;j++){
                    arr[i][j] = document.createElement("div");
                    arr[i][j].className = "squre";
                    box.appendChild(arr[i][j]);
                }
            }
            //画棋子
            let arr01 = new Array();
            for (let i=0;i<14;i++){
                arr01[i] = new Array();
                for (let j=0;j<14;j++){
                    arr01[i][j] = document.createElement("div");
                    arr01[i][j].className = "qz";
                    box01.appendChild(arr01[i][j]);
                }
            }
            for (let m=0;m<14;m++){
                for (let n=0;n<14;n++){
                    arr01[m][n].onclick = function () {
                        //下棋之前统计一下黑白棋的个数，以便黑白交换下棋
                        let count = 0;
                        for (let l = 0; l < 14; l++) {
                            for (let k = 0; k < 14; k++){
                                if (arr01[l][k].style.backgroundColor != "") {
                                    count++;
                                }
                            }
                        }
                        // console.log(count);
                        if (this.className == "qz" && count % 2 == 0 && this.style.backgroundColor == "") {
                            //下棋
                            this.style.backgroundColor = "black";
                            //引入判断函数
                            // console.log(m,n);
                            checkGame(m, n);

                        } else if (this.className == "qz" && count % 2 != 0 && this.style.backgroundColor == "") {
                            //下棋
                            this.style.backgroundColor = "white";
                            //引入判断函数
                            checkGame(m, n);
                        }
                    }
                }
            }

            //判断哪方输赢,四个方向（横向、纵向、左斜、右斜）
            //m是y轴，n是x轴
            let a,b;
            let flag = 0;
            let box02 = document.getElementById("box02");
            function checkGame(a,b) {
                //判断横向
                let qzColor = arr01[a][b].style.backgroundColor;
                // console.log(qzColor);
                for (let k=(b-4);k<=(b+4);k++){
                    if (k>=0 && k < 14){
                        if (qzColor == arr01[a][k].style.backgroundColor && arr01[a][k].style.backgroundColor != ""){
                            flag++;
                            if (flag == 5){
                                // alert(qzColor+" win!!");
                                box02.innerHTML = qzColor+" win!!";
                                box02.style.display = "block";
                            }
                        } else {
                            flag = 0;
                        }
                    } else {
                        flag = 0;
                    }
                }

                //判断纵向
                for (let k=(a-4);k<=(a+4);k++){
                    if (k>=0 && k < 14){
                        if (qzColor == arr01[k][b].style.backgroundColor && arr01[k][b].style.backgroundColor != ""){
                            flag++;
                            if (flag == 5){
                                // alert(qzColor+" win!!");
                                box02.innerHTML = qzColor+" win!!";
                                box02.style.display = "block";
                            }
                        } else {
                            flag = 0;
                        }
                    } else {
                        flag = 0;
                    }
                }

                //判断左斜
                let ax = (a-4);//ax用来记录横坐标的变化
                for (let k=(b-4);k<=(b+4);k++){
                    if (k>=0 && k < 14 && ax>=0 && ax<14){
                        if (qzColor == arr01[ax][k].style.backgroundColor && arr01[ax][k].style.backgroundColor != ""){
                            flag++;
                            if (flag == 5){
                                // alert(qzColor+" win!!");
                                box02.innerHTML = qzColor+" win!!";
                                box02.style.display = "block";
                            }
                        } else {
                            flag = 0;
                        }
                    } else {
                        flag = 0;
                    }
                    ax++;
                }

                //判断右斜
                bx = a-4;
                for (let k=(b+4);k>=(b-4);k--){
                    if (k>=0 && k < 14 && bx>=0 && bx<14){
                        if (qzColor == arr01[bx][k].style.backgroundColor && arr01[bx][k].style.backgroundColor != ""){
                            flag++;
                            if (flag == 5){
                                // alert(qzColor+" win!!");
                                box02.innerHTML = qzColor+" win!!";
                                box02.style.display = "block";
                            }
                        } else {
                            flag = 0;
                        }
                    } else {
                        flag = 0;
                    }
                    bx++;
                }
            }
        }
    </script>
阿布的小布
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
五子棋（围棋） canvas node html5 js
rgbaflf的专栏
02-18 1611
client端 msg var CommonUtils = { /** * 画圆 */ drawCircle : function(ctx, x, y, r, color) {
原生js实现五子棋游戏
12-28
本文实例为大家分享了js实现五子棋游戏的具体代码，供大家参考，具体内容如下 html: <body> 五子棋游戏 <div id=box01></div> <div id=box02>haha </body> css: <style type=text/css> ...
javascript五子棋游戏制作（-）
专注于java，站在巨人头顶看世界
10-28 3458
闲着无事，使用jquery和js写写五子棋游戏，帮各位拍砖呀。 准备工作： 下载jQuery包。 1、制作房间： Jsp页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.g
html五子棋游戏制作原理,JavaScript实现五子棋游戏的方法详解
weixin_29022821的博客
06-01 545
本文实例讲述了JavaScript实现五子棋游戏的方法。分享给大家供大家参考，具体如下：最近半个月一直在看深入的学习JavaScript，里面有很多重点和难点，比如闭包、词法分析、面向对象等。今天给大家分享一个由JavaScript编写的五子棋游戏，主要用到JavaScript的面向对象、事件委托、闭包等知识，还是挺有分量的，正好可以检测学习的成果。老规矩，先上图，再说话。效果图：五子棋素材图：代...
【毕业设计】基于Java的五子棋游戏的设计(源代码+论文)
最新发布
ymhyd的博客
04-19 987
跳冲四：它的形状在“四”中是比较特殊的，一般分为两种，它的特点是同一条线上的同色的四个棋子，有一个或两个棋子与另外三个或两个棋子之间有一个交叉点的间隔，它的下一手棋只有下在间隔的交叉点上才能形成“连五”，因此，对方的棋子防守时，也只能阻挡在间隔的交叉点上，见图。冲四：在同一条线上相连的相同颜色的四个棋子，它与活四不同的是，其中的一端有对方的棋子进行阻挡，它只有再在另一端下一手棋才可形成“连五”。反三：反三不是指一种“三”的形状，而是指再阻止对方进攻的同时使自己称为一道活三的反攻，称为反三。
js实现五子棋落子，判定结果
wwtx2048的博客
08-22 272
黑子先行不可让子上下、左右、右上左下、左上右下,四个方向有一个方向连成5子即获胜。
JS实现五子棋界面设计
做自己喜欢的事情就好啦
02-03 2890
JS实现五子棋需求分析以及代码实现画布样式布局1. canvas进行画布的设计2. 效果图棋盘设计1. 大小设计2. js代码编写（绘制）3. 效果图棋子设计1. 代码编写2. 效果图背景添加1. 代码编写2. 效果图 需求分析以及代码实现 画布样式布局 1. canvas进行画布的设计 新建CSS文件夹，新建style.css文件； 在style.css文件里进行canvas编写； canvas{ display: block; margin: 50px auto; box-shadow:
原生JavaScript实现五子棋游戏
01-18
本文实例为大家分享了JavaScript实现五子棋游戏的具体代码，供大家参考，具体内容如下 1.HTML部分 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport ...
原生js实现单机五子棋游戏
06-29
在本项目中，“原生js实现单机五子棋游戏”是一个基于JavaScript的简单游戏开发实例，主要展示了如何使用纯JavaScript编程语言来构建一个功能完备的五子棋游戏。五子棋是一种双人对弈的策略型棋类游戏，目标是在棋盘...
基于原生JS的五子棋游戏
05-04
**基于原生JS的五子棋游戏** 在Web开发领域，HTML5的出现极大地扩展了网页的交互性和表现力，其中Canvas标签就是一种强大的图形绘制工具。本项目是一个基于原生JavaScript实现的五子棋游戏，它充分利用了Canvas的...
js实现简易五子棋游戏
独学而无友，则孤陋而寡闻
06-19 5394
一.源码 1.html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
五子棋游戏
12-09
有趣自玩五子棋游戏，11*11格游戏，望有高人点拨，里面代码不是非常高深
html五子棋游戏
01-17
用html+canvas+js写的五子棋游戏，黑白棋可以轮流落子。文件内包含双人版和人机版，人机版运用到了一些智能算法。可直接在chrome上运行。
js原生五子棋小游戏
11-02
纯js文本编写的五子棋，可以悔棋，人机对战，该文本纯属分享，代码有什么不规范的地方请指点，大神多多指教
纯Js写的五子棋
04-24
纯Js写的五子棋 各个浏览器兼容 各个浏览器兼容
原生JS+Canvas实现五子棋游戏
10-19
主要为大家详细介绍了原生JS+Canvas实现五子棋游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用html+js实现五子棋游戏（人机对战）【建议收藏】
小魏快起床的博客
02-22 715
在前端如何创建一个五子棋盘，并实现人机对战，不要小瞧人机，你可能还赢不了，不信你来试试。
五子棋游戏（一）
weixin_74447094的博客
02-20 253
获得交点值后，定义chessArr 15*15大小的二维数组用来保存棋子数据，下黑子时让数组大小为1，白子为2，如果chessArr大于0时证明该点已经下过棋子，实现黑白交替需要定义chesscount计数器，偶数时下黑子，奇数时下白子。首先我们应该创建一个game类，在这个类中创建游戏界面，再设置大小，标题，退出进程，居中显示，可见。首先定义x1，x2获取点击时的坐标值，然后计算坐标值，让它定位在距离x1，y1最近的一个位置上。我们将棋盘面板设置在界面左边，将按钮设置面板设置在界面右边，
云原生培训-Docker&podman原厂培训PPT
03-16
云原生培训-Docker 云原生技术是近年来随着云计算的发展而逐渐兴起的一种新的软件开发和部署方法论，它以容器化、微服务、自动化运维等特点，成为了越来越多企业和开发者的首选技术栈。在云原生技术中，Docker作为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值