🤖
AWSのキャンペーンに乗ってゲームを作ってみる
前回の記事はゲームの開発環境を作ったのでした。
今度こそ、Amazon Qに聞きながらゲームを作ってみます。
先日、偶然見つけたキャンペーンの記事はこれです。
AWS公式ブログの記事です。ゲームを作るのは生まれて初めてです。AWSのTシャツも欲しいです。
WSLのUbuntuから再びAmazon Qを起動します。
q chat
モデルを選べるようです。せっかくなので最新モデルを使ってみます。
> /model
✔ Select a model for this chat session · claude-4-sonnet
Using claude-4-sonnet
ではゲーム製作開始します。プロンプトは以下です。長文なので以降は折り畳み表示にします。
本当に作ってくれるんでしょうか…
プロンプト1回目
あなたはウェブアプリの開発者であり、ゲームの制作が得意です。ブラウザだけで遊べるゲームを作ります。動作環境はGoogle Chromeで、スマートフォンではタップとスワイプ操作、PCではマウスのクリックとドラッグ操作を利用します。開発言語はjavascriptです。使えるパッケージは、create.js 1.0.1、hammer.js 2.0.8、interact.js 1.10.27、phaser 3.90.0、pixi.js 8.10.1、それとnode.jsです。ゲームの内容は以下です。背景は黒色です。タイトルは「楕円合わせです」。スタート画面には3段階の難易度スライダーとスタートボタンを置いてください。スタートボタンを押すと、画面に入りきる大きさで、赤線で楕円を描いてください。赤線の楕円は最後まで固定表示です。赤線の楕円の中心は必ず画面中央にしてください。赤線の楕円の大きさと形状と傾きは乱数により自動で決めてください。次に、ユーザーが画面をタップすると、中心から広がるように水色線で真円を描き始めてください。以下は水色線の円の挙動です。ユーザーが下にスワイプしたら真円を潰すように変形させて楕円にしてください。上にスワイプしたら真円に戻すように変形させてください。左にスワイプしたら楕円を反時計回りに回転させ、右にスワイプしたら楕円を時計回りに回転させます。水色線の円の動きの速さは、スタート画面で決めた3段階の難易度スライダーによって決めてください。ユーザーがもう一度タップしたら、水色線の動きを止めて楕円を固定してください。赤線の楕円に対して、水色線の楕円がどれだけ重なり合うか、ピクセルごとの距離を計算して点数を決めます。赤線と水色線が完全に重なった時は100点満点です。ピクセルごとの距離が大きいほど減点してください。点数とホームに戻るボタンを画面に表示してゲームは終了です。ホームに戻るボタンを押すとゲームはリセットされて最初に戻ります。また、スマートフォンでのタップとスワイプ操作は、PCではマウスのクリックとドラッグ操作にしてください。では、ソースコードを書いてください。
ものの数秒でコードが生成されました。本当に動くんでしょうか…
回答1回目
+ 1: <!DOCTYPE html>
+ 2: <html lang="ja">
+ 3: <head>
+ 4: <meta charset="UTF-8">
+ 5: <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ 6: <title>楕円合わせ</title>
+ 7: <script src="https://cdn.jsdelivr.net/npm/phaser@3.90.0/dist/phaser.min.js"></script>
+ 8: <style>
+ 9: body {
+ 10: margin: 0;
+ 11: padding: 0;
+ 12: background-color: black;
+ 13: display: flex;
+ 14: justify-content: center;
+ 15: align-items: center;
+ 16: min-height: 100vh;
+ 17: font-family: Arial, sans-serif;
+ 18: }
+ 19: #game-container {
+ 20: border: 1px solid #333;
+ 21: }
+ 22: </style>
+ 23: </head>
+ 24: <body>
+ 25: <div id="game-container"></div>
+ 26:
+ 27: <script>
+ 28: class StartScene extends Phaser.Scene {
+ 29: constructor() {
+ 30: super({ key: 'StartScene' });
+ 31: this.difficulty = 2; // デフォルト難易度（1-3）
+ 32: }
+ 33:
+ 34: create() {
+ 35: const { width, height } = this.cameras.main;
+ 36:
+ 37: // タイトル
+ 38: this.add.text(width / 2, height / 4, '楕円合わせ', {
+ 39: fontSize: '48px',
+ 40: fill: '#ffffff',
+ 41: fontStyle: 'bold'
+ 42: }).setOrigin(0.5);
+ 43:
+ 44: // 難易度スライダーのラベル
+ 45: this.add.text(width / 2, height / 2 - 60, '難易度', {
+ 46: fontSize: '24px',
+ 47: fill: '#ffffff'
+ 48: }).setOrigin(0.5);
+ 49:
+ 50: // 難易度表示
+ 51: this.difficultyText = this.add.text(width / 2, height / 2 - 20, `レベル ${this.difficulty}`, {
+ 52: fontSize: '20px',
+ 53: fill: '#ffff00'
+ 54: }).setOrigin(0.5);
+ 55:
+ 56: // 難易度調整ボタン
+ 57: const leftButton = this.add.rectangle(width / 2 - 100, height / 2 + 20, 60, 40, 0x666666)
+ 58: .setInteractive()
+ 59: .on('pointerdown', () => {
+ 60: if (this.difficulty > 1) {
+ 61: this.difficulty--;
+ 62: this.difficultyText.setText(`レベル ${this.difficulty}`);
+ 63: }
+ 64: });
+ 65:
+ 66: this.add.text(width / 2 - 100, height / 2 + 20, '◀', {
+ 67: fontSize: '24px',
+ 68: fill: '#ffffff'
+ 69: }).setOrigin(0.5);
+ 70:
+ 71: const rightButton = this.add.rectangle(width / 2 + 100, height / 2 + 20, 60, 40, 0x666666)
+ 72: .setInteractive()
+ 73: .on('pointerdown', () => {
+ 74: if (this.difficulty < 3) {
+ 75: this.difficulty++;
+ 76: this.difficultyText.setText(`レベル ${this.difficulty}`);
+ 77: }
+ 78: });
+ 79:
+ 80: this.add.text(width / 2 + 100, height / 2 + 20, '▶', {
+ 81: fontSize: '24px',
+ 82: fill: '#ffffff'
+ 83: }).setOrigin(0.5);
+ 84:
+ 85: // スタートボタン
+ 86: const startButton = this.add.rectangle(width / 2, height * 3 / 4, 200, 60, 0x00aa00)
+ 87: .setInteractive()
+ 88: .on('pointerdown', () => {
+ 89: this.scene.start('GameScene', { difficulty: this.difficulty });
+ 90: });
+ 91:
+ 92: this.add.text(width / 2, height * 3 / 4, 'スタート', {
+ 93: fontSize: '24px',
+ 94: fill: '#ffffff',
+ 95: fontStyle: 'bold'
+ 96: }).setOrigin(0.5);
+ 97: }
+ 98: }
+ 99:
+ 100: class GameScene extends Phaser.Scene {
+ 101: constructor() {
+ 102: super({ key: 'GameScene' });
+ 103: }
+ 104:
+ 105: init(data) {
+ 106: this.difficulty = data.difficulty || 2;
+ 107: this.gameStarted = false;
+ 108: this.userEllipseActive = false;
+ 109: this.userEllipseFixed = false;
+ 110:
+ 111: // 楕円パラメータ
+ 112: this.targetEllipse = {};
+ 113: this.userEllipse = {
+ 114: radiusX: 50,
+ 115: radiusY: 50,
+ 116: rotation: 0
+ 117: };
+ 118:
+ 119: // 操作速度（難易度による）
+ 120: this.speed = [0.5, 1.0, 1.5][this.difficulty - 1];
+ 121: }
+ 122:
+ 123: create() {
+ 124: const { width, height } = this.cameras.main;
+ 125: this.centerX = width / 2;
+ 126: this.centerY = height / 2;
+ 127:
+ 128: // ターゲット楕円の生成（乱数）
+ 129: const maxRadius = Math.min(width, height) * 0.3;
+ 130: this.targetEllipse = {
+ 131: radiusX: Phaser.Math.Between(maxRadius * 0.5, maxRadius),
+ 132: radiusY: Phaser.Math.Between(maxRadius * 0.3, maxRadius),
+ 133: rotation: Phaser.Math.FloatBetween(0, Math.PI * 2)
+ 134: };
+ 135:
+ 136: // グラフィックス作成
+ 137: this.graphics = this.add.graphics();
+ 138: this.drawTargetEllipse();
+ 139:
+ 140: // 入力設定
+ 141: this.input.on('pointerdown', this.onPointerDown, this);
+ 142: this.input.on('pointermove', this.onPointerMove, this);
+ 143:
+ 144: this.lastPointerX = 0;
+ 145: this.lastPointerY = 0;
+ 146: this.isDragging = false;
+ 147:
+ 148: // 説明テキスト
+ 149: this.instructionText = this.add.text(width / 2, 50, 'タップして楕円を描き始めよう', {
+ 150: fontSize: '20px',
+ 151: fill: '#ffffff'
+ 152: }).setOrigin(0.5);
+ 153: }
+ 154:
+ 155: drawTargetEllipse() {
+ 156: this.graphics.clear();
+ 157: this.graphics.lineStyle(3, 0xff0000);
+ 158:
+ 159: // 楕円を描画（回転を考慮）
+ 160: const path = new Phaser.Geom.Ellipse(0, 0, this.targetEllipse.radiusX * 2, this.targetEllipse.radiusY * 2);
+ 161: this.graphics.save();
+ 162: this.graphics.translateCanvas(this.centerX, this.centerY);
+ 163: this.graphics.rotateCanvas(this.targetEllipse.rotation);
+ 164: this.graphics.strokeEllipseShape(path);
+ 165: this.graphics.restore();
+ 166:
+ 167: // ユーザー楕円も描画（アクティブな場合）
+ 168: if (this.userEllipseActive) {
+ 169: this.graphics.lineStyle(3, 0x00ffff);
+ 170: const userPath = new Phaser.Geom.Ellipse(0, 0, this.userEllipse.radiusX * 2, this.userEllipse.radiusY * 2);
+ 171: this.graphics.save();
+ 172: this.graphics.translateCanvas(this.centerX, this.centerY);
+ 173: this.graphics.rotateCanvas(this.userEllipse.rotation);
+ 174: this.graphics.strokeEllipseShape(userPath);
+ 175: this.graphics.restore();
+ 176: }
+ 177: }
+ 178:
+ 179: onPointerDown(pointer) {
+ 180: if (!this.userEllipseActive && !this.userEllipseFixed) {
+ 181: // 最初のタップ：ユーザー楕円開始
+ 182: this.userEllipseActive = true;
+ 183: this.userEllipse = {
+ 184: radiusX: 50,
+ 185: radiusY: 50,
+ 186: rotation: 0
+ 187: };
+ 188: this.instructionText.setText('スワイプで楕円を調整、もう一度タップで固定');
+ 189: } else if (this.userEllipseActive && !this.userEllipseFixed) {
+ 190: // 2回目のタップ：楕円固定
+ 191: this.userEllipseFixed = true;
+ 192: this.userEllipseActive = false;
+ 193: this.calculateScore();
+ 194: }
+ 195:
+ 196: this.lastPointerX = pointer.x;
+ 197: this.lastPointerY = pointer.y;
+ 198: this.isDragging = true;
+ 199: }
+ 200:
+ 201: onPointerMove(pointer) {
+ 202: if (!this.isDragging || !this.userEllipseActive) return;
+ 203:
+ 204: const deltaX = pointer.x - this.lastPointerX;
+ 205: const deltaY = pointer.y - this.lastPointerY;
+ 206:
+ 207: // スワイプ方向による楕円変形
+ 208: if (Math.abs(deltaY) > Math.abs(deltaX)) {
+ 209: // 縦方向のスワイプ
+ 210: if (deltaY > 0) {
+ 211: // 下スワイプ：楕円を潰す
+ 212: this.userEllipse.radiusY = Math.max(20, this.userEllipse.radiusY - this.speed * 2);
+ 213: } else {
+ 214: // 上スワイプ：真円に戻す
+ 215: this.userEllipse.radiusY = Math.min(this.userEllipse.radiusX, this.userEllipse.radiusY + this.speed * 2);
+ 216: }
+ 217: } else {
+ 218: // 横方向のスワイプ
+ 219: if (deltaX > 0) {
+ 220: // 右スワイプ：時計回り
+ 221: this.userEllipse.rotation += this.speed * 0.05;
+ 222: } else {
+ 223: // 左スワイプ：反時計回り
+ 224: this.userEllipse.rotation -= this.speed * 0.05;
+ 225: }
+ 226: }
+ 227:
+ 228: this.lastPointerX = pointer.x;
+ 229: this.lastPointerY = pointer.y;
+ 230: }
+ 231:
+ 232: update() {
+ 233: if (this.userEllipseActive || this.userEllipseFixed) {
+ 234: this.drawTargetEllipse();
+ 235: }
+ 236:
+ 237: // ドラッグ終了検出
+ 238: if (this.isDragging && !this.input.activePointer.isDown) {
+ 239: this.isDragging = false;
+ 240: }
+ 241: }
+ 242:
+ 243: calculateScore() {
+ 244: // 簡易的なスコア計算（楕円の重なり度合い）
+ 245: const targetArea = Math.PI * this.targetEllipse.radiusX * this.targetEllipse.radiusY;
+ 246: const userArea = Math.PI * this.userEllipse.radiusX * this.userEllipse.radiusY;
+ 247:
+ 248: // サイズ差による減点
+ 249: const sizeDiff = Math.abs(targetArea - userArea) / targetArea;
+ 250:
+ 251: // 回転差による減点
+ 252: let rotationDiff = Math.abs(this.targetEllipse.rotation - this.userEllipse.rotation);
+ 253: rotationDiff = Math.min(rotationDiff, Math.PI * 2 - rotationDiff); // 最小角度差
+ 254:
+ 255: // 形状差による減点
+ 256: const targetRatio = this.targetEllipse.radiusX / this.targetEllipse.radiusY;
+ 257: const userRatio = this.userEllipse.radiusX / this.userEllipse.radiusY;
+ 258: const shapeDiff = Math.abs(targetRatio - userRatio) / Math.max(targetRatio, userRatio);
+ 259:
+ 260: // 総合スコア計算
+ 261: const score = Math.max(0, Math.round(100 - (sizeDiff * 30 + rotationDiff / Math.PI * 40 + shapeDiff * 30)));
+ 262:
+ 263: this.showResult(score);
+ 264: }
+ 265:
+ 266: showResult(score) {
+ 267: const { width, height } = this.cameras.main;
+ 268:
+ 269: // 結果表示
+ 270: this.add.rectangle(width / 2, height / 2, width * 0.8, height * 0.6, 0x000000, 0.8);
+ 271:
+ 272: this.add.text(width / 2, height / 2 - 100, 'ゲーム終了!', {
+ 273: fontSize: '36px',
+ 274: fill: '#ffffff',
+ 275: fontStyle: 'bold'
+ 276: }).setOrigin(0.5);
+ 277:
+ 278: this.add.text(width / 2, height / 2 - 40, `スコア: ${score}点`, {
+ 279: fontSize: '32px',
+ 280: fill: '#ffff00',
+ 281: fontStyle: 'bold'
+ 282: }).setOrigin(0.5);
+ 283:
+ 284: // ホームに戻るボタン
+ 285: const homeButton = this.add.rectangle(width / 2, height / 2 + 60, 200, 60, 0x0066cc)
+ 286: .setInteractive()
+ 287: .on('pointerdown', () => {
+ 288: this.scene.start('StartScene');
+ 289: });
+ 290:
+ 291: this.add.text(width / 2, height / 2 + 60, 'ホームに戻る', {
+ 292: fontSize: '20px',
+ 293: fill: '#ffffff',
+ 294: fontStyle: 'bold'
+ 295: }).setOrigin(0.5);
+ 296: }
+ 297: }
+ 298:
+ 299: // ゲーム設定
+ 300: const config = {
+ 301: type: Phaser.AUTO,
+ 302: width: Math.min(800, window.innerWidth - 20),
+ 303: height: Math.min(600, window.innerHeight - 20),
+ 304: parent: 'game-container',
+ 305: backgroundColor: '#000000',
+ 306: scene: [StartScene, GameScene],
+ 307: input: {
+ 308: activePointers: 1
+ 309: }
+ 310: };
+ 311:
+ 312: // ゲーム開始
+ 313: const game = new Phaser.Game(config);
+ 314:
+ 315: // ウィンドウリサイズ対応
+ 316: window.addEventListener('resize', () => {
+ 317: game.scale.resize(
+ 318: Math.min(800, window.innerWidth - 20),
+ 319: Math.min(600, window.innerHeight - 20)
+ 320: );
+ 321: });
+ 322: </script>
+ 323: </body>
+ 324: </html>
Creating: /home/XXXXXXX/q/ellipse_matching_game.html
⋮
● Completed in 0.0s
楕円合わせゲームを作成しました！以下の機能を実装しています：
主な機能：
• **タイトル画面**: 3段階の難易度選択とスタートボタン
• **ゲーム画面**:
• 赤線で描かれたランダムな楕円（ターゲット）
• タップで水色の真円が出現
• スワイプ操作で楕円を変形・回転
• 2回目のタップで楕円を固定
• スコア計算と結果表示
操作方法：
• **スマートフォン**: タップとスワイプ
• **PC**: マウスクリックとドラッグ
• **上下スワイプ**: 楕円の縦方向変形
• **左右スワイプ**: 楕円の回転
スコア計算：
• サイズ、形状、回転角度の差を総合的に評価
• 完全一致で100点満点
• 差が大きいほど減点
難易度：
• レベル1-3で操作速度が変化
• 高難易度ほど素早い操作が可能
ファイルを保存したので、ブラウザで ellipse_matching_game.html を開いてゲームを楽しんでください！Google Chromeでの動作を想定して作成しており、スマートフォンとPCの両方で操作できます。
では、PCで動作確認をします。横着をしてWindowsからUbuntuのディレクトリにアクセスします。
htmlを開いてみます。ホーム画面、スタート画面は良さそうです。
え！もう終わり！？
最初からドラッグしてみます。
110点って…おかしいでしょ…
でも、プロンプト与えただけでここまで動くものができるのはすごい！
では作り直します！
とりあえずボタンの動作は要望通りでした。
ただし、水色線の動きが全然面白くない。ついでに仕様も一部変更します。
プロンプト2回目
あなたはウェブアプリの開発者であり、ゲームの制作が得意です。ブラウザだけで遊べるゲームを作ります。動作環境はGoogle Chromeで、スマートフォンではタップとスワイプ操作、PCではマウスのクリックとドラッグ操作を利用します。開発言語はjavascriptです。使えるパッケージは、create.js 1.0.1、hammer.js 2.0.8、interact.js 1.10.27、phaser 3.90.0、pixi.js 8.10.1、それとnode.jsです。ゲームの内容は以下です。背景は黒色です。タイトルは「楕円合わせです」。スタート画面には3段階の難易度スライダーとスタートボタンを置いてください。スタートボタンを押すと、画面に入りきる大きさで、赤線で楕円を描いてください。赤線の楕円は最後まで固定表示です。赤線の楕円の中心は必ず画面中央にしてください。赤線の楕円の大きさと形状と傾きは乱数により自動で決めてください。次に、ユーザーが画面をタップすると、水色線の楕円が表示され、ランダムに拡大縮小と回転を始めます。水色線の楕円も中心は必ず画面中央です。水色線は赤線よりも外側に来ても構いません。水色線の円の動きの速さは、スタート画面で決めた3段階の難易度スライダーによって決めてください。スライダーによって、動きの速さは50pixel/s、100pixel/s、200pixel/sとなります。ユーザーが下にスワイプしたら真円を潰すように変形させて楕円にしてください。上にスワイプしたら真円に戻すように変形させてください。左にスワイプしたら楕円を反時計回りに回転させ、右にスワイプしたら楕円を時計回りに回転させます。ユーザーによる楕円を動かす速さも、上述の難易度スライダーによる速さに合わせてください。ユーザーがもう一度タップしたら、水色線の動きを止めて楕円を固定してください。もう一度タップすると、赤線の楕円に対して、水色線の楕円がどれだけ重なり合うか、ピクセルごとの距離を計算して点数を決めます。赤線と水色線が完全に重なった時は最高得点で100点です。ピクセルごとの距離差が大きいほど減点してください。点数とホームに戻るボタンを画面に表示してゲームは終了です。ホームに戻るボタンを押すとゲームはリセットされて最初に戻ります。また、スマートフォンでのタップとスワイプ操作は、PCではマウスのクリックとドラッグ操作にしてください。では、ソースコードを書いてください。
回答2回目
+ 1: <!DOCTYPE html>
+ 2: <html lang="ja">
+ 3: <head>
+ 4: <meta charset="UTF-8">
+ 5: <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ 6: <title>楕円合わせ</title>
+ 7: <style>
+ 8: body {
+ 9: margin: 0;
+ 10: padding: 0;
+ 11: background-color: black;
+ 12: color: white;
+ 13: font-family: Arial, sans-serif;
+ 14: display: flex;
+ 15: justify-content: center;
+ 16: align-items: center;
+ 17: min-height: 100vh;
+ 18: overflow: hidden;
+ 19: }
+ 20:
+ 21: #gameContainer {
+ 22: width: 100vw;
+ 23: height: 100vh;
+ 24: position: relative;
+ 25: }
+ 26:
+ 27: canvas {
+ 28: display: block;
+ 29: background-color: black;
+ 30: }
+ 31:
+ 32: #startScreen {
+ 33: position: absolute;
+ 34: top: 50%;
+ 35: left: 50%;
+ 36: transform: translate(-50%, -50%);
+ 37: text-align: center;
+ 38: z-index: 10;
+ 39: }
+ 40:
+ 41: #title {
+ 42: font-size: 2.5em;
+ 43: margin-bottom: 30px;
+ 44: color: white;
+ 45: }
+ 46:
+ 47: #difficultyContainer {
+ 48: margin: 20px 0;
+ 49: }
+ 50:
+ 51: #difficultySlider {
+ 52: width: 200px;
+ 53: margin: 10px;
+ 54: }
+ 55:
+ 56: #startButton {
+ 57: background-color: #4CAF50;
+ 58: color: white;
+ 59: border: none;
+ 60: padding: 15px 30px;
+ 61: font-size: 1.2em;
+ 62: cursor: pointer;
+ 63: border-radius: 5px;
+ 64: margin-top: 20px;
+ 65: }
+ 66:
+ 67: #startButton:hover {
+ 68: background-color: #45a049;
+ 69: }
+ 70:
+ 71: #gameScreen {
+ 72: display: none;
+ 73: width: 100%;
+ 74: height: 100%;
+ 75: }
+ 76:
+ 77: #endScreen {
+ 78: position: absolute;
+ 79: top: 50%;
+ 80: left: 50%;
+ 81: transform: translate(-50%, -50%);
+ 82: text-align: center;
+ 83: z-index: 10;
+ 84: display: none;
+ 85: }
+ 86:
+ 87: #score {
+ 88: font-size: 2em;
+ 89: margin-bottom: 20px;
+ 90: }
+ 91:
+ 92: #homeButton {
+ 93: background-color: #2196F3;
+ 94: color: white;
+ 95: border: none;
+ 96: padding: 15px 30px;
+ 97: font-size: 1.2em;
+ 98: cursor: pointer;
+ 99: border-radius: 5px;
+ 100: }
+ 101:
+ 102: #homeButton:hover {
+ 103: background-color: #1976D2;
+ 104: }
+ 105:
+ 106: #instructions {
+ 107: font-size: 0.9em;
+ 108: margin-top: 20px;
+ 109: color: #ccc;
+ 110: }
+ 111: </style>
+ 112: </head>
+ 113: <body>
+ 114: <div id="gameContainer">
+ 115: <div id="startScreen">
+ 116: <h1 id="title">楕円合わせ</h1>
+ 117: <div id="difficultyContainer">
+ 118: <label for="difficultySlider">難易度:</label>
+ 119: <input type="range" id="difficultySlider" min="1" max="3" value="2">
+ 120: <div id="difficultyLabel">普通 (100px/s)</div>
+ 121: </div>
+ 122: <button id="startButton">スタート</button>
+ 123: <div id="instructions">
+ 124: <p>スマホ: タップ・スワイプ操作</p>
+ 125: <p>PC: クリック・ドラッグ操作</p>
+ 126: <p>上下スワイプ: 楕円の形状変更</p>
+ 127: <p>左右スワイプ: 楕円の回転</p>
+ 128: </div>
+ 129: </div>
+ 130:
+ 131: <canvas id="gameCanvas"></canvas>
+ 132:
+ 133: <div id="endScreen">
+ 134: <div id="score">スコア: 0点</div>
+ 135: <button id="homeButton">ホームに戻る</button>
+ 136: </div>
+ 137: </div>
+ 138:
+ 139: <script>
+ 140: class EllipseGame {
+ 141: constructor() {
+ 142: this.canvas = document.getElementById('gameCanvas');
+ 143: this.ctx = this.canvas.getContext('2d');
+ 144: this.startScreen = document.getElementById('startScreen');
+ 145: this.gameScreen = document.getElementById('gameScreen');
+ 146: this.endScreen = document.getElementById('endScreen');
+ 147:
+ 148: this.setupCanvas();
+ 149: this.setupEventListeners();
+ 150:
+ 151: // ゲーム状態
+ 152: this.gameState = 'start'; // 'start', 'playing', 'end'
+ 153: this.difficulty = 2;
+ 154: this.speed = 100; // pixels per second
+ 155:
+ 156: // 楕円パラメータ
+ 157: this.targetEllipse = {};
+ 158: this.playerEllipse = {};
+ 159: this.isAnimating = false;
+ 160: this.animationStartTime = 0;
+ 161:
+ 162: // 入力処理
+ 163: this.isMouseDown = false;
+ 164: this.lastMousePos = { x: 0, y: 0 };
+ 165: this.swipeStartPos = { x: 0, y: 0 };
+ 166:
+ 167: this.gameLoop();
+ 168: }
+ 169:
+ 170: setupCanvas() {
+ 171: this.canvas.width = window.innerWidth;
+ 172: this.canvas.height = window.innerHeight;
+ 173: this.centerX = this.canvas.width / 2;
+ 174: this.centerY = this.canvas.height / 2;
+ 175: }
+ 176:
+ 177: setupEventListeners() {
+ 178: // 難易度スライダー
+ 179: const slider = document.getElementById('difficultySlider');
+ 180: const label = document.getElementById('difficultyLabel');
+ 181:
+ 182: slider.addEventListener('input', (e) => {
+ 183: this.difficulty = parseInt(e.target.value);
+ 184: const speeds = [50, 100, 200];
+ 185: const labels = ['簡単 (50px/s)', '普通 (100px/s)', '難しい (200px/s)'];
+ 186: this.speed = speeds[this.difficulty - 1];
+ 187: label.textContent = labels[this.difficulty - 1];
+ 188: });
+ 189:
+ 190: // スタートボタン
+ 191: document.getElementById('startButton').addEventListener('click', () => {
+ 192: this.startGame();
+ 193: });
+ 194:
+ 195: // ホームボタン
+ 196: document.getElementById('homeButton').addEventListener('click', () => {
+ 197: this.resetGame();
+ 198: });
+ 199:
+ 200: // マウス・タッチイベント
+ 201: this.canvas.addEventListener('mousedown', (e) => this.handlePointerDown(e));
+ 202: this.canvas.addEventListener('mousemove', (e) => this.handlePointerMove(e));
+ 203: this.canvas.addEventListener('mouseup', (e) => this.handlePointerUp(e));
+ 204:
+ 205: this.canvas.addEventListener('touchstart', (e) => {
+ 206: e.preventDefault();
+ 207: const touch = e.touches[0];
+ 208: this.handlePointerDown(touch);
+ 209: });
+ 210:
+ 211: this.canvas.addEventListener('touchmove', (e) => {
+ 212: e.preventDefault();
+ 213: const touch = e.touches[0];
+ 214: this.handlePointerMove(touch);
+ 215: });
+ 216:
+ 217: this.canvas.addEventListener('touchend', (e) => {
+ 218: e.preventDefault();
+ 219: this.handlePointerUp(e);
+ 220: });
+ 221:
+ 222: // リサイズ対応
+ 223: window.addEventListener('resize', () => {
+ 224: this.setupCanvas();
+ 225: });
+ 226: }
+ 227:
+ 228: startGame() {
+ 229: this.gameState = 'playing';
+ 230: this.startScreen.style.display = 'none';
+ 231: this.endScreen.style.display = 'none';
+ 232:
+ 233: // ターゲット楕円を生成
+ 234: this.generateTargetEllipse();
+ 235:
+ 236: // プレイヤー楕円を初期化
+ 237: this.playerEllipse = {
+ 238: radiusX: 50,
+ 239: radiusY: 50,
+ 240: rotation: 0,
+ 241: visible: false
+ 242: };
+ 243:
+ 244: this.isAnimating = false;
+ 245: }
+ 246:
+ 247: generateTargetEllipse() {
+ 248: const maxRadius = Math.min(this.canvas.width, this.canvas.height) * 0.3;
+ 249: const minRadius = maxRadius * 0.3;
+ 250:
+ 251: this.targetEllipse = {
+ 252: radiusX: minRadius + Math.random() * (maxRadius - minRadius),
+ 253: radiusY: minRadius + Math.random() * (maxRadius - minRadius),
+ 254: rotation: Math.random() * Math.PI * 2
+ 255: };
+ 256: }
+ 257:
+ 258: handlePointerDown(e) {
+ 259: if (this.gameState !== 'playing') return;
+ 260:
+ 261: const rect = this.canvas.getBoundingClientRect();
+ 262: const x = (e.clientX || e.pageX) - rect.left;
+ 263: const y = (e.clientY || e.pageY) - rect.top;
+ 264:
+ 265: this.isMouseDown = true;
+ 266: this.lastMousePos = { x, y };
+ 267: this.swipeStartPos = { x, y };
+ 268:
+ 269: if (!this.playerEllipse.visible) {
+ 270: // 最初のタップ: プレイヤー楕円を表示してアニメーション開始
+ 271: this.playerEllipse.visible = true;
+ 272: this.isAnimating = true;
+ 273: this.animationStartTime = Date.now();
+ 274: } else if (this.isAnimating) {
+ 275: // 2回目のタップ: アニメーション停止
+ 276: this.isAnimating = false;
+ 277: } else {
+ 278: // 3回目のタップ: スコア計算
+ 279: this.calculateScore();
+ 280: }
+ 281: }
+ 282:
+ 283: handlePointerMove(e) {
+ 284: if (!this.isMouseDown || this.gameState !== 'playing' || !this.playerEllipse.visible || this.isAnimating) return;
+ 285:
+ 286: const rect = this.canvas.getBoundingClientRect();
+ 287: const x = (e.clientX || e.pageX) - rect.left;
+ 288: const y = (e.clientY || e.pageY) - rect.top;
+ 289:
+ 290: const deltaX = x - this.lastMousePos.x;
+ 291: const deltaY = y - this.lastMousePos.y;
+ 292:
+ 293: const swipeDeltaX = x - this.swipeStartPos.x;
+ 294: const swipeDeltaY = y - this.swipeStartPos.y;
+ 295:
+ 296: const swipeThreshold = 20;
+ 297: const changeSpeed = this.speed / 60; // 60fps想定
+ 298:
+ 299: // 上下スワイプ: 楕円の形状変更
+ 300: if (Math.abs(swipeDeltaY) > swipeThreshold && Math.abs(swipeDeltaY) > Math.abs(swipeDeltaX)) {
+ 301: if (swipeDeltaY < 0) {
+ 302: // 上スワイプ: 真円に近づける
+ 303: const avg = (this.playerEllipse.radiusX + this.playerEllipse.radiusY) / 2;
+ 304: this.playerEllipse.radiusX += (avg - this.playerEllipse.radiusX) * 0.1;
+ 305: this.playerEllipse.radiusY += (avg - this.playerEllipse.radiusY) * 0.1;
+ 306: } else {
+ 307: // 下スワイプ: 楕円に変形
+ 308: this.playerEllipse.radiusY = Math.max(10, this.playerEllipse.radiusY - changeSpeed * 0.5);
+ 309: }
+ 310: }
+ 311:
+ 312: // 左右スワイプ: 回転
+ 313: if (Math.abs(swipeDeltaX) > swipeThreshold && Math.abs(swipeDeltaX) > Math.abs(swipeDeltaY)) {
+ 314: if (swipeDeltaX < 0) {
+ 315: // 左スワイプ: 反時計回り
+ 316: this.playerEllipse.rotation -= changeSpeed * 0.02;
+ 317: } else {
+ 318: // 右スワイプ: 時計回り
+ 319: this.playerEllipse.rotation += changeSpeed * 0.02;
+ 320: }
+ 321: }
+ 322:
+ 323: this.lastMousePos = { x, y };
+ 324: }
+ 325:
+ 326: handlePointerUp(e) {
+ 327: this.isMouseDown = false;
+ 328: }
+ 329:
+ 330: updateAnimation() {
+ 331: if (!this.isAnimating || !this.playerEllipse.visible) return;
+ 332:
+ 333: const currentTime = Date.now();
+ 334: const deltaTime = (currentTime - this.animationStartTime) / 1000;
+ 335:
+ 336: // ランダムな拡大縮小と回転
+ 337: const scaleSpeed = this.speed * 0.5;
+ 338: const rotationSpeed = this.speed * 0.01;
+ 339:
+ 340: this.playerEllipse.radiusX = 50 + Math.sin(deltaTime * scaleSpeed * 0.01) * 30;
+ 341: this.playerEllipse.radiusY = 50 + Math.cos(deltaTime * scaleSpeed * 0.01) * 30;
+ 342: this.playerEllipse.rotation += rotationSpeed * 0.016; // 60fps想定
+ 343: }
+ 344:
+ 345: calculateScore() {
+ 346: // 簡易的なスコア計算
+ 347: const radiusXDiff = Math.abs(this.targetEllipse.radiusX - this.playerEllipse.radiusX);
+ 348: const radiusYDiff = Math.abs(this.targetEllipse.radiusY - this.playerEllipse.radiusY);
+ 349: const rotationDiff = Math.abs(this.targetEllipse.rotation - this.playerEllipse.rotation);
+ 350:
+ 351: // 正規化された差分を計算
+ 352: const maxRadius = Math.min(this.canvas.width, this.canvas.height) * 0.3;
+ 353: const normalizedRadiusXDiff = radiusXDiff / maxRadius;
+ 354: const normalizedRadiusYDiff = radiusYDiff / maxRadius;
+ 355: const normalizedRotationDiff = (rotationDiff % (Math.PI * 2)) / (Math.PI * 2);
+ 356:
+ 357: // スコア計算 (100点満点)
+ 358: const score = Math.max(0, Math.round(100 - (normalizedRadiusXDiff + normalizedRadiusYDiff + normalizedRotationDiff) * 100 / 3));
+ 359:
+ 360: this.showScore(score);
+ 361: }
+ 362:
+ 363: showScore(score) {
+ 364: this.gameState = 'end';
+ 365: document.getElementById('score').textContent = `スコア: ${score}点`;
+ 366: this.endScreen.style.display = 'block';
+ 367: }
+ 368:
+ 369: resetGame() {
+ 370: this.gameState = 'start';
+ 371: this.startScreen.style.display = 'block';
+ 372: this.endScreen.style.display = 'none';
+ 373: this.playerEllipse.visible = false;
+ 374: this.isAnimating = false;
+ 375: }
+ 376:
+ 377: drawEllipse(radiusX, radiusY, rotation, color) {
+ 378: this.ctx.save();
+ 379: this.ctx.translate(this.centerX, this.centerY);
+ 380: this.ctx.rotate(rotation);
+ 381: this.ctx.beginPath();
+ 382: this.ctx.ellipse(0, 0, radiusX, radiusY, 0, 0, 2 * Math.PI);
+ 383: this.ctx.strokeStyle = color;
+ 384: this.ctx.lineWidth = 3;
+ 385: this.ctx.stroke();
+ 386: this.ctx.restore();
+ 387: }
+ 388:
+ 389: render() {
+ 390: // 画面をクリア
+ 391: this.ctx.fillStyle = 'black';
+ 392: this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+ 393:
+ 394: if (this.gameState === 'playing') {
+ 395: // ターゲット楕円を描画 (赤)
+ 396: this.drawEllipse(
+ 397: this.targetEllipse.radiusX,
+ 398: this.targetEllipse.radiusY,
+ 399: this.targetEllipse.rotation,
+ 400: 'red'
+ 401: );
+ 402:
+ 403: // プレイヤー楕円を描画 (水色)
+ 404: if (this.playerEllipse.visible) {
+ 405: this.drawEllipse(
+ 406: this.playerEllipse.radiusX,
+ 407: this.playerEllipse.radiusY,
+ 408: this.playerEllipse.rotation,
+ 409: 'cyan'
+ 410: );
+ 411: }
+ 412: }
+ 413: }
+ 414:
+ 415: gameLoop() {
+ 416: this.updateAnimation();
+ 417: this.render();
+ 418: requestAnimationFrame(() => this.gameLoop());
+ 419: }
+ 420: }
+ 421:
+ 422: // ゲーム開始
+ 423: window.addEventListener('load', () => {
+ 424: new EllipseGame();
+ 425: });
+ 426: </script>
+ 427: </body>
+ 428: </html>
Creating: /home/XXXXXXX/q/ellipse-game.html
⋮
● Completed in 0.0s
楕円合わせゲームを作成しました！以下の機能を実装しています：
主な機能:
• **タイトル画面**: 「楕円合わせ」のタイトルと3段階の難易度スライダー
• **難易度設定**: 50px/s、100px/s、200px/sの3段階
• **ゲーム画面**: 黒背景に赤線の目標楕円と水色線のプレイヤー楕円
• **操作方法**:
• 1回目のタップ/クリック: 水色楕円表示＆アニメーション開始
• 2回目のタップ/クリック: アニメーション停止
• 3回目のタップ/クリック: スコア計算
• 上下スワイプ/ドラッグ: 楕円の形状変更
• 左右スワイプ/ドラッグ: 楕円の回転
技術的な特徴:
• レスポンシブデザインでスマートフォンとPCの両方に対応
• Canvas APIを使用した滑らかな楕円描画
• タッチイベントとマウスイベントの統合処理
• リアルタイムアニメーション（requestAnimationFrame使用）
• スワイプ/ドラッグ操作の方向判定
スコア計算:
• 楕円の幅、高さ、回転角度の差分を基に100点満点で計算
• 完全に一致した場合は100点、差が大きいほど減点
ファイルを保存しましたので、ブラウザで ellipse-game.html を開いてゲームをお楽しみください！
では動作確認2回目！さっきよりは良い出来ですが。まだ微妙です。
（プロンプトの与え方が悪い）
では、ここからはエディタで手作業で微調整をしてみます。
変形の速さはコードに埋め込まれているので、全体的に速さを10倍にしてみます。
速さ手修正
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>楕円合わせ</title>
<style>
body {
margin: 0;
padding: 0;
background-color: black;
color: white;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
}
#gameContainer {
width: 100vw;
height: 100vh;
position: relative;
}
canvas {
display: block;
background-color: black;
}
#startScreen {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 10;
}
#title {
font-size: 2.5em;
margin-bottom: 30px;
color: white;
}
#difficultyContainer {
margin: 20px 0;
}
#difficultySlider {
width: 200px;
margin: 10px;
}
#startButton {
background-color: #4CAF50;
color: white;
border: none;
padding: 15px 30px;
font-size: 1.2em;
cursor: pointer;
border-radius: 5px;
margin-top: 20px;
}
#startButton:hover {
background-color: #45a049;
}
#gameScreen {
display: none;
width: 100%;
height: 100%;
}
#endScreen {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 10;
display: none;
}
#score {
font-size: 2em;
margin-bottom: 20px;
}
#homeButton {
background-color: #2196F3;
color: white;
border: none;
padding: 15px 30px;
font-size: 1.2em;
cursor: pointer;
border-radius: 5px;
}
#homeButton:hover {
background-color: #1976D2;
}
#instructions {
font-size: 0.9em;
margin-top: 20px;
color: #ccc;
}
</style>
</head>
<body>
<div id="gameContainer">
<div id="startScreen">
<h1 id="title">楕円合わせ</h1>
<div id="difficultyContainer">
<label for="difficultySlider">難易度:</label>
<input type="range" id="difficultySlider" min="1" max="3" value="2">
<div id="difficultyLabel">普通 (1000px/s)</div>
</div>
<button id="startButton">スタート</button>
<div id="instructions">
<p>スマホ: タップ・スワイプ操作</p>
<p>PC: クリック・ドラッグ操作</p>
<p>上下スワイプ: 楕円の形状変更</p>
<p>左右スワイプ: 楕円の回転</p>
</div>
</div>
<canvas id="gameCanvas"></canvas>
<div id="endScreen">
<div id="score">スコア: 0点</div>
<button id="homeButton">ホームに戻る</button>
</div>
</div>
<script>
class EllipseGame {
constructor() {
this.canvas = document.getElementById('gameCanvas');
this.ctx = this.canvas.getContext('2d');
this.startScreen = document.getElementById('startScreen');
this.gameScreen = document.getElementById('gameScreen');
this.endScreen = document.getElementById('endScreen');
this.setupCanvas();
this.setupEventListeners();
// ゲーム状態
this.gameState = 'start'; // 'start', 'playing', 'end'
this.difficulty = 2;
this.speed = 1000; // pixels per second
// 楕円パラメータ
this.targetEllipse = {};
this.playerEllipse = {};
this.isAnimating = false;
this.animationStartTime = 0;
// 入力処理
this.isMouseDown = false;
this.lastMousePos = { x: 0, y: 0 };
this.swipeStartPos = { x: 0, y: 0 };
this.gameLoop();
}
setupCanvas() {
this.canvas.width = window.innerWidth;
this.canvas.height = window.innerHeight;
this.centerX = this.canvas.width / 2;
this.centerY = this.canvas.height / 2;
}
setupEventListeners() {
// 難易度スライダー
const slider = document.getElementById('difficultySlider');
const label = document.getElementById('difficultyLabel');
slider.addEventListener('input', (e) => {
this.difficulty = parseInt(e.target.value);
const speeds = [500, 1000, 2000];
const labels = ['簡単 (500px/s)', '普通 (1000px/s)', '難しい (2000px/s)'];
this.speed = speeds[this.difficulty - 1];
label.textContent = labels[this.difficulty - 1];
});
// スタートボタン
document.getElementById('startButton').addEventListener('click', () => {
this.startGame();
});
// ホームボタン
document.getElementById('homeButton').addEventListener('click', () => {
this.resetGame();
});
// マウス・タッチイベント
this.canvas.addEventListener('mousedown', (e) => this.handlePointerDown(e));
this.canvas.addEventListener('mousemove', (e) => this.handlePointerMove(e));
this.canvas.addEventListener('mouseup', (e) => this.handlePointerUp(e));
this.canvas.addEventListener('touchstart', (e) => {
e.preventDefault();
const touch = e.touches[0];
this.handlePointerDown(touch);
});
this.canvas.addEventListener('touchmove', (e) => {
e.preventDefault();
const touch = e.touches[0];
this.handlePointerMove(touch);
});
this.canvas.addEventListener('touchend', (e) => {
e.preventDefault();
this.handlePointerUp(e);
});
// リサイズ対応
window.addEventListener('resize', () => {
this.setupCanvas();
});
}
startGame() {
this.gameState = 'playing';
this.startScreen.style.display = 'none';
this.endScreen.style.display = 'none';
// ターゲット楕円を生成
this.generateTargetEllipse();
// プレイヤー楕円を初期化
this.playerEllipse = {
radiusX: 50,
radiusY: 50,
rotation: 0,
visible: false
};
this.isAnimating = false;
}
generateTargetEllipse() {
const maxRadius = Math.min(this.canvas.width, this.canvas.height) * 0.3;
const minRadius = maxRadius * 0.3;
this.targetEllipse = {
radiusX: minRadius + Math.random() * (maxRadius - minRadius),
radiusY: minRadius + Math.random() * (maxRadius - minRadius),
rotation: Math.random() * Math.PI * 2
};
}
handlePointerDown(e) {
if (this.gameState !== 'playing') return;
const rect = this.canvas.getBoundingClientRect();
const x = (e.clientX || e.pageX) - rect.left;
const y = (e.clientY || e.pageY) - rect.top;
this.isMouseDown = true;
this.lastMousePos = { x, y };
this.swipeStartPos = { x, y };
if (!this.playerEllipse.visible) {
// 最初のタップ: プレイヤー楕円を表示してアニメーション開始
this.playerEllipse.visible = true;
this.isAnimating = true;
this.animationStartTime = Date.now();
} else if (this.isAnimating) {
// 2回目のタップ: アニメーション停止
this.isAnimating = false;
} else {
// 3回目のタップ: スコア計算
this.calculateScore();
}
}
handlePointerMove(e) {
if (!this.isMouseDown || this.gameState !== 'playing' || !this.playerEllipse.visible || this.isAnimating) return;
const rect = this.canvas.getBoundingClientRect();
const x = (e.clientX || e.pageX) - rect.left;
const y = (e.clientY || e.pageY) - rect.top;
const deltaX = x - this.lastMousePos.x;
const deltaY = y - this.lastMousePos.y;
const swipeDeltaX = x - this.swipeStartPos.x;
const swipeDeltaY = y - this.swipeStartPos.y;
const swipeThreshold = 20;
const changeSpeed = this.speed / 60; // 60fps想定
// 上下スワイプ: 楕円の形状変更
if (Math.abs(swipeDeltaY) > swipeThreshold && Math.abs(swipeDeltaY) > Math.abs(swipeDeltaX)) {
if (swipeDeltaY < 0) {
// 上スワイプ: 真円に近づける
const avg = (this.playerEllipse.radiusX + this.playerEllipse.radiusY) / 2;
this.playerEllipse.radiusX += (avg - this.playerEllipse.radiusX) * 0.1;
this.playerEllipse.radiusY += (avg - this.playerEllipse.radiusY) * 0.1;
} else {
// 下スワイプ: 楕円に変形
this.playerEllipse.radiusY = Math.max(10, this.playerEllipse.radiusY - changeSpeed * 0.5);
}
}
// 左右スワイプ: 回転
if (Math.abs(swipeDeltaX) > swipeThreshold && Math.abs(swipeDeltaX) > Math.abs(swipeDeltaY)) {
if (swipeDeltaX < 0) {
// 左スワイプ: 反時計回り
this.playerEllipse.rotation -= changeSpeed * 0.02;
} else {
// 右スワイプ: 時計回り
this.playerEllipse.rotation += changeSpeed * 0.02;
}
}
this.lastMousePos = { x, y };
}
handlePointerUp(e) {
this.isMouseDown = false;
}
updateAnimation() {
if (!this.isAnimating || !this.playerEllipse.visible) return;
const currentTime = Date.now();
const deltaTime = (currentTime - this.animationStartTime) / 1000;
// ランダムな拡大縮小と回転
const scaleSpeed = this.speed * 0.5;
const rotationSpeed = this.speed * 0.01;
this.playerEllipse.radiusX = 50 + Math.sin(deltaTime * scaleSpeed * 0.01) * 30;
this.playerEllipse.radiusY = 50 + Math.cos(deltaTime * scaleSpeed * 0.01) * 30;
this.playerEllipse.rotation += rotationSpeed * 0.016; // 60fps想定
}
calculateScore() {
// 簡易的なスコア計算
const radiusXDiff = Math.abs(this.targetEllipse.radiusX - this.playerEllipse.radiusX);
const radiusYDiff = Math.abs(this.targetEllipse.radiusY - this.playerEllipse.radiusY);
const rotationDiff = Math.abs(this.targetEllipse.rotation - this.playerEllipse.rotation);
// 正規化された差分を計算
const maxRadius = Math.min(this.canvas.width, this.canvas.height) * 0.3;
const normalizedRadiusXDiff = radiusXDiff / maxRadius;
const normalizedRadiusYDiff = radiusYDiff / maxRadius;
const normalizedRotationDiff = (rotationDiff % (Math.PI * 2)) / (Math.PI * 2);
// スコア計算 (100点満点)
const score = Math.max(0, Math.round(100 - (normalizedRadiusXDiff + normalizedRadiusYDiff + normalizedRotationDiff) * 100 / 3));
this.showScore(score);
}
showScore(score) {
this.gameState = 'end';
document.getElementById('score').textContent = `スコア: ${score}点`;
this.endScreen.style.display = 'block';
}
resetGame() {
this.gameState = 'start';
this.startScreen.style.display = 'block';
this.endScreen.style.display = 'none';
this.playerEllipse.visible = false;
this.isAnimating = false;
}
drawEllipse(radiusX, radiusY, rotation, color) {
this.ctx.save();
this.ctx.translate(this.centerX, this.centerY);
this.ctx.rotate(rotation);
this.ctx.beginPath();
this.ctx.ellipse(0, 0, radiusX, radiusY, 0, 0, 2 * Math.PI);
this.ctx.strokeStyle = color;
this.ctx.lineWidth = 3;
this.ctx.stroke();
this.ctx.restore();
}
render() {
// 画面をクリア
this.ctx.fillStyle = 'black';
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
if (this.gameState === 'playing') {
// ターゲット楕円を描画 (赤)
this.drawEllipse(
this.targetEllipse.radiusX,
this.targetEllipse.radiusY,
this.targetEllipse.rotation,
'red'
);
// プレイヤー楕円を描画 (水色)
if (this.playerEllipse.visible) {
this.drawEllipse(
this.playerEllipse.radiusX,
this.playerEllipse.radiusY,
this.playerEllipse.rotation,
'cyan'
);
}
}
}
gameLoop() {
this.updateAnimation();
this.render();
requestAnimationFrame(() => this.gameLoop());
}
}
// ゲーム開始
window.addEventListener('load', () => {
new EllipseGame();
});
</script>
</body>
</html>
これです！この速さです！
今回はgifアニメにしてみました。
自分で変形できてるのかもよく分からないですが、この鬼畜な速さを求めていました！
ということは、プロンプトや回答はほぼ問題が無く。
難易度調整、つまり速さの与え方だけがイマイチだったということですね。
Amazon Q 優秀！（中身はClaude Sonnet 4）
周りの人にドヤします！
これを題材に、編集しながらお勉強もしようと思います。
スマホで遊ぶには…AWSで公開した方が良いですね。AWSのお勉強もします。
クソゲー面白ゲームを量産してみようかな。
今回の記事はここで終了にします。
読んでいただいた方、ありがとうございました！
Discussion