Embedded Files
Welcome to Computer Programming 12
This fast paced course has been designed to build off of the structure introduced in Programming 11. We will revisit familiar units of study but with an entire new level of depth. For example, in Programming 11, we studied HTML and CSS; in Programming 12 we delve into JavaScript (the behaviour side of web development). Everything in this course is unique but relates to a larger whole. We endevour to keep the units covered in the course practical with the goal of giving you the skills to bring your own creative ideas to life. Practicing, building, reverse engineering, iterations and add on's are all strategies we deploy to help you innovate. Although there is some theory in this course, the guiding principles are practical and useful. I do hope that you enjoy this course and that you have a lot of fun along the way!
Computer Programming 12 - Course Syllabus 2025
Please submit course assignment 'one drive' links' into your spreadsheet in the correct 'drop box'
Drop Box - Programming 12 - Block 1 (spreadsheet only)
Create a one Drive share link - create an 'on line' spreadsheet for sharing course assignments
Create and Share links in ONE drive - A 'how to' guide
Example - T Linburg - (using Google Sheets - but you could use your Microsoft version of Excel)
T Linburg - grade and assessment link spreadsheet (adjust the share permissions to allow Mr. Linburg to edit)
Module # 2 - Using JavaScript to make your own games
Time for some gaming fun! In the next course segment, you will have a chance to remake some 'classic' games from the past and program them into something fresh, new and exciting. For the sake of simplicity you may use your CODEPEN account for the development aspect. You may, of course, also use platforms such a Visual Studio but that isn't required for these. Just be sure to save your changes as you proceed!
Software download link
VISUAL STUDIO COMMUNITY (you can see an outline here!)
Other JavaScript Development Links
How to use Visual Studio for JavaScript development work
JavaScript explained (a great feature summary!)
(Complete 3 out of 4) - Proficient (Complete 4 out of 4 Extending)
Part I
Game of 'Breakout' - Destroy the bricks
Take a look at this link! Please feel free to adopt it for your own purposes. You might want to build this game on Visual Studio (Community edition - free) download OR you may use CODEPEN and build it out that way.
Please be sure to improve the game in the following ways
Change the ball speed / size of paddle / number of bricks / game and brick colours
Part II
Make a guessing game based on the GitHub version
In this next segment you are tasked, as a developer of taking this tired gaming 'classic' and remaking it into something fresh, new and exciting. Your "NEW" game should still involve the same 'behaviour' which involves 'guessing at something but it might not be 'guessing a correct number' but might be guessing some other answer. For example, in the CODE PEN link below, you can find one such game that uses 'on event click buttons' to help find a lost cat. Each time you select a square it offers a clue, such as 'getting colder' or 'getting warmer'. I am not suggesting this is an outstanding game but it takes the guessing concept and uses it in a new and innovative way.
Good luck and happy guessing! :)
Make a guessing game using JavaScript Complete reimagination (similar 'behaviour' - different structure)
Original Guessing Game Examples!
Part III
Create a Puzzle Slider Game
In the third of our series of games in JavaScript you will be tasked with creating a 'Puzzle Slider Game'. You will grab the source code from this link and then paste it into CODE PEN. Once you have run the code you can then you may start on adding in the following improvements:
Add THREE (Proficient) of the following features to your Puzzle Slider Game. Good luck! (EXTENDING - add all of them)
Example of a Number puzzle slider game - you can make a version where you complete a picture
A version (no code) with a picture to solve
Here is the 'secret' way to WIN at a slider puzzle!
Timer
Description Add a timer to track how long it takes to solve the puzzle.
Implementation: Use JavaScript's `setInterval()` function to update the timer every second.
Move Counter
Description: Keep track of the number of moves made by the player.
Implementation: Increment a counter variable each time a tile is moved and display the count on the screen.
Undo Button
Description: Allow the player to undo their last move.
Implementation: Maintain a history of moves and restore the previous state when the undo button is clicked.
Difficulty Levels
Description: Offer different difficulty levels (e.g., 3x3, 4x4, 5x5 grids).
Implementation: Adjust the grid size based on the selected difficulty level.
Winning Animation
Description: Display a congratulatory animation or message when the puzzle is solved correctly.
Implementation: Check if the tiles are in the correct order and trigger the animation.
High Scores
Description: Maintain a leaderboard with the best times and lowest move counts.
Implementation: Use `localStorage` to store and retrieve high scores.
Sound Effects and Music
-Description: Add sound effects for tile movements and background music for a more immersive experience.
Implementation: Use the HTML5 `<audio>` element and JavaScript to play sounds.
Hints
Description: Provide hints to help players who are stuck.
Implementation: Highlight the next possible move or show the correct position of a tile.
Customizable Themes
Description: Allow players to choose different themes or styles for the puzzle tiles.
Implementation: Use CSS classes to apply different styles and let players select their preferred theme.
Part IV - Minesweeper! (more difficult)
In this final JavaScript game activity you are tasked with creating and improving a classic game of MINESWEEPER. The basic game structure is written for you. Have fun and watch out for those mines!
Your Challenge (do as many as you have time for)
Improve this code further to:
Calculate and display a score in real time (number of cells that have been visited).
Allow the user to add a cross or flag to a cell (by right clicking?) to indicate the position of a mine.
Allow the user to choose a difficulty level or change some settings (e.g. Number of mines, size of the grid).
Add a timer to the game.
MODULE # 1 - Introduction to JavaScript
Part ONE and TWO
JavaScript - one of the world's most popular computer language
Unit Description
We will be starting this unit by completing some structured introductory tutorials to help you learn the language structures; then we will give you actual working JavaScript made by developers for you to break, modify and then improve.
Finally, we will invent our own apps based upon the skills of other developers.
History of JavaScript - an interesting read!
JavaScript intro 1 / JavaScript intro 2
Section # 1 - JavaScript 'sandbox'
# 1 - Spreadsheet Due: Monday September 8th
W 3 Schools Introduction to Java script structures
In our very first introduction we will be using the W 3 for schools site to learn more about the history of JavaScript and to learn how its constructed. Please load the web site and do one or two 'try this' for each segment. Please try to 'break the code' and change it up anyway you see fit....and see what happens? Be sure to read through each of the segments but the threshold for completing exercises here is not very high. Think of this as an 'interactive' intro.
Please share your insights from THREE of the exercises (you should include some specific script reference). (half a page or more) (Please try to look through 12 sections)
Section # 2 JavaScript Practice - Code Academy
# 2 - Spreadsheet Due: September 26th (Friday) 2025
Sequential Code Academy lessons (free lesson segments - see below)
Introduction / conditionals / functions / arrays / loops / iterators / objects
Please complete this introductory work on JavaScript: Code Academy site. Please be sure you have completed the lessons as described above. PLEASE complete all the "free" segments. ITERATORS IS NO LONGER REQUIRED FOR CODE ACADEMY. You will submit a screen shot of your 'progress' and your account name put on a word document!
Section # 3 JavaScript "Reinvents" Utilize existing JavaScript projects to improve their function and design Due: October 3rd (Friday)
Use Code Pen for these project 'reinvents'. Be sure you sign up for an account so that you can save the changes you make!
Resource Guides
reference - W 3 JavaScript - reference guide to functionality and features.
(*) Note: please write a specific developer comment in the 'redo' explaining what you actually did to improve the function and design!
Project ONE - Reinvent -JavaScript Analogue Clock Due:
Analogue clock (# 3 Spreadsheet)
(*) Note: One option is to set up your own Code Pen Account and put your edited projects right on that hosted platform and then send me the link to your finished "reinvent". There are other methods we could discuss in class.
(*) Note: you may want to move your clock code over to either Visual Studio OR Code Pen if you have your own account. If you just A edit it off of the W3 school's site there is NO save as function!
Edit in W 3 Schools
A JavaScript clock - Please make all your changes right on the W 3 browser. Make a minimum of FIVE changes to its look / function / and design.
Take a look at these 'far out examples' - that you could use for your inspiration and edits! Go crazy and have fun (look below at the video for links to the ACTUAL coding samples!) - Have fun!
Project TWO -Reinvent a Digital Clock- Edit HTML / CSS / JavaScript together
(# 4 - Spreadsheet) Due:
Use this dreadful looking clock and add TEN dynamic changes to the the clock's design, functionality and behaviour. This might include ONE HTML change / TWO CSS change / and SEVEN JavaScript modifications (i.e. modify a function or change an array)
Project THREE - Reinvent - Modify the Code Pen version of the game hangman - (# 5 - Spreadsheet)
Experiment and make min 10 changes (we are flexible on how many of each one
(Proficient) Example changes - to the canvas / colour scheme / 'look and feel'
(Proficient) Example changes to the way the game is played (behaviour Javascript) - ie when you button click with the correct letter another event is triggered (eg. fireworks goes off...)
(Extending) Example project 'innovations'- Can you make the classic word game 'Hangman' 'new in some way (eg. the letters are already in the blanks but in a scrambled sequence - maybe you have to move the letters around to make the correct answer
A JavaScript game of hangman - Experiment with this JavaScript version of Hangman. Use the reference guides provided. Try to read through the ENTIRE JavaScript, experimenting and changing it as you go. You are only using this for practice, so break it in all ways that you can think of. All your changes will show in the display at the bottom of the page.
Here is a useful 'textbook' help guide that helps walk you through the code for this game!
Page updated
Google Sites
Report abuse