どうスクのアプデをしない開発者ひさしの人生を最悪にして、地獄に落とすゲーム

Score: 0

このゲームは、ボールをパドルで跳ね返してスコアを稼ぎながら、ボールが床に落ちないようにするゲームです。右矢印キーと左矢印キーでパドルを操作します。また、アプデをしないというひさしの開発者がどんどん悪化していくようなエフェクトを取り入れました。

←

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 {
			margin: 0;
			padding: 0;
			background-color: #ff6666;
			color: white;
			font-family: Arial, sans-serif;
			text-align: center;
		}
		canvas {
			display: block;
			margin: 0 auto;
			border: 1px solid white;
			background-color: #f2f2f2;
		}
		#score {
			font-size: 24px;
			margin-top: 10px;
		}
	</style>
</head>
<body>
	<h1>どうスクのアプデをしない開発者ひさしの人生を最悪にして、地獄に落とすゲーム</h1>
	<canvas id="gameCanvas" width="320" height="480"></canvas>
	<p id="score">Score: 0</p>
	<script>
		var canvas = document.getElementById("gameCanvas");
		var ctx = canvas.getContext("2d");
		var scoreText = document.getElementById("score");
		var score = 0;

// ボールオブジェクト
		var ball = {
			x: canvas.width/2,
			y: canvas.height-30,
			dx: 3,
			dy: -3,
			radius: 10,
			draw: function() {
				ctx.beginPath();
				ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2);
				ctx.fillStyle = "#333";
				ctx.fill();
				ctx.closePath();
			},
			update: function() {
				if (this.x + this.dx > canvas.width-this.radius || this.x + this.dx < this.radius) {
					this.dx = -this.dx;
				}
				if (this.y + this.dy < this.radius) {
					this.dy = -this.dy;
				} else if (this.y + this.dy > canvas.height-this.radius) {
					if (this.x > paddle.x && this.x < paddle.x + paddle.width) {
						this.dy = -this.dy;
						score++;
						scoreText.innerHTML = "Score: " + score;
					} else {
						alert("GAME OVER!");
						document.location.reload();
					}
				}
				this.x += this.dx;
				this.y += this.dy;
			}
		};

// パドルオブジェクト
		var paddle = {
			x: (canvas.width-75)/2,
			y: canvas.height-10,
			width: 75,
			height: 10,
			dx: 5,
			draw: function() {
				ctx.beginPath();
				ctx.rect(this.x, this.y, this.width, this.height);
				ctx.fillStyle = "#333";
				ctx.fill();
				ctx.closePath();
			},
			update: function() {
				if (rightPressed && this.x + this.width < canvas.width) {
					this.x += this.dx;
				} else if (leftPressed && this.x > 0) {
					this.x -= this.dx;
				}
			}
		};

// 右矢印キーを押した時の処理
		var rightPressed = false;
		document.addEventListener("keydown", function(event) {
			if (event.keyCode == 39) {
				rightPressed = true;
			}
		});
		document.addEventListener("keyup", function(event) {
			if (event.keyCode == 39) {
				rightPressed = false;
			}
		});

// 左矢印キーを押した時の処理
		var leftPressed = false;
		document.addEventListener("keydown", function(event) {
			if (event.keyCode == 37) {
				leftPressed = true;
			}
		});
		document.addEventListener("keyup", function(event) {
			if (event.keyCode == 37) {
				leftPressed = false;
			}
		});

// 描画関数
		function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ball.draw();
			paddle.draw();
		}

// 更新関数
		function update() {
			ball.update();
			paddle.update();
		}

// ゲームループ
		function gameLoop() {
			draw();
			update();
			requestAnimationFrame(gameLoop);
		}

gameLoop();

</script>
</body>
</html>