開発者ひさしを怒らせるゲーム

このゲームは、「開発者ひさしを怒らせるゲーム」という名前のゲームです。プレイヤーは、画面にランダムに表示される怒っている絵文字（😡）をクリックすることでポイントを獲得し、ポイント数を競います。1秒ごとに怒っている絵文字がランダムに表示され、プレイヤーは1回しかクリックできません。得点は画面上部に表示されます。なるべくスマホで操作できるように設計されており、絵文字を多く使用しています。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>開発者ひさしを怒らせるゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body{
			margin: 0;
			padding: 0;
			background-color: #eee;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			font-family: Arial, sans-serif;
			font-size: 24px;
		}
		
		#game{
			background-color: white;
			padding: 20px;
			border-radius: 10px;
			box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			max-width: 90%;
			max-height: 90%;
			overflow: auto;
		}
		
		#score{
			margin-top: 20px;
			font-size: 32px;
		}
		
		button{
			padding: 10px;
			font-size: 24px;
			border-radius: 5px;
			background-color: #4CAF50;
			color: white;
			border: none;
			cursor: pointer;
			margin-bottom: 10px;
		}
		
		button:hover{
			background-color: #3e8e41;
		}
	</style>
</head>
<body>
	<div id="game">
		<h1>開発者ひさしを怒らせるゲーム</h1>
		<canvas id="canvas"></canvas>
		<p id="score">0</p>
		<button id="startBtn">スタート</button>
	</div>

canvas.width = window.innerWidth * 0.8;
		canvas.height = window.innerHeight * 0.8;

let score = 0;
		let isRunning = false;

const startBtn = document.getElementById('startBtn');
		startBtn.addEventListener('click', startGame);

function startGame(){
			isRunning = true;
			startBtn.style.display = 'none';

let intervalId = setInterval(()=>{
				if(isRunning){
					drawHate();
				}else{
					clearInterval(intervalId);
				}
			}, 1000);
		}

function drawHate(){
			let x = Math.floor(Math.random() * (canvas.width - 50));
			let y = Math.floor(Math.random() * (canvas.height - 50));
			let size = Math.floor(Math.random() * 100) + 50;

ctx.fillStyle = '#FFC107';
			ctx.fillRect(x, y, size, size);
			ctx.font = "50px Arial";
			ctx.fillStyle = "black";
			ctx.fillText("😡", x + size/2, y + size/2);

canvas.addEventListener('click', (e)=>{
				if(e.clientX >= x && e.clientX <= x+size && e.clientY >= y && e.clientY <= y+size){
					score++;
					document.getElementById('score').innerText = `得点: ${score}`;
				}
			});

setTimeout(()=>{
				ctx.clearRect(x, y, size, size);
			}, 1000);
		}
	</script>
</body>
</html>