|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "87cd43afe5b69dbbffb5c4b209ea6791",
|
|
|
"translation_date": "2025-10-24T15:14:30+00:00",
|
|
|
"source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
|
|
|
"language_code": "ja"
|
|
|
}
|
|
|
-->
|
|
|
# 課題: Canvas APIを探求しよう
|
|
|
|
|
|
## 学習目標
|
|
|
|
|
|
この課題を完了することで、Canvas APIの基本を理解し、JavaScriptとHTML5のCanvasを使用して視覚的な要素を構築する創造的な問題解決能力を発揮することができます。
|
|
|
|
|
|
## 指示
|
|
|
|
|
|
Canvas APIの中で興味のある側面を選び、それを中心に魅力的な視覚プロジェクトを作成してください。この課題では、学んだ描画機能を試しながら、独自の作品を作ることを奨励します。
|
|
|
|
|
|
### プロジェクトアイデアの例
|
|
|
|
|
|
**幾何学的パターン:**
|
|
|
- **作成** ランダムな位置に配置された星が瞬く銀河をアニメーションで表現
|
|
|
- **デザイン** 繰り返しの幾何学的形状を使用して面白いテクスチャを作成
|
|
|
- **構築** 回転するカラフルなパターンで万華鏡効果を作り出す
|
|
|
|
|
|
**インタラクティブな要素:**
|
|
|
- **開発** マウスの動きに反応する描画ツール
|
|
|
- **実装** クリックすると色が変わる形状
|
|
|
- **デザイン** 動く要素を含むシンプルなアニメーションループ
|
|
|
|
|
|
**ゲーム関連のグラフィック:**
|
|
|
- **作成** 宇宙ゲーム用のスクロール背景
|
|
|
- **構築** 爆発や魔法のエフェクトのようなパーティクル効果
|
|
|
- **作成** 複数のフレームを持つアニメーションスプライト
|
|
|
|
|
|
### 開発ガイドライン
|
|
|
|
|
|
**リサーチとインスピレーション:**
|
|
|
- **CodePenを閲覧** 創造的なCanvasの例を探す（インスピレーションを得るためで、コピーはしないこと）
|
|
|
- **[Canvas APIのドキュメント](https://developer.mozilla.org/docs/Web/API/Canvas_API)を学習** 追加のメソッドを確認
|
|
|
- **実験** 様々な描画機能、色、アニメーションを試す
|
|
|
|
|
|
**技術的要件:**
|
|
|
- **適切なCanvasのセットアップを使用** `getContext('2d')`を使用
|
|
|
- **意味のあるコメントを含める** アプローチを説明する
|
|
|
- **コードを徹底的にテスト** エラーなく動作することを確認
|
|
|
- **最新のJavaScript構文を適用** (const/let, アロー関数)
|
|
|
|
|
|
**創造的表現:**
|
|
|
- **Canvas APIの1つの機能に焦点を当てる** しかし深く探求する
|
|
|
- **独自の創造的な工夫を加える** プロジェクトを個性的にする
|
|
|
- **考慮する** あなたの作品がより大きなアプリケーションの一部になる可能性
|
|
|
|
|
|
### 提出ガイドライン
|
|
|
|
|
|
完成したプロジェクトを、埋め込みCSSとJavaScriptを含む単一のHTMLファイルとして、またはフォルダ内の個別ファイルとして提出してください。創造的な選択と探求したCanvas APIの機能について簡単なコメントを含めてください。
|
|
|
|
|
|
## 評価基準
|
|
|
|
|
|
| 基準 | 優秀 | 適切 | 改善が必要 |
|
|
|
|------|------|------|------------|
|
|
|
| **技術的実装** | Canvas APIを創造的に使用し、複数の機能を活用、コードが完璧に動作、最新のJavaScript構文を適用 | Canvas APIを正しく使用、コードが軽微な問題を抱えながらも動作、基本的な実装 | Canvas APIを試みたが、コードにエラーがあるか実行されない |
|
|
|
| **創造性とデザイン** | 非常に独創的なコンセプトで洗練された視覚的魅力、選んだCanvas機能を深く探求 | Canvas機能をうまく活用し、いくつかの創造的要素を含む、堅実な視覚的結果 | 最小限の創造性や視覚的魅力で基本的な実装 |
|
|
|
| **コード品質** | よく整理され、コメントが充実したコード、ベストプラクティスに従い効率的なアルゴリズム | ある程度整理されたコード、いくつかのコメントを含む、基本的なコーディング標準に従う | コードが整理されておらず、コメントが少ない、非効率的な実装 |
|
|
|
|
|
|
## 振り返り質問
|
|
|
|
|
|
プロジェクトを完了した後、以下の質問を考えてみてください:
|
|
|
|
|
|
1. **どのCanvas API機能を選び、なぜそれを選んだのか？**
|
|
|
2. **プロジェクトを構築する際にどのような課題に直面しましたか？**
|
|
|
3. **このプロジェクトをどのように拡張して、より大きなアプリケーションやゲームにすることができますか？**
|
|
|
4. **次に探求したいCanvas APIの機能は何ですか？**
|
|
|
|
|
|
> 💡 **プロのヒント**: シンプルに始めて徐々に複雑さを加えていきましょう。うまく実行されたシンプルなプロジェクトは、うまく動作しない過剰に野心的なプロジェクトよりも優れています！
|
|
|
|
|
|
---
|
|
|
|
|
|
**免責事項**:
|
|
|
この文書はAI翻訳サービス[Co-op Translator](https://github.com/Azure/co-op-translator)を使用して翻訳されています。正確性を追求していますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤認について、当社は責任を負いません。 |
