欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js數(shù)組案例之五子棋游戲

 更新時(shí)間:2022年05月06日 10:00:50   作者:南初?  
這篇文章主要為大家詳細(xì)介紹了js數(shù)組案例之五子棋游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)五子棋游戲的具體代碼,供大家參考,具體內(nèi)容如下

一、效果圖

二、設(shè)計(jì)思路

第一步:創(chuàng)建棋盤,生成棋盤所對(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)建棋盤
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í)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • js實(shí)現(xiàn)多張圖片打包成zip

    js實(shí)現(xiàn)多張圖片打包成zip

    圖片下載是前端常見(jiàn)的需求,如果一張一張下載未免太影響體驗(yàn)了,于是寫下了這個(gè)多張圖片打包成zip的demo
    2021-05-05
  • js數(shù)據(jù)向上翻滾_數(shù)據(jù)滾動(dòng)

    js數(shù)據(jù)向上翻滾_數(shù)據(jù)滾動(dòng)

    方便做一些問(wèn)題提交等宣傳效果,多用于文字滾動(dòng)
    2008-10-10
  • 微信小程序webSocket的使用方法

    微信小程序webSocket的使用方法

    這篇文章主要介紹了微信小程序webSocket的使用方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • URLSearchParams快速解析URL查詢參數(shù)實(shí)現(xiàn)

    URLSearchParams快速解析URL查詢參數(shù)實(shí)現(xiàn)

    這篇文章主要為大家介紹了URLSearchParams快速解析URL查詢參數(shù)實(shí)現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-06-06
  • js動(dòng)態(tài)生成指定行數(shù)的表格

    js動(dòng)態(tài)生成指定行數(shù)的表格

    下面用js實(shí)現(xiàn)可以生成用戶所需行數(shù)的表格,具體步驟及效果圖如下,感興趣的朋友,可以參考下哈,希望對(duì)大家有所幫助
    2013-07-07
  • JS+CSS實(shí)現(xiàn)電子商務(wù)網(wǎng)站導(dǎo)航模板效果代碼

    JS+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-09
  • VsCode插件整理(小結(jié))

    VsCode插件整理(小結(jié))

    這篇文章主要介紹了VsCode插件整理(小結(jié)),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-09-09
  • js調(diào)用屏幕寬度的簡(jiǎn)單方法

    js調(diào)用屏幕寬度的簡(jiǎn)單方法

    下面小編就為大家?guī)?lái)一篇js調(diào)用屏幕寬度的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-11-11
  • 淺談JavaScript正則表達(dá)式-非捕獲性分組

    淺談JavaScript正則表達(dá)式-非捕獲性分組

    下面小編就為大家?guī)?lái)一篇JavaScript正則表達(dá)式-非捕獲性分組。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-03-03
  • Javascript獲取統(tǒng)一管理的提示語(yǔ)(message)

    Javascript獲取統(tǒng)一管理的提示語(yǔ)(message)

    這篇文章主要介紹了Javascript獲取統(tǒng)一管理的提示語(yǔ)(message)的相關(guān)資料,需要的朋友可以參考下
    2016-02-02

最新評(píng)論