2048 게임 예시의 자바스크립트 구현_기본지식

네이티브 자바스크립트 코드로 작성된 2048 게임. 구글 크롬에서 실행하는 것을 권장합니다.

2048.html

코드 복사 코드는 다음과 같습니다. 2048 탭하여 시작하세요 :-)

2048.css

코드 복사 코드는 다음과 같습니다. @charset " utf-8 "; #div2048 { 너비: 500px; 높이: 500px; 배경색: #b8af9e; 여백: 0 자동; 위치: 상대; } #start { 너비: 500px; 높이: 500px; 줄 높이: 500px; 디스플레이: 블록; 텍스트 정렬: 센터; 글꼴 크기: 30px; 배경: #f2b179; 색상: #FFFFFF; } #div2048 div.tile { 여백: 20px 0px 0px 20px ; 너비: 100px; 높이: 40px; 패딩: 30px 0; 글꼴 크기: 40px; 줄 높이: 40px; 텍스트 정렬: 센터; 부동: 왼쪽; } #div2048 div.tile0{ 배경: #ccc0b2; } #div2048 div.tile2 { 색상: # 7c736a; 배경: #eee4da; } #div2048 div.tile4 { 색상: #7c736a; 배경: #ece0c8; } # div2048 div.tile8 { 색상: #fff7eb; 배경: #f2b179; } #div2048 div.tile16 { 색상:#fff7eb; 배경:#f59563; } #div2048 div.tile32 { 색상:#fff7eb; 배경:#f57c5f; } #div2048 div.tile64 { 색상:#fff7eb; 배경:#f65d3b; } #div2048 div.tile128 { 색상:#fff7eb; 배경:# edce71; } #div2048 div.tile256 { 색상:#fff7eb; 배경:#edcc61; } #div2048 div.tile512 { 색상:#fff7eb; 배경:#ecc850; } #div2048 div.tile1024 { 색상:#fff7eb; 배경:#edc53f; } #div2048 div.tile2048 { 색상:#fff7eb; 배경:#eec22e; }

2048.js

코드 복사 코드는 다음과 같습니다. function game2048(container) { this.container = container; this.tiles = new Array(16); } game2048.prototype = { init: function(){ for(var i = 0, len = this.tiles.length; i var Tile = this .newTile(0); tile.setAttribute('index', i); this.container.appendChild(tile); this.tiles[i] = 타일; } this.randomTile(); this.randomTile(); }, newTile: function(val){ var Tile = document.createElement('div'); this .setTileVal(tile, val) return Tile; }, setTileVal: function(tile, val){ tile.className = 'tile Tile' val; tile.setAttribute( 'val', val); tile.innerHTML = val > 0? val : ''; }, randomTile: function(){ var zeroTiles = []; for(var i = 0, len = this.tiles.length; i if(this.tiles[i].getAttribute('val') == 0){ zeroTiles.push(this.tiles[i]); } } var rTile = zeroTiles[Math.floor(Math.random() * zeroTiles.length)]; this.setTileVal(rTile, Math.random() }, 이동:기능(방향){ var j; 스위치(방향){ case 'W': for(var i = 4, len = this.tiles. length; i j = i; while(j >= 4){ this.merge(this.tiles[j - 4], this.tiles[j ]); j -= 4; } } break; case 'S': for(var i = 11; i >= 0; i- -){ j = i; while(j this.merge(this.tiles[j 4], this.tiles[j]); j = 4; } } break; case 'A': for(var i = 1, len = this.tiles.length; i j = i; while(j % 4 != 0){ this.merge(this.tiles[j - 1], this.tiles[j]); j -= 1 ; } } break; case 'D': for(var i = 14; 나는 >= 0; i--){ j = i; while(j % 4 != 3){ this.merge(this.tiles[j 1], this.tiles[j]); j = 1; } } break; } this.randomTile(); }, 병합: 함수(prevTile, currTile){ var prevVal = prevTile.getAttribute('val'); var currVal = currTile.getAttribute('val'); if(currVal != 0){ if(prevVal == 0){ this.setTileVal(prevTile, currVal); this.setTileVal(currTile, 0); } else if(prevVal == currVal){ this.setTileVal(prevTile, prevVal * 2); this.setTileVal(currTile, 0); } } }, equal: function(tile1, Tile2){ return Tile1.getAttribute(' val') == Tile2.getAttribute('val'); }, max: function(){ for(var i = 0, len = this.tiles.length; i if(this.tiles[i].getAttribute('val') == 2048){ return true; } } }, over : function(){ for(var i = 0, len = this.tiles.length; i if(this.tiles[i].getAttribute('val') = = 0){ false 반환; } if(i % 4 != 3){ if(this.equal(this.tiles[i], this.tiles[i 1] )){ false를 반환합니다. } } if(i if(this.equal(this.tiles[i], this.tiles[i 4])){ return false; } } } true를 반환합니다. }, clean: function(){ for(var i = 0, len = this.tiles.length; i this.container.removeChild(this.tiles[i ]); } this.tiles = 새 배열(16); } }

var 게임, startBtn;

window.onload = function(){ var 컨테이너 = document.getElementById('div2048'); startBtn = document.getElementById('start'); startBtn.onclick = function() { this.style.display = 'none'; 게임 = 게임 || new game2048(컨테이너); game.init(); } }