A snake game where there is a tetris next to the snake game and when you make a line a black tetris block will fall where the snake game where you would have to dodge to avoid losing.'s game

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

No:1211

230

←

Prev Next

→

A snake game where there is a tetris next to the s..ALL
Developer User3280｜Date and time 23/6/18 8:29:03
Build time 150.247 sec｜Game capacity 9.371KB｜

Script

el juego.

←

Prev　Next

→ 　

Back　

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

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

el juego.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Snake and Tetris</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #fff;
		}
		
		#game-container {
			display: flex;
			height: 100vh;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}
		
		canvas {
			border: 2px solid black;
			background-color: #eee;
		}
	</style>
</head>
<body>
	<div id="game-container">
		<canvas id="snake-canvas" width="400" height="400"></canvas>
		<canvas id="tetris-canvas" width="200" height="400"></canvas>	
	</div>
	<script>
		// SNAKE GAME
		const canvasSnake = document.getElementById("snake-canvas");
		const ctxSnake = canvasSnake.getContext("2d");
		const tileSize = 20; // Size of each tile
		const maxCoordinate = 400 / tileSize;
		let snake = [{x: 0, y: 0}]; // Starting position of the snake
		let direction = "right";
		let food = {x: Math.floor(Math.random() * maxCoordinate), y: Math.floor(Math.random() * maxCoordinate)}; // Random initial food position
		
		function drawSnake() {
			ctxSnake.clearRect(0, 0, canvasSnake.width, canvasSnake.height);
			ctxSnake.fillStyle = "green";
			snake.forEach(function(point) {
				ctxSnake.fillRect(point.x * tileSize, point.y * tileSize, tileSize, tileSize);
			});
			ctxSnake.fillStyle = "red";
			ctxSnake.fillRect(food.x * tileSize, food.y * tileSize, tileSize, tileSize);
		}
		
		function updateSnake() {
			let head = {...snake[0]}; // Create a copy of the head
			switch (direction) {
				case "up":
					head.y--;
					break;
				case "down":
					head.y++;
					break;
				case "left":
					head.x--;
					break;
				case "right":
					head.x++;
					break;
			}
			if (head.x < 0 || head.y < 0 || head.x >= maxCoordinate || head.y >= maxCoordinate) {
				// Snake hit the wall, game over
				alert("Game over");
				location.reload();
			} else if (head.x === food.x && head.y === food.y) {
				// Snake ate the food, generate new food
				snake.unshift(head);
				food = {x: Math.floor(Math.random() * maxCoordinate), y: Math.floor(Math.random() * maxCoordinate)};
			} else if (snake.some((point) => point.x === head.x && point.y === head.y)) {
				// Snake hit itself, game over
				alert("Game over");
				location.reload();
			} else {
				// Move the snake and remove the last point
				snake.unshift(head);
				snake.pop();
			}
		}
		
		function mainLoopSnake() {
			updateSnake();
			drawSnake();
		}
		
		setInterval(mainLoopSnake, 100);
		
		document.addEventListener("keydown", function(event) {
			switch (event.keyCode) {
				case 37: // left arrow
					if (direction !== "right")
						direction = "left";
					break;
				case 38: // up arrow
					if (direction !== "down")
						direction = "up";
					break;
				case 39: // right arrow
					if (direction !== "left")
						direction = "right";
					break;
				case 40: // down arrow
					if (direction !== "up")
						direction = "down";
					break;
			}
		});
		
		// TETRIS GAME
		const canvasTetris = document.getElementById("tetris-canvas");
		const ctxTetris = canvasTetris.getContext("2d");
		const tetrominoes = [
			{color: "cyan", blocks: [[1, 0], [1, 1], [1, 2], [1, 3]]},
			{color: "yellow", blocks: [[1, 1], [2, 1], [1, 2], [2, 2]]},
			{color: "purple", blocks: [[1, 1], [2, 1], [3, 1], [2, 2]]},
			{color: "green", blocks: [[2, 0], [1, 1], [2, 1], [1, 2]]},
			{color: "red", blocks: [[1, 0], [2, 0], [2, 1], [3, 1]]},
			{color: "blue", blocks: [[1, 1], [2, 1], [2, 0], [3, 0]]},
			{color: "orange", blocks: [[1, 0], [2, 0], [2, 1], [2, 2]]}
		];
		let tetromino = tetrominoes[Math.floor(Math.random() * tetrominoes.length)]; // Random initial tetromino
		let tetrominoX = 0; // X position of the tetromino
		let tetrominoY = 0; // Y position of the tetromino
		let tetrominoRotation = 0; // Rotation of the tetromino
		let tetrominoSpeed = 20; // Initial speed of the tetromino
		let score = 0; // Game score
		
		function drawTetris() {
			ctxTetris.clearRect(0, 0, canvasTetris.width, canvasTetris.height);
			ctxTetris.fillStyle = "black";
			ctxTetris.font = "16px Arial";
			ctxTetris.fillText("Score: " + score, 10, 20);
			for (let i = 0; i < 4; i++) {
				for (let j = 0; j < 4; j++) {
					if (tetromino.blocks[i][j]) {
						let x = tetrominoX + j;
						let y = tetrominoY + i;
						ctxTetris.fillStyle = tetromino.color;
						ctxTetris.fillRect(x * tileSize, y * tileSize, tileSize, tileSize);
						ctxTetris.strokeStyle = "black";
						ctxTetris.strokeRect(x * tileSize, y * tileSize, tileSize, tileSize);
					}
				}
			}
		}
		
		function canRotate() {
			// Check that the tetromino does not hit the wall or other blocks when rotating
			let newBlocks = getBlocks(tetromino, tetrominoRotation + 1);
			for (let i = 0; i < 4; i++) {
				for (let j = 0; j < 4; j++) {
					if (newBlocks[i][j]) {
						let x = tetrominoX + j;
						let y = tetrominoY + i;
						if (x < 0 || y < 0 || x >= 10 || y >= 20 || blocks[y][x]) {
							return false;
						}
					}
				}
			}
			return true;
		}
		
		function rotate() {
			if (canRotate()) {
				tetrominoRotation++;
				if (tetrominoRotation >= 4) {
					tetrominoRotation = 0;
				}
				tetromino = getBlocks(tetromino, tetrominoRotation);
			}
		}
		
		function canMoveDown() {
			// Check that the tetromino does not hit the wall or other blocks when moving down
			for (let i = 0; i < 4; i++) {
				for (let j = 0; j < 4; j++) {
					if (tetromino.blocks[i][j]) {
						let x = tetrominoX + j;
						let y = tetrominoY + i;
						if (y >= 19 || blocks[y+1][x]) {
							return false;
						}
					}
				}
			}
			return true;
		}
		
		function moveDown() {
			if (canMoveDown()) {
				tetrominoY++;
			} else {
				fixTetromino();
				checkLines();
				tetromino = tetrominoes[Math.floor(Math.random() * tetrominoes.length)];
				tetrominoX = 0;
				tetrominoY = 0;
				tetrominoRotation = 0;
				if (checkGameOver()) {
					alert("Game over");
					location.reload();
				}
			}
		}
		
		function fixTetromino() {
			// Add the blocks of the tetromino to the blocks array
			for (let i = 0; i < 4; i++) {
				for (let j = 0; j < 4; j++) {
					if (tetromino.blocks[i][j]) {
						let x = tetrominoX + j;
						let y = tetrominoY + i;
						blocks[y][x] = tetromino.color;
					}
				}
			}
		}
		
		function checkLines() {
			// Check if any line is full, remove it, and add points to the score
			let fullLines = 0;
			for (let i = 0; i < 20; i++) {
				if (blocks[i].every((value) => value !== null)) {
					blocks.splice(i, 1);
					blocks.unshift(new Array(10).fill(null));
					fullLines++;
				}
			}
			if (fullLines > 0) {
				score += fullLines * 100;
				if (fullLines === 4) {
					score += 200; // Bonus points for a tetris
				}
				tetrominoSpeed = 20 + Math.floor(score / 1000); // Increase the speed as the score increases
			}
		}
		
		function checkGameOver() {
			// Check if the blocks reach the top
			return blocks[0].some((value) => value !== null);
		}
		
		function getBlocks(tetromino, rotation) {
			// Get the blocks of the tetromino in the specified rotation
			let newBlocks = [[], [], [], []];
			let originalBlocks = tetromino.blocks;
			for (let i = 0; i < 4; i++) {
				for (let j = 0; j < 4; j++) {
					let row = originalBlocks[i];
					let col = row[j];
					if (col === 1) {
						let x = j;
						let y = i;
						for (let r = 0; r < rotation; r++) {
							let newX = 3 - y;
							let newY = x;
							x = newX;
							y = newY;
						}
						newBlocks[y][x] = 1;
					}
				}
			}
			return {color: tetromino.color, blocks: newBlocks};
		}
		
		let blocks = [];
		for (let i = 0; i < 20; i++) {
			blocks.push(new Array(10).fill(null));
		}
		
		function mainLoopTetris() {
			if (tetrominoY === 0) {
				tetrominoSpeed = 20 + Math.floor(score / 1000); // Increase the speed as the score increases
			}
			if (tetrominoY === 19 || !canMoveDown()) {
				fixTetromino();
				checkLines();
				tetromino = tetrominoes[Math.floor(Math.random() * tetrominoes.length)];
				tetrominoX = 0;
				tetrominoY = 0;
				tetrominoRotation = 0;
				if (checkGameOver()) {
					alert("Game over");
					location.reload();
				}
			} else {
				tetrominoSpeed = 20 + Math.floor(score / 1000); // Increase the speed as the score increases
				moveDown();
			}
			drawTetris();
		}
		
		setInterval(mainLoopTetris, tetrominoSpeed);
		
		document.addEventListener("keydown", function(event) {
			switch (event.keyCode) {
				case 37: // left arrow
					if (tetrominoX > 0 && !getBlocks(tetromino, tetrominoRotation).blocks.some((row, i) => row.some((col, j) => col === 1 && blocks[tetrominoY+i] && blocks[tetrominoY+i][tetrominoX+j-1]))) {
						tetrominoX--;
					}
					break;
				case 38: // up arrow
					rotate();
					break;
				case 39: // right arrow
					if (tetrominoX < 10 - tetromino.blocks[0].length && !getBlocks(tetromino, tetrominoRotation).blocks.some((row, i) => row.some((col, j) => col === 1 && blocks[tetrominoY+i] && blocks[tetrominoY+i][tetrominoX+j+1]))) {
						tetrominoX++;
					}
					break;
				case 40: // down arrow
					if (tetrominoY < 19 && canMoveDown()) {
						moveDown();
					}
					break;
				case 32: // space bar
					while (tetrominoY < 19 && canMoveDown()) {
						moveDown();
					}
					break;
			}
			drawTetris();
		});
	</script>
</body>
</html>