사용자:Bd3076/대규모 실험실/8/plugin
< 사용자:Bd3076 | 대규모 실험실 | 8
참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
/** 2048 plugin
* 제작자: Bd3076
* 용도: 2048 MP에 사용될 플러그인
*/
// 보드판 생성
var board = new Array(new Array(4), new Array(4), new Array(4), new Array(4));
for(var i=0; i<4; i++){
for(var j=0; j<4; j++){
board[i][j] = 0;
}
}
// 점수 생성
var score = 0;
// 캔버스 구문
document.getElementById('gameArea').innerHTML = '<canvas id="cvs" width="800" height="600"></canvas>';
var canvas = document.getElementById('cvs');
var ctx = canvas.getContext('2d');
ctx.textAlign = "center";
ctx.textBaseline = "middle";
// 비어있는 칸이 있는지 판별하는 함수
var emptyExist = function(){
for(var i=0; i<4; i++){
for(var j=0; j<4; j++){
if(!board[i][j]) return true;
}
}
return false;
};
// 비어있는 칸 중 하나를 랜덤으로 고르는 함수
var randomEmpty = function(){
var emptyArray = new Array(0); // 비어 있는 칸들의 목록
for(var i=0; i<4; i++){
for(var j=0; j<4; j++){
if(!board[i][j]) emptyArray.push([i, j]);
}
}
if(emptyArray.length === 0){
console.log("error: no empty slots");
return null;
}
return emptyArray[Math.floor(Math.random() * emptyArray.length)];
};
// 보드판의 상태를 캔버스에 그리는 함수
var drawBoard = function(){
// 숫자에 따른 색
var numberColor = ["#CDC1B4", "#EEE4DA", "#EDE0C8", "#F2B179", "#F59563",
"#F67C5F", "#F6523B", // ~64
"#EDCF72", "#EDCC61", "#EDC850",
"#EDC53F", "#EDC22E", "#EBB914", "#D3A612", // ~8192
"#BC9410", "#BC9410", "#BC9410", "#BC9410"];
// 보드판의 개형 그리기
ctx.fillStyle = "#BBADA0";
ctx.beginPath();
ctx.moveTo(0, 10);
ctx.lineTo(0, 590);
ctx.arc(10, 590, 10, Math.PI/2, Math.PI);
ctx.lineTo(10, 600);
ctx.lineTo(790, 600);
ctx.arc(790, 590, 10, 0, Math.PI/2);
ctx.lineTo(800, 590);
ctx.lineTo(800, 10);
ctx.arc(790, 10, 10, Math.PI*3/2, Math.PI*2);
ctx.lineTo(790, 0);
ctx.lineTo(10, 0);
ctx.arc(10, 10, 10, Math.PI, Math.PI*3/2);
ctx.closePath();
ctx.fill();
// 각 칸 그리기
for(var i=0; i<4; i++){
for(var j=0; j<4; j++){
// 외형 그리기
var startX = 16 + 146*i;
var startY = 16 + 146*j;
ctx.fillStyle = numberColor[board[i][j] === 0 ? 0 : Math.round(Math.log2(board[i][j]))];
ctx.beginPath();
ctx.moveTo(startX, startY+4);
ctx.lineTo(startX, startY+126);
ctx.arc(startX+4, startY+126, 4, Math.PI/2, Math.PI);
ctx.lineTo(startX+4, startY+130);
ctx.lineTo(startX+126, startY+130);
ctx.arc(startX+126, startY+126, 4, 0, Math.PI/2);
ctx.lineTo(startX+130, startY+126);
ctx.lineTo(startX+130, startY+4);
ctx.arc(startX+126, startY+4, 4, Math.PI*3/2, Math.PI*2);
ctx.lineTo(startX+126, startY);
ctx.lineTo(startX+4, startY);
ctx.arc(startX+4, startY+4, 4, Math.PI, Math.PI*3/2);
ctx.closePath();
ctx.fill();
// 텍스트 그리기
if(board[i][j] !== 0){
var numberLength = board[i][j].toString().length;
var fontSize = numberLength == 1 ? 80 : 160 / numberLength;
ctx.fillStyle = "#776E65";
ctx.font = "bold " + fontSize + "px sans-serif";
console.log("bold " + fontSize + "px sans-serif");
ctx.fillText(board[i][j], startX+65, startY+65);
}
}
}
// 점수 그리기
ctx.fillStyle = "#f2ddaf";
ctx.font = "bold 30px sans-serif";
ctx.fillText("YOUR SCORE", 697, 33);
ctx.fillStyle = "#EEE4DA";
ctx.beginPath();
ctx.moveTo(610, 76);
ctx.lineTo(610, 140);
ctx.arc(620, 140, 10, Math.PI/2, Math.PI);
ctx.lineTo(620, 150);
ctx.lineTo(774, 150);
ctx.arc(774, 140, 10, 0, Math.PI/2);
ctx.lineTo(784, 140);
ctx.lineTo(784, 76);
ctx.arc(774, 76, 10, Math.PI*3/2, Math.PI*2);
ctx.lineTo(774, 66);
ctx.lineTo(620, 66);
ctx.arc(620, 76, 10, Math.PI, Math.PI*3/2);
ctx.closePath();
ctx.fill();
ctx.fillStyle = "#776E65";
ctx.font = "bold 60px sans-serif";
ctx.fillText(score, 697, 108);
};
// 키보드 입력을 받아 판을 이동시키고, 새로운 숫자를 만들거나 게임 오버시키는 함수
$("#left").click(function(){ gameRunner({keyCode: 37})});
$("#up").click(function(){ gameRunner({keyCode: 38})});
$("#right").click(function(){ gameRunner({keyCode: 39})});
$("#down").click(function(){ gameRunner({keyCode: 40})});
var gameRunner = function(e){
var ek = e.keyCode;
var cnt;
var moved = 0;
var added = new Array(new Array(4), new Array(4), new Array(4), new Array(4));
for(var i=0; i<4; i++){
for(var j=0; j<4; j++){
added[i][j] = 0;
}
}
console.log(ek);
// 판 움직이기
switch(ek){
case 37:
for(var j=0; j<4; j++){
cnt = 0;
for(var i=0; i<4; i++){
if(i>0 && board[i][j] !== 0 && board[i-1][j] === 0){
board[cnt++][j] = board[i][j];
board[i][j] = 0;
moved = 1;
if(cnt > 1 && board[cnt-1][j] == board[cnt-2][j] && !added[cnt-2][j]){
board[cnt-2][j] *= 2;
board[cnt-1][j] = 0;
cnt--;
added[cnt-1][j] = 1;
score += board[cnt-1][j];
}
}
else if(board[i][j] !== 0){
cnt++;
if(cnt > 1 && board[cnt-1][j] == board[cnt-2][j] && !added[cnt-2][j]){
moved = 1;
board[cnt-2][j] *= 2;
board[cnt-1][j] = 0;
cnt--;
added[cnt-1][j] = 1;
score += board[cnt-1][j];
}
}
}
}
if(!moved) return;
break;
case 38:
for(var i=0; i<4; i++){
cnt = 0;
for(var j=0; j<4; j++){
if(j>0 && board[i][j] !== 0 && board[i][j-1] === 0){
board[i][cnt++] = board[i][j];
board[i][j] = 0;
moved = 1;
if(cnt > 1 && board[i][cnt-1] == board[i][cnt-2] && !added[i][cnt-2]){
board[i][cnt-2] *= 2;
board[i][cnt-1] = 0;
cnt--;
added[i][cnt-1] = 1;
score += board[i][cnt-1];
}
}
else if(board[i][j] !== 0){
cnt++;
if(cnt > 1 && board[i][cnt-1] == board[i][cnt-2] && !added[i][cnt-2]){
moved = 1;
board[i][cnt-2] *= 2;
board[i][cnt-1] = 0;
cnt--;
added[i][cnt-1] = 1;
score += board[i][cnt-1];
}
}
}
}
if(!moved) return;
break;
case 39:
for(var j=0; j<4; j++){
cnt = 0;
for(var i=3; i>=0; i--){
if(i<3 && board[i][j] !== 0 && board[i+1][j] === 0){
board[3-(cnt++)][j] = board[i][j];
board[i][j] = 0;
moved = 1;
if(cnt > 1 && board[3-(cnt-1)][j] == board[3-(cnt-2)][j] && !added[3-(cnt-2)][j]){
board[3-(cnt-2)][j] *= 2;
board[3-(cnt-1)][j] = 0;
cnt--;
added[3-(cnt-1)][j] = 1;
score += board[3-(cnt-1)][j];
}
}
else if(board[i][j] !== 0){
cnt++;
if(cnt > 1 && board[3-(cnt-1)][j] == board[3-(cnt-2)][j] && !added[3-(cnt-2)][j]){
moved = 1;
board[3-(cnt-2)][j] *= 2;
board[3-(cnt-1)][j] = 0;
cnt--;
added[3-(cnt-1)][j] = 1;
score += board[3-(cnt-1)][j];
}
}
}
}
if(!moved) return;
break;
case 40:
for(var i=0; i<4; i++){
cnt = 0;
for(var j=3; j>=0; j--){
if(j<3 && board[i][j] !== 0 && board[i][j+1] === 0){
board[i][3-(cnt++)] = board[i][j];
board[i][j] = 0;
moved = 1;
if(cnt > 1 && board[i][3-(cnt-1)] == board[i][3-(cnt-2)] && !added[i][3-(cnt-2)]){
board[i][3-(cnt-2)] *= 2;
board[i][3-(cnt-1)] = 0;
cnt--;
added[i][3-(cnt-1)] = 1;
score += board[i][3-(cnt-1)];
}
}
else if(board[i][j] !== 0){
cnt++;
if(cnt > 1 && board[i][3-(cnt-1)] == board[i][3-(cnt-2)] && !added[i][3-(cnt-2)]){
moved = 1;
board[i][3-(cnt-2)] *= 2;
board[i][3-(cnt-1)] = 0;
cnt--;
added[i][3-(cnt-1)] = 1;
score += board[i][3-(cnt-1)];
}
}
}
}
if(!moved) return;
break;
default:
return;
}
// 숫자 추가
var aNum = (Math.random() < 0.875) ? 2 : 4;
var re = randomEmpty();
board[re[0]][re[1]] = aNum;
drawBoard();
// 게임 오버 감지
for(var i=0; i<4; i++){
for(var j=0; j<4; j++){
if(board[i][j] === 0) return;
}
}
for(var i=0; i<4; i++){
for(var j=0; j<3; j++){
if(board[i][j] == board[i][j+1]) return;
}
}
for(var i=0; i<3; i++){
for(var j=0; j<4; j++){
if(board[i][j] == board[i+1][j]) return;
}
}
window.onkeydown = undefined;
setTimeout(gameOver, 2000);
};
function gameOver(){
ctx.fillStyle = "white";
ctx.fillRect(0, 0, 600, 600);
ctx.fillStyle = "black";
ctx.font = "bold 100px sans-serif";
ctx.fillText("Game Over", 300, 300);
ctx.font = "bold 20px sans-serif";
ctx.fillText("다시 시작하려면 새로고침하세요", 300, 450);
return;
}
// 초기 보드판 상태: 2 또는 4가 총 2개 나오고, 4가 나올 확률은 각각 1/8
var sNum1 = (Math.random() < 0.875) ? 2 : 4;
var sNum2 = (Math.random() < 0.875) ? 2 : 4;
var re1 = randomEmpty();
board[re1[0]][re1[1]] = sNum1;
var re2 = randomEmpty();
board[re2[0]][re2[1]] = sNum2;
// 판 그리기
drawBoard();
window.onkeydown = gameRunner;