js數(shù)組案例之五子棋游戲
本文實(shí)例為大家分享了js實(shí)現(xiàn)五子棋游戲的具體代碼,供大家參考,具體內(nèi)容如下
一、效果圖
二、設(shè)計(jì)思路
第一步:創(chuàng)建棋盤(pán),生成棋盤(pán)所對(duì)應(yīng)的數(shù)組坐標(biāo)。
第二步:鼠標(biāo)點(diǎn)擊當(dāng)前位置返回當(dāng)前點(diǎn)的坐標(biāo)。
第三步:生成對(duì)應(yīng)的棋子。
第四步:添加悔棋、重新開(kāi)始事件。
第五步:設(shè)置棋子輸贏,若某個(gè)棋子五個(gè)連成一條線,則該棋子贏。
三、核心代碼
//1.創(chuàng)建棋盤(pán) 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è)地圖對(duì)象 ? ? ? ? ux: null, ? ? ? ? uy: null, ? ? ? ? mappos: [],//地圖上每個(gè)點(diǎn)對(duì)應(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); ? ? ? ? ? ? ? ? //自動(dòng)計(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 () { ? ? ? ? ? ? //檢測(cè)到了返回當(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); ? ? ? ? ? ? ? ? //給對(duì)應(yīng)的集合對(duì)應(yīng)位置添加對(duì)象 ? ? ? ? ? ? ? ? var s = 0; ? ? ? ? ? ? ? ? if (this.nowEle.class == "hei") { ? ? ? ? ? ? ? ? ? ? s = 0; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? else { ? ? ? ? ? ? ? ? ? ? s = 1; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? this.listmap[this.fx][this.fy] = s; ? ? ? ? ? ? ? ? //自動(dòng)檢測(cè)游戲是否結(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) ? ? ? ? ? ? } ? ? ? ? }, ? ? ? ? //縱向檢測(cè) ? ? ? ? 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之后會(huì)超出map范圍會(huì)報(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) { ? ? ? ? ? ? //檢測(cè)當(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之后會(huì)超出map范圍會(huì)報(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("不能在悔棋了??!"); ? ? ? ? ? ? } ? ? ? ? } ? ? ? ? //重新開(kāi)始 ? ? ? ? btnrestart.onclick = function () { ? ? ? ? ? ? //直接刪除所有的棋子 ? ? ? ? ? ? itemchild.innerHTML = ""; ? ? ? ? ? ? Game.saveEle = null; ? ? ? ? ? ? Game.index = 0; ? ? ? ? ? ? Game.getNextEle(); ? ? ? ? } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- node.js利用socket.io實(shí)現(xiàn)多人在線匹配聯(lián)機(jī)五子棋
- js實(shí)現(xiàn)網(wǎng)頁(yè)五子棋進(jìn)階版
- js+html實(shí)現(xiàn)網(wǎng)頁(yè)五子棋
- JavaScript+canvas實(shí)現(xiàn)五子棋游戲
- 純JS實(shí)現(xiàn)五子棋游戲兼容各瀏覽器(附源碼)
- 基于JavaScript實(shí)現(xiàn)五子棋游戲
- Javascript和HTML5利用canvas構(gòu)建Web五子棋游戲?qū)崿F(xiàn)算法
- JS canvas繪制五子棋的棋盤(pán)
- H5+C3+JS實(shí)現(xiàn)五子棋游戲(AI篇)
- Node.js+Socket.io實(shí)現(xiàn)雙人在線五子棋對(duì)戰(zhàn)
相關(guān)文章
js數(shù)據(jù)向上翻滾_數(shù)據(jù)滾動(dòng)
方便做一些問(wèn)題提交等宣傳效果,多用于文字滾動(dòng)2008-10-10URLSearchParams快速解析URL查詢(xún)參數(shù)實(shí)現(xiàn)
這篇文章主要為大家介紹了URLSearchParams快速解析URL查詢(xún)參數(shù)實(shí)現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06JS+CSS實(shí)現(xiàn)電子商務(wù)網(wǎng)站導(dǎo)航模板效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)電子商務(wù)網(wǎng)站導(dǎo)航模板效果代碼,涉及JavaScript結(jié)合css動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09Javascript獲取統(tǒng)一管理的提示語(yǔ)(message)
這篇文章主要介紹了Javascript獲取統(tǒng)一管理的提示語(yǔ)(message)的相關(guān)資料,需要的朋友可以參考下2016-02-02