지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 네이티브 JavaScript로 Lianliankan 게임 구현

네이티브 JavaScript로 Lianliankan 게임 구현

高洛峰
풀어 주다： 2016-11-28 13:32:03
원래의
1229명이 탐색했습니다.

首先看一下html的布局方式在index.html文件中：

 

[html]  

 

 

     

         

        连连看  

       

   

 

     

       

 

           

 

               

 

                   

 

                   

 

               

 

               

 

               

 

                    分  数  

               

 

               

 

                    0  

               

 

               

 

                    时  间  

               

 

               

 

                    0  

               

 

               

 

                     

                     

               

                 

           

 

       

 

         

         

         

     

 

 

css文件夹下적index.css文件如下：

 

[css] 

본문 {  

  

    글꼴 크기: 16px;  

    글꼴 두께 : 굵게;  

    색상 : 회색;  

  

}  

  

#whole {  

  

    테두리: 1px double #999999;  

    테두리 너비 : 5px;  

    너비: 800px;  

    높이: 505px;  

    위치: 상대적;  

  

}  

  

#gamePanel {  

      

    여백: 1px 1px 1px 1px;  

    너비: 602px;  

    높이 : 502px;  

    배경 : url(../img/Background.gif) 반복;  

    위치: 절대;  

  

}  

  

#pieces {  

  

    margin-top : 35px;  

    테두리: 1px 실선 #999999;  

    너비: 546px;  

    높이: 434px;  

    위치: 상대적;  

  

}  

  

#pieces .piece {  

  

    너비: 32px;  

    높이 : 36px;  

    위치: 상대적;  

    커서 : 포인터;  

    부동 : 왼쪽;  

  

}  

  

#pieces .track {  

  

    너비: 32px;  

    높이 : 36px;  

    위치: 상대적;  

    부동 : 왼쪽;  

  

}  

  

#pieces .track2 {  

  

    너비: 32px;  

    높이 : 36px;  

    위치: 상대적;  

    부동 : 왼쪽;  

    배경 : 빨간색;  

  

}  

  

#gameLogo {  

      

    margin-top : 60px;  

    테두리: 1px 실선 #999999;  

    왼쪽: 607px;  

    너비: 187px;  

    높이 : 73px;  

    배경 : url(../img/logo.gif);  

    위치: 절대;  

  

}  

  

#scorePanel {  

  

    테두리: 1px 단색 #999999;  

    왼쪽: 607px;  

    상단: 200px;  

    너비: 187px;  

    높이: 30px;  

    위치: 절대;  

  

}  

  

#score {  

  

    테두리: 1px 단색 #999999;  

    왼쪽: 607px;  

    상단: 240px;  

    너비: 187px;  

    높이: 30px;  

    위치: 절대;  

  

}  

  

#timePanel {  

  

    테두리: 1px 단색 #999999;  

    왼쪽: 607px;  

    상단: 300px;  

    너비: 187px;  

    높이: 30px;  

    위치: 절대;  

  

}  

  

#time {  

  

    테두리: 1px 단색 #999999;  

    왼쪽: 607px;  

    상단: 340px;  

    너비: 187px;  

    높이: 30px;  

    위치: 절대;  

  

}  

  

#button {  

  

    테두리: 1px 단색 #999999;  

    왼쪽: 607px;  

    상단: 400px;  

    너비: 187px;  

높이: 30px;

위치: 절대;

>

JS 핵심 부분 구현 코드를 살펴보겠습니다. .js 부분은 game.js, map.js, Piece.js의 세 가지 소스 파일로 나누어집니다. 각 소스 파일은 이 게임에서

을 사용하는 하나의 클래스에 해당합니다. 게임 클래스를 통해 지도와 그림 조각 개체를 조작하려면:

game.js 코드는 다음과 같습니다.

[javascript]

// 게임 제어 클래스

var Game = {

// 게임 배경

gamePanel: null,

🎜>

시간: 0,

// 이미지 맵

PieceMap: null,

// 사진 목록

PieceList : [],

// 사진 목록에 사진이 포함되어 있지 않습니다.

PieceImgList : [],

// 이미지 난수 목록

randomList: [],

// 트랙 목록

trackList: [] ,

// 게임 시작 여부

isGameBigin: false,

: false,

// 게임 초기화 여부

isGameReset: false,

// 그림 요소가 첫 번째 클릭인지 여부

isFirstClick : true,

// 게임 시작

start : function() {

document.getElementById("start").disabled = true;

document.getElementById("reset").disabled = false;

if (this.isGameReset) {

                                     > 🎜> 반품;

                                                                                      

} else {

                                                          >

},

재설정 : function() {

},

document.getElementById("start").disabled = false;

document.getElementById("reset").disabled = true;

this.clear(); >

this.initPieces(); 🎜 >

this.initImgPieces();

this.time = 0;

document.getElementById("time").innerHTML = 0;

this.score = 0;

document.getElementById("score").innerHTML = 0

this.isGameReset = true ;

this.isGameBegin = true;

},

초기화: function() {

if (this.isGameBegin) {

                                                                         🎜>

 

_this = this;

this.time = 0

this.startTime() >

this. = document.getElementById("pieces");

this.initPieces();

this.isGameBegin = true; 🎜>

},

 

// 무작위로 생성된 150개의 그림을 캔버스에 추가

initPieces : function() {

        var _this = this;                                                

                            ~ >         

var x = (i%17)

var y = Math.floor(i/17);

this.pieceM ap.put(x+", "+y, 조각) " 🎜 >                                                                 조각.트랙 = 문서 .createElement ("div"); > ~ > (var i = 0에 대해) ; 나는 < this.pieceImgList.length; 나는 ++) {

this.pieceImgList[i].img.src = "img/pieces/"+this.randomList[i]+".gif"

this.pieceImgList[i].setImgSrc(this.pieceImgList [i].img.src);                                                                    mgList[i].onClick()

<

/ / 쌍으로 나타나는 난수 시퀀스를 가져옵니다.

for (var i = 0; i < 75; i ++) {

var random = PARSEINT ( math.random ()*22*10000, 10);

var number = random%23 )

this.randomList.push(number); ,

// 무작위 테이블 스크램블

messRandomList : function() {

i ++) {

var random =parseInt(Math.random()*15*10000, 10);

var temp;

temp = this.randomList[i]; >

this.randomList[i] = this.randomList[번호];

this.randomList[번호] = temp;

},

// 타이밍 시작

startTime: function() {

                                  if (this.is GameOver) {

                       > document.getElementById("time").innerHTML = this.time;

this.isGameBegin = true; startTime();}, 1000)

                  

// 지우기

clear : function() {

for (var i = 0; i < this.pieceList.length; i ++) {

this.gamePanel.removeChild(this.pieceList[i].dom)

}

This .pieceList = []

this.randomList = [];

this.pieceImgList = [];

this.isGameOver = true;

this.isGameBegin =

} >

}

🎜> window.onload = function() {

document.getElementById("start").disabled = false

document.getElementById("reset").disabled = true;

}

// 게임 시작 입장

function Start() {

Game.start()

}

// 게임 재설정 항목

function Reset() {

Game.reset()

}

맞춤형 js 버전 매핑 구조 map.js 소스 파일은 다음과 같습니다.

[javascript ]

var Map = function(){

this.data = [];

}

Map.prototype = {

put: function(key, value) {

this.data[ 키] = 값;

},

get: function(key) {

];

                                                                            .length == 0; 🎜>> Piece.js 클래스의 소스 파일은 다음과 같습니다.

[javascript]

var Piece = function(game) {

/ / 게임 객체

this.game = game

// 엣지 요소인지

this.isEdge = false;

// edge 요소 옆인지 여부

this.atEdge = false

// 이미지 dom 요소

this .dom = null;

// 이미지 요소

this.img = null;

// 이미지 요소 소스

this.src = null

// 추적 요소

this.track = null; >

// 트랙으로 사용할 수 있나요?

this.isTracked = false;

🎜>

                                                        > this.y = 0;

// 이미지 플래시 ID

this.flashId = null

// 이미지 클릭 여부

this.onClicked = false;

// 플래시 횟수

this.flashCount = 0

this.init()

}

Piece.prototype = {

/ / 초기화

init : function() {

this.dom = document.createElement("div")

this .dom.className = "조각";                                                       },

                                  >                                         

this.dom.appendChild(this.img);

},

// 알고리즘 만족 후 트랙 요소 초기화

initTrack : function() {

if (this.flashId != null) {

                                           

this.stopFlash( );

} }

//alert("initTrack middle")

if (this.track != null) {

                                                                     🎜> This.onClicked = false; ~ 이 .dom.appendChild(this.track);

},

},

// 비트 이미지 설정 소스

setImgSrc: function(src) {

this.src = src;

},

// 그림의 2차원 배열 위치 설정

setPosition: function(x, y) {

this.x = x

this.y = y;

},

//이미지에 대해 선택한 요소 설정

setSelected : function() {

>                                                                      this.dom.appendChild(this.selected );

this.img.src = "img/pieces/flash.gif"

} else {

                                                                          >

                             

// 엣지 요소인지 여부 설정

setEdge : function(isEdge) {

                                                                                                                        🎜>

// 설정 가장자리 요소 옆에 있는지 여부

setAtEdge: function(atEdge) {

this.atEdge = atEdge;

},

// 플래싱 시작

flash : function() {

var _this = this; >

        this.flashId = setInterval(function() {_this.setSelected();}, 500);  

  

    },  

      

    // 停止闪烁  

    stopFlash : function() {  

     

       clearInterval(this.flashId);  

          

        if (this.flashCount % 2 == 1) {  

              

            //if (this.selected != null)  

              

            //  this.dom.removeChild(this.selected);  

              

            //}  

              

            this.img.src = this.src;  

            //this.dom.appendChild(this.img);             

          

        }  

              

    },  

          

    // 对象被选择的内部函数  

    onClick : function() {  

          

        if (this.onClicked) {  

              

            return;  

          

        }  

      

        var _this = this;  

          

        this.img.onclick = function() {  

          

            if (!document.getElementById("start").disabled ) {  

              

                반품;  

              

            }  

          

            if (_this.onClicked)  

             

                반품;  

              

            }  

  

            if (_this.checkPiece()) {  

  

                반품;  

              

            }  

              

            _this.flash();  

            _this.onClicked = true;  

          

        };  

      

    },  

      

    // 检查是否有被点击的图文  

    checkPiece : 함수 () {  

          

        for (var i = 0; i < this.game.pieceList.length; i ++) {  

              

            if (this.game. PieceList[i].onClicked && !this.game.pieceList[i].equal(this)) {  

                  

                if (this.game.pieceList[i].equalImage(this) ) {  

                      

                    //alert("동일한 이미지");  

                    this.searchTrack(this.game.pieceList[i]);  

                  

                } else {  

                      

                   this.game.pieceList[i].stopFlash();  

                    this.game.pieceList[i].onClicked = false;  

                    this.onClicked = false;  

                      

                    false를 반환합니다.  

                  

                }  

                  

                true를 반환합니다.  

              

            } else {  

              

                계속;  

              

            }  

          

        }  

          

        false를 반환합니다.  

      

    },    

      

    // 是否为同一个对象  

    같음 : 함수(조각) {  

      

        return (this.x == 조각.x && this.y == 조각.y);  

      

    },  

      

    // 是否为同一个图文  

    equalImage : function(piece)  

  

        return this.src == Piece.src;  

      

    },  

      

    // 搜寻路径  

    searchTrack : function(piece)  

         

        if (this.isNear(조각)) {  

                  

            this.linkTrack(조각);  

              

            반품;  

        }         

          

        if (this.isReach(조각) || this.isReach2(조각)) {  

                 

            이 .linkTrack(조각);  

              

            반품;  

        }         

                  

    },  

      

    // 是否상邻  

    isNear : 기능(조각) {  

      

        var a = (Math.abs(piece.x - this.x) == 1) && (piece.y == this.y)  

|| (Math.abs(piece.y - this.y) == 1) && (piece.x == this.x);  

      

        return a;  

    },  

      

    // 直线  

    isStraightReach : 함수(조각) {  

        //alert("isStraightReach" ) ;  

        if (this.isNear(piece)) {  

              

            true를 반환합니다.  

          

        }  

          

        var a = false;  

        var b = false;  

  

        // 沿y轴方向搜索  

        if (this.x == Piece.x) {  

            //alert("!! !!!!!!!!!!!");  

            for (var i = this.min(this.y, Piece.y) + 1; i < this.max(this.y, Piece.y); i ++) {  

                //alert("this.x == 조각.x: " + 조각.x + "," + i);  

                if (this.game.pieceMap.get(piece.x + "," + i).isPass()) {  

                  

                    a = true;  

                      

                    this.game.trackList.push(this.game.pieceMap.get(piece.x + "," + i));  

                      

                    계속;  

                } else {  

                  

                    a = false;  

                    this.game.trackList = [];  

                      

                    return a;     

                }  

              

            }  

                          

        }  

          

        // 沿x轴方向搜索  

        if (this.y == Piece.y) {  

            //alert("!!!!!!!!!!!");  

            for (var i = this.min(this.x, Piece.x) + 1; i < this.max(this.x, Piece.x); i ++) {  

                //alert("this.y == 조각.y: " + i + "," + 조각.y);  

                if (this.game.pieceMap.get(i + "," + Piece.y).isPass()) {  

                    

                    b = 사실;  

                    this.game.trackList.push(this.game.pieceMap.get(i + "," + Piece.y));  

                      

                    계속;  

                } else {  

                  

                    b = 거짓  

                   this.game.trackList = [];  

                      

                    return b;  

                }  

              

            }  

              

       }  

  

        || 비;  

    },  

  

      

    // 拐一次弯搜索  

    isReach1 : function(piece) {  

        //alert("isReach1");  

        var Corner_1 = this.game.pieceMap.get(this.x + "," + Piece.y);  

        var Corner_2 = this.game.pieceMap.get(piece.x + "," + this.y);  

                          

        var _this = this;  

  

          

        if ((_this.isStraightReach(corner_1))  

            && (corner_1.isStraightReach(조각))  

            && Corner_1.isPass()) {  

              

                //alert("corner_1: " + this.x + "," + Piece.y);  

                this.game.trackList.push(corner_1);  

              

                true를 반환합니다.  

        }  

      

        if ((_this.isStraightReach(corner_2))  

            && (corner_2.isStraightReach(조각)) 

&& Corner_2.isPass()) {  

                //alert("corner_2: " + 조각.x + "," + this.y);  

                this.game.trackList.push(corner_2);  

              

            true를 반환합니다.  

        }  

  

        false를 반환합니다.  

    },  

      

    // 直接或拐一次弯搜索  

    isReach : 함수(조각) {  

         

        var a = this.isStraightReach(piece);  

          

        var b = this.isReach1(piece);  

                  

        || 비;  

    },  

      

    // 拐两次弯搜索  

    isReach2 : function(piece) {  

             

        // 沿x轴正向搜索  

        for (var i = this.x + 1; i < 17; i ++) {  

              

           만약 (!this.game.pieceMap.get(i + "," + this.y).isPass()) {  

                  

                this.game.trackList = [];  

                  

                휴식;  

                  

            } else if (this.game.pieceMap.get(i + "," + this.y).isReach(piece)  

                && this.game. PieceMap.get(i + "," + this.y).isPass()) {  

                  

                this.game.trackList.push(this.game.pieceMap.get(i + "," + this.y));  

                      

                true를 반환합니다.  

            }     

          

        }  

          

        // 沿x轴搜索  

        for (var i = this .x - 1; i >= 0; i --) {  

              

            if (!this.game.pieceMap.get(i + "," + this.y) isPass()) {  

              

                this.game.trackList = [];  

                  

                휴식;  

                  

            } else if (this.game.pieceMap.get(i + "," + this.y).isReach(piece)  

                && this.game. PieceMap.get(i + "," + this.y).isPass()) {  

              

                this.game.trackList.push(this.game.pieceMap.get(i + "," + this.y));  

                      

                true를 반환합니다.  

            }  

          

        }  

          

        // 沿y轴搜索  

        for (var i = this.y - 1; i >= 0; i --) {  

             

            if (!this.game.pieceMap.get(this.x + "," + i).isPass()) {  

                  

                this.game.trackList = [];  

                  

                휴식;  

                  

            } else if (this.game.pieceMap.get(this.x + "," + i).isReach(piece)  

                && this.game. PieceMap.get(this.x + "," + i).isPass()) {  

                  

                this.game.trackList.push(this.game.pieceMap.get(this. x + "," + i));  

                      

                true를 반환합니다.  

            }  

          

        }  

  

        // 沿y轴正向搜索  

        for (var i = this.y + 1; i < 12; i ++) {  

  

            if (!this.x + "," + i) .isPass()) {  

                  

                this.game.trackList = [];  

                  

                휴식;  

            } else if (this.game.pieceMap.get(this.x + "," + i).isReach(piece)  

                && this.game.pieceMap.get(this. x + "," + i).isPass()) {  

                  

                this.game.trackList.push(this.game.pieceMap.get(this.x + "," + 나));  

                      

                true를 반환합니다.  

            }  

          

        }  

          

        false를 반환합니다.  

    },  

      

    // 路径连接  

    linkTrack : 기능(조각) {  

      

       이 .initTrack();  

        조각.initTrack();  

        this.changeScore();  

        this.showTrack(piece);  

              

    },  

      

    // 显示足迹  

    showTrack : 기능(조각) {  

      

        this.game.trackList.push(piece);  

        this.track.className = "track2";  

          

        for (var i = 0; i < this.game.trackList.length; i ++) {  

            //alert(i);  

            this.game.trackList[i].track.className = "track2";  

          

        }  

          

        var _this = this;  

        setTimeout(function() {_this.hideTrack()}, 500);  

      

    },  

      

    // 隐匿足迹  

    hideTrack : function()  

      

        for (var i = 0; i < this.game.trackList.length; i ++) {  

              

            this.game.trackList[i].track.className = "트랙";  

              

        }  

              

        this.game.trackList = [];  

        this.track.className = "트랙";  

        this.isTracked = true;  

          

    },  

      

    // 分数增加  

   changeScore : function() {  

              

        this.game.score += 100;  

        document.getElementById("score").innerHTML = this.game.score;         

      

    },  

      

    min : 함수(a, b) {  

      

        if (a < b) {  

          

            반환 a;  

          

        } else {  

          

            return b;  


관련 라벨：
javascript
원천：php.cn
이전 기사：JavaScript를 사용하여 캔버스 이미지의 해상도(DPI) 수정 다음 기사：JavaScript에서 for..in 루프의 함정
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿