ショック死ゲーム

スコア：0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>ショック死ゲーム</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			margin: 0;
			padding: 0;
			text-align: center;
			background-color: #000000;
			color: #FFFFFF;
		}

canvas {
			display: block;
			margin: auto;
		}

button {
			width: 100px;
			height: 50px;
			background-color: #FFFFFF;
			color: #000000;
			font-size: 20px;
			font-weight: bold;
			border: none;
			border-radius: 10px;
			cursor: pointer;
			margin-top: 20px;
		}

button:hover {
			background-color: #000000;
			color: #FFFFFF;
			transition: 0.3s;
		}
	</style>
</head>
<body>
	<h1>ショック死ゲーム</h1>
	<canvas id="canvas" width="300" height="400"></canvas>
	<p>スコア：0</p>
	<button id="startButton">スタート</button>
	<button id="stopButton" disabled>ストップ</button>

// ゲームオーバーフラグ
		var gameOver = false;

// ボールの情報
		var ball = {
			x: canvas.width / 2,
			y: canvas.height - 30,
			dx: 2,
			dy: -2,
			radius: 10,
			color: "#FF0000"
		};

// パドルの情報
		var paddle = {
			x: (canvas.width - 75) / 2,
			y: canvas.height - 20,
			width: 75,
			height: 10,
			color: "#FFFFFF"
		};

// ブロックの情報
		var brickRowCount = 3;
		var brickColumnCount = 5;
		var brickWidth = 75;
		var brickHeight = 20;
		var brickPadding = 10;
		var brickOffsetTop = 30;
		var brickOffsetLeft = 30;
		var bricks = [];
		for (var c = 0; c < brickColumnCount; c++) {
			bricks[c] = [];
			for (var r = 0; r < brickRowCount; r++) {
				bricks[c][r] = {
					x: 0,
					y: 0,
					status: 1
				}
			}
		}

// スコアの初期化
		var score = 0;

// キーボードのイベントリスナー
		document.addEventListener("keydown", keyDownHandler, false);
		document.addEventListener("keyup", keyUpHandler, false);

var rightPressed = false;
		var leftPressed = false;

function keyDownHandler(event) {
			if (event.keyCode == 39) {
				rightPressed = true;
			} else if (event.keyCode == 37) {
				leftPressed = true;
			}
		}

function keyUpHandler(event) {
			if (event.keyCode == 39) {
				rightPressed = false;
			} else if (event.keyCode == 37) {
				leftPressed = false;
			}
		}

function drawBall() {
			context.beginPath();
			context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
			context.fillStyle = ball.color;
			context.fill();
			context.closePath();
		}

function drawPaddle() {
			context.beginPath();
			context.rect(paddle.x, paddle.y, paddle.width, paddle.height);
			context.fillStyle = paddle.color;
			context.fill();
			context.closePath();
		}

function drawScore() {
			context.font = "16px Arial";
			context.fillStyle = "#FFFFFF";
			context.fillText("スコア：" + score, 10, 20);
		}

function gameOverScreen() {
			context.font = "30px Arial";
			context.fillStyle = "#FFFFFF";
			context.fillText("ゲームオーバー", canvas.width / 2 - 100, canvas.height / 2);
		}

function draw() {
			if (gameOver) {
				gameOverScreen();
				return;
			}

context.clearRect(0, 0, canvas.width, canvas.height);

drawBall();
			drawPaddle();
			drawBricks();
			collisionDetection();
			drawScore();

// ボールの移動
			if (ball.x + ball.dx > canvas.width - ball.radius || ball.x + ball.dx < ball.radius) {
				ball.dx = -ball.dx;
			}
			if (ball.y + ball.dy < ball.radius) {
				ball.dy = -ball.dy;
			} else if (ball.y + ball.dy > canvas.height - ball.radius) {
				if (ball.x > paddle.x && ball.x < paddle.x + paddle.width) {
					ball.dy = -ball.dy;
				} else {
					gameOver = true;
					alert("ゲームオーバー！スコア：" + score);
				}
			}

// パドルの移動
			if (rightPressed && paddle.x < canvas.width - paddle.width) {
				paddle.x += 7;
			} else if (leftPressed && paddle.x > 0) {
				paddle.x -= 7;
			}

ball.x += ball.dx;
			ball.y += ball.dy;

requestAnimationFrame(draw);
		}

// スタートボタンのイベントリスナー
		document.getElementById("startButton").addEventListener("click", function() {
			draw();
			document.getElementById("startButton").disabled = true;
			document.getElementById("stopButton").disabled = false;
		});

// ストップボタンのイベントリスナー
		document.getElementById("stopButton").addEventListener("click", function() {
			location.reload();
		});
	</script>
</body>
</html>