ブロック崩しhigh

ソース
プログラム

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>PyScript Hyper Breakout</title>
    <!-- 最新の安定版 PyScript を使用 -->
    <link rel="stylesheet" href="https://pyscript.net/releases/2024.1.1/core.css" />
    <script type="module" src="https://pyscript.net/releases/2024.1.1/core.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #050505;
            color: #fff;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            touch-action: none;
        }
        #game-container {
            position: relative;
            width: 95vw;
            max-width: 400px;
            aspect-ratio: 2/3;
            border: 2px solid #333;
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
            background: #000;
            overflow: hidden;
        }
        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
        #ui {
            position: absolute;
            top: 10px;
            left: 10px;
            pointer-events: none;
            font-weight: bold;
            font-size: 18px;
            text-shadow: 2px 2px 4px rgba(0,0,0,1);
            color: #00ffff;
            z-index: 10;
        }
        .message {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            font-size: 20px;
            background: rgba(0,0,0,0.9);
            padding: 30px;
            border-radius: 15px;
            border: 2px solid #00ffff;
            z-index: 20;
            width: 80%;
        }
        button {
            background: #00ffff;
            color: #000;
            border: none;
            padding: 12px 24px;
            font-weight: bold;
            font-size: 18px;
            cursor: pointer;
            margin-top: 15px;
            border-radius: 8px;
            text-transform: uppercase;
        }
        #loading {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 100;
        }
    </style>
</head>
<body>

    <div id="loading">Loading Python Engine...</div>

    <div id="game-container">
        <canvas id="gameCanvas"></canvas>
        <div id="ui">
            SCORE: <span id="score">0</span>
        </div>
        <div id="start-msg" class="message">
            <h1 style="margin:0 0 10px 0; color:#00ffff;">HYPER<br>BREAKOUT</h1>
            <p style="font-size: 14px;">Swipe to Move Paddle</p>
            <button id="start-btn">Start Game</button>
        </div>
        <div id="over-msg" class="message" style="display: none;">
            <h1 style="margin:0 0 10px 0; color:#ff0055;">GAME OVER</h1>
            <button id="retry-btn">Retry</button>
        </div>
    </div>

    <script type="py">
import js
import math
import random
from pyodide.ffi import create_proxy

# Constants
WIDTH = 400
HEIGHT = 600

class Particle:
    def __init__(self, x, y, color):
        self.x = x
        self.y = y
        self.color = color
        angle = random.uniform(0, math.pi * 2)
        speed = random.uniform(2, 7)
        self.vx = math.cos(angle) * speed
        self.vy = math.sin(angle) * speed
        self.life = 1.0
        self.decay = random.uniform(0.02, 0.04)
        self.size = random.uniform(3, 6)

    def update(self):
        self.x += self.vx
        self.y += self.vy
        self.life -= self.decay
        self.size *= 0.96

    def draw(self, ctx):
        ctx.globalAlpha = self.life
        ctx.fillStyle = self.color
        ctx.fillRect(self.x - self.size/2, self.y - self.size/2, self.size, self.size)
        ctx.globalAlpha = 1.0

class Ball:
    def __init__(self):
        self.reset()

    def reset(self):
        self.x = WIDTH / 2
        self.y = HEIGHT / 2
        self.radius = 7
        self.vx = 5 * (1 if random.random() > 0.5 else -1)
        self.vy = 5
        self.trail = []

    def update(self):
        self.trail.append((self.x, self.y))
        if len(self.trail) > 12:
            self.trail.pop(0)

        self.x += self.vx
        self.y += self.vy

        if self.x < self.radius or self.x > WIDTH - self.radius:
            self.vx *= -1
            game.shake(6)
        if self.y < self.radius:
            self.vy *= -1
            game.shake(6)

    def draw(self, ctx):
        for i, pos in enumerate(self.trail):
            alpha = (i / len(self.trail)) * 0.4
            ctx.fillStyle = f"rgba(0, 255, 255, {alpha})"
            ctx.beginPath()
            ctx.arc(pos[0], pos[1], self.radius * (0.5 + i/len(self.trail)*0.5), 0, math.pi * 2)
            ctx.fill()

        ctx.shadowBlur = 15
        ctx.shadowColor = "#00ffff"
        ctx.fillStyle = "#fff"
        ctx.beginPath()
        ctx.arc(self.x, self.y, self.radius, 0, math.pi * 2)
        ctx.fill()
        ctx.shadowBlur = 0

class Game:
    def __init__(self):
        self.canvas = js.document.getElementById("gameCanvas")
        self.ctx = self.canvas.getContext("2d")
        self.canvas.width = WIDTH
        self.canvas.height = HEIGHT
        
        self.ball = Ball()
        self.paddle_w = 80
        self.paddle_h = 12
        self.paddle_x = WIDTH / 2 - self.paddle_w / 2
        self.paddle_y = HEIGHT - 40
        
        self.bricks = []
        self.particles = []
        self.score = 0
        self.shake_time = 0
        self.running = False
        
        self.setup_bricks()
        self.setup_events()
        
        js.document.getElementById("loading").style.display = "none"

    def setup_bricks(self):
        self.bricks = []
        rows = 5
        cols = 8
        w = WIDTH / cols
        h = 25
        colors = ["#ff0055", "#ffaa00", "#00ff55", "#0055ff", "#aa00ff"]
        for r in range(rows):
            for c in range(cols):
                self.bricks.append({
                    "x": c * w + 2,
                    "y": r * h + 60,
                    "w": w - 4,
                    "h": h - 4,
                    "color": colors[r % len(colors)],
                    "active": True
                })

    def setup_events(self):
        def on_pointer(e):
            if not self.running: return
            rect = self.canvas.getBoundingClientRect()
            x = e.clientX if hasattr(e, "clientX") else e.touches[0].clientX
            rel_x = (x - rect.left) / rect.width * WIDTH
            self.paddle_x = rel_x - self.paddle_w / 2
            if self.paddle_x < 0: self.paddle_x = 0
            if self.paddle_x > WIDTH - self.paddle_w: self.paddle_x = WIDTH - self.paddle_w
            if hasattr(e, "preventDefault"): e.preventDefault()

        pointer_proxy = create_proxy(on_pointer)
        js.window.addEventListener("mousemove", pointer_proxy)
        js.window.addEventListener("touchmove", pointer_proxy, {"passive": False})

        def start_game(e):
            self.running = True
            js.document.getElementById("start-msg").style.display = "none"
            js.document.getElementById("over-msg").style.display = "none"
        
        js.document.getElementById("start-btn").onclick = create_proxy(start_game)
        
        def retry_game(e):
            self.score = 0
            js.document.getElementById("score").innerText = "0"
            self.ball.reset()
            self.setup_bricks()
            self.particles = []
            self.running = True
            js.document.getElementById("over-msg").style.display = "none"
            
        js.document.getElementById("retry-btn").onclick = create_proxy(retry_game)

    def shake(self, amount):
        self.shake_time = amount

    def update(self):
        if not self.running: return

        self.ball.update()

        # Paddle Collision
        if (self.ball.y + self.ball.radius > self.paddle_y and 
            self.ball.x > self.paddle_x and 
            self.ball.x < self.paddle_x + self.paddle_w):
            self.ball.vy = -abs(self.ball.vy)
            self.ball.y = self.paddle_y - self.ball.radius
            diff = (self.ball.x - (self.paddle_x + self.paddle_w / 2)) / (self.paddle_w / 2)
            self.ball.vx = diff * 8
            self.shake(5)

        # Brick Collision
        for b in self.bricks:
            if b["active"]:
                if (self.ball.x + self.ball.radius > b["x"] and 
                    self.ball.x - self.ball.radius < b["x"] + b["w"] and 
                    self.ball.y + self.ball.radius > b["y"] and 
                    self.ball.y - self.ball.radius < b["y"] + b["h"]):
                    
                    b["active"] = False
                    self.ball.vy *= -1
                    self.score += 10
                    js.document.getElementById("score").innerText = str(self.score)
                    for _ in range(12):
                        self.particles.append(Particle(b["x"] + b["w"]/2, b["y"] + b["h"]/2, b["color"]))
                    self.shake(10)
                    break

        if self.ball.y > HEIGHT:
            self.running = False
            js.document.getElementById("over-msg").style.display = "block"

        for p in self.particles[:]:
            p.update()
            if p.life <= 0:
                self.particles.remove(p)

    def draw(self):
        self.ctx.save()
        if self.shake_time > 0:
            self.ctx.translate(random.uniform(-self.shake_time, self.shake_time), 
                               random.uniform(-self.shake_time, self.shake_time))
            self.shake_time *= 0.9

        self.ctx.fillStyle = "rgba(0, 0, 0, 0.3)"
        self.ctx.fillRect(0, 0, WIDTH, HEIGHT)

        for b in self.bricks:
            if b["active"]:
                self.ctx.fillStyle = b["color"]
                self.ctx.shadowBlur = 10
                self.ctx.shadowColor = b["color"]
                self.ctx.fillRect(b["x"], b["y"], b["w"], b["h"])
        self.ctx.shadowBlur = 0

        for p in self.particles:
            p.draw(self.ctx)

        self.ball.draw(self.ctx)
        
        self.ctx.fillStyle = "#fff"
        self.ctx.shadowBlur = 15
        self.ctx.shadowColor = "#fff"
        self.ctx.beginPath()
        self.ctx.roundRect(self.paddle_x, self.paddle_y, self.paddle_w, self.paddle_h, 6)
        self.ctx.fill()
        
        self.ctx.restore()

game = Game()

# 毎フレーム Proxy を作らないようにループの外で定義
def run_loop(*args):
    game.update()
    game.draw()
    js.requestAnimationFrame(loop_proxy)

loop_proxy = create_proxy(run_loop)
js.requestAnimationFrame(loop_proxy)
    </script>
</body>
</html>
作品について
作品情報

作品を編集
TkoTko 作
ライセンス: 未指定（未指定/貯蔵庫のみ）
形式: html
タグ: -
利用バージョン: 3.7.14
アクセス数(累計): 37
アクセス数(今月): 4
更新日時: 2026/01/30 13:54 編集: 2026/01/30 14:01
作品公開情報
交流
ブロック崩しhigh

プログラム

作品情報

コメント
