栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

javascript开发五指棋和围棋

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

javascript开发五指棋和围棋

javascript开发五指棋和围棋

javascript开发的五指棋和围棋的规则如下:

游戏规则:点击一下下面的方块会变一个颜色,第二次点击会变成另一种颜色,两种颜色交替进行,双击是悔棋!

1.html部分如下(用来布局显示的页面效果):
                    五指棋/围棋
                    

游戏规则:点击一下下面的方块会变一个颜色,第二次点击会变成另一种颜色!两种颜色交替进行!双击是悔棋!

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
                                   

这里用table表格进行布局,可以根据实际的情况来增加或者减少表格的行或者列;

2.CSS部分代码如下(用来设置html显示出来的样子):
table { border-spacing:0; border-collapse:collapse;}
.games_2_con{width:100%;height:400px;border:1px dashed #808080;}
.games_2_con table tr{width:100%;height:20px;}
.games_2_con table td{width:20px;height:20px;border:1px solid #808080;}

这里用来给表格赋予样式,也是能根据实际情况来给不同颜色、不同大小的展现样式;

3.javascript/js部分代码如下(用来写五指棋/围棋的功能逻辑):
//五指棋/围棋
var yue_table = document.getElementById("yue_2");
var yue_num = 1;
yue_table.onclick = function (e) {
    e.target.style.background = yue_num++ % 2 ? "#808080" : "#000";
};
yue_table.ondblclick = function (e) {
    e.target.style.background = "#fff";
};

这里赋予五指棋/围棋的规则逻辑,如果需要设计更为复杂的规则的话,也都可以在这个的基础上面进行修改;


五指棋/围棋的效果如下:

图1

关注公众号(月影WEB),了解更多的前后端知识;
欢迎大家关注互相交流学习;


 

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/1004340.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号