AI game creator

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

No:7726

1979

←

Prev Next

→

voice acting school
Developer User4074｜Date and time 23/7/9 16:01:44
Build time 16.262 sec｜Game capacity 3.226KB｜

Script

了解しました。以下は、シンプルなブロック崩しゲームの実装例です。

実行すると、スマートフォンで操作できるブロック崩しゲームが表示されます。ブロックをすべて壊すか、ボールが画面の上部に到達するとゲームオーバーとなります。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

了解しました。以下は、シンプルなブロック崩しゲームの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
	<title>ブロック崩しゲーム</title>
	<style>
		#paddle {
			width: 80px;
			height: 20px;
			background-color: #666;
			position: absolute;
			bottom: 10px;
			left: calc(50% - 40px);
		}

#ball {
			width: 20px;
			height: 20px;
			background-color: #f00;
			position: absolute;
			bottom: 40px;
			left: calc(50% - 10px);
			border-radius: 50%;
		}

.block {
			width: 50px;
			height: 20px;
			background-color: #0f0;
			position: absolute;
			top: 50px;
		}
	</style>
</head>
<body>
	<script>
		var paddle = document.getElementById("paddle");
		var ball = document.getElementById("ball");
		var blocks = document.getElementsByClassName("block");
		var interval;
		var xSpeed = 3;
		var ySpeed = 3;

paddle.style.display = "none";
		ball.style.display = "none";
		for(var i = 0; i < blocks.length; i++) {
			blocks[i].style.display = "none";
		}

function startGame() {
			paddle.style.display = "block";
			ball.style.display = "block";
			for(var i = 0; i < blocks.length; i++) {
				blocks[i].style.display = "block";
			}
			interval = setInterval(moveBall, 16);
		}

function movePaddle(event) {
			paddle.style.left = (event.touches[0].pageX - paddle.offsetWidth/2) + "px";
		}

function moveBall() {
			var ballRect = ball.getBoundingClientRect();
			var paddleRect = paddle.getBoundingClientRect();

if(ballRect.right + xSpeed >= window.innerWidth || ballRect.left + xSpeed <= 0) {
				xSpeed *= -1;
			}
			if(ballRect.bottom + ySpeed >= window.innerHeight || ballRect.top + ySpeed <= 0) {
				ySpeed *= -1;
			}

if(ballRect.bottom + ySpeed >= paddleRect.top && ballRect.right + xSpeed >= paddleRect.left && ballRect.left + xSpeed <= paddleRect.right) {
				ySpeed *= -1;
			}

for(var i = 0; i < blocks.length; i++) {
				var blockRect = blocks[i].getBoundingClientRect();
				if(ballRect.bottom + ySpeed >= blockRect.top && ballRect.top + ySpeed <= blockRect.bottom && ballRect.right + xSpeed >= blockRect.left && ballRect.left + xSpeed <= blockRect.right) {
					blocks[i].style.display = "none";
					ySpeed *= -1;
				}
			}

ball.style.left = (ballRect.left + xSpeed) + "px";
			ball.style.bottom = (ballRect.bottom + ySpeed) + "px";

if(ballRect.bottom <= 0) {
				clearInterval(interval);
				alert("ゲームオーバー");
				location.reload();
			}

if(blocks.length === 0) {
				clearInterval(interval);
				alert("クリア！");
				location.reload();
			}
		}

document.addEventListener("DOMContentLoaded", startGame);
		document.addEventListener("touchmove", movePaddle);
	</script>

<div id="paddle"></div>
	<div id="ball"></div>
	<div class="block" style="left: 50px;"></div>
	<div class="block" style="left: 110px;"></div>
	<div class="block" style="left: 170px;"></div>
	<div class="block" style="left: 230px;"></div>
	<div class="block" style="left: 290px;"></div>
</body>
</html>
```