ブロックやパドル、ボールの色をカラフルにしました。各要素に異なる色を設定することで、より鮮やかで楽しいゲーム体験。
PythonでHTMLをデータとして記述し、JavaScriptでシンプルなブロック崩しゲームを作り、Pythonから実行するためのコードの例を示します。以下の手順に従ってください。
Pythonコード: HTMLとJavaScriptのコードをデータとしてPythonに埋め込み、サーバーを立ち上げてHTMLを提供します。
HTMLとJavaScriptコード: シンプルなブロック崩しゲームの実装。
以下のコードをPythonノートブックで実行できます。
import http.server
import socketserver
import tempfile
import webbrowser
# HTMLとJavaScriptのコード
html_content = """
<!DOCTYPE html>
<html>
<head>
<title>ブロック崩し</title>
<style>
canvas {
background: #eee;
display: block;
margin: auto;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="480" height="320"></canvas>
<script>
var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width / 2;
var y = canvas.height - 30;
var dx = 2;
var dy = -2;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width - paddleWidth) / 2;
var rightPressed = false;
var leftPressed = false;
var brickRowCount = 3;
var brickColumnCount = 5;
var brickWidth = 75;
var brickHeight = 20;
var brickPadding = 10;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;
var bricks = [];
var colors = ["#FF5733", "#33FF57", "#3357FF", "#F0F33F", "#FF33A1"];
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, color: colors[Math.floor(Math.random() * colors.length)] };
}
}
var score = 0;
var lives = 3;
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
function keyDownHandler(e) {
if (e.key == "Right" || e.key == "ArrowRight") {
rightPressed = true;
} else if (e.key == "Left" || e.key == "ArrowLeft") {
leftPressed = true;
}
}
function keyUpHandler(e) {
if (e.key == "Right" || e.key == "ArrowRight") {
rightPressed = false;
} else if (e.key == "Left" || e.key == "ArrowLeft") {
leftPressed = false;
}
}
function collisionDetection() {
for (var c = 0; c < brickColumnCount; c++) {
for (var r = 0; r < brickRowCount; r++) {
var brick = bricks[c][r];
if (brick.status == 1) {
if (x > brick.x && x < brick.x + brickWidth && y > brick.y && y < brick.y + brickHeight) {
dy = -dy;
brick.status = 0;
score++;
if (score == brickRowCount * brickColumnCount) {
alert("You win, congratulations!");
document.location.reload();
}
}
}
}
}
}
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
ctx.fillStyle = "#FF33FF";
ctx.fill();
ctx.closePath();
}
function drawPaddle() {
ctx.beginPath();
ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
ctx.fillStyle = "#FF33A1";
ctx.fill();
ctx.closePath();
}
function drawBricks() {
for (var c = 0; c < brickColumnCount; c++) {
for (var r = 0; r < brickRowCount; r++) {
if (bricks[c][r].status == 1) {
var brickX = brickOffsetLeft + c * (brickWidth + brickPadding);
var brickY = brickOffsetTop + r * (brickHeight + brickPadding);
bricks[c][r].x = brickX;
bricks[c][r].y = brickY;
ctx.beginPath();
ctx.rect(brickX, brickY, brickWidth, brickHeight);
ctx.fillStyle = bricks[c][r].color;
ctx.fill();
ctx.closePath();
}
}
}
}
function drawScore() {
ctx.font = "16px Arial";
ctx.fillStyle = "#000";
ctx.fillText("Score: " + score, 8, 20);
}
function drawLives() {
ctx.font = "16px Arial";
ctx.fillStyle = "#000";
ctx.fillText("Lives: " + lives, canvas.width - 65, 20);
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBricks();
drawBall();
drawPaddle();
drawScore();
drawLives();
collisionDetection();
if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
dx = -dx;
}
if (y + dy < ballRadius) {
dy = -dy;
} else if (y + dy > canvas.height - ballRadius) {
if (x > paddleX && x < paddleX + paddleWidth) {
dy = -dy;
} else {
lives--;
if (!lives) {
alert("Game Over");
document.location.reload();
} else {
x = canvas.width / 2;
y = canvas.height - 30;
dx = 2;
dy = -2;
paddleX = (canvas.width - paddleWidth) / 2;
}
}
}
if (rightPressed && paddleX < canvas.width - paddleWidth) {
paddleX += 7;
} else if (leftPressed && paddleX > 0) {
paddleX -= 7;
}
x += dx;
y += dy;
requestAnimationFrame(draw);
}
draw();
</script>
</body>
</html>
"""
# 一時ファイルにHTMLを書き込む
with tempfile.NamedTemporaryFile(delete=False, suffix=".html") as temp_file:
temp_file.write(html_content.encode('utf-8'))
temp_file.flush()
temp_file_path = temp_file.name
# シンプルなHTTPサーバーの設定
class SimpleHTTPRequestHandler(http.server.SimpleHTTPRequestHandler):
def send_head(self):
"""Send headers."""
self.send_response(200)
self.send_header("Content-type", "text/html")
self.end_headers()
return open(temp_file_path, 'rb')
PORT = 8000
Handler = SimpleHTTPRequestHandler
with socketserver.TCPServer(("", PORT), Handler) as httpd:
print("Serving at port", PORT)
webbrowser.open(f'http://localhost:{PORT}')
httpd.serve_forever()
説明
HTMLとJavaScript: html_content変数にシンプルなブロック崩しゲームのHTMLとJavaScriptコードを格納しています。
Pythonコード:
tempfileを使用して、HTMLコードを一時ファイルに書き込みます。
http.serverとsocketserverを使用して、HTTPサーバーを立ち上げて一時ファイルを提供します。
webbrowserを使用して、ブラウザでゲームを表示します。
このコードをPythonノートブックで実行すると、ブラウザにシンプルなブロック崩しゲームが表示されます。