asdf/TETRIS.html at main · HTML5-CSS-JS/asdf · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tetris OKLCH</title>
<style>
body{margin:0;background:oklch(0.1 0 0);color:oklch(0.95 0 0);text-align:center}
canvas{background:oklch(0.05 0 0);display:block;margin:auto}
button{
  margin:5px;padding:10px;
  background:oklch(0.2 0 0);
  color:oklch(0.95 0 0);
  border:1px solid oklch(0.4 0 0);
}
</style>
</head>
<body>
<h3>점수: <span id="score">0</span> | 레벨: <span id="level">1</span></h3>
<canvas id="t" width="240" height="400"></canvas>
<div>
  <button onclick="move(-1)">◀</button>
  <button onclick="drop()">▼</button>
  <button onclick="hardDrop()">⏬</button>
  <button onclick="move(1)">▶</button>
  <button onclick="rotate()">⟳</button>
</div>
<script>
var c=document.getElementById("t"),x=c.getContext("2d");
x.scale(20,20);
var a=[...Array(20)].map(()=>Array(12).fill(0)),score=0,level=1,speed=500;
var pieces={
  'T':[[0,1,0],[1,1,1]],
  'O':[[2,2],[2,2]],
  'L':[[0,3,0],[0,3,0],[0,3,3]],
  'I':[[4,4,4,4]],
  'S':[[0,5,5],[5,5,0]],
  'Z':[[6,6,0],[0,6,6]],
  'J':[[7,0,0],[7,7,7]]
};
function newPiece(){
  var keys=Object.keys(pieces);
  return {pos:{x:4,y:0},m:pieces[keys[Math.random()*keys.length|0]]};
}
var p=newPiece();

function draw(){
  x.fillStyle="oklch(0.05 0 0)";
  x.fillRect(0,0,c.width,c.height);
  drawMatrix(a,{x:0,y:0});
  drawMatrix(p.m,p.pos);
}
function drawMatrix(m,o){
  m.forEach((r,y)=>r.forEach((v,x2)=>{
    if(v){
      // OKLCH 색상: 밝기 0.7, 채도 0.25, Hue는 블록 값에 따라
      x.fillStyle=`oklch(0.7 0.25 ${v*50})`;
      x.fillRect(x2+o.x,y+o.y,1,1);
    }
  }));
}
function collide(){
  for(var y=0;y<p.m.length;y++)for(var x2=0;x2<p.m[y].length;x2++)
    if(p.m[y][x2]&& (a[y+p.pos.y]&&a[y+p.pos.y][x2+p.pos.x])!==0) return true;
  return false;
}
function merge(){
  p.m.forEach((r,y)=>r.forEach((v,x2)=>{if(v)a[y+p.pos.y][x2+p.pos.x]=v}));
}
function sweep(){
  for(var y=a.length-1;y>=0;y--){
    if(a[y].every(v=>v)){
      a.splice(y,1);a.unshift(Array(12).fill(0));
      score+=10;level++; // 줄 삭제 횟수 = 레벨
      document.getElementById("score").innerHTML=score;
      document.getElementById("level").innerHTML=level;
      // 속도 계산: 2.5! * (level/12)
      var factorial=3.323;
      speed=Math.max(100,1000/(factorial*(level/12)));
    }
  }
}
function move(dir){p.pos.x+=dir;if(collide())p.pos.x-=dir;}
function rotate(){
  var m=p.m.map((r,i)=>r.map((_,j)=>p.m[p.m.length-1-j][i]));
  var old=p.m;p.m=m;if(collide())p.m=old;
}
function drop(){p.pos.y++;if(collide()){p.pos.y--;merge();sweep();p=newPiece();} }
function hardDrop(){while(!collide()){p.pos.y++;}p.pos.y--;merge();sweep();p=newPiece();}
var last=0;
function update(t=0){
  if(t-last>speed){drop();last=t;}
  draw();requestAnimationFrame(update);
}
update();
document.addEventListener("keydown",function(e){
  if(e.keyCode==37)move(-1);
  else if(e.keyCode==39)move(1);
  else if(e.keyCode==40)drop();
  else if(e.keyCode==38)rotate();
  else if(e.keyCode==32)hardDrop();
});
</script>
</body>
</html>