js数组案例之五子棋游戏

本文实例为大家分享了js实现五子棋游戏的具体代码,供大家参考,具体内容如下

一、效果图

js数组案例之五子棋游戏_第1张图片

二、设计思路

第一步:创建棋盘,生成棋盘所对应的数组坐标。
第二步:鼠标点击当前位置返回当前点的坐标。
第三步:生成对应的棋子。
第四步:添加悔棋、重新开始事件。
第五步:设置棋子输赢,若某个棋子五个连成一条线,则该棋子赢。

三、核心代码

//1.创建棋盘
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,//接收整个地图对象
        ux: null,
        uy: null,
        mappos: [],//地图上每个点对应坐标数组
        r: 14,
        offset: 0,
        ele: [{class: 'hei', name: "黑棋子"}, {class: 'bai', name: "白棋子"}],
        index: 0,
        nowEle: null,
        saveEle: null,
        listmap: [],
        fx: 0,
        fy: 0,
        createMap: function () {
            //创建地图的
            if (this._Map == null) {
                //使用dom元素创建
                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);
                //自动计算偏移
                this.offset = this._Map.offsetLeft;
                //生成数组坐标
                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 () {
            //检测到了返回当前点坐标
            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 () {
            //在当前的坐标位置创建一个元素
            var arr = Game.checkPos();
            if (arr)//[0,0]
            {
                //创建当前的棋子
                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";
                //记录当前的棋子
                this.saveEle = nowqizi;
                itemchild.appendChild(nowqizi);
                //给对应的集合对应位置添加对象
                var s = 0;
                if (this.nowEle.class == "hei") {
                    s = 0;
                }
                else {
                    s = 1;
                }
                this.listmap[this.fx][this.fy] = s;
                //自动检测游戏是否结束
                //以当前这个子,四周找五连子,确定输赢
                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 
 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的