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