html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1"></meta>
</head>
<body>
<p id="score">0</p>
<div id="field"></div>
<div id="buttons">
<button id="left">⇐</button>
<button id="rotate">↻</button>
<button id="drop">DROP</button>
<button id="right">⇒</button>
</div>
<svg id="next" viewBox="0 0 106.633 106.633"></svg>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
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
body {
margin: 0;
background-color: #fff;
}
svg {
position: absolute;
top: 2px;
right: 2px;
height: 16vh;
width: 16vh;
border: 1px solid grey;
background-color: rgba(0,0,0,0);
}
p {
width: 100%;
margin: 0;
text-align: center;
}
#buttons {
width: 100%;
margin: auto;
display: table;
}
button {
width: 24%;
font-weight: bolder;
font-size: x-large ;
}
Enter to Rename, Shift+Enter to Preview
js
js
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
alert("Play using arrow keys or WASD")
onload = ()=>{
var color,
pos,
rot,
globalTout,
rand = Math.floor(Math.random()*7),
speed = 1000,
level = 1,
state = 0;
const Field = [];
const preview =['<rect width="104.64"height="26.16"fill="crimson"x="0"y="39.24"></rect>','<rect width="52.32"height="52.32"fill="blue"x="26.16" y="26.16"></rect>','<rect width="78.48"height="26.16"fill="cyan"x="13.08"y="52.32"></rect><rect width="26.16"height="26.16"fill="cyan"x="39.24"y="26.16"></rect>','<rect width="78.48"height="26.16"fill="magenta"x="13.08"y="52.32"></rect><rect width="26.16"height="26.16"fill="magenta"x="13.08"y="26.16"></rect>','<rect width="78.48"height="26.16"fill="orange"x="13.08"y="52.32"></rect><rect width="26.16"height="26.16"fill="orange"x="65.4"y="26.16"></rect>','<rect width="52.32"height="26.16"fill="LawnGreen"x="13.08"y="52.32"></rect><rect width="52.32"height="26.16"fill="LawnGreen"x="39.24"y="26.16"></rect>','<rect width="52.32"height="26.16"fill="yellow"x="39.24"y="52.32"></rect><rect width="52.32"height="26.16"fill="yellow"x="13.08"y="26.16"></rect>'];
for(let n = 0,container = document.getElementById("field"); n < 200;++n){
let square = document.createElement("div");
square.id = n;
if(n%10!==0){
container.appendChild(square);
}else{
container.appendChild(document.createElement("br"));
container.appendChild(square);
}
}
const reload = ()=>{
document.getElementById("score").innerText = "0";
clearInterval(globalTout);
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run