COM1008: Web and Internet Technology
Assignment: JavaScript (40%)
Deadline: 3pm, Mon 20 Jan 2025
Handin: zip file of your website via Blackboard.
Learning Outcomes
This assignment covers the following learning outcome for this module:
●Create interactive web programs using a front-end scripting language.
In addition, you will also gain more practice in relation to one of the learning outcomes that was set for the first assignment, although only using a single web page:
●Design and construct a website, controlling the structure and appearance using markup and styling languages.
1.Introduction
This assignment will test your ability to use JavaScript and the HTML5 Canvas element to develop a graphical application running on a web page. You MUST use the HTML5 Canvas.
This is an individual assignment. The work you submit must be your own work and not plagiarised.
2.The Task
A single web page should be created. The <body> element should include a canvas element, some buttons to control what happens on the canvas and some text to explain the program.
The canvas should display a drawing of a robot. This should be a cartoonish humanoid robot with a body, head, arms and legs. It should be constructed from separate pieces, e.g. outline and background colour of the different parts of the humanoid robot including the body, head, arms, legs and any detail, for example, eyes, mouth, lights. It could be drawn using (i) basic drawing commands on the canvas (e.g. drawing lines, curves and shapes at positions on the canvas using the canvas drawing commands such as moveTo, lineTo, arc, rect, etc), or (ii) it could be constructed from a range of images, e.g. an images of robotic arms and legs, etc. (drawn at positions on the canvas using the command to draw an image, drawImage), (iii) a combination of drawing commands and images. Any of these options is ok. You choose.
When the page first loads, the robot should be powered down or “turned off”. There should be two <button> elements on the web page. One button is used to turn the robot on and off; you will therefore need to think of a way to distinguish between the on and off states e.g. indication lights, slumped vs upright stance, etc. The other button is used to put the robot “on charge” for when it has run out of battery. The robot will have enough battery power to perform 3 actions and will then go to the powered down due to lowered battery state, in this state, the robot cannot be turned on again until it has been charged up. The robot can be charged back to full after 1, 2 or 3 actions. The robot should have a battery status indicator to show how many more actions it can perform. There should also be some visual way to show that the robot is charging, e.g. show a cable. The robot will only charge for a short period of time (<5 seconds) before being fully charged and ready for another action.
You need to implement 3 actions that the robot can do, you can implement the following or think of your own actions:
●Click on the canvas to make the robot fire lasers from its eyes at the clicked position.
●Click on an indicated side of the canvas (left side or right side) to make the robot move to that position.
●Click on an arm to make it spin for a few seconds (<5 seconds).
As before, in implementing these, particular parts of the face are redrawn. For example, if the lips are recoloured, then that is just a different drawing or picture of different coloured lips and the rest of the face does not change.
Hint: “Smooth” animations (i.e. point A to point B) will get you the best marks but this is not required for a pass, e.g. moving the robot around can use less than a handful of “frames” to show movement. At the minimum you should use either canvas drawing or images to give the illusion of movement, e.g. blurred arms to indicate “spinning”.
Below the canvas and the buttons, you should provide a brief explanation of how to use the software and what happens when a user clicks on the buttons and on particular areas of the canvas – we will need this for marking, so we know which effects you have implemented. One other thing you need to consider is how to deal with both mobile and desktop hardware. Does your program run on smartphone/desktop/laptop/PC/Mac? This should be explained too.
3.Handin via Blackboard
Handin via the assignment link on Blackboard. Handin all the code by creating a zip file called name.zip, where name is your name, e.g. JaneSmith.zip.
Note: Remember to identify in each file that you wrote the code.
4.Marking
This will include:
●Code structure, including comments and layout (25%)
●How well the basic application works and the completeness of this, including quality and creativity of the work (75%)
5.Practical considerations
5.1Unfair means
The standard Department rules for use of unfair means will be applied, as described in the undergraduate student handbook:
Use of any generative AI tools in the preparation of the solution to this work is not permitted.
We are aware that there are lots of JavaScript tutorial sites on the Web. Do not copy them since that would be plagiarism. Instead, learn from and be inspired by them.
You must use plain, vanilla JavaScript for the assignment.
Do NOT use jQuery or any other JavaScript frameworks/libraries. This will be treated as plagiarism for the purposes of this assignment.
5.2Late hand-in
Standard Department rules will be used for late submission – see:
5.3Code reuse
You may reuse JavaScript (and HTML and CSS) code that we wrote that is either given in lecture slides, offered as examples written by us on BlackBoard, or the tutorial website.
5.4Tools
The expectation for this assignment is that you will use a code editing environment to develop your website and JavaScript (e.g. Visual Studio Code or Notepad++ or similar).
If you are using images for the robot pieces (and then using the canvas drawImage command), you can use whatever graphical tools you like to help create the individual image pieces of the robot. Surprisingly, Microsoft Word is very good for this – it has shape pieces that can be used to draw and the collection of pieces can then be saved as a picture. There is also an option to set the transparency for part of a picture, which is very useful: Paste a picture into word (i.e., drag an image file into an empty document), double click the image to get the Picture Format menu, select Colour, select Set Transparent Colour, use the picker to click on the picture area that should be the transparent colour, e.g. the background of the picture, then save the picture as a png file. (Of course, other tools are also available to do this.) When you draw the saved png file on the canvas with drawImage, the areas set to the transparent colour are not drawn, which means it is easier to create a result that combines all the images that are drawn where some may overlap others.
As part of the deliverables, you will have noted that we expect code that contains comments. These will demonstrate whether or not you understand the more complex bits of code that you have produced. Use your common sense so that the code is not cluttered with trivial comments.
5.5Keeping your work private
Your website should be developed on your own computer, not in a publicly-accessible folder.
请加QQ：99515681 邮箱：99515681@qq.com WX：codinghelp
