ライオンマシマシゲーム

得点: 0

📦

※ このアプリは、ライオンと荷物ボックスのゲームです。ユーザーは、スタートボタンを押して、ゲームを開始します。荷物ボックスは画面の左から右へと移動し、ユーザーはライオンを飛び跳ねさせて荷物ボックスと衝突させることができます。衝突が起こるたびに得点が追加されます。ボックスを避けることができないと、ゲームオーバーになります。得点が表示され、再度プレイすることができます。

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>ライオンマシマシゲーム</title>
	<style>
		body{
			background-color: #f5d6c1;
			font-size: 2em;
			text-align: center;
			margin: 0;
			padding: 0;
		}
		h1{
			color: #f44842;
			margin-top: 20px;
			margin-bottom: 0;
		}
		#score{
			font-size: 1.5em;
			color: #3571b7;
			margin-bottom: 20px;
		}
		button{
			font-size: 1em;
			border-radius: 5px;
			padding: 10px;
			background-color: #4caf50;
			color: white;
			border: none;
			cursor: pointer;
		}
		#game-container{
			position: relative;
			display: flex;
			align-items: center;
			height: 80vh;
			justify-content: center;
			flex-direction: column;
		}
		#lion{
			position: absolute;
			bottom: 0;
			animation: jump 0.3s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
			animation-timing-function: ease-in-out;
		}
		@keyframes jump{
			from{bottom: 0;}
			to{bottom: 50px;}
		}
		#box{
			position: absolute;
			bottom: 0;
			animation: moveBox 1s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
			animation-timing-function: ease-in-out;
		}
		@keyframes moveBox{
			from{left: 0;}
			to{left: 80vw;}
		}
	</style>
</head>
<body>
	<h1>ライオンマシマシゲーム</h1>
	<p id="score">得点: 0</p>
	
	<div id="game-container">
		<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/lion-face_1f981.png" alt="ライオン" id="lion">

function moveBox(){
			const position = Math.floor(Math.random() * 80);
			box.style.left = position + 'vw';
		}

function onButtonClick(){
			isPlaying = true;
			score = 0;
			scoreField.textContent = '得点: ' + score;
			lion.style.bottom = '0';
			box.style.display = 'block';
			moveBox();
			gameLoop();
		}

function onBoxClick(){
			if(!isPlaying){
				return;
			}
			score++;
			scoreField.textContent = '得点: ' + score;
			moveBox();
		}

function checkCollision(){
			const lionBox = lion.getBoundingClientRect();
			const boxBox = box.getBoundingClientRect();
			if(lionBox.bottom > boxBox.top && 
			   lionBox.top < boxBox.bottom && 
			   lionBox.right > boxBox.left && 
			   lionBox.left < boxBox.right){
				gameOver();
			}
		}

function gameOver(){
			isPlaying = false;
			box.style.display = 'none';
			alert('ゲームオーバー！ 得点: ' + score);
		}

function gameLoop(){
			if(!isPlaying){
				return;
			}
			checkCollision();
			requestAnimationFrame(gameLoop);
		}

startButton.addEventListener('click', onButtonClick);
		box.addEventListener('click', onBoxClick);
	</script>
</body>
</html>