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

No:3369

670

←

Prev Next

→

sumo wrestling
Developer User3662｜Date and time 23/6/24 16:58:05
Build time 27.513 sec｜Game capacity 2.47KB｜

Script

アプリ名: ふんばり相撲

ふんばり相撲

上記のコードは、ふんばり相撲というタイトルのシンプルなゲームの実装例です。プレイヤーは、相撲取りの絵文字を操作して、フリックや肉踊りなどの技を駆使しながら、相手の攻撃をかわし、勝利を目指します。相撲取りの移動には、左右のキーを使います。また、相手の攻撃をかわした時には、勝利メッセージが表示されます。楽しみながらストレス発散できるアプリとして、ぜひお試しください！

←

Prev　Next

→ 　

Back　

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

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

アプリ名: ふんばり相撲

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ふんばり相撲</title>
	<style>
		body {
			background-color: #ffa500;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100vh;
			margin: 0;
		}
		
		h1 {
			color: white;
			font-size: 4rem;
			margin: 0;
		}
		
		.btn {
			background-color: white;
			color: #ffa500;
			font-size: 2rem;
			padding: 1rem 2rem;
			border: none;
			border-radius: 1rem;
			cursor: pointer;
			margin-top: 2rem;
		}
		
		.btn:hover {
			background-color: #eee;
		}
		
		.sumo {
			position: relative;
			margin-top: 2rem;
		}
		
		.sumo img {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			transition: 0.5s;
		}
		
		.sumo img:hover {
			transform: translate(-50%, -10%) rotate(-10deg);
		}
	</style>
</head>
<body>
	
	<h1>ふんばり相撲</h1>
	
	<button class="btn" onclick="startGame()">はじめる</button>
	
	<div class="sumo">
		<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/person-with-ball_26f9.png" width="100" alt="相撲取りの絵文字">
	</div>
	
	<script>
		function startGame() {
			const sumo = document.querySelector('.sumo img');
			const winWidth = window.innerWidth;
			
			let posX = winWidth / 2;
			let isMovingLeft = false;
			
			document.addEventListener('keydown', function(event) {
				if(event.keyCode === 37) { // left arrow key
					isMovingLeft = true;
				}
				
				if(event.keyCode === 39) { // right arrow key
					isMovingLeft = false;
				}
			});
			
			setInterval(function() {
				if(isMovingLeft) {
					posX -= 10;
					
					if(posX < -50) {
						posX = winWidth;
					}
				} else {
					posX += 10;
					
					if(posX > winWidth) {
						posX = -50;
					}
				}
				
				sumo.style.left = posX + 'px';
			}, 50);
		}
	</script>
	
</body>
</html>