Games that Sell's game | AI game creator

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

No:3612

2638

Games that Sell
Developer User3655｜Date and time 23/6/25 20:08:20
Build time 44.529 sec｜Game capacity 4.299KB｜

とは限らないので、楽しめるゲームを作ります。＜ゲーム説明＞シンプルなパズルゲームです。画面には５つの異なる色のブロックが表示されます。タイルのパターンが表示された後、プレイヤーはパターンに合わせてタップをしていきます。制限時間内に正しいタイルをすべてタップすることが必要です。プレイヤーが間違ったブロックをタップした場合、ペナルティとして制限時間が減少します。より高いスコアを獲得するために、プレイヤーはより速く、より正確にブロックをタップすることが必要です。＜ゲームの実装＞以下がゲームの実装になります。

以上が、カラフルブロックというゲームの実装になります。ブラウザで開くと、ゲームが遊べます。スマホでも問題なく遊べるように、レスポンシブデザインに対応させました。絵文字を使用しなくても、上記のコードを使ってゲームを実装することができます。

→ 　

2　

0　

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

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

(C)2023 HisashiApp

とは限らないので、楽しめるゲームを作ります。

＜ゲーム説明＞

シンプルなパズルゲームです。画面には５つの異なる色のブロックが表示されます。タイルのパターンが表示された後、プレイヤーはパターンに合わせてタップをしていきます。制限時間内に正しいタイルをすべてタップすることが必要です。プレイヤーが間違ったブロックをタップした場合、ペナルティとして制限時間が減少します。より高いスコアを獲得するために、プレイヤーはより速く、より正確にブロックをタップすることが必要です。

＜ゲームの実装＞

以下がゲームの実装になります。

<!DOCTYPE html>
<html>
<head>
	<title>カラフルブロック</title>
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<style type="text/css">
		body{
			background-color: #f4f4f4;
		}
		.container{
			background-color: white;
			padding: 10px;
			border-radius: 10px;
		}
		.row{
			display: flex;
			flex-direction: row;
			justify-content: center;
			margin-bottom: 10px;
		}
		.col{
			margin: 5px;
		}
		.tile{
			width: 50px;
			height: 50px;
			border-radius: 5px;
			cursor: pointer;
		}
		.time{
			font-size: 30px;
			font-weight: bold;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="row" id="pattern"></div>
		<div class="row">
			<div class="col"><div class="tile" id="tile1"></div></div>
			<div class="col"><div class="tile" id="tile2"></div></div>
			<div class="col"><div class="tile" id="tile3"></div></div>
			<div class="col"><div class="tile" id="tile4"></div></div>
			<div class="col"><div class="tile" id="tile5"></div></div>
		</div>
		<div class="time" id="time"></div>
	</div>

<script>
		const COLORS = ["red","green","blue","yellow","purple"];
		const TOTAL_TILES = 5;
		const SHOW_TIME = 2000;
		const BLANK_COLOR = "#f4f4f4";

let tileOrder = [];
		let currentTile = 0;
		let timeLeft = 0;

const patternElement = document.getElementById("pattern");
		const tiles = Array.from(document.getElementsByClassName("tile"));
		const timeElement = document.getElementById("time");

function setRandomOrder(){
			tileOrder = [];
			for(let i=0;i<TOTAL_TILES;i++){
				tileOrder.push(Math.floor(Math.random() * COLORS.length));
			}
		}

function showPattern(){
			let html = "";
			tileOrder.forEach(function(order){
				html += '<div class="col"><div class="tile" style="background-color:' + COLORS[order] + '"></div></div>';
			});
			patternElement.innerHTML = html;

setTimeout(function(){
				patternElement.innerHTML = "";
				currentTile = 0;
				showTile();
			},SHOW_TIME);
		}

function showTile(){
			if(currentTile < TOTAL_TILES){
				let order = tileOrder[currentTile];
				tiles[order].style.backgroundColor = COLORS[order];
				currentTile++;

setTimeout(function(){
					tiles[order].style.backgroundColor = BLANK_COLOR;
					showTile();
				},SHOW_TIME/2);
			}
			else{
				timeLeft = 20;
				timeElement.innerHTML = timeLeft;
				startTimer();
			}
		}

function startTimer(){
			if(timeLeft > 0){
				setTimeout(function(){
					timeLeft--;
					timeElement.innerHTML = timeLeft;
					startTimer();
				},1000);
			}
			else{
				endGame();
			}
		}

function endGame(){
			let score = currentTile*10;
			alert("ゲーム終了。あなたのスコアは" + score + "点です。");
			location.reload();
		}

setRandomOrder();
		showPattern();

tiles.forEach(function(tile){
			tile.addEventListener("click",function(){
				if(tile.style.backgroundColor === COLORS[tileOrder[currentTile-1]]){
					currentTile++;
				}
				else{
					timeLeft--;
					if(timeLeft < 0){
						timeLeft = 0;
					}
					timeElement.innerHTML = timeLeft;
				}

if(currentTile > TOTAL_TILES){
					endGame();
				}
			});
		});

</script>
</body>
</html>

以上が、カラフルブロックというゲームの実装になります。ブラウザで開くと、ゲームが遊べます。スマホでも問題なく遊べるように、レスポンシブデザインに対応させました。絵文字を使用しなくても、上記のコードを使ってゲームを実装することができます。