Joshaw-k/Horse-Racing-Game

• Video Link:

https://youtu.be/2cGKtEWRwH8

Web Development assignment

Introduction Web development Assignment 2 is based on the purpose to assess our ability to create an interactive web page using JavaScript, CSS and HTML.

JavaScript: - JavaScript frequently truncated as JS, is an abnormal state, translated programming dialect. It is a dialect which is additionally described as unique, feebly composed, model based and multi-worldview. Nearby HTML and CSS, JavaScript is one of the three centre advances of World Wide Web content building. It is utilized to make site pages intelligent and give online projects, including computer games. The greater part of sites utilizes it, and all cutting-edge web programs bolster it without the requirement for modules by methods for an implicit JavaScript motor. Each of the numerous JavaScript motors speak to an alternate usage of JavaScript, all in light of the ECMAScript particular, with a few motors not supporting the spec completely, and with numerous motors supporting extra highlights past ECMA. As a multi-worldview dialect, JavaScript underpins occasion driven, practical, and basic (counting object-situated and model based) programming styles. It has an API for working with content, exhibits, dates, general articulations, and fundamental control of the DOM, yet the dialect itself does exclude any I/O, for example, systems administration, stockpiling, or illustrations offices, depending for these upon the host condition in which it is implanted. At first just actualized customer side in web programs, JavaScript motors are currently inserted in numerous different kinds of host programming, incorporating server-side in web servers and databases, and in non-web projects, for example, word processors and PDF programming, and in runtime conditions that make JavaScript accessible for composing versatile and work area applications, including work area gadgets. In spite of the fact that there are solid outward similitudes amongst JavaScript and Java, including dialect name, linguistic structure, and individual standard libraries, the two dialects are unmistakable and contrast enormously in plan; JavaScript was affected by programming dialects, for example, Self and Scheme.

CSS: - Cascading Style Sheets (CSS) is a template dialect utilized for portraying the introduction of an archive written in a mark-up language. Although frequently used to set the visual style of site pages and UIs written in HTML and XHTML, the dialect can be connected to any XML report, including plain XML, SVG and XUL, and is relevant to rendering in discourse, or on other media. Alongside HTML and JavaScript, CSS is a foundation innovation utilized by most sites to make outwardly captivating site pages, UIs for web applications, and UIs for some portable applications.

CSS is planned essentially to empower the partition of introduction and substance, including perspectives, for example, the design, hues, and fonts. This division can enhance content availability, give greater adaptability and control in the determination of introduction qualities, empower numerous HTML pages to share arranging by indicating the applicable CSS in a different .CSS record, and lessen multifaceted nature and redundancy in the auxiliary substance. Partition of arranging and substance makes it conceivable to introduce a similar mark-up page in various styles for various rendering strategies, for example, on-screen, in print, by voice (through discourse-based program or screen peruse), and on Braille-based material gadgets. It can likewise show the site page diversely relying upon the screen size or review gadget. Peruses can likewise determine an alternate template, for example, a CSS record put away without anyone else PC, to supersede the one the creator indicated.

HTML: - Hypertext Mark-up Language (HTML) is the standard mark-up dialect for making site pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it frames a group of three of foundation innovations for the World Wide Web. Web programs get HTML archives from a web server or from neighbourhood stockpiling and render them into sight and sound site pages. HTML depicts the structure of a website page semantically and initially included signals for the presence of the report. HTML components are the building squares of HTML pages. With HTML develops, pictures and different items, for example, intuitive structures, might be installed into the rendered page. It gives a way to make organized records by signifying auxiliary semantics for content, for example, headings, sections, records, connections, cites and different things. HTML components are depicted by labels, composed utilizing edge sections. Labels, for example, and bring content into the page specifically. Others, for example,

...

encompass and give data about record message and may incorporate different labels as sub-components. Programs don't show the HTML labels yet utilize them to translate the substance of the page. HTML can implant programs written in a scripting dialect, for example, JavaScript which influence the conduct and substance of website pages. Incorporation of CSS characterizes the look and format of substance. The World Wide Web Consortium (W3C), maintainer of both the HTML and the CSS guidelines, has energized the utilization of CSS over express presentational HTML since 1997.

1.Game design – As we started to come up with ideas and codes for the web development assignment 2, we went through the brief given to us and got an idea about the basic requirements that we are given with the horses and as we press the start button the horses should move one lap of the race track and at a random speed. To tackle the situation, we did a lot of research and came up with the codes to move the horses at the press of start button. We made sure that we make a rectangular track and write the code in a way that all the horses take turn at all the four corners and start running on their same lane till the end. We also coded in a way that we can select how many laps the user wants the game to last. The programming was in a way that all the horses stop at the finishing line. We worked out that we get the horses to stop or turn at the relevant positions on the race track. We prepared and researched and then coded in a way that in the race , every time the user starts the game there are all the chances that either of the four horses can win the race because we coded that way , so that the game won’t be monotonous and different horse wins in different games or any horse can win any game , because we coded it that way. The game design was in such a way that different horse wins each time. To make the game interesting we added special features like different characters, different face and to differentiate between the horses, they were given separate colours. We also made sure that through the race overtaking takes place so that the game will be interesting. To make the race game more interesting we added graphic design like grass, tracks were separated by distinguishable lines and we also added grass and tree to enhance the game features.

2. Program design Language tool was a very important aspect while preparing the whole race game as we used it to reduce the codes which were repeated. So, the codes which were repetitive were taken into consideration by the use of Language tools. In the case of Screen sizes, we made sure that even if the user maximizes or minimizes the screen, there should be no change in the game layout so that the game would run on the similar rules and track size in dependable on the actual screen size At first, we analysed the given rules for the race game then we broke the game into small parts and then assigned each part to the members, different tasks were given to each member. The game consisted of Tracks, Horses, Characters, Expressions, etc so we made sure that we include all the aspects required for the game. As a multi-worldview dialect, we used JavaScript to underpin occasion driven, practical, and basic (counting object-situated and model based) programming styles. It also had an API for working with content, exhibits, dates, general articulations, and fundamental control of the game, so we tried to use all the features of JavaScript to enhance the graphics of the game. We also considered some different ideas that would help us to make a game which is more user friendly and is a delight for the user then we all had different approaches but we considered the best that all group members agreed to and we went ahead with the code.

3. Testing We first run the code that we wrote while doing all the research so we came across a lot of errors , we worked on to that , read a lot of books to get our code right , then at the time of testing we were finished with the code and when we run the game , it worked and so the user can bet on horses and the game goes on. We tried testing certain aspects of the code without running the entire game and waiting for it to finish and it worked. We had this site where we can run a separate code without affecting the remaining whole code. For example, we tried to only check the betting tab to work when the horses come at the finishing line and it worked successfully, Testing code can now and again be a brief period expending. On the off chance that you are simply starting JavaScript you may end up utilizing alarm() or window.alert() two or three times, and on the off chance that you've been composing JavaScript for a brief period, you may end up utilizing console.log() various circumstances. While these two methodologies may work, they more often than not include a great deal of composing and erasing code, backpedalling and forward between your program and your editorial manager of decision. Most dire outcome imaginable, you may deliver your code with them, and thus share data you might not have any desire to share to clients. Most linters be that as it may will caution you when you have console.log () explanations in your code. And the outcome was compatible to the brief. During the testing we came across various bugs like Logic failures, Edge cases, Miscommunication, Versioning problems, etc. We had a capacity that organizations information from a frame, however we neglected to test what your capacity does on the off chance that somebody doesn't fill in every one of the fields. Subsequently, we attempted to ascertain something utilizing a few information that isn't accessible and we got some surprising outcome, so that was another bug.

4. Evaluation There were some bugs we faced while working on the assignment. Syntax bugs, where you give the browser an instruction it cannot understand. Logic bugs, where you tell the browser to do the wrong thing. The known bugs were the horse not running on the track, characters and colours. Fixing these bugs through the assignment worked well, we managed to run all horses on the track, betting was being made and coded, there was a random running of horses, overtaking is taking place between the horses. A lot of improvements can be made in the game, we can increase the size of the race track so that all the horses are on the track on all 4 directions, we can add sound effects, we can make different shapes of race tracks etc. If we had more time, we could’ve made more user-friendly GUI and different betting options. We could enter more character to the race, give more directing options. It won’t be that easy to add a 5th horse because for that we have to extend the existing race track horizontally which will be a bit difficult but we can do it. To extend the game to another horse we have to extend the race track.