Snake

In your public_html/cgi-bin directory, create a new directory called lab6 (no spaces, all in lowercase!!!!!!). Place your work for this lab sheet into this new directory.

In your lab6 directory, create files called snake.html, snake.css and snake.js to implement a much simplified version of the game of Snake in JavaScript.

If you do not know this game, you can play a local copy of a version of it here. (The original is here: patorjk.com's Snake game.)

Below are some suggestions about how to break this task down to make it easier to tackle:

• In your initial version of the program, begin with a snake that consists of just one square, which moves around the screen. Write event listeners so that the square changes direction when the user presses the arrow keys.
• Improve your program as follows: If the snake attempts to move beyond the edges of the canvas, stop the game and bring up a pop-up that displays the user's score.
• Improve your program again: In an unoccupied region of the canvas, draw an obstacle. Obstacles don't move. But when the snake collides with the obstacle: the obstacle disappears; the player's score goes up by one; and a new obstacle is then drawn in a new unoccupied region.

The rest is optional (and much, much more challenging):

• When the snake collides with the obstacle, not only does the player's score go up by one, but also the length of the snake increases by one. The real challenge here is to make the snake (which now consists of more than one square) move around the canvas in the proper way.
• When the head of the snake bumps into its own body, stop the game and bring up a pop-up that displays the user's score.

If you do choose to tackle the optional elements, please do not just copy JavaScript that you find on the Web. The idea is to learn how to program, not how to copy-and-paste. It would be better to try to achieve something and fail, than to duplicate someone else's efforts.

Submission

There is no formal submission of this week's exercise. However, for my records, I will check what you have achieved.

CS1116/CS5018 Continuous Assessment: Prep

Next week's lab sheet (the final lab sheet, lab sheet 7), will be a 'project' that will last until the end of term. This will be the continuous assessment of this module.

Everyone will come up with their own project.

Your project must involve either server-side programming in Python or client-side programming in JavaScript or both.

In time for next week, think of something that you would like to try to build. Maybe it's something with a database, where users want to run server-side programs to update and query the database. For example, a club or society may wish to keep membership records; a social network will want to store its members, their connections, and so on; a bookshop may wish to keep track of its stock; a busy house-husband may wish to keep a diary of dental appointments, birthdays, and Pilates lessons; a quiz program would store questions, answers, and the scores of its users in a database;… Or maybe you want to write a client-side game (but not Breakout) or a puzzle. Or maybe you want to combine the two. For example, maybe a client-side game records players' scores in a server-side database.

Examples from previous students include: database-driven quiz programs, shops (for CDs, DVDs, games, flowers, …), libraries, social networking sites, bulletin boards,…, simplified Mario-style games, top-down racing games, top-down adventure games,…

Make sure your chosen scenario is ambitious enough to warrant a 'project' that will last until the end of term. (E.g. a database with just one table, a form for insertion and a form for retrieval is almost certainly not challenging enough: it is little more than what you did for lab 4. Similarly, a web site consisting of just some HTML and CSS is not enough: this is a module about web programming so the focus needs to be on server-side Python or client-side JavaScript or both.)

You should check your chosen scenario with me. You can do this at any point, no later than the start of next week's lab. Once I have agreed it, you can start designing your database, your forms and your server-side/client-side programs.

Bear in mind that there will be more lectures on JavaScript and we even return to Python for lectures on shopping carts and user authentication (i.e. user registration and user login).