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

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
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 | AI game creator

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

No:1211

264

←

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]現在の新着人気ランキング

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>