Reference no: EM133499689
Assignment: JavaScript Client Side Web Programming Project
In this project, you are being asked to create a simple graphical application or a game. Since we have no back-end support, we will need to work 100% client-side. You are not expected to retain any information between page loads - high scores, etc. will reset every new page load.
Do not over complicate the program itself, it can be as simple as a heads/tails coin flipping game, a dice game1, memory matching puzzles2, a typing tutorial, an HTML tutorial (remember Super Markup Man?) or some other simple game that you wish to create. Perhaps there's even a Happy Chicken assignment in your Java course that can serve as inspiration. The goal here is to practice programming, not to create a AAA multi-million dollar hit game. The artistic standard is "good enough" not "gallery ready". A demo YouTube Video: "COMP 10259 Assignment 4 Demo".
Required Elements
1) Your program must meaningfully make use of SVG elements.
a) These elements must be interactive using at least 2 types of JavaScript mouse events (your choice of specific events). You may change 1 mouse event to a keyboard event if you wish.
b) These elements must have the ability to be removed: they must disappear from the screen and be removed from memory.
c) These elements must be creatable by some mechanism. Suggestions include an add button or a timer that "spawns" them. After creation, they should appear on the screen.
d) You may have an initial layout of hard-coded elements if desired, but all other adding and removing of elements must be dynamic using JavaScript.
2) Style your SVG elements using CSS in addition to the basic XML parameters available.
Animate at least 1 SVG element using JavaScript. The animation must be obvious and noticeable. Do not use JavaScript to add a CSS animation to an element, nor use an animated GIFs, etc., to fulfill this requirement.
1) Use standard HTML elements to establish user inputs and criteria for the program. Use at least 1 input element without a form to accomplish this requirement, in addition to any other elements you wish. For example: change the color of all the circles, make all the squares twice as large, make the dice 8-sided instead of 6, make the animation move twice as quickly, etc. The specifics will depend on what kind of program you're creating.
2) Track the state in some meaningful way - for example, a score, number of tries remaining, count of circles created; something that is connected to your application.
3) Continue to use good HTML structure by creating a header and footer around your main content. The header or footer must contain your name and copyright notice for 2023. The page should be titled and appear neat and complete.