high-school-javascript-game-dev-assignment-images

All the assignments for Game Dev as images

Short version of VIDEO-FLAC

Long Version of VIDOE-FLAC

Possible online editors.

Note: As of 2023 I really like codesandbox other than some confusing things that it wants you to fork your boxes, I think it is the best editor for a course like this since you typically can make a URL that then loads the entire backaend for your advanced code.

For static code we typically use GitPages which is part of github.

Other Editors:

https://www.w3schools.com/js/tryit.asp?filename=tryjs_editor

https://codepen.io/pen/ click the "Strat Coding" button and put all the code into the html side

http://jsbin.com/?html,output

https://liveweave.com/

index.html

t1a01-basic-web-page-fred.html

t1a02-lists-tables-fred.html

t1a03-forms-fred.html

t1a04-css-by-fred.html

https://cssreference.io/

http://www.cheat-sheets.org/sites/css.su/

https://www.w3schools.com/html/html_css.asp

t1a05-input-output-by-fred.html

t1a06-variables-by-fred.html

t1a07-decision-by-Fred.html

t1a08-loops-by-fred.html

t1a09-functions-by-fred.html

t1a10-events-by-fred.html

t2a01-arrays-by-fred.html

t2a02-objects-by-fred.html

t2a03-classes-by-fred.html

You can get the code here t2a03-Classes-by-fred.html

t2a04-extend-class-by-fred.html

You can get the code here t2a04-extend-class-by-fred.html

Code for T2A05-review-by-fred

On one webpage get all the code working from the following page

as a webpage https://hpssjellis.github.io/beginner-tensorflowjs-examples-in-javascript/beginner-examples/tfjs06-javascript.html

t3a11-ML-edgeimpulse.html EdgeImpulse Machine Learning Model to be put on your github. (Make a new folder inside your public folder with an index.html inside the new folder)

Note: The code for the edgeImpulse index.html is here indexEI.html

t3a12-ML-huggingFace.html HuggingFace Javascript Machine Learning Model Grab one or two of these example Javascript access to HuggingFace ML Datasets and put them on your github site.

Code for t2a06-spy-by-fred.html

as a webpage https://hpssjellis.github.io/high-school-javascript-game-dev-assignment-images/public/t2a06-spy-by-fred.html

Code for t2a07-move-background-name.html

as a webpage https://hpssjellis.github.io/high-school-javascript-game-dev-assignment-images/public/t2a07-move-background-name.html

Code for t2a08-canvas-name.html

as a webpage https://hpssjellis.github.io/high-school-javascript-game-dev-assignment-images/public/t2a08-canvas-name

Code for t2a09-local-storage-name.html

as a webpage https://hpssjellis.github.io/high-school-javascript-game-dev-assignment-images/public/t2a09-local-storage-name.html

Code for t2a10-translate-name.html

as a webpage https://hpssjellis.github.io/high-school-javascript-game-dev-assignment-images/public/t2a10-translate-name.html

Code for t2a10b-sound-by-fred.html

as a webpage https://hpssjellis.github.io/high-school-javascript-game-dev-assignment-images/public/t2a10b-sound-by-fred.html

Code for t2a11-game-template-fred.html

as a webpage https://hpssjellis.github.io/high-school-javascript-game-dev-assignment-images/public/t2a11-game-template-fred.html

The key to understanding collisions in the game template is this bit of code

Code for t2a12-sort-name2.html

as a webpage https://hpssjellis.github.io/high-school-javascript-game-dev-assignment-images/public/t2a12-sort-name2.html

Helpers Not for marks

Helper Not for marks x-keydown.html

as a webpage https://hpssjellis.github.io/high-school-javascript-game-dev-assignment-images/public/x-keydown.html

Helper Not for marks x-rotate01.html

as a webpage https://hpssjellis.github.io/high-school-javascript-game-dev-assignment-images/public/x-rotate01.html

Proof-level1-draft-uploaded.

Use the game template t2a11-game-template-fred.html to make your level1 game. The level1 game must be finished to pass the course

Proof-level2-draft-uploaded-

This can be a continuation of the level1 2D Javascript game above or your own game engine or the following:

Typically we use Construct3 online, you do not have to register

click "Try now"
click on a template, some are paid ones I suggest to try "Driving"
Click preview, play game to make sure it works
Menu --> Project --> Export --> Web (HTML5) --> Next --> Next --> click Download...template.zip
Extract the zipped file and drag the entire folder to your github
Create an index link to the folderr name
Test your online javascript level 2 game.

Term 4 assignments. Some are bonus!

Code for t4a01-game-template-with-wasd-by-fred.html

as a webpage https://hpssjellis.github.io/high-school-javascript-game-dev-assignment-images/public/t4a01-game-template-with-wasd-by-fred.html

More slightly different game templates to help with your coding final assignment

Code for t4a03-complete-fred2.html

as a webpage https://hpssjellis.github.io/high-school-javascript-game-dev-assignment-images/public/t4a03-complete-fred2.html

Code for t4a04-maze2.html

as a webpage https://hpssjellis.github.io/high-school-javascript-game-dev-assignment-images/public/t4a04-maze2.html

Code for t4a05-template-with-wasd-and-score.html

as a webpage https://hpssjellis.github.io/high-school-javascript-game-dev-assignment-images/public/t4a05-template-with-wasd-and-score.html

Code for t4a06-bullet.html

as a webpage https://hpssjellis.github.io/high-school-javascript-game-dev-assignment-images/public/t4a06-bullet.html

Code for t4a07-boundaries-from-maze.html

as a webpage https://hpssjellis.github.io/high-school-javascript-game-dev-assignment-images/public/t4a07-boundaries-from-maze.html

Code for t4a08-random-move.html

as a webpage https://hpssjellis.github.io/high-school-javascript-game-dev-assignment-images/public/t4a08-random-move.html

Code for t4a09-bounce.html

as a webpage https://hpssjellis.github.io/high-school-javascript-game-dev-assignment-images/public/t4a09-bounce.html

Code for t4a10-flappy.html

as a webpage https://hpssjellis.github.io/high-school-javascript-game-dev-assignment-images/public/t4a10-flappy.html

Code for z-hackbrowser.html Traditionally most students do not understand how this browser object information page works.

There are multiple blank buttons ready for you to set up an object on the page and then extract information about the object: class names, methods and properties. An awesome page but confusing to get fully working

as a webpage https://hpssjellis.github.io/high-school-javascript-game-dev-assignment-images/public/z-hackbrowser.html

Wow: A student found pyScript,

Pyscript allows Python inside a webpage. Best way to learan is look at the examples and then right-click-view-webpage https://pyscript.net/examples/

Startup php

Go to code sandbox and start a PHP container

By the way php is best for using mySQL and similar databases. Might be a good idea to try to use those.

code [here] [public/php.php]

A working example of this running in a codesandbox is here

https://ckp8k3-8080.csb.app/index.php

and the sandbox can be forked from https://codesandbox.io/p/devbox/php-example02-input-ckp8k3

Special 2023 Full VIDEO-FLAC assignments

As this years class has very advanced students, we are doing some live coding based on situations madeup in class The code below was made on the fly and is the starting point for improvements. Or are a problem given to the students and they find results that then we show the other students

t1z01-first-javascript-fred.html

t1z02-object-zombie-fred.html

t1z03-array-zombie-fred.html

For this see if you can auto polulate the select box

Files

README.md

Latest commit

History