AI game creator

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

No:4661

1322

←

Prev Next

→

kaleidoscope
Developer User3796｜Date and time 23/6/28 15:47:22
Build time 39.284 sec｜Game capacity 4.78KB｜

Script

分かりました。カレイドスコープというゲームを実装してみます。以下が実装例です。

このコードは、カレイドスコープというゲームを実装しています。画面をタッチすることで、カレイドスコープ内のパターンを回転させることができます。描画されている文字が回転していく様子を楽しむことができます。

←

Prev　Next

→ 　

Back　

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

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

分かりました。カレイドスコープというゲームを実装してみます。

以下が実装例です。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>カレイドスコープ</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    
    <script>
        // ゲームのボードサイズ
        const boardSize = {width: 300, height: 400};
        
        // カレイドスコープのクラス
        class Kaleidoscope {
            constructor(canvasElement) {
                this.canvas = canvasElement;
                this.ctx = this.canvas.getContext("2d");
                this.size = {
                    width: this.canvas.width,
                    height: this.canvas.height
                };
                this.center = {
                    x: this.size.width / 2,
                    y: this.size.height / 2
                };
                this.rotateAngle = 0;
                
                // タッチイベントのリスナーを追加
                this.canvas.addEventListener("touchstart", this.onTouchStart.bind(this));
                this.canvas.addEventListener("touchmove", this.onTouchMove.bind(this));
                this.canvas.addEventListener("touchend", this.onTouchEnd.bind(this));
            }
            
            onTouchStart(event) {
                event.preventDefault();
                this.startPos = {
                    x: event.touches[0].clientX,
                    y: event.touches[0].clientY
                };
            }
            
            onTouchMove(event) {
                event.preventDefault();
                const touchPos = {
                    x: event.touches[0].clientX,
                    y: event.touches[0].clientY
                };
                
                const deltaX = touchPos.x - this.startPos.x;
                this.rotate(deltaX * 0.01);
                
                this.startPos = touchPos;
            }
            
            onTouchEnd(event) {
                event.preventDefault();
                this.startPos = null;
            }
            
            rotate(angle) {
                this.rotateAngle += angle;
                this.rotateAngle = this.normalizeAngle(this.rotateAngle);
                this.draw();
            }
            
            normalizeAngle(angle) {
                return (angle + Math.PI * 2) % (Math.PI * 2);
            }
            
            draw() {
                // クリア
                this.ctx.clearRect(0, 0, this.size.width, this.size.height);
                
                // テストパターンを描画
                this.ctx.font = "48px serif";
                this.ctx.fillStyle = "red";
                this.ctx.fillText("カレイドスコープ", this.center.x, this.center.y);
                
                // カレイドスコープの描画
                this.ctx.save();
                this.ctx.translate(this.center.x, this.center.y);
                this.ctx.rotate(this.rotateAngle);
                
                // 左上の描画
                this.ctx.drawImage(this.canvas, -this.center.x, -this.center.y);
                
                // 右上の描画
                this.ctx.scale(-1, 1);
                this.ctx.drawImage(this.canvas, -this.center.x, -this.center.y);
                
                // 左下の描画
                this.ctx.scale(1, -1);
                this.ctx.drawImage(this.canvas, -this.center.x, -this.center.y);
                
                // 右下の描画
                this.ctx.scale(-1, 1);
                this.ctx.drawImage(this.canvas, -this.center.x, -this.center.y);
                
                this.ctx.restore();
            }
        }
        
        // ゲームの初期化
        function initialize() {
            const gameCanvas = document.getElementById("gameCanvas");
            gameCanvas.width = boardSize.width;
            gameCanvas.height = boardSize.height;
            
            const kaleidoscope = new Kaleidoscope(gameCanvas);
            kaleidoscope.draw();
        }
        
        // ページの読み込み完了時にゲームの初期化を実行
        window.addEventListener("load", initialize);
    </script>
</body>
</html>
```