All the assignments for Game Dev as images

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 backend 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 "Start Coding" button and put all the code into the html side

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

https://liveweave.com/

https://cssreference.io/

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

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

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

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

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

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

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

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

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

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

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

as a webpage https://hpssjellis.github.io/high-school-javascript-game-dev-assignment-images/public/t2a10b-sound-by-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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

For this see if you can auto populate the select box