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

No:1276

139

←

Prev Next

→

A ball is thrown from the side of the screen in a ..ALL
Developer User3287｜Date and time 23/6/18 9:38:41
Build time 38.14 sec｜Game capacity 2.708KB｜

Script

ボールキャッチゲーム

チャット

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ボールキャッチゲーム</title>
	<style>
		canvas{
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<h1>ボールキャッチゲーム</h1>
	<canvas id="canvas" width="500" height="500"></canvas>
	<div id="chat">
		<h2>チャット</h2>
		<div id="message"></div>
		<input type="text" id="input">
		<button id="send">送信</button>
		<button id="answer">回答</button>
	</div>
	<script>
		//変数の宣言
		let canvas = document.getElementById("canvas");
		let ctx = canvas.getContext("2d");
		let ballX = 50;  //ボールの初期x座標
		let ballY = 450;  //ボールの初期y座標
		let ballVX = 5;  //ボールのx方向の速度
		let ballVY = -10;  //ボールのy方向の速度
		let throwing = true;  //ボールが投げられているかどうか
		let count = 0;  //ボールの投げられた回数
		let answer = Math.floor(Math.random() * 10) + 1;  //正解の数
		let ansBtn = document.getElementById("answer");
		let messageDiv = document.getElementById("message");

//ボールの描画
		function drawBall(){
			ctx.fillStyle = "red";
			ctx.beginPath();
			ctx.arc(ballX, ballY, 10, 0, Math.PI * 2, true);
			ctx.closePath();
			ctx.fill();
		}

//ボールの移動
		function moveBall(){
			ballX += ballVX;
			ballY += ballVY;
			ballVY += 0.5;  //重力加速度

//ボールが画面外に出た場合
			if(ballX > 500 || ballX < 0 || ballY > 500 || ballY < 0){
				throwing = false;
				count++;
				ballX = 50;
				ballY = 450;
				ballVX = 5;
				ballVY = -10;
				messageDiv.innerHTML += "<p>ボールが投げられました。</p>";
				answerCheck();
			}
		}

//回答チェック
		function answerCheck(){
			if(count == answer){  //正解だった場合
				messageDiv.innerHTML += "<p>正解！おめでとう！</p>";
				ansBtn.disabled = true;
			}else{  //不正解だった場合
				messageDiv.innerHTML += "<p>残念、不正解です。</p>";
			}
		}

//画面更新
		function update(){
			ctx.clearRect(0, 0, canvas.width, canvas.height);

drawBall();

if(throwing){
				moveBall();
			}

window.requestAnimationFrame(update);
		}

//回答ボタンがクリックされた場合
		ansBtn.onclick = function(){
			let input = document.getElementById("input").value;
			if(input == count){  //回答が正解だった場合
				messageDiv.innerHTML += "<p>あなたの回答：" + input + "。正解！おめでとう！</p>";
				ansBtn.disabled = true;
			}else{  //回答が不正解だった場合
				messageDiv.innerHTML += "<p>あなたの回答：" + input + "。残念、不正解です。</p>";
			}
		}

update();
	</script>
</body>
</html>