- Work on modifying one of the examples from class
- Try out MIT App Inventor for fun
- See the Start Here page off the CS site
- Check out CS 151 online
- If you'd like a permanent account on the CS server, email email@example.com
- Feel free to be in touch about anything...
sh14's examples based on Steve's
Note - links are to sh14's versions. For items 4-8, resist the urge to just copy my code; try
to figure it out, ask for help, etc.
- Run the commands mentioned above to have copies of Steve's stuff.
- Run the command chfn in your shell to update your name information.
- hello.html - run the following from your shell, then edit the file to put in some information.
cp ~sh14/public_html/hello.html ~/public_html/hello.html
See mine at hello.html
- animate1.html - modify your animate1.html so that each of the following -
(a) square is filled in, (b) you have some text above the canvas giving the user instructions,
(c) arrow keys move the square (up/down/left/right, use the key.html page...),
(d) don't let square go outside of the canvas,
(e) anything else you can think of!
- animate2.html - modify your animate2.html so that each of the following -
(a) make the square blue instead of red,
(b) make the square go half as fast,
(c) don't erase the canvas each time, so you'll see a history of where the square has been,
(d) make the border of the square black,
(e) make the square half as wide and tall,
(f) make the square start by going down to the left,
(g) your choice of something else...
- canvas.html - modify your canvas.html so that each of the following -
(a) you have another blue triangle that is a mirror of the one that is there, so the two can look
(b) there is a gold square beneath the one that is there already, so it could be the "body" of a
gold rectangle snowman,
(c) put another gold square beneath the second one,
(d) put black squares on the mid-section of the snowman as buttons,
(e) draw the text somewhere on the canvas "I love gold, I mean snow.",
(f) as you wish.
- draw.html - modify your draw.html so that each of the following -
(a) you have an extra color button, and use maroon for the color,
(b) when the user is done with a line, fill it in also,
(c) add a checkbox so the user can specify if they want the line to be filled or not,
(d) make the color buttons so that if they are double clicked, the clear button will use that
color as the background color,
(e) whatever you want.
- ship.html - modify your ship.html so that each of the following -
(a) make your flame some other color (e.g., orange),
(b) use a black background and white ship color,
(c) create a second object that is on the screen and has its position change somehow,
(d) keep track of the total mount of fuel and draw a fuel rectangle that gets smaller
as the fuel is used up,
(e) make the ship so it can't go through the "ground" and add gravity that tends to pull
the ship down,
(f) your choice.
Notes and things to remember ...
- FWIW, http://cs.indstate.edu/info/curiosities.html
- To view one of your files (for example this one in my account) browse to something like -
- To make a backup of your work from yesterday, run the following in your shell -
rsync -avzP ~/public_html ~/public_html.backup
To copy over Steve's code to a directory in your account, run the following in your shell -
rsync -avzP ~sbaker/public_html/sh/code/ ~/public_html/sbaker
To view those files in your browser, browse to something like -
To create your own local copy of Steve's code, run the following in your shell -
rsync -avzP ~sbaker/public_html/sh/code/ ~/public_html/sbaker.mine
and browse to one of those files by doing something like -
- Avoid putting spaces in file names.
- Use .html as the file extension for html files. Note - Windows and Mac OS tend to hide file extensions from you while unix/linux assumes you can handle it.
- Linux/unix and programming are case-sensitive.
- Don't panic.
- Stay curious.
something along the lines of "inspect element", and then click something along the lines of "console", and refresh the page to load it again.
- Be lazy (in a good way).
- Gaming concept - game engine (you could search for gamemaker tutorial), for unreal or unity there is a bit of vocabulary
you need to know (a bit of a learning for that)
- Gaming concept - update loop (draws stuff, keys just change some variables).
- Gaming concept - state of the world, state of each character.
- Gaming concept - get the game play right first.
- Gaming concept - switching between different perspectives (transformations of coordinate systems)
- Gaming concept - prototyping.
- Gaming concept - the language matters (sometimes).
- Future of gaming - VR? (not really, but probably augmented reality - in useful ways), no more gaming consoles? (plateau),
watching gaming is popular? (plateau), everyone plays video games? (no, probably 80%)
- Web programming -
html - information (not what it looks like, not what does, but yes how it links to each other, stands for hypertext markup language),
css/style - what information looks like,
Programming concepts ...
- variable - keeps information, you read the value or set the value
- function/procedure - block of code that has a name, has a purpose, does something
- syntax error - code doesn't do anything
- logical error - code doesn't do what you want
- Programming style - properly indent your code (increase indenting on each function, loop, etc., and decrease again when each is done), use good variable variable and function names