jquery实现一个五子棋游戏效果代码

代码语言:html

所属分类:游戏

代码描述:jquery实现一个五子棋游戏效果代码

代码标签: 五子棋 游戏 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
   
<meta charset="utf-8">
   
<title></title>
   
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
   
<script>
        var wzqsx = function(div) {
        var $obj = $("#" + div); //目标容器
        $obj.addClass("beijing") //给目标容器增加需要的样式
        $qipan = $("
<table class='qipan'></table>") //渲染table表作为棋盘
        $qipan.appendTo($obj) //添加进目标容器
        for (var i = 0; i < 14; i++) { //绘制14×14的棋盘格子,并且把下标标进去以便后面有用
                var $row = $("
<tr></tr>")
                for (var j = 0; j < 14; j++) {
                        var $line = $("
<td data-row='" + i + "' data-line='" + j + "'></td>")
                        $line.appendTo($row);
                }
                $row.appendTo($qipan);
        }
        return {
                $obj: $obj, //缓存容器
                $arrs: [], //缓存棋子数据
                $qipan: $qipan, //缓存棋盘
                $action: true, //是否正在游戏中
                $now: 'white', //当前落子方
                load: function() {
                        var that = this; //作用域
                        var tdw = that.$obj.width() * 0.92 / 14; //每个格子边长
                        that.$qipan.find("td").click(function(e) { //某个td被点击之后,判断点击的位置距离这个td的四个角哪个角最近然后就视为落子点,再进行落子操作
                                var temp = Object.assign({}, $(this)[0].dataset) //获取
                                var f1 = e.offsetX > tdw / 2;
                                var f2 = e.offsetY > tdw / 2; //定位落子的位置是在四个角的哪一个
                                var index = .........完整代码请登录后点击上方下载按钮下载查看

网友评论0