//1.創(chuàng)建棋盤
var item = document.querySelector(".item-map");
var itemchild = document.querySelector(".item-child");
var yuanele = document.querySelector(".yuan");
var nameele = document.querySelector(".name");
var btnback = document.querySelector(".btnback");
var btnrestart = document.querySelector(".btnrestart");
var Game = {
? ? ? ? w: 30,
? ? ? ? h: 30,
? ? ? ? col: 13,
? ? ? ? row: 13,
? ? ? ? src: './img/bg.png',
? ? ? ? _Map: null,//接收整個(gè)地圖對象
? ? ? ? ux: null,
? ? ? ? uy: null,
? ? ? ? mappos: [],//地圖上每個(gè)點(diǎn)對應(yīng)坐標(biāo)數(shù)組
? ? ? ? r: 14,
? ? ? ? offset: 0,
? ? ? ? ele: [{class: 'hei', name: "黑棋子"}, {class: 'bai', name: "白棋子"}],
? ? ? ? index: 0,
? ? ? ? nowEle: null,
? ? ? ? saveEle: null,
? ? ? ? listmap: [],
? ? ? ? fx: 0,
? ? ? ? fy: 0,
? ? ? ? createMap: function () {
? ? ? ? ? ? //創(chuàng)建地圖的
? ? ? ? ? ? if (this._Map == null) {
? ? ? ? ? ? ? ? //使用dom元素創(chuàng)建
? ? ? ? ? ? ? ? this._Map = document.createElement("div");
? ? ? ? ? ? ? ? this._Map.className = "map";
? ? ? ? ? ? ? ? this._Map.style.width = this.w * this.col + "px";
? ? ? ? ? ? ? ? this._Map.style.height = this.h * this.row + "px";
? ? ? ? ? ? ? ? this._Map.style.backgroundImage = "url('" + this.src + "')";
? ? ? ? ? ? ? ? item.appendChild(this._Map);
? ? ? ? ? ? ? ? //自動計(jì)算偏移
? ? ? ? ? ? ? ? this.offset = this._Map.offsetLeft;
? ? ? ? ? ? ? ? //生成數(shù)組坐標(biāo)
? ? ? ? ? ? ? ? this.createPos();
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? createPos: function () {
? ? ? ? ? ? for (var i = 0; i <= this.row; i++) {
? ? ? ? ? ? ? ? this.mappos.push([]);
? ? ? ? ? ? ? ? this.listmap.push([]);
? ? ? ? ? ? ? ? for (var k = 0; k <= this.col; k++) {
? ? ? ? ? ? ? ? ? ? this.mappos[i].push([k * this.w, i * this.h]);
? ? ? ? ? ? ? ? ? ? this.listmap[i].push(null);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }

? ? ? ? },
? ? ? ? checkPos: function () {
? ? ? ? ? ? //檢測到了返回當(dāng)前點(diǎn)坐標(biāo)
? ? ? ? ? ? for (var i = 0; i < this.mappos.length; i++) {
? ? ? ? ? ? ? ? for (var k = 0; k < this.mappos[i].length; k++) {
? ? ? ? ? ? ? ? ? ? var center = this.mappos[i][k];
? ? ? ? ? ? ? ? ? ? var cx = center[0] - this.ux;
? ? ? ? ? ? ? ? ? ? var cy = center[1] - this.uy;
? ? ? ? ? ? ? ? ? ? var ishas = this.r * this.r >= cx * cx + cy * cy;
? ? ? ? ? ? ? ? ? ? if (ishas) {
? ? ? ? ? ? ? ? ? ? ? ? this.fx=i;
? ? ? ? ? ? ? ? ? ? ? ? this.fy=k;
? ? ? ? ? ? ? ? ? ? ? ? return center;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? getNextEle: function () {
? ? ? ? ? ? this.nowEle = this.ele[this.index];
? ? ? ? ? ? yuanele.className = "yuan " + this.nowEle.class;
? ? ? ? ? ? nameele.innerText = this.nowEle.name;
? ? ? ? ? ? this.index = ++this.index >= this.ele.length ? 0 : this.index;
? ? ? ? ? ? return this.nowEle;
? ? ? ? },
? ? ? ? createNowPosEle: function () {
? ? ? ? ? ? //在當(dāng)前的坐標(biāo)位置創(chuàng)建一個(gè)元素
? ? ? ? ? ? var arr = Game.checkPos();
? ? ? ? ? ? if (arr)//[0,0]
? ? ? ? ? ? {
? ? ? ? ? ? ? ? //創(chuàng)建當(dāng)前的棋子
? ? ? ? ? ? ? ? var nowqizi = document.createElement("div");
? ? ? ? ? ? ? ? nowqizi.style.width = this.r * 2 + "px";
? ? ? ? ? ? ? ? nowqizi.style.height = this.r * 2 + "px";
? ? ? ? ? ? ? ? nowqizi.className = "qizi " + this.nowEle.class;
? ? ? ? ? ? ? ? nowqizi.style.left = arr[0] - this.r + this.offset + "px";
? ? ? ? ? ? ? ? nowqizi.style.top = arr[1] - this.r + this.offset + "px";
? ? ? ? ? ? ? ? //記錄當(dāng)前的棋子
? ? ? ? ? ? ? ? this.saveEle = nowqizi;
? ? ? ? ? ? ? ? itemchild.appendChild(nowqizi);
? ? ? ? ? ? ? ? //給對應(yīng)的集合對應(yīng)位置添加對象
? ? ? ? ? ? ? ? var s = 0;
? ? ? ? ? ? ? ? if (this.nowEle.class == "hei") {
? ? ? ? ? ? ? ? ? ? s = 0;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else {
? ? ? ? ? ? ? ? ? ? s = 1;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.listmap[this.fx][this.fy] = s;
? ? ? ? ? ? ? ? //自動檢測游戲是否結(jié)束
? ? ? ? ? ? ? ? //以當(dāng)前這個(gè)子，四周找五連子，確定輸贏
? ? ? ? ? ? ? ? this.checkWin();
? ? ? ? ? ? ? ? Game.getNextEle();

? ? ? ? ? ? }
? ? ? ? },
? ? ? ? checkWin:function () {
? ? ? ? ? ? var win=null;
? ? ? ? ? ? if(this.heng(this.listmap[this.fx])){
? ? ? ? ? ? ? ? win=this.nowEle;
? ? ? ? ? ? }
? ? ? ? ? ? else if(this.zong(this.fx,this.fy)){
? ? ? ? ? ? ? ? win=this.nowEle;
? ? ? ? ? ? }
? ? ? ? ? ? if(win){
? ? ? ? ? ? ? ? setTimeout(function(){
? ? ? ? ? ? ? ? ? ? switch (win.class){
? ? ? ? ? ? ? ? ? ? ? ? case 'bai':
? ? ? ? ? ? ? ? ? ? ? ? ? ? alert("白棋贏了！");
? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? case 'hei':
? ? ? ? ? ? ? ? ? ? ? ? ? ? alert("黑棋贏了！");
? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? btnrestart.click();
? ? ? ? ? ? ? ? },500)
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? //縱向檢測
? ? ? ? zong:function(x,y){
? ? ? ? ? ? for(var i=0;i<this.listmap.length;i++){
? ? ? ? ? ? ? ? var iscome=true;
? ? ? ? ? ? ? ? var n=this.listmap[i][y];
? ? ? ? ? ? ? ? if(n==null)
? ? ? ? ? ? ? ? continue;
? ? ? ? ? ? ? ? var arr=[i];
? ? ? ? ? ? ? ? for(var k=i+1;k<=i+5;k++){
? ? ? ? ? ? ? ? ? ? //后面k+5之后會超出map范圍會報(bào)錯(cuò)
? ? ? ? ? ? ? ? ? ? if(this.listmap[k]==undefined)
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? if(this.listmap[k][y]==null)
? ? ? ? ? ? ? ? ? ? ? ? continue;
? ? ? ? ? ? ? ? ? ? if(n!=this.listmap[k][y]){
? ? ? ? ? ? ? ? ? ? ? ? iscome=false;
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? else{
? ? ? ? ? ? ? ? ? ? ? ? arr.push(k);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if(iscome&&arr.length==5){
? ? ? ? ? ? ? ? ? ? return iscome;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? heng:function (h) {
? ? ? ? ? ? //檢測當(dāng)前行上面是否存在連續(xù)的五個(gè)
? ? ? ? ? ? for(var i=0;i< h.length;i++){
? ? ? ? ? ? ? ? var iscome=true;
? ? ? ? ? ? ? ? var n=h[i];
? ? ? ? ? ? ? ? if(n==null)
? ? ? ? ? ? ? ? ? ? continue;
? ? ? ? ? ? ? ? var arr=[i];
? ? ? ? ? ? ? ? for(var k=i+1;k<=i+5;k++){
? ? ? ? ? ? ? ? ? ? //后面k+5之后會超出map范圍會報(bào)錯(cuò)
? ? ? ? ? ? ? ? ? ? if(h[k]==null)
? ? ? ? ? ? ? ? ? ? ? ? continue;
? ? ? ? ? ? ? ? ? ? if(n!=h[k]){
? ? ? ? ? ? ? ? ? ? ? ? iscome=false;
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? else{
? ? ? ? ? ? ? ? ? ? ? ? arr.push(k);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if(iscome&&arr.length==5){
? ? ? ? ? ? ? ? ? ? return iscome;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? };
? ? window.onload = function () {
? ? ? ? Game.createMap();
? ? ? ? //顯示當(dāng)前棋子
? ? ? ? Game.getNextEle();


? ? ? ? //給item添加鼠標(biāo)點(diǎn)擊事件
? ? ? ? item.onclick = function (e) {
? ? ? ? ? ? Game.ux = e.offsetX - Game.offset;
? ? ? ? ? ? Game.uy = e.offsetY - Game.offset;
? ? ? ? ? ? Game.createNowPosEle();
? ? ? ? }
? ? ? ? //悔棋事件
? ? ? ? btnback.onclick = function () {
? ? ? ? ? ? if (Game.saveEle) {
? ? ? ? ? ? ? ? Game.getNextEle();
? ? ? ? ? ? ? ? //刪除之前的棋子
? ? ? ? ? ? ? ? Game.saveEle.remove();
? ? ? ? ? ? ? ? Game.saveEle = null;
? ? ? ? ? ? }
? ? ? ? ? ? else {
? ? ? ? ? ? ? ? alert("不能在悔棋了??！");
? ? ? ? ? ? }

? ? ? ? }
? ? ? ? //重新開始
? ? ? ? btnrestart.onclick = function () {
? ? ? ? ? ? //直接刪除所有的棋子
? ? ? ? ? ? itemchild.innerHTML = "";
? ? ? ? ? ? Game.saveEle = null;
? ? ? ? ? ? Game.index = 0;
? ? ? ? ? ? Game.getNextEle();
? ? ? ? }
}