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

No:2507

202

←

Prev Next

→

baseball
Developer User3573｜Date and time 23/6/21 19:22:43
Build time 72.633 sec｜Game capacity 6.242KB｜

Script

I made an application for baseball!

Emoji Baseball

Operate with your phone.、When the pitcher falls, you can press the start button. Move the batter while touching the strike zone.、If a hitter is clicked, bat! You will be alerted to the result. It is an interesting baseball game!

←

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>Emoji野球</title>
</head>
<body>
	<h1>Emoji野球</h1>
	<div id="ground">
		<div id="pitcher"></div>
		<div id="catcher"></div>
		<div id="ball"></div>
		<div id="batter"></div>
		<div id="strike-zone"></div>
		<div id="scoreboard">
			<div id="home-score">0</div>
			<div id="away-score">0</div>
		</div>
	</div>
	<button id="start-btn">スタート！</button>
	<script>
		//変数定義
		let ballPos = 0;//ボールの位置
		let ballDir = 1;//ボールの進む方向、1が右、-1が左
		let ballSpeed = 10;//ボールのスピード
		let pitcherPos = 0;//ピッチャーの位置
		let batterPos = 0;//バッターの位置
		let homeScore = 0;//ホームの得点
		let awayScore = 0;//アウェイの得点

//画面の初期化
		const init = () => {
			const ballElem = document.getElementById('ball');
			ballElem.style.left = ballPos + 'px';
			const pitcherElem = document.getElementById('pitcher');
			pitcherElem.style.left = pitcherPos + 'px';
			const batterElem = document.getElementById('batter');
			batterElem.style.left = batterPos + 'px';
			const homeScoreElem = document.getElementById('home-score');
			homeScoreElem.textContent = homeScore;
			const awayScoreElem = document.getElementById('away-score');
			awayScoreElem.textContent = awayScore;
		};

//ボールの移動
		const moveBall = () => {
			ballPos += ballSpeed * ballDir;
			const ballElem = document.getElementById('ball');
			ballElem.style.left = ballPos + 'px';

//ホームラン判定
			if(ballPos >= window.innerWidth - ballElem.clientWidth){
				ballDir = -1;
				homeScore++;
				init();
			}
			//ファール判定
			else if(ballPos <= 0){
				ballDir = 1;
				init();
			}

//バットとの衝突判定
			const batterElem = document.getElementById('batter');
			if(ballPos >= batterPos && ballPos <= batterPos + batterElem.clientWidth){
				//ヒット判定
				if(Math.random() <= 0.5){
					ballPos = 0;
					ballDir = 1;
					awayScore++;
					init();
				}
				//ファウル判定
				else{
					ballDir = 1;
					init();
				}
			}
			//ストライク判定
			else if(ballPos >= window.innerHeight - ballElem.clientHeight){
				ballPos = 0;
				ballDir = 1;
				init();
			}

//次の移動
			requestAnimationFrame(moveBall);
		};

//ピッチング
		const pitch = () => {
			//ボール投げる
			moveBall();
		}

//バッティング
		const bat = () => {
			const ballElem = document.getElementById('ball');
			const ballPos = ballElem.getBoundingClientRect().left;
			const strikeZoneElem = document.getElementById('strike-zone');
			const strikeZonePos = strikeZoneElem.getBoundingClientRect().left;
			const batterElem = document.getElementById('batter');

//ストライク判定
			if(ballPos > strikeZonePos + batterElem.clientWidth || ballPos < strikeZonePos){
				alert('ストライク！');
			}
			//ヒット判定
			else{
				alert('ヒット！');
			}
		}

//操作設定
		const setControl = () => {
			const pitcherElem = document.getElementById('pitcher');
			const startBtn = document.getElementById('start-btn');
			const strikeZoneElem = document.getElementById('strike-zone');
			const batterElem = document.getElementById('batter');

//ピッチャー移動
			window.addEventListener('deviceorientation', (event) => {
				const x = event.beta;//デバイスの傾き
				const maxX = window.innerWidth - pitcherElem.clientWidth;//ピッチャーの移動可能範囲の最大値
				const posX = maxX * x / 180;//ピッチャーの現在位置の計算
				pitcherPos = posX > 0 ? posX : 0;//ピッチャーが画面外に出ないようにする
				pitcherElem.style.left = pitcherPos + 'px';
			});

//バッター移動
			strikeZoneElem.addEventListener('touchmove', (event) => {
				const touch = event.touches[0];//タッチした指の情報
				const touchX = touch.pageX;//タッチしたポイントのx座標
				const batterElemWidth = batterElem.clientWidth;
				const maxX = window.innerWidth - batterElemWidth;//バッターの移動可能範囲の最大値
				const posX = touchX - batterElemWidth/2;//バッターの現在位置の計算
				batterPos = posX < maxX ? posX : maxX;//バッターが画面外に出ないようにする
				batterElem.style.left = batterPos + 'px';
			});

//スタートボタン
			startBtn.addEventListener('click', () => {
				pitch();
			});

//バットボタン
			window.addEventListener('mousedown', () => {
				bat();
			})
		}

//初期化
		init();
		setControl();
	</script>
	<style>
		body{
			margin: 0;
		}
		h1{
			font-size: 3em;
			text-align: center;
		}
		#ground{
			height: 60vh;
			background-color: green;
			position: relative;
			overflow: hidden;
		}
		#pitcher{
			position: absolute;
			bottom: 0;
			height: 10%;
			width: 20%;
			background-color: white;
			border-radius: 50%;
		}
		#catcher{
			position: absolute;
			top: 0;
			height: 10%;
			width: 20%;
			background-color: white;
			border-radius: 50%;
		}
		#ball{
			position: absolute;
			top: 0;
			left: 0;
			height: 3vw;
			width: 3vw;
			background-color: orange;
			border-radius: 50%;
		}
		#batter{
			position: absolute;
			top: 30%;
			height: 20%;
			width: 5%;
			background-color: yellow;
			border-radius: 10px;
		}
		#strike-zone{
			position: absolute;
			height: 5%;
			width: 5%;
			bottom: 7%;
			left: 45%;
			border: 1px solid black;
		}
		#scoreboard{
			position: absolute;
			top: 0;
			right: 0;
			background-color: white;
			padding: 10px;
			border: 1px solid black;
			border-radius: 10px;
		}
		#scoreboard div{
			font-size: 2em;
			text-align: center;
			margin-bottom: 5px;
		}
		button{
			display: block;
			margin: 0 auto;
			margin-top: 10px;
			padding: 10px;
			font-size: 2em;
			border-radius: 10px;
		}
	</style>
</body>
</html>

スマホで操作して、ピッチャーが倒れたらスタートボタンを押せます。ストライクゾーンをタッチしながらバッターを動かし、バッターがクリックされたらバット！ 結果がアラートで表示されます。面白い野球ゲームになっていると思います！