HTML-small-project/Index Page.html at main · stalight/HTML-small-project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<!--This is so that I could link to the other folders easily-->
<html lang="en">
    <!--This shows that the html is set to english language-->
    <head>
        <title>Summative Assignment - Thomas</title>
        <!--Title of the Webpage-->
        <link href="css/index.css" type="text/css" rel="stylesheet">
        <!--Links to the stylesheet-->
        <link href="pic/1612527352.ico" rel="icon">
        <!--Links to the favicon-->
        <meta charset="utf-8">
        <!--This code makes sure that the code I type could be read by a machine-->
    </head>
    <body>
        <div id="title">
            <b>Summative Assignment - Thomas</b>
            <!--The title of the webpage-->
        </div>

        <div id="BODY">
            <div id="hyperlinks">
                <pre><a id="hype" href="Index Page.html">Home Page</a> <b>|</b> <a id="hype" href="Project 1.html">Project 1 - Guess a Number!</a> <b>|</b> <a id="hype" href="Project 2.html">Project 2 - Flip a Coin!</a> <b>|</b> <a id="hype" href="Project 3.html">Project 3 - Tic Tac Toe!</a> <b>|</b> <a id="hype" href="Reflection.html">Reflection</a></pre>
                <!--Hyperlinks for my other webpage-->
                </div>
            <!--Div ID for css theme editing-->
            <h1>Introduction</h1>
            <p id="intro">
                This website is about mini games of which most of us has played when we were young, or you may also be new to these games! The target audience for this website are anyone who is above the age of 10,
                this is because I want to make sure that the user are able to understand the instruction of the website so they can enjoy the game to their fullest. Furthermore, this website is about games and usually
                younger people are more interested in games compared to older people. The goal of this website is to create 3 simple, playable and popular game digitally with javascript, html and css.
                I expect myself to complete the project within a week because I know I am a fast worker and I always do my work the day I recieve them, so the expected goal I set for myself is to complete the project within
                a week.
                <!--Introduction part-->
            </p>
           <h1>Proposals</h1>
        <div id="Proposal">
            <!--Div ID for css theme editing-->
            <h2>Project #1 - Guess The Number!</h2>
            <a href="pic/Project_1-FlowChart.png.png" target="_blank" id="images"><img src="pic/Project_1-FlowChart.png.png" id="pics"></a><br><p id="highlight"><b>Click Image to Open New Tab!</b></p>
            <!--Flow Chart image and a hyperlink for them to open the image in big picture new tab on click-->
            <div id="project">
              <!--Div ID for css theme editing-->
                <p>
                The main concept for this project is to have the user choose the difficulty of the game through radio buttons or input their own custom difficulty by inputting their own starting value and ending value of the guessing range, other than that
                I wanted to make it so that it's really user friendly and that the program will notify the user whenever something is wrong with their inputs so the computer will always alert the user whenever things such as "none of the difficulties are selected", and
                "wrong values inputted for custom difficulty". After that I wanted the program to show the play area where the player will guess the number that the computer has chosen after the game starts so I decieded to hide the play area before the game and make it
                show after they click the "submit" button on the html. Furthermore, for the game itself, I want to make it easy and challenging for the player so I made them guess for a certain amount of time and made the computer give hints to the player when their
                number is either larger or smaller than the number that the computer has chosen. Finally, the game will tell the player either they have lost (from using up all their guesses) or if they have won and the player can restart the game by pressing the restart button.
                After a winner or loser is announced, everything except for the restart button will be unable to use and the restart button is there for the user to replay to the game.<br><br>
                (For further information on how the game works and flows, please check out the image above.)
                </p>
                <!--Flow Chart description-->
            </div>
            ______________________________________________________________________________________________________________________________________________
            <!--Division line-->
            <h2>Project #2 - Flip the Coin!</h2>
            <a href="pic/Project_2-FlowChart.png" target="_blank" id="images"><img src="pic/Project_2-FlowChart.png" id="pics"></a><br><p id="highlight"><b>Click Image to Open in New Tab!</b></p>
            <!--Flow Chart image and a hyperlink for them to open the image in big picture new tab on click-->
            <div id="project">
                <!--Div ID for css theme editing-->
                <p>
                For this project I've decided to go with the direction where the game is direct and really easy to understand on what to do, so I wanted the only thing that could be interacted to be the buttons for which buttons they would choose to be on
                and the button where the coin will be flipped. Other than that, the computer will control the rest of the game and the user will only concern about which side they have chosen. For every error of input that the user have, wins or losses the
                website will alert the user that there's an error of input in the website. I wanted the the user or the computer to win on the score of 10 so if either the computer or player gets the score of 10 the website would announce their victory and
                then everything on the webpage will stop working, so the only thing that the user can do is to click the restart button if they want to play the game again.<br><br>
                (For further information on how the game works and flows, please check out the image above.)
                <!--Flow Chart description-->
            </div>
            ______________________________________________________________________________________________________________________________________________
            <h2>Project #3 - Tic Tac Toe!</h2>
            <a href="pic/Project_3-FlowChart.png" target="_blank" id="images"><img src="pic/Project_3-FlowChart.png" id="pics"></a><br><p id="highlight"><b>Click Image to Open in New Tab!</b></p>
            <!--Flow Chart image and a hyperlink for them to open the image in big picture new tab on click-->
            <div id="project">
                <!--Div ID for css theme editing-->
                <p>
                The main concept for this project is to create a playable tic tac toe with the application of AI, which basically means that the artificial intelligence will do things it can to prevent you from winning,
                but if it doesn't detect you winning then it'll pic a random tile to fill. The computer will also detect all of the winning conditions for a tic tac toe game so if either the computer or the player are able to get the
                combinations for winning (which is to connect 3 tiles together), then they win, or else if all the tile is filled but no one wins then it's a tie.
                After a winner or tie occurs, the program will stop functioning so that the user will be unable to make anymore inputs to the playfield and the only thing the user can do
                is to click the restart button which will restart the game so that they could replay again.<br><br>
                (For further information on how the game works and flows, please check out the image above.)
            <!--Flow Chart description-->
            </p>
            </div>
        </div>
        <div id="hyperlinks">
        <pre><a id="hype" href="Index Page.html">Home Page</a> <b>|</b> <a id="hype" href="Project 1.html">Project 1 - Guess a Number!</a> <b>|</b> <a id="hype" href="Project 2.html">Project 2 - Flip a Coin!</a> <b>|</b> <a id="hype" href="Project 3.html">Project 3 - Tic Tac Toe!</a> <b>|</b> <a id="hype" href="Reflection.html">Reflection</a></pre>
        <!--Hyperlinks for my other webpage-->
        </div>
    </body>
</html>