-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
111 lines (93 loc) · 4.36 KB
/
index.html
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
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div tetris</title>
<style>
.box {
display: none;
width: 600px;
height: 750px;
line-height: 700px;
text-align: center;
color: azure;
font-size: 40px;
backdrop-filter: blur(5px);
background: rgba(255, 255, 255, .9);
background: rgba(0, 0, 0, .1);
z-index: 1;
}
</style>
</head>
<body>
<script type="module">
// chrome --allow-file-access-from-files
// firefox => about:config => security.fileuri.strict_origin_policy=false
import { Display, RGB } from "./draw.js";
import { Background } from "./base.js";
const displayOptions1 = {
styleElement: document.getElementsByTagName('style')[0],
bodyElement: document.getElementsByTagName('body')[0],
divElements: [
{ id: `main1`, top: 100, left: 100 },
{ id: `ready1`, top: 150, left: 450 },
{ id: `score1`, top: 230, left: 440, color: new RGB(140, 162, 162), font_size: 15 },
{ id: `hold1`, classname: `box` },
{ id: `leftTop1`, top: 97, left: 96, bg: 50, dt: [`left`, `top`] },
{ id: `rightTop1`, top: 97, left: 348, bg: 50, dt: [`right`, `top`] },
{ id: `leftBottom1`, top: 648, left: 96, bg: 50, dt: [`left`, `bottom`] },
{ id: `rightBottom1`, top: 648, left: 348, bg: 50, dt: [`right`, `bottom`] },
{ id: `leftTopHid1`, top: 97, left: 96, bg: 10 },
{ id: `rightTopHid1`, top: 97, left: 394, bg: 10 },
{ id: `leftBottomHid1`, top: 694, left: 96, bg: 10 },
{ id: `rightBottomHid1`, top: 694, left: 394, bg: 10 }
],
bodyBgColor: new RGB(40, 40, 40),
bgBorderColor: new RGB(88, 88, 88),
tetrominoColors: [new RGB(0, 204, 0, 4), new RGB(204, 0, 0, 4), new RGB(0, 0, 204, 4), new RGB(204, 0, 204, 4)]
}
const cycleTimeout = 53, skipCycle = 10;
/**
* @param {KeyboardEvent} event
* @param {boolean} isKeyUp
* @param {Array<number>} arrow
*/
function keyUpDownR(event, isKeyUp, arrow) {
// console.log(`PRESS: <${event.code}> ${isKeyUp ? 'up' : 'down'}`);
switch (event.code) {
case "ArrowLeft": arrow[0] = isKeyUp ? 0 : -1; break;
case "ArrowRight": arrow[0] = isKeyUp ? 0 : 1; break;
case "ArrowUp": arrow[1] = isKeyUp ? 0 : 1; break;
case "ArrowDown": arrow[1] = isKeyUp ? 0 : -1; break;
case "ShiftRight": /* case "ShiftLeft": */ arrow[2] = isKeyUp ? 0 : 1; break;
case "Space": case "KeyP": arrow[3] = isKeyUp ? 0 : 1; break;
default: break;
}
}
/**
* @param {number} timestamp
*/
function styleStep(timestamp) {
// frameTime = timestamp - lastTimestamp;
// console.log(`frameTime: ${frameTime}`);
// lastTimestamp = timestamp;
for (; length_mark < history.length; length_mark++) {
let [oldBg, newBg, exBg, ready, status] = history[length_mark];
show1.modifyStyle(oldBg, newBg, exBg, ready, status);
}
window.requestAnimationFrame(styleStep);
}
/** key_board_codes_r = [-x+, -y+, exchangeTetromino, pause/game_over] 按键按下状态。 */
const key_board_codes_r = [0, 0, 0, 0, 0];
window.addEventListener("keyup", (event) => keyUpDownR(event, true, key_board_codes_r), true);
document.addEventListener("keydown", (event) => keyUpDownR(event, false, key_board_codes_r), true);
let length_mark = 0, frameTime = 0, lastTimestamp = 0;
/** @type {Array<Array<Array<number>>>} */
const history = new Array();
const show1 = new Display(displayOptions1);
const bg1 = new Background(displayOptions1.tetrominoColors.length, skipCycle);
setInterval(() => { history.push(bg1.run1Step(key_board_codes_r)); }, cycleTimeout);
window.requestAnimationFrame(styleStep);
</script>
</body>
</html>