js数组案例之五子棋游戏
本文实例为大家分享了js实现五子棋游戏的具体代码,供大家参考,具体内容如下
一、效果图
二、设计思路
第一步:创建棋盘,生成棋盘所对应的数组坐标。
第二步:鼠标点击当前位置返回当前点的坐标。
第三步:生成对应的棋子。
第四步:添加悔棋、重新开始事件。
第五步:设置棋子输赢,若某个棋子五个连成一条线,则该棋子赢。
三、核心代码
//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<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范围会报错 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) { //检测当前行上面是否存在连续的五个 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范围会报错 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(); //显示当前棋子 Game.getNextEle(); //给item添加鼠标点击事件 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(); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)