Skip to content

Commit

Permalink
Closed #4 - add keep & load block
Browse files Browse the repository at this point in the history
  • Loading branch information
@fpdjsns
fpdjsns committed Sep 9, 2019
1 parent 4339285 commit 0c73948
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 39 deletions.
13 changes: 11 additions & 2 deletions Tetris/js/keyEvent.js
View file
Expand Up @@ -4,7 +4,8 @@ const PC_BUTTON = {
UP: 38,
RIGHT: 39,
DOWN: 40,
SPACEBAR: 32
SPACEBAR: 32,
CTRL: 17
}

// MOBILE인 경우 상하좌우, 스페이스 keyCode
Expand All @@ -13,7 +14,8 @@ const MOBILE_BUTTON = {
UP: -1,
RIGHT: -1,
DOWN: -1,
SPACEBAR: -1
SPACEBAR: -1,
CTRL: -1
}

// mobile인지
Expand Down Expand Up @@ -81,6 +83,10 @@ var spacebarKeyDown = function() {
drawBelow(nowBlock);
};

const keepOrLoadBlockKey = function() {
keepOrLoadBlock();
};

var leftKeyUp = function() {
arrow_left.removeClass("click");
};
Expand Down Expand Up @@ -115,6 +121,9 @@ $(document).keydown(function(e) {
case keyCode.SPACEBAR:
spacebarKeyDown();
break;
case keyCode.CTRL:
keepOrLoadBlockKey();
break;
default:
break;
}
Expand Down
128 changes: 91 additions & 37 deletions Tetris/js/main.js
View file
@@ -1,69 +1,73 @@
var blockType = [
{
name: "O",
const blockType = new Map([
['O', {
name: 'O',
color: "skyblue",
shape: [[[0, 0, 0, 0], [0, 1, 1, 0], [0, 1, 1, 0], [0, 0, 0, 0]]]
},
{
name: "S",
}],
['S', {
name: 'S',
color: "gray",
shape: [
[[0, 0, 0, 0], [0, 0, 1, 1], [0, 1, 1, 0], [0, 0, 0, 0]],
[[0, 0, 1, 0], [0, 0, 1, 1], [0, 0, 0, 1], [0, 0, 0, 0]]
]
},
{
name: "Z",
}],
['Z', {
name: 'Z',
color: "purple",
shape: [
[[0, 0, 0, 0], [0, 1, 1, 0], [0, 0, 1, 1], [0, 0, 0, 0]],
[[0, 0, 0, 1], [0, 0, 1, 1], [0, 0, 1, 0], [0, 0, 0, 0]]
]
},
{
name: "I",
}],
['I', {
name: 'I',
color: "darkred",
shape: [
[[0, 0, 0, 0], [1, 1, 1, 1], [0, 0, 0, 0], [0, 0, 0, 0]],
[[0, 0, 1, 0], [0, 0, 1, 0], [0, 0, 1, 0], [0, 0, 1, 0]]
]
},
{
name: "T",
}],
['T', {
name: 'T',
color: "#FFD300",
shape: [
[[0, 0, 0, 0], [0, 1, 1, 1], [0, 0, 1, 0], [0, 0, 0, 0]],
[[0, 0, 1, 0], [0, 0, 1, 1], [0, 0, 1, 0], [0, 0, 0, 0]],
[[0, 0, 1, 0], [0, 1, 1, 1], [0, 0, 0, 0], [0, 0, 0, 0]],
[[0, 0, 1, 0], [0, 1, 1, 0], [0, 0, 1, 0], [0, 0, 0, 0]]
]
},
{
name: "L",
}],
['L', {
name: 'L',
color: "green",
shape: [
[[0, 0, 0, 0], [0, 1, 1, 1], [0, 1, 0, 0], [0, 0, 0, 0]],
[[0, 0, 1, 0], [0, 0, 1, 0], [0, 0, 1, 1], [0, 0, 0, 0]],
[[0, 0, 0, 1], [0, 1, 1, 1], [0, 0, 0, 0], [0, 0, 0, 0]],
[[0, 1, 1, 0], [0, 0, 1, 0], [0, 0, 1, 0], [0, 0, 0, 0]]
]
},
{
name: "J",
}],
['J', {
name: 'J',
color: "blue",
shape: [
[[0, 0, 0, 0], [0, 1, 1, 1], [0, 0, 0, 1], [0, 0, 0, 0]],
[[0, 0, 1, 1], [0, 0, 1, 0], [0, 0, 1, 0], [0, 0, 0, 0]],
[[0, 1, 0, 0], [0, 1, 1, 1], [0, 0, 0, 0], [0, 0, 0, 0]],
[[0, 0, 1, 0], [0, 0, 1, 0], [0, 1, 1, 0], [0, 0, 0, 0]]
]
}
];
}]
]);

var blockTypeArray = Array.from(blockType.keys());

var nowBlock; // Block
var nextBlockType; // blockType
var keepBlockType; // blockType

var nowBlock;
var canvas = document.getElementById("game");
var canvasNextBlock = document.getElementById("nextBlock");
var nextBlockType = Math.floor(Math.random() * blockType.length);

const SMALL_BLOCK_NUM = 4;
const SMALL_BLOCK_SIZE = 20;
Expand Down Expand Up @@ -114,6 +118,7 @@ if (canvas.getContext) {

$(window).load(function() {
console.log("load");
setNextRandomBlockType();
drawWhiteLineOnBackground();
drawNewBlock();
});
Expand Down Expand Up @@ -148,12 +153,12 @@ var drawNewBlock = function() {
gameEnd();
}
nowBlock.drawDown(BEGIN_X, BEGIN_Y);
nextBlockType = Math.floor(Math.random() * blockType.length);
setNextRandomBlockType();
drawNextBlock();
};

var drawNextBlock = function() {
var nextBlock = blockType[nextBlockType];
var nextBlock = nextBlockType;
var x = 0;
var y = 0;
for (var i = 0; i < SMALL_BLOCK_NUM; i++) {
Expand Down Expand Up @@ -212,8 +217,8 @@ var eraseOneBlock = function(x, y) {
);
};

var drawOneBlock = function(x, y, colorType) {
ctx.fillStyle = blockType[colorType].color;
var drawOneBlock = function(x, y, color) {
ctx.fillStyle = color;
ctx.fillRect(
x * SMALL_BLOCK_SIZE + BLOCK_GAP,
y * SMALL_BLOCK_SIZE + BLOCK_GAP,
Expand All @@ -233,13 +238,14 @@ var rearrange = function() {
eraseOneBlock(j, i);
deleteBlockNum++;
} else {
var blockColor = gameScreenArray[i][j];
var key = gameScreenArray[i][j];
eraseOneBlock(j, i);
gameScreenArray[i][j] = -1;
drawOneBlock(j, i + deleteBlockNum, blockColor);
gameScreenArray[i + deleteBlockNum][j] = blockColor;
drawOneBlock(j, i + deleteBlockNum, getBlockTypeByKey(key).color);
gameScreenArray[i + deleteBlockNum][j] = key;
}
}

}
};

Expand Down Expand Up @@ -269,19 +275,67 @@ var setBlockInGameScreen = function(block) {
for (var i = 0; i < SMALL_BLOCK_NUM; i++) {
for (var j = 0; j < SMALL_BLOCK_NUM; j++) {
if (block.shape[j][i] == 1) {
gameScreenArray[block.y + j][block.x + i] = block.typeIndex;
gameScreenArray[block.y + j][block.x + i] = block.type.name;
}
}
}
};

function Block(blockTypeIndex, x, y) {
this.typeIndex = blockTypeIndex;
this.type = blockType[this.typeIndex];
const keepOrLoadBlock = function() {
// #1
if(nowBlock.isLoaded) return false;

nowBlock.eraseBeforeBlock();
const willKeepType = nowBlock.type;
// #2
if(keepBlockType) {
nowBlock = new Block(keepBlockType, BEGIN_X, BEGIN_Y);
nowBlock.isLoaded = true;
}
else { // #3
nowBlock = new Block(nextBlockType, BEGIN_X, BEGIN_Y);
setNextRandomBlockType();
}

nowBlock.drawDown(BEGIN_X, BEGIN_Y);
keepBlockType = willKeepType;
if (nowBlock.isBottom(BEGIN_X, BEGIN_Y)) {
gameEnd();
}
drawNextBlock();

return true;
}

let getBlockTypeByKey = function(blockKey) {
return blockType.get(blockKey);
}

let getBlockTypeByIndex = function(blockIndex) {
return getBlockTypeByKey(blockTypeArray[blockIndex]);
}

let getRandomBlockType = function() {
return getBlockTypeByIndex(Math.floor(Math.random() * blockType.size));
}

let setNextRandomBlockType = function() {
nextBlockType = getRandomBlockType();
}

/**
*
* @param {*} blockType blockType
* @param {*} x block의 x 좌표
* @param {*} y block의 y 좌표
*/
function Block(blockType, x, y) {
this.type = blockType;
this.shapeIndex = 0;
this.shape = this.type.shape[this.shapeIndex];
this.x = x;
this.y = y;
this.isLoaded = false;

this.drawLeftOrRight = function(nx, ny) {
if (
Expand Down Expand Up @@ -329,7 +383,7 @@ function Block(blockTypeIndex, x, y) {
for (var i = 0; i < SMALL_BLOCK_NUM; i++) {
for (var j = 0; j < SMALL_BLOCK_NUM; j++) {
if (this.shape[i][j] == 1) {
drawOneBlock(x + j, y + i, this.typeIndex);
drawOneBlock(x + j, y + i, this.type);
}
}
}
Expand Down

0 comments on commit 0c73948

Please sign in to comment.