js实现五子棋

最新推荐文章于 2024-06-27 10:26:13 发布
最新推荐文章于 2024-06-27 10:26:13 发布
阅读量465 收藏 2
点赞数 1
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40568715/article/details/80361848
版权 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    table{
        width: 700px;
        height: 700px;
        background: aliceblue;
        box-shadow: cadetblue;
        margin:6% auto;
        border-collapse: collapse;
    }
    td{

        border:1px solid darkred;
        width: 68px;
        height: 68px;

    }
    .divw {
        width: 100%;
        height: 100%;
        background: white;
        border-radius: 50%;
        box-shadow: 0px 0px 10px gray;
    } .divb {
        width: 100%;
        height: 100%;
        background: black;
        border-radius: 50%;
        box-shadow: 0px 0px 20px gray;
    }
</style>
<body>
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr><tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr><tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr><tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr><tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr><tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr><tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr><tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr><tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr><tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
<script>
    window.onload=function () {
        var tabEle=document.querySelectorAll("tr td");
        var a=false;
        for(var index=0;index<tabEle.length;index++){
            tabEle[index].onclick=function () {
                if(a==false){
                    if(this.className==''){
                        fall('divw');
                        this.className='white';
                        this.appendChild(div);
                        a=true;
                    }
                }
                else{
                    if(this.className==''){
                        fall('divb');
                        this.className='black';
                        this.appendChild(div);
                        a=false;
                    }
                }
                function fall(classEle) {
                    div=document.createElement('div');
                    div.className=classEle;
                }
            }
        }
    }
</script>
</body>
</html>
效果如图：

几点收获：border-callapse:设置表格边框是否合并为单一的边框；
          由于每次放置棋子都是在方格中新添加，可以设置flag判断该方格有没有放置棋子，并决定放置白棋还是黑棋。ClassName都为“”，我们可以根据其className做文章，用到了createElement() appendChild()，
事实上，在if语句中添加ClassName是多余的，没有起到明显作用。在最后fall方法中统一设置ClassName即可，不同在于css渲染是白棋还是黑棋。
几点疑惑：棋盘方格大小设置 与 其他数字计算是否有什么关系。只有69px左右时，棋子是铺满的，其他设置就会出现椭圆，还没有搞明白。
巴迪
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用js写的简便五子棋（含人机）
09-13
用js写的简便五子棋（含人机用到了三维数组）,希望对大家会有帮助！
JS+canvas实现五子棋人机大战
weixin_33692284的博客
11-29 415
JS+canvas五子棋人机大战 1. 创建实例 function Gobang () { this.over = false; // 是否结束 this.player = true; // true:我 false:电脑 this.allChesses = []; // 所有棋子 this.existC...
纯前端JS实现五子棋游戏
最新发布
Casss1的博客
06-27 322
在系统初始化时为每一格位置使用dom操作进行创建div 并添加点击事件，其中需要为每一个格子赋予唯一的id，我用的方法为A1，A2，.... B1，B2......O15。很简单的一个五子棋效果，有很多可以改进的部分，例如寻找左面子时候如果直接找到五个就可以提前结束游戏了，或者添加一些游戏记录等，欢迎给位指正、讨论。接下来就是最核心的获胜判定部分，我采用的方法，以横向判定为例先寻找当前落子点位最左面的相同色子，在依次向右寻找五格，若均为同色，则判断获胜。首先html页面中有一个基础的棋盘和胜利后的遮罩。
javascript 五子棋
xidianyueyong的博客
09-29 854
html： 无标题文档 play.js: // JavaScript Document var black=new Image(); var white=new Image(); black.src='2.gif'; white.src='1.gif'; var timer=null; var i=0; var map=[]; for(var j=0;j<14;
纯Js写的五子棋
04-24
纯Js写的五子棋 各个浏览器兼容 各个浏览器兼容
五子棋游戏JS实现
whrjxyygx的专栏
07-13 871
使用HTML5和JS实现五子棋游戏
js实现五子棋小游戏
clf20731的博客
06-16 1414
html、css、js实现五子棋小游戏
js五子棋js五子棋
04-27
非常好的游戏源代码js五子棋
JS实现五子棋源码全
05-07
搜索算法实现五子棋，是学习JS算法，JS游戏入门的好素材
纯js简易五子棋
yh_zy的博客
02-08 1064
（代码较为简陋请见谅）这里单独拿出一个绘制好的黑色五子棋展示。
纯JS实现的五子棋
07-05
使用angularJS框架实现的纯JS游戏——五子棋，包含五子棋AI算法，人机对战，功能完善，需要的朋友可以拿去，有问题一起探讨
js实现五子棋游戏
01-26
js实现五子棋游戏 js五子棋 五子棋游戏 js五子棋 五子棋游戏
JS五子棋（AI）
whrjxyygx的专栏
07-24 786
JS五子棋的简单AI实现
用js实现五子棋
安静的对折的专栏
01-11 862
思路： 1、先用canvas画五子棋的棋盘 2、获取鼠标点击的位置 3、根据鼠标点击的位置判断，并画棋子 4、根据下的棋子判断是否赢了 * { padding: 0; margin: 0; } canvas { margin: 10p
JS——五子棋
weixin_64948861的博客
05-12 754
一、js运用 示例：用js代码来进行页面的描绘，画图，判断，以及循环判断 二、使用步骤 1.引入库 代码如下（示例）： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } canvas{ margin: 0 auto; /
JavaSrcipt 五子棋
布伽思索
10-25 283
HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五子棋</title> <style> * { padding: 0; margin: 0; } body{ padding-top: 100px;
javascript实现五子棋游戏
12-16
以下是使用JavaScript实现五子棋游戏的示例代码： ```javascript // 定义棋盘大小 var ROWS = 15; var COLS = 15; // 定义棋盘数组 var chessBoard = []; // 定义当前玩家 var curPlayer = 1; // 初始化棋盘数组...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值