자바 스크립트 테트리스 소스코드 알고리즘 분석

출처: http://codeincomplete.com/posts/javascript-tetris/

목차

블록 그리기

임의 블록 그리기

충돌 검사

블록 그리기 소스 코드

각 모양의 블록을 그려주는 소스 코드입니다.

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.</canvas>

<script>

// 블록 모양 배열 만들기

// 프로그래머 계산기로 2진수와 16진수를 비교해 볼것

var i = { blocks: [0x0F00, 0x2222, 0x00F0, 0x4444], color: 'cyan'   };

var j = { blocks: [0x44C0, 0x8E00, 0x6440, 0x0E20], color: 'blue'   };

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

var dx = 10, dy =10;

//블록의 모양을 선택해주는 함수

function eachblock(type, x, y, dir, fn) {

  var bit, result, row = 0, col = 0, blocks = type.blocks[dir];

  for(bit = 0x8000 ; bit > 0 ; bit = bit >> 1) {

    if (blocks & bit) {

     //블록 1개를 그린다.

      fn(x + col, y + row);

    }

//블록 4개까지 그리기 위해 센다.

    if (++col === 4) {

      col = 0;

// 다음 줄

      ++row;

    }

  }

};

//블록 한개를 그려주는 함수

function drawPiece(ctx, type, x, y, dir) {

  eachblock(type, x, y, dir, function(x, y) {

    drawBlock(ctx, x, y, type.color);

  });

};

// 블록 그리기 함수

function drawBlock(ctx, x, y, color) {

  ctx.fillStyle = color;

  ctx.fillRect(x*dx, y*dy, dx, dy);

  ctx.strokeRect(x*dx, y*dy, dx, dy)

};

// i : 배열, 1, 1: 좌표, 0: 방향순서

drawPiece(ctx, i, 1, 1,  0);

drawPiece(ctx, j, 1, 10, 1);

</script>

실행결과

Your browser does not support the HTML5 canvas tag.

임의로(random) 선택해서 그려주기

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var i = { blocks: [0x0F00, 0x2222, 0x00F0, 0x4444], color: 'cyan'   };

var j = { blocks: [0x44C0, 0x8E00, 0x6440, 0x0E20], color: 'blue'   };

var l = { blocks: [0x4460, 0x0E80, 0xC440, 0x2E00], color: 'orange' };

var o = { blocks: [0xCC00, 0xCC00, 0xCC00, 0xCC00], color: 'yellow' };

var s = { blocks: [0x06C0, 0x8C40, 0x6C00, 0x4620], color: 'green'  };

var t = { blocks: [0x0E40, 0x4C40, 0x4E00, 0x4640], color: 'purple' };

var z = { blocks: [0x0C60, 0x4C80, 0xC600, 0x2640], color: 'red'    };

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

var dx = 10, dy =10;

function eachblock(type, x, y, dir, fn) {

  var bit, result, row = 0, col = 0, blocks = type.blocks[dir];

  for(bit = 0x8000 ; bit > 0 ; bit = bit >> 1) {

    if (blocks & bit) {

      fn(x + col, y + row);

    }

    if (++col === 4) {

      col = 0;

      ++row;

    }

  }

};

function drawPiece(ctx, type, x, y, dir) {

  eachblock(type, x, y, dir, function(x, y) {

    drawBlock(ctx, x, y, type.color);

  });

};

function drawBlock(ctx, x, y, color) {

  ctx.fillStyle = color;

  ctx.fillRect(x*dx, y*dy, dx, dy);

  ctx.strokeRect(x*dx, y*dy, dx, dy)

};

function random(min, max)      { return (min + (Math.random() * (max - min)));            };

var DIR     = { UP: 0, RIGHT: 1, DOWN: 2, LEFT: 3, MIN: 0, MAX: 3 };

var pieces = [];

//임의 번호 만들기

function randomPiece() {

  if (pieces.length == 0)

    pieces = [i,i,i,i,j,j,j,j,l,l,l,l,o,o,o,o,s,s,s,s,t,t,t,t,z,z,z,z];

  var type = pieces.splice(random(0, pieces.length-1), 1)[0]; // remove a single piece

  return { type: type, dir: DIR.UP, x: 2, y: 0 };

};

var next =randomPiece()

drawPiece(ctx, next.type, 10, 10,  next.dir);

</script>

실행결과

Your browser does not support the HTML5 canvas tag. 

 

충돌 검사

function occupied (type, x, y, dir) {

  var result = false
  eachblock(type, x, y, dir, function(x, y) {
    if ((x < 0) || (x >= nx) || (y < 0) || (y >= ny) || getBlock(x,y
      result = true;
  });
  return result;
};