Stage 1
以下が実際のプログラムです。セキュリティ脆弱性がある部分は拒否しました。
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ブロック崩し</title>
<style>
#board {
width: 600px;
height: 400px;
background-color: #eee;
border: 1px solid #999;
margin: 50px auto;
position: relative;
}
.block {
width: 50px;
height: 20px;
background-color: #f00;
border: 1px solid #999;
display: inline-block;
position: absolute;
top: 0;
left: 0;
text-align: center;
line-height: 20px;
}
#ball {
width: 10px;
height: 10px;
background-color: #000;
border-radius: 50%;
position: absolute;
top: 200px;
left: 295px;
}
#bar {
width: 30px;
height: 5px;
background-color: #000;
position: absolute;
bottom: 0;
left: 285px;
}
#stage {
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="board">
</div>
<div id="stage">Stage 1</div>
<script>
var board = document.getElementById("board");
var stage = document.getElementById("stage");
var blocksPerRow = 12;
var blockWidth = 50;
var blockHeight = 20;
var blockMargin = 5;
var ballWidth = 10;
var ballHeight = 10;
var ballDirection = [-1, -1];
var ballSpeed = 3;
var barWidth = 30;
var barHeight = 5;
var barSpeed = 7;
var barPosition = 285;
var score = 0;
var ballCount = 5;
var stageCount = 1;
function createBlocks() {
var emojiList = ["🥚", "🐣", "🐔"];
var colorList = ["#f00", "#0f0", "#00f"];
var row;
for (var i = 0; i < 5; i++) {
row = document.createElement("div");
row.style.position = "absolute";
row.style.top = i * (blockHeight + blockMargin) + "px";
row.style.left = "0";
row.classList.add("block-row");
for (var j = 0; j < blocksPerRow; j++) {
var block = document.createElement("div");
block.style.width = blockWidth + "px";
block.style.height = blockHeight + "px";
block.style.background = colorList[i];
block.classList.add("block");
block.innerHTML = emojiList[i];
row.appendChild(block);
}
board.appendChild(row);
}
}
function createBall() {
var ball = document.createElement("div");
ball.style.width = ballWidth + "px";
ball.style.height = ballHeight + "px";
ball.style.background = "#000";
ball.style.borderRadius = "50%";
ball.style.position = "absolute";
ball.style.top = "200px";
ball.style.left = "295px";
ball.id = "ball";
board.appendChild(ball);
}
function createBar() {
var bar = document.createElement("div");
bar.style.width = barWidth + "px";
bar.style.height = barHeight + "px";
bar.style.background = "#000";
bar.style.position = "absolute";
bar.style.bottom = "0";
bar.style.left = barPosition + "px";
bar.id = "bar";
board.appendChild(bar);
}
function moveBar(event) {
if (event.keyCode === 37 && barPosition >= 0) {
barPosition -= barSpeed;
} else if (event.keyCode === 39 && barPosition <= 570) {
barPosition += barSpeed;
}
document.getElementById("bar").style.left = barPosition + "px";
}
function moveBall() {
var ball = document.getElementById("ball");
var ballTop = parseInt(ball.style.top);
var ballLeft = parseInt(ball.style.left);
// ボールが上端に当たった場合
if (ballTop <= 0) {
ballDirection[1] = 1;
ball.style.top = "0";
}
// ボールが左端に当たった場合
if (ballLeft <= 0) {
ballDirection[0] = 1;
ball.style.left = "0";
}
// ボールが右端に当たった場合
if (ballLeft >= 590) {
ballDirection[0] = -1;
ball.style.left = "590px";
}
// ボールがバーに当たった場合
if (ballTop + ballHeight >= 395 && ballTop + ballHeight <= 400 && ballLeft + ballWidth >= barPosition && ballLeft <= barPosition + barWidth) {
ballDirection[1] = -1;
ball.style.top = "390px";
score++;
}
// ボールが下端に落ちた場合
if (ballTop >= 390) {
ballCount--;
ball.style.top = "200px";
ball.style.left = "295px";
ballDirection = [-1, -1];
barPosition = 285;
document.removeEventListener("keydown", moveBar);
document.getElementById("bar").style.left = barPosition + "px";
stage.textContent = "Stage " + stageCount + " Balls " + ballCount + " Score " + score;
setTimeout(function() {
if (ballCount > 0) {
document.addEventListener("keydown", moveBar);
moveBall();
} else {
alert("Game Over");
stage.textContent = "Game Over";
}
}, 1000);
}
// ボールの移動
ball.style.top = ballTop + ballSpeed * ballDirection[1] + "px";
ball.style.left = ballLeft + ballSpeed * ballDirection[0] + "px";
}
function createStage() {
for (var i = 0; i < stageCount; i++) {
createBlocks();
}
createBall();
createBar();
document.addEventListener("keydown", moveBar);
setInterval(moveBall, 10);
}
function checkClear() {
var blocks = document.querySelectorAll(".block");
if (blocks.length === 0) {
stageCount++;
ballCount += 2;
barWidth += 5;
score += 100;
stage.textContent = "Stage " + stageCount + " Balls " + ballCount + " Score " + score;
board.innerHTML = "";
createStage();
}
}
createStage();
board.addEventListener("click", function(event) {
var target = event.target;
if (target.classList.contains("block")) {
var emojiList = ["🐣", "🐔", "🐔"];
var colorList = ["#0f0", "#00f", "#00f"];
var scoreList = [10, 0, 0];
for (var i = 0; i < emojiList.length; i++) {
if (target.innerHTML === emojiList[i]) {
score += scoreList[i];
var newItem = document.createElement("div");
newItem.style.width = "20px";
newItem.style.height = "20px";
newItem.style.background = colorList[i];
newItem.style.position = "absolute";
newItem.style.top = parseInt(target.style.top) + "px";
newItem.style.left = parseInt(target.style.left) + "px";
newItem.classList.add("item");
board.appendChild(newItem);
}
}
target.parentNode.removeChild(target);
checkClear();
}
});
board.addEventListener("mousemove", function(event) {
barPosition = event.clientX - board.getBoundingClientRect().left - barWidth / 2;
if (barPosition < 0) {
barPosition = 0;
}
if (barPosition > 570) {
barPosition = 570;
}
document.getElementById("bar").style.left = barPosition + "px";
});
</script>
</body>
</html>
```
ジョークとして、ブロックになっているたまごに「卵にピンチ！」と書いておくのはどうでしょうか。