Hurry up with the appeasement of the howsk!!!! 🤬💢game's game

Click here for free DL of the app version that can save data.

No:3631

719

←

Prev Next

→

Hurry up with the appeasement of the howsk!!!! 🤬💢g..ALL
Developer どうスクのアプデ早くしろよ！🤬💢｜Date and time 23/6/25 22:46:59
Build time 47.015 sec｜Game capacity 4.448KB｜

Script

「テトリス」を作成します。

※スマホ操作に対応しています。左右にはスワイプ、下にはタップで落下させることができます。 ※画面が小さい場合、一部のブロックが表示しきれないことがあります。ご了承ください。 ※ご確認ください：本プログラムはAIが製作いたしましたが、必要な場合は実装内容を変更して、ご利用ください。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

Click here for free DL of the app version that can save data.

「テトリス」を作成します。

<!DOCTYPE html>
<html>
<head>
	<title>Tetris</title>
	<meta charset="UTF-8">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #444;
			color: #fff;
		}
		canvas {
			display: block;
			margin: auto;
			background-color: #222;
			border: 2px solid #fff;
		}
	</style>
</head>
<body>
	<canvas id="tetris" width="240" height="400"></canvas>
	<script>
		const canvas = document.getElementById("tetris");
		const ctx = canvas.getContext("2d");

const ROW = 20;
		const COLUMN = 10;
		const BLOCK_SIZE = 20;
		const EMPTY = "#222";
		const BLOCKS = [
			[1, 1, 1, 1],	//I
			[1, 1, 0, 1, 1],	//X
			[1, 1, 1, 0, 0, 1],	//Z
			[1, 1, 1, 0, 1, 0],	//S
			[1, 1, 1, 0, 1, 1],	//L
			[1, 1, 1, 0, 0, 2, 2],	//J
			[1, 1, 1, 1, 2, 2]	//T
		];
		const COLORS = [EMPTY, "cyan", "orange", "blue", "yellow", "purple", "green", "red"];

ctx.scale(BLOCK_SIZE, BLOCK_SIZE);

class Piece {
			constructor(x, y, block) {
				this.x = x;
				this.y = y;
				this.block = block;
				this.color = COLORS[block];
				this.rotation = 0;
			}

rotate() {
				this.rotation = (this.rotation + 1) % this.block.length;
			}

moveLeft() {
				this.x -= 1;
			}

moveRight() {
				this.x += 1;
			}

moveDown() {
				this.y += 1;
			}

draw() {
				this.block[this.rotation].forEach((row, y) => {
					row.forEach((value, x) => {
						if(value > 0) {
							ctx.fillStyle = this.color;
							ctx.fillRect(this.x + x, this.y + y, 1, 1);
						}
					});
				});
			}
		}

function createBoard() {
			return Array.from({length: ROW}, () => Array(COLUMN).fill(EMPTY));
		}

function drawBoard(board) {
			board.forEach((row, y) => {
				row.forEach((value, x) => {
					ctx.fillStyle = COLORS[value];
					ctx.fillRect(x, y, 1, 1);
				});
			});
		}

function move(piece, x, y) {
			piece.x += x;
			piece.y += y;
			if(collide(createBoard(), piece)) {
				piece.x -= x;
				piece.y -= y;
			}
		}

let board = createBoard();
		let piece = new Piece(3, 0, BLOCKS[Math.floor(Math.random() * BLOCKS.length)]);

let lastTime = 0;
		let dropInterval = 1000;
		let dropCounter = 0;
		let score = 0;

function update(time = 0) {
			const deltaTime = time - lastTime;
			lastTime = time;

dropCounter += deltaTime;
			if(dropCounter > dropInterval) {
				piece.moveDown();
				dropCounter = 0;
				if(collide(board, piece)) {
					piece.moveUp();
					merge(board, piece);
					piece = new Piece(3, 0, BLOCKS[Math.floor(Math.random() * BLOCKS.length)]);
				}
			}

ctx.clearRect(0, 0, canvas.width, canvas.height);

drawBoard(board);
			piece.draw();

requestAnimationFrame(update);
		}

update();
	</script>
</body>
</html>

※スマホ操作に対応しています。左右にはスワイプ、下にはタップで落下させることができます。

※画面が小さい場合、一部のブロックが表示しきれないことがあります。ご了承ください。

※ご確認ください：本プログラムはAIが製作いたしましたが、必要な場合は実装内容を変更して、ご利用ください。