Week 14: Review
To Do This Week:
Work on HTML5 Games
Project 6: HTML5 Canvas Game (Group Project) (25%)
In teams of 3–4, design and develop an interactive game using the HTML5 Canvas API. Your team will collaborate via GitHub, using branches, commits, and pull requests to manage code and track contributions. The game must include clear visual design, scoring logic, and core gameplay elements. Document all development steps and note any use of ChatGPT or other AI tools.
Team Responsibilities
- Project Manager: Oversees timeline, assigns tasks, manages GitHub project board.
- Lead Developer: Sets up project structure, integrates game logic, merges pull requests.
- UI/UX Designer: Focuses on visuals, layout, and CSS styling.
- Tester/Documenter: Writes documentation, tests features, and tracks bugs.
Project Workflow
- Game Concept Brainstorm (Team Meeting) – Use shared notes or GitHub Issues to capture ideas.
- Feature Planning – Define game mechanics, visuals, and scoring rules. Create a task list in GitHub Projects.
- Set Up GitHub Repo – Initialize a repo, write a README with team roles and game concept.
- Development with or without Branches – Each member works on their game features (e.g.,
game-logic,ui-design,scoring-system). Team members review before merging. - Testing and Debugging – Run playtests, open GitHub Issues for bugs, track fixes.
- CSS & UI Styling – Finalize visuals, menu screens, and animations.
- Add AI-generated media (optional) – Document which assets were created with AI tools.
- Documentation – Include comments in code, a project write-up in the README, and a brief GitHub Wiki page explaining development decisions.
- Final Submission – Each of you will host the exact same final project of your group. You will submit to Canvas and Slack the url to the project in your dtc server directory.
Deliverables
- Playable game hosted on DTC server
- An About page with project description and the uses of AI, along with listed logic steps for the game and chat log.
- Also link to Public GitHub repo (with commit history from all members).
- Add a README with team roles, game overview, and instructions.
- Optional: short team video demo or screenshots of development process
Assessment Criteria
- Collaboration & GitHub use (branches, commits, reviews)
- Game functionality & playability
- Game innovation
- Visual design & UI
- Documentation & code clarity
- Creativity & media integration
Quiz!
Use this prompt with ChatGPT to self-test your knowledge of JavaScript: "Please create a quiz to assess my understanding of JavaScript, focusing on basic syntax and fundamental concepts, including variables, data types, operators, functions, loops, arrays, conditionals, object literals and classes. Start with 10 questions covering these basic elements, using a mix of true/false, multiple choice, and short answer formats. For the last 5 questions, introduce intermediate-level concepts related to ES6, such as template literals, arrow functions, and let/const. Each question should be presented one at a time, followed by the correct answer and a brief explanation to help me understand the logic and syntax. After completing the quiz, provide a qualitative evaluation of my knowledge rather than a numerical grade, and suggest resources, strategies, or topics for further improvement in both basic JavaScript and ES6 features."Follow-Up Practice
Modify the prompt as needed: "Based on my current understanding and performance in the JavaScript quiz, I would like to create a detailed learning plan to enhance my web development skills. I am particularly interested in [choose: 'front-end design', 'full stack development', 'game development', 'web design' etc]. Please help me develop a structured plan that includes the following components:- Key Skills to Develop: Identify the essential skills I need to focus on for my chosen area. For front-end design, this might include CSS frameworks, JavaScript libraries like React or Vue, and design principles. For full-stack development, include both client-side technologies and server-side languages like Node.js.
- Project Ideas: Suggest practical project ideas that will help me apply these skills. These projects should vary in complexity, starting with simple applications and progressing to more integrated solutions.
- Learning Resources: Recommend books, online courses, and other resources that are best suited for learning the specific technologies and concepts I need.
- Using ChatGPT: Advise on how I can use ChatGPT effectively as a tutor assistant. Include tips on how to formulate questions for debugging, code reviews, or learning new programming concepts.
- Timeline: Propose a realistic timeline for achieving milestones in my learning journey, including when to start and complete each project.
- Feedback Mechanisms: Suggest ways I can get feedback on my projects, such as through code review sessions, joining online communities, or participating in hackathons.