TETRIS на JAVASCRIPT

Tetris на javascript немного не дописан, но работает.

<script>
//alert(3 % 4);

var st = [
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0 , 0 , 0, 0, 1, 0 , 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0 , 0 , 0, 0, 1, 0 , 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0 , 0 , 0, 0, 1, 0 , 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0 , 0 , 0, 0, 1, 0 , 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0 , 0 , 0, 0, 1, 0 , 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0 , 0 , 0, 0, 1, 0 , 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0 , 0 , 0, 0, 1, 0 , 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0 , 0 , 0, 0, 1, 0 , 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0 , 0 , 0, 0, 1, 0 , 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0 , 0 , 0, 0, 1, 0 , 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0 , 0 , 0, 0, 1, 0 , 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0 , 0 , 0, 0, 1, 0 , 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0 , 0 , 0, 0, 1, 0 , 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0 , 0 , 0, 0, 1, 0 , 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0 , 0 , 0, 0, 1, 0 , 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0 , 0 , 0, 0, 1, 0 , 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0 , 0 , 0, 0, 1, 0 , 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0 , 0 , 0, 0, 1, 0 , 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0 , 0 , 0, 0, 1, 0 , 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0 , 0 , 0, 0, 1, 0 , 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1 , 1 , 1, 1, 1, 0 , 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0 , 0 , 0, 0, 1, 0 , 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0 , 0 , 0, 0, 1, 0 , 0]
];

var f = [
[[[0, 1, 0, 0],
[1, 1, 1, 0],
[0, 0, 0, 0],
[0, 0, 0, 0]],
[[0, 1, 0, 0],
[0, 1, 1, 0],
[0, 1, 0, 0],
[0, 0, 0, 0]],
[[0, 0, 0, 0],
[1, 1, 1, 0],
[0, 1, 0, 0],
[0, 0, 0, 0]],
[[0, 1, 0, 0],
[1, 1, 0, 0],
[0, 1, 0, 0],
[0, 0, 0, 0]]],

[[[0, 0, 1, 0],
[1, 1, 1, 0],
[0, 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, 0, 0],
[1, 1, 1, 0],
[1, 0, 0, 0],
[0, 0, 0, 0]],
[[1, 1, 0, 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, 1, 0],
[0, 1, 0, 0],
[0, 1, 0, 0],
[0, 0, 0, 0]],
[[0, 0, 0, 0],
[1, 1, 1, 0],
[0, 0, 1, 0],
[0, 0, 0, 0]],
[[0, 1, 0, 0],
[0, 1, 0, 0],
[1, 1, 0, 0],
[0, 0, 0, 0]]],

[[[0, 0, 1, 0],
[0, 1, 1, 0],
[0, 1, 0, 0],
[0, 0, 0, 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, 0]],
[[0, 0, 0, 0],
[1, 1, 0, 0],
[0, 1, 1, 0],
[0, 0, 0, 0]]],

[[[0, 1, 0, 0],
[0, 1, 1, 0],
[0, 0, 1, 0],
[0, 0, 0, 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, 0]],
[[0, 0, 0, 0],
[0, 1, 1, 0],
[1, 1, 0, 0],
[0, 0, 0, 0]]],

[[[0, 1, 1, 0],
[0, 1, 1, 0],
[0, 0, 0, 0],
[0, 0, 0, 0]],
[[0, 1, 1, 0],
[0, 1, 1, 0],
[0, 0, 0, 0],
[0, 0, 0, 0]],
[[0, 1, 1, 0],
[0, 1, 1, 0],
[0, 0, 0, 0],
[0, 0, 0, 0]],
[[0, 1, 1, 0],
[0, 1, 1, 0],
[0, 0, 0, 0],
[0, 0, 0, 0]]],

[[[0, 0, 0, 0],
[1, 1, 1, 1],
[0, 0, 0, 0],
[0, 0, 0, 0]],
[[0, 1, 0, 0],
[0, 1, 0, 0],
[0, 1, 0, 0],
[0, 1, 0, 0]],
[[0, 0, 0, 0],
[1, 1, 1, 1],
[0, 0, 0, 0],
[0, 0, 0, 0]],
[[0, 1, 0, 0],
[0, 1, 0, 0],
[0, 1, 0, 0],
[0, 1, 0, 0]]]

];



var x0 = 6;
var y0 = 0;
var fp = 0;
var fn = 0;
var GameOver=0;

function testnewposition(fnn,fpn,xn,yn)
{
//if (st[yn][xn]) return 0; else return 1;
for (let y = 0; y < 4; y++)
for (let x = 0; x < 4; x++) if (f[fnn][fpn][y][x]) if (st[yn+y][xn+x]) return 0;
return 1;
}

function savef()
{
for (let y = 0; y < 4; y++)
for (let x = 0; x < 4; x++) if (f[fn][fp][y][x]) st[y0+y][x0+x] = 1;



}

function down()
{ while (testnewposition(fn,fp,x0,y0+1)) { y0++; }}

function downall() {
savef(); putf(1);
var newst=0;
for (let y = 0; y < 4; y++) {
if (y0+y<20)
if (st[y0+y][2]+st[y0+y][3]+st[y0+y][4]+st[y0+y][5]+
st[y0+y][6]+st[y0+y][7]+st[y0+y][8]+st[y0+y][9]+st[y0+y][10]+st[y0+y][11]+st[y0+y][12] == 11)
{//alert("найдена заполненная строка");
newst = 1;
for (let yi = y0+y; yi>0; yi--)
for (let x=2; x<13; x++) st[yi][x]=st[yi-1][x];
for (let x=2; x<13; x++) st[0][x]=0;
}
};
if (newst) {
ctx.clearRect(280, 0, 440, 760);
for (let y=0; y<20; y++)
for (let x=2; x<13; x++) if (st[y][x]) ctx.fillRect(200+x*40,(y-1)*40, 40, 40);
}
y0=0; x0=6; fp=0; fn = Math.floor(Math.random() * 7);
if (testnewposition(fn,fp,x0,y0)) putf(1); else {
GameOver=1;
document.getElementById("left").style.display = 'none';
document.getElementById("right").style.display = 'none';
document.getElementById("rotate1").style.display = 'none';
document.getElementById("rotate2").style.display = 'none';
document.getElementById("down1").style.display = 'none';
document.getElementById("down2").style.display = 'none';
document.getElementById("restart").style.display = 'block';
}
}
function restart() {
document.getElementById("restart").style.display = 'none';
document.getElementById("left").style.display = 'block';
document.getElementById("right").style.display = 'block';
document.getElementById("rotate1").style.display = 'block';
document.getElementById("rotate2").style.display = 'block';
document.getElementById("down1").style.display = 'block';
document.getElementById("down2").style.display = 'block';
for (let y = 0; y < 20; y++)
for (let x = 2; x < 13; x++) st[y][x] = 0;
ctx.clearRect(280, 0, 440, 760);
y0=0; x0=6; fp=0; fn=0; putf(1);
GameOver = 0;

}

function putf(v)
{
if (v) {
for (let y = 0; y < 4; y++)
for (let x = 0; x < 4; x++) if (f[fn][fp][y][x]) ctx.fillRect(200+(x0+x)*40,(y0+y-1)*40, 40, 40);
} else {
for (let y = 0; y < 4; y++)
for (let x = 0; x < 4; x++) if (f[fn][fp][y][x]) ctx.clearRect(200+(x0+x)*40,(y0+y-1)*40, 40, 40);
}
}

</script>

<div id="div1" style="width:100%; background-image: url('http://vadimrazov.ru.swtest.ru/wp-content/uploads/2024/02/matrix-1.png');">
<div id="control" style=" width:100%; height:10%; background:gray;"
onclick="">вкл/выкл альтернативное управление (keyboard: left-cursorLeft,right-cursorRight,rotate-keyZ,down-KeyX)</div>
<canvas width="1000" height="800">
An alternative text describing what your canvas displays.
</canvas>
<div id="restart" style="position:fixed; top:15%; left:5%; width:90%; height:20%; background:black; display:none;"
onclick="restart()"><p color="white" align="center">Restart TETRIS</p></div>

<div class="noselect" id="left" style="position:fixed; bottom:5%; left:5%; width:20%; height:10%; background:grey;"
onclick="if (testnewposition(fn,fp,x0-1,y0)) {putf(0); x0--; putf(1);} ">LEFT</div>
<div class="noselect" id="right" style="position:fixed; bottom:5%; right:5%; width:20%; height:10%; background:grey;"
onclick="if (testnewposition(fn,fp,x0+1,y0)) {putf(0); x0++; putf(1);}">RIGHT</div>

<div id="rotate1" style="position:fixed; bottom:18%; left:5%; width:20%; height:10%; background:grey;"
onclick="if (testnewposition(fn,(fp+1)%4,x0,y0)) {putf(0); fp=(fp+1)%4; putf(1);}">rotate</div>
<div id="rotate2" style="position:fixed; bottom:18%; right:5%; width:20%; height:10%; background:grey;"
onclick="if (testnewposition(fn,(fp+1)%4,x0,y0)) {putf(0); fp=(fp+1)%4; putf(1);}">rotate</div>
</div>

<div id="down1" style="position:fixed; bottom:32%; left:5%; width:20%; height:10%; background:grey;"
onclick="putf(0); down(); downall();">down</div>
<div id="down2" style="position:fixed; bottom:32%; right:5%; width:20%; height:10%; background:grey;"
onclick="putf(0); down(); downall();">down</div>
</div>
<script>

const elem = document.getElementById("div1");
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
canvas.style.width = "100%";

ctx.fillStyle = "grey";

// Add a rectangle at (10, 10) with size 100x100 pixels


ctx.lineWidth = 15;
ctx.strokeStyle = "grey";

ctx.strokeRect(280, 0, 440, 760);
ctx.clearRect(280, 0, 440, 760);

const rotate = new Image();
rotate.src = 'http://vadimrazov.ru.swtest.ru/wp-content/uploads/2024/02/rotate-1.png';
const left = new Image();
left.src = 'http://vadimrazov.ru.swtest.ru/wp-content/uploads/2024/02/left.png';
const right = new Image();
right.src = 'http://vadimrazov.ru.swtest.ru/wp-content/uploads/2024/02/right.png';

left.onload = function()
{ ctx.drawImage(left, 10, 10, left.width*2, left.height*2); };
right.onload = function()
{ ctx.drawImage(right, 990-right.width*2, 10, right.width*2, right.height*2); };
rotate.onload = function()
{ ctx.drawImage(rotate, 10, 10+left.height*2, rotate.width*2, rotate.height*2);
ctx.drawImage(rotate, 990-right.width*2, 10+left.height*2, right.width*2, rotate.height*2); };

document.onscroll = function()
{

var c = document.getElementById("div1").getBoundingClientRect();
if (c.top<0) {
//alert(c.top);
document.getElementById("left").style.display = 'none';
document.getElementById("right").style.display = 'none';
document.getElementById("rotate1").style.display = 'none';
document.getElementById("rotate2").style.display = 'none';
document.getElementById("down1").style.display = 'none';
document.getElementById("down2").style.display = 'none';
}
if (c.top>0) {
//alert("показать управляющие кнопки");
document.getElementById("left").style.display = 'block';
document.getElementById("right").style.display = 'block';
document.getElementById("rotate1").style.display = 'block';
document.getElementById("rotate2").style.display = 'block';
document.getElementById("down1").style.display = 'block';
document.getElementById("down2").style.display = 'block';
}

}
document.addEventListener('keydown', function(event) {
if (GameOver==0) {
if (event.code == 'ArrowLeft') {
if (testnewposition(fn,fp,x0-1,y0)) {putf(0); x0--; putf(1);}
}
if (event.code == 'ArrowRight') {
if (testnewposition(fn,fp,x0+1,y0)) {putf(0); x0++; putf(1);}
}
if (event.code == 'KeyZ') {
if (testnewposition(fn,(fp+1)%4,x0,y0)) {putf(0); fp=(fp+1)%4; putf(1);}
}
if (event.code == 'KeyX') {
putf(0);
down();
downall();
}
}});

function return1()
{
if (GameOver == 0) {
putf(0);
if (testnewposition(fn,fp,x0,y0+1))
{
y0++; putf(1);
} else {
downall();
}
}
}

return1();
setInterval(return1,1000);
//alert("yes");
</script>