A

Project Report
On
“Gaming Website (Duo Gamer)”
Using
HTML, CSS, JAVASCRIPT

Submitted in fulfillment of the requirement

for the Major Project

Under the Supervision of

NEETU MEHTA MA’AM

Submitted By :
Shivali Kumari (1907051063)
Sanya Chouhan (1907051059)

(Department of Computer Engineering)

KASTURBA INSTITUTE OF TECHNOLOGY, DELHI
2021-2022

Contents 1
 Certificate ……………………… 3
 Declaration …………………….. 4
 Acknowledgement ……………... 5
 Abstract ………………………… 6-7
 Introduction to Html, CSS, and
JavaScript ………………………. 8-10
 Steps in making Gaming
Website (output with coding) .. 11- 57
 Bibliography………………… 58

KASTURBA INSTITUTE OF TECHNOLOGY

2
 CERTIFICATE
This is to certify that the project entitled “Gaming
Website (Duo Gamer)” has been submitted to the
Department of Computer Engineering, Kasturba Institute
of Technology, for the fulfillment of the requirement for
the Assessment in “Major Project” by following student
of Third year DIPLOMA.

Student Name (with Roll no.)

1907051063 Shivali Kumari
1907051059 Sanya Chouhan

Dr. Neetu Mehta Mrs. Vanita Pimparkar

(Project Supervisor) (Head of Department)

3
 DECLARATION
We, hereby declare that the discussion entitled
“Gaming Website(Duo Gamer)” being submitted by us
towards the fulfillment of the Assessment Major
Project in the Department of Computer Engineering is
a project work carried by us under the supervision of
Dr. Neetu Mehta, and have not been submitted
anywhere else.

We will be solely responsible if any kind of Plagiarism is

found.

Date: 25th April 2022

Shivali Kumari Sanya Chouhan

(1907051063) (1907051059)

4
 ACKNOWLEDGMENT
We like to share our sincere gratitude to all those who help us
in completion of this project. During the work we faced many
challenges due to our lack of knowledge and experience but

these people help us to get over from all the difficulties and in

final compilation of our idea to a shaped sculpture.

First and foremost, praises and thanks to the God, the

Almighty for showering blessings throughout the project and

giving us enough strength and group work to complete our

work.
We would like to thank Dr. Neetu Mehta Ma’am for her
governance and guidance, because of which our group was
able to learn the minute aspects of a project work.
In the last we would like to thank the management of
Kasturba Institute of Technology for providing us such an
opportunity to learn from these experiences.
We are also thankful to our whole class and who most of all

to our families have inspired us to face all the challenges and

5
 ABSTRACT
Rock, Paper, Scissors
What it is: An easy, fast game that everyone probably
already knows. But I like to be comprehensive, so here we go
with some rock-paper-scissors instructions. Rock-paper-scissors
is a quick win-loose game that is often used to determine who
will go first or who will win some other small privilege.

Best for: Two players. But you could have a giant rock-
paper-scissors tournament with tons of people!

What you need: Nothing! Well, technically speaking, each

player needs to use their two hands.

How to play: In rock-paper-scissors, two players will each

randomly choose one of three hand signs: rock (made by making
a fist), paper (made by laying your hand flat), or scissors (made
by holding out two fingers to look like scissors). Both players
show their signs at the same time to see who will win. Here are
the rules that determine which sign beats another:

 Rock wins over scissors (because rock smashes scissors)

 Scissors wins over paper (because scissors cut paper)
 Paper wins over rock (because paper covers rock)

The game rock-paper-scissors has become a great tool on

children’s playgrounds. Not just for children, Rock-paper-
scissors has become popular with adults who compete in
championships for large cash prizes.

6
Continue…
The type of game originated in China and spread with
increased contact with East Asia, while developing
different variants in sign over time.

Tetris
Tetris is a surprising game. On paper, at least, it
seems unlikely that something so basic should have done
so well beyond the year 1975. Nevertheless, it’s been a
consistently popular video game for decades. It was
invented in Russia, and it was never expected to be as
popular as it became. Yet, the reason it is so popular is that
it meets the key criteria for fun in a game.
The aim in Tetris is simple; you bring down blocks from
the top of the screen. You can move the blocks around,
either left to right and/or you can rotate them. The blocks
fall at a certain rate, but you can make them fall faster if
you’re sure of your positioning.

Your objective is to get all the blocks to fill all the empty
space in a line at the bottom of the screen; whenever you
do this, you’ll find that the blocks vanish and you get
awarded some points.

A goal gives us a reason to play the game. Tetris offers an

incredibly simple reason to play—pitting your wits against
the computerized block dropper in order to last as long as
you can.

7
 INTRODUCTION
Introduction to HTML :-
HTML stands for Hyper Text Markup Language. It is
used to design web pages using a markup language. HTML is the
combination of hypertext and markup language.
Hypertext defines the link between the web pages. It uses
predefined tags and elements which tell the browser how to
properly display the content.
Originally, HTML was developed with the intent of defining the
structure of documents like headings, paragraphs, lists, and so
forth to facilitate the sharing of scientific information between
researchers. Now, HTML is being widely used to format web
pages with the help of different tags available in HTML language.
HTML is a MUST for students and working professionals to
become a great Software Engineer specially when they are
working in Web Development Domain. Here list down some of
the key advantages of learning HTML:
 Create Web site - You can create a website or customize an
existing web template if you know HTML well.
 Become a web designer - If you want to start a carrer as a
professional web designer, HTML and CSS designing is a
must skill.
 Understand web - If you want to optimize your website, to
boost its speed and performance, it is good to know HTML
to yield best results.
 Learn other languages - Once you understands the basic of
HTML then other related technologies like javascript, php, or
angular are become easier to understand

8
Introduction to CSS :-
Cascading Style Sheets, fondly referred to as CSS, is a
simply designed language intended to simplify the process of
making web pages presentable.
CSS allows you to apply styles to web pages. CSS is easy to
learn and understand, but it provides powerful control over the
presentation of an HTML document.
CSS is a MUST for students and working professionals to
become a great Software Engineer specially when they are
working in Web Development Domain. I will list down some
of the key advantages of learning CSS:
 Create Stunning Web site - CSS handles the look and
feel part of a web page. Using CSS, you can control the
color of the text, the style of fonts, the spacing between
paragraphs, how columns are sized and laid out, what
background images or colors are used, layout
designs,variations in display for different devices and
screen sizes as well as a variety of other effects.
 Become a web designer - If you want to start a carrer as
a professional web designer, HTML and CSS designing
is a must skill.
 Control web - CSS is easy to learn and understand but it
provides powerful control over the presentation of an
HTML document. Most commonly, CSS is combined
with the markup languages HTML or XHTML.
 Learn other languages - Once you understands the
basic of HTML and CSS then other related technologies
like javascript, php, or angular are become easier to
understand.

9
Introduction to Javascript :-
JavaScript  is a lightweight,
interpreted programming language. It is designed for creating
network-centric applications. It is complimentary to and
integrated with Java. JavaScript is very easy to implement
because it is integrated with HTML.
Javascript is a MUST for students and working professionals
to become a great Software Engineer specially when they are
working in Web Development Domain. I will list down some
of the key advantages of learning Javascript:
 Javascript is the most popular programming language in
the world and that makes it a programmer’s great choice.
Once you learnt Javascript, it helps you developing great
front-end as well as back-end softwares using different
Javascript based frameworks like jQuery, Node.JS etc.
 Javascript is everywhere, it comes installed on every
modern web browser and so to learn Javascript you really
do not need any special environment setup. For example
Chrome, Mozilla Firefox , Safari and every browser you
know as of today, supports Javascript.
 Javascript helps you create really beautiful and crazy fast
websites. You can develop your website with a console
like look and feel and give your users the best Graphical
User Experience.
 JavaScript usage has now extended to mobile app
development, desktop app development, and game
development.
 Due to high demand, there is tons of job growth and high
pay for those who know JavaScript.

10
 Welcome
To
Duo Gamer

11
 Steps in making Gaming Website
(Duo Gamer)
Duo Gamer.html

Coding (Duo Gamer.html)

<!DOCTYPE html>
<html>
    <head>
        <title>Duo Gamer</title>
        <link rel="stylesheet" type="text/css" href="s.css">
    </head>
<body>
   <header>
     <h2><font size="80px" face="Kristen ITC" >Duo Gamer</font></h2>
       <ul>
        <li><a href="Duo Gamer.html"><font size="4px">Home</font></a></li>
        <li><a href="game.html"><font size="4px">Games</font></a></li>
        <li><a href="rule.html"><font size="4px">Help</font></a></li>
       </ul>
    </header>
12
  <main>
      <p>Enjoy Duo Games!</p>
    <button onclick="window.location.href='game.html'">
<font face="arial black">Play Now</font>
</button>
  </main>
</body>
</html>

Coding (s.css)

*
{
    margin:0;
    padding: 0;
   
    box-sizing: border-box;
}
body{
    height: 100vh;
    background: url("neon.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: right;
    background-color: black;
}
header{
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color:rgb(206, 214, 210);
    background-color: rgb(0, 0, 0);
    text-shadow: #bb5500 10px 0px 10px;
}
header ul{
    list-style: none;
    display: flex;
}

13
header ul li{
    width:  80px;
    height: 60px;
    line-height: 60px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}
header ul li:hover{
    background: linearGradient(#c53d8e,#f4f4f4);
    Color: rgb(224, 139, 204);
}
main{
    height: calc(100vh-60px);
    display: flex;
    justify-content: left;
    align-items: left;
    flex-direction: column;
}
main p{
    width: 500px;
    height: 80px;
    font-family: Matura MT Script Capitals;
    line-height: 80px;
    text-align: center;
    font-size: 50px;
    margin-top: 130px;
    margin-left: 50px;
    color: rgb(35, 108, 172);
    border-radius: 50px;
    text-shadow: 1px 1px 2px rgb(47, 0, 255), 0 0 1em
rgb(202, 43, 26), 0 0 0.2em rgb(215, 236, 111);;
}

14
main button{
    width: 200px;
    height: 60px;
    border: none;
    outline: none;
    border-radius: 10px;
    margin-top: 70px;
    margin-left: 170px;
    font-size: 30px;
    background: linear-gradient(#cc8899,#bb5500);
    cursor: pointer;
    font-family: Matura MT Script Capitals;
}
main button:hover{
    transform: translate(6px);
    transition: 0.2s;
}
a:link {
    color: rgb(255, 255, 255);
    text-decoration: none;
  }
a:active {
    color:#e2d1dd;
}
a:hover {
    color: hotpink;
  }

15
Game.html

Login Form

Signup Form

16
 Coding (game.html)
<!DOCTYPE html>
<html>
    <head>
        <title>Games</title>
        <link rel="stylesheet" type="text/css"
href="g.css">
    </head>
<body>
    <header>
        <h2><font size="80px" face="Kristen ITC" >Duo
Gamer</font></h2>
        <ul>
            <li><a href="Duo Gamer.html"><font
size="4px">Home</font></a></li>
            <li><a href="game.html"><font
size="4px">Games</font></a></li>
            <li><a href="rule.html"><font
size="4px">Rules</font></a></li>  
        </ul>
    </header>
    <div class="wrapper">
        <div class="title-text">
           <div class="title login">
              Login to play
           </div>
           <div class="title signup">
              Signup to play
           </div>
        </div>
        <div class="form-container">
           <div class="slide-controls">
              <input type="radio" name="slide" id="login"
checked>
              <input type="radio" name="slide"
id="signup">
              <label for="login" class="slide
login">Login</label>
              <label for="signup" class="slide
signup">Signup</label>
              <div class="slider-tab"></div>
17
           </div>
<div class="form-inner">
              <form action="play.html" method="post"
class="login">
                 <div class="field">
                    <input type="email" placeholder="Email
Address" name="email" id="email" required>
                 </div>
                 <div class="field">
                    <input type="password"
placeholder="Password" name="password" id="password"
required>
                 </div>
                 <div class="pass-link">
                    <a href=" ">Forgot password?</a>
                 </div>
                 <div class="field btn">
                    <div class="btn-layer"></div>
                    <input type="submit" value="Login">
                 </div>
                 <div class="signup-link">
                    Don't have an account? <a
href="">Signup now</a>
                 </div>
              </form>
              <form action="login.php" method="post"
class="signup">
                 <div class="field">
                    <input type="text" placeholder="Name"
name="name" id="name" required>
                 </div>
                 <div class="field">
                    <input type="email" placeholder="Email
Address" name="email" id="email" required>
                 </div>
<div class="field">
<input type="password”placeholder="Password"
name="password" id="password"required>
                 </div>

18
                 <div class="field btn">
                    <div class="btn-layer"></div>

<input type="submit" value="Signup">

                 </div>
              </form>
           </div>
        </div>
     </div>
     <script>
      const loginText = document.querySelector(".title-text
.login");
      const loginForm =
document.querySelector("form.login");
      const loginBtn =
document.querySelector("label.login");
      const signupBtn =
document.querySelector("label.signup");
      const signupLink =
document.querySelector("form .signup-link a");
      signupBtn.onclick = (()=>{
        loginForm.style.marginLeft = "-50%";
        loginText.style.marginLeft = "-50%";
      });
      loginBtn.onclick = (()=>{
        loginForm.style.marginLeft = "0%";
        loginText.style.marginLeft = "0%";
      });
      signupLink.onclick = (()=>{
        signupBtn.click();
        return false;
      });
   </script>
    </body>
    </html>

19
 Coding (g.css)
@import url('https://fonts.googleapis.com/css2?
family=Poppins:wght@200;300;400;500;600;700&display=swap')
;
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
header{
    height: 70px;
    width: 80%;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color:rgb(206, 214, 210);
    background-color: rgb(0, 0, 0);
    text-shadow: #bb5500 10px 0px 10px;
}
header ul{
    list-style: none;
    display: flex;
}
header ul li{
    width:  80px;
    height: 60px;
    line-height: 60px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}
header ul li:hover{
    background: linearGradient(#c53d8e,#f4f4f4);
    Color: rgb(99, 187, 209);
}
header ul li:nth-child(1){
    border-bottom: 4px solid #000000;
}
20
a:link {
    color: rgb(255, 255, 255);
    text-decoration: none;
}
a:active {
    color:#f7f0f5;

}
a:visited:hover {
    color: hotpink;
}
a:visited {
    color:rgb(215, 225, 220);
}
html,body {
  display: grid;
  height: 100%;
  width: 100%;
  place-items: center;
  background: url("login.jpg");
  /* background: linear-gradient(-135deg, #c850c0,
#4158d0); */
    height: 100vh;
    background: url("login.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: right;
    background-color: black;
}
::selection{
  background: #814dca;
  color: rgb(244, 234, 234);
}
.wrapper{
  overflow: hidden;
  max-width: 390px;
  background: rgb(227, 221, 221);
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.025);
}
21
.wrapper .slide-controls{
  position: relative;
  display: flex;
  height: 50px;
  width: 100%;
  overflow: hidden;
  margin: 30px 0 10px 0;
  justify-content: space-between;
  border: 1px solid rgb(171, 170, 170);
  border-radius: 5px;
}
.slide-controls .slide{
  height: 100%;
  width: 100%;
  color: rgb(238, 222, 222);
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  line-height: 48px;
  cursor: pointer;
  z-index: 1;
  transition: all 0.6s ease;
}
.slide-controls label.signup{
  color: #000;
}
.slide-controls .slider-tab{
  position: absolute;
  height: 100%;
  width: 50%;
  left: 0;
  z-index: 0;
  border-radius: 5px;
  background: linear-gradient(-135deg, #c850c0,
#4158d0);
  transition: all 0.6s cubic-bezier(0.68,-
0.55,0.265,1.55);
}
input[type="radio"]{
  display: none;
}
22
#signup:checked ~ .slider-tab{
  left: 50%;
}
#signup:checked ~ label.signup{
  color: rgb(222, 212, 212);
  cursor: default;
  user-select: none;
}
#signup:checked ~ label.login{
  color: #000;
}
#login:checked ~ label.signup{
  color: #000;
}
#login:checked ~ label.login{
  cursor: default;
  user-select: none;
}
.wrapper .form-container{
  width: 100%;
  overflow: hidden;
}
.form-container .form-inner{
  display: flex;
  width: 200%;
}
.form-container .form-inner form{
  width: 50%;
  transition: all 0.6s cubic-bezier(0.68,-
0.55,0.265,1.55);
}
.form-inner form .field{
  height: 50px;
  width: 100%;
  margin-top: 20px;
}
.form-inner form .field input:focus{
  border-color: #421b56;
  /* box-shadow: inset 0 0 3px #fb6aae; */
}

23
.form-inner form .field input{
  height: 100%;
  width: 100%;
  outline: none;
  padding-left: 15px;
  border-radius: 5px;
  border: 1px solid rgb(163, 157, 157);
  border-bottom-width: 2px;
  font-size: 17px;
  transition: all 0.3s ease;
}
.form-inner form .field input::placeholder{
  color: rgb(217, 215, 215);
  transition: all 0.3s ease;
}
form .field input:focus::placeholder{
  color: #b3b3b3;
}
.form-inner form .pass-link{
  margin-top: 5px;
}
.form-inner form .signup-link{
  text-align: center;
  margin-top: 30px;
}
.form-inner form .pass-link a,
.form-inner form .signup-link a{
  color: #8a30a5;
  text-decoration: none;
}
.form-inner form .pass-link a:hover,
.form-inner form .signup-link a:hover{
  text-decoration: underline;
}
form .btn{
  height: 50px;
  width: 100%;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}
24
form .btn .btn-layer{
  height: 100%;
  width: 300%;
  position: absolute;
  left: -100%;
  background: -webkit-linear-gradient(-135deg, #c850c0,
#4158d0);
  border-radius: 5px;
  transition: all 0.4s ease;;
}
form .btn:hover .btn-layer{
  left: 0;
}
form .btn input[type="submit"]{
  height: 100%;
  width: 100%;
  z-index: 1;
  position: relative;
  background: none;
  border: none;
  color: rgb(227, 217, 217);
  padding-left: 0;
  border-radius: 5px;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
}

25
play.html

Rock Paper Scissors

Tetris
26
 Coding (play.html)
<html>
    <head>
        <title>Play</title>
        <style>
*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-repeat: no-repeat;
    background-size: cover;
    background: url("wall.png");
    background-size: 100%;
}
header{
    height: 70px;
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color:rgb(206, 214, 210);
    background-color: rgb(0, 0, 0);
    text-shadow: #bb5500 10px 0px 10px;
    border-radius: 20px;
    margin-left: 120px;
}
header ul{
    list-style: none;
    display: flex;
}
header ul li{
    width:  80px;
    height: 60px;
    line-height: 60px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}
27
header ul li:hover{
    background: linearGradient(#c53d8e,#f4f4f4);
    Color: rgb(99, 187, 209);
}  
a:link {
    color: rgb(255, 255, 255);
    text-decoration: none;
  }
a:active {
    color: hotpink;
}
a:hover {
    color: hotpink;
  }
 img{
    float:center;
    border:6px solid rgb(228, 101, 92);
    opacity: 0.4;
    height: 50%;
    width: 70%;
    transition: 1s;
    }
img:hover{
    float:center;
    border:6px double rgb(163, 163, 32);
    background-size:cover;
    opacity:8.0;
    transform:scale(1.3);
    z-index:3;
    }
.pqr{
    float:left;
    height:100%;
    width:100%;
    size: 50px;
    padding-left: 200px;
    padding-top: 80px;
    }

28
table{
    width:100%;
    height:90%;
    background-size:cover;
    overflow:hidden;
    overflow:visible;
    }
            </style>
 </head>
            <body>
                <header>
                    <h2><font size="80px" face="Kristen
ITC" >Duo Gamer</font></h2>
                    <ul>
                        <li><a href="Duo
Gamer.html"><font size="4px">Home</font></a></li>
                        <li><a href="play.html"><font
size="4px">Games</font></a></li>
                        <li><a href="rule.html"><font
size="4px">Rules</font></a></li>   
                    </ul>
                </header>
<table colspan="2" rowspan="2" height="80%" width="25%"
>
                    <caption><font color="white"
face="arial black" size="7px">Click the game to play !
</font></caption>
                <tr>
                    <td ><a href="index.html"><div
class="pqr"> <img  src="rps.gif"></div></a></td>
                   
                    <td><a href="tetris.html"><div
class="pqr"> <img src="Screen.png"></div></a> </td>
                    </tr>
                    </table>
                   
 </body>
 </html>

29
 index.html

Coding (index.html)

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" />
    <meta charset="UTF-8" />
    <meta="viewport" content="width=device-width, initial-
scale=1.0" />
    <link rel="preconnect"
href="https://fonts.gstatic.com" />
    <link rel="preconnect"
href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?
family=Barlow:wght@600&display=swap" rel="stylesheet">
    <title>Rock Paper Scissors</title>
  </head>
  <body>
    <div class="wrapper">
      <div class="scoreboard"> 30
 <div class="wrapper">
      <div class="scoreboard">
          <div class="title">
              <img src='title.png' />
          </div>
          <div class="score">
              <p> SCORE</p>
              <h1> 0 </h1>
          </div>
      </div>
      <div class="hands">
            <div class="hand paper">
              <img src="Paper.png"
onclick="pickUserHand('paper')"/>
            </div>
            <div class="hand scissors">
              <img src="Scissors.png"
onclick="pickUserHand('scissors')"/>
            </div>
            <div class="hand rock">
              <img src="Rock.png"
onclick="pickUserHand('rock')"/>                        
            </div>
      </div>
<div class="contest">      
        <div class="userhand">
            <h1>YOU PICKED</h1>
            <div class="handImageContainer">
              <img id="userPickImage" sac="Paper.png">
            </div>
      </div>
 <div class="referee">
            <div class="decision"><h1> YOU WIN!
</h1></div>
            <div class="new Game"
onclick="restartGame()">PLAY AGAIN</div>
     </div>

31
<div class="computerhand">
            <h1>COMPUTER PICKED</h1>
            <div class="handImageContainer">
            <img id="computerPickImage" src='Paper.png'/>
            </div>  
        </div>      
      </div>        
    </div>
    <script src="index.js"></script>
  </body>
</html>

Coding (style.css)

/*---------
 Global styles
--------*/
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  body {
    font-family: "Barlow Condensed", sans-serif;
  }
  /*
 -------------------------
  HTML elements
 -------------------------
  */
  .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-image: url("w.png");
    background-size: cover;
  }
32
 .scoreboard {
    width: 700px;
    height: 150px;
    border-radius: 15px;
    border: 1px solid white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
  }
  .title {
    padding-left: 30px;
  }
  .score {
    width: 150px;
    height: 114px;
    background-color: white;
    border: 1px solid white;
    border-radius: 8px;
    margin-right: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .score h1 {
    color: #565468;
    font-size: 56px;
    font-family: "Barlow", sans-serif;
  }
  .score p {
    color: #0b31d9;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 19px;
    letter-spacing: 2.5px;
    text-align: left;
  }

33
.hands {
    background-image: url("triangle.png");
    background-position: center;
    background-repeat: no-repeat;
    visibility: visible;
    opacity: 1;
    position: relative;
    width: 476px;
    height: 430px;
    margin-top: 100px;
    display: flex;
    z-index: 0;
    flex-wrap: wrap;
    justify-content: center;
  }
  .hands img {
    width: 200px;
    height: 200px;
    display: block;
  }
 
  .hands .paper {
    margin-right: 20px;
  }
 
  .hands .scissors {
    margin-left: 20px;
  }
 
  .hands .hand {
    cursor: pointer;
    transition: all 0.25s;
  }
 
  .hands .hand:hover {
    transform: translate3d(0px, -8px, 0px);
  }
  .contest {
    display: none;
    margin-top: 50px;
    width: 900px;
} 34
.contest img {
    width: 275px;
    height: 275px;
  }
 
  .contest > div {
    flex: 1;
  }
 
  .contest h1 {
    color: white;
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 50px;
    text-align: center;
  }
 
  .contest .newGame {
    color: hsl(229, 25%, 31%);
    background-color: white;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
  }
   .newGame:hover {
    background: rgb(218, 218, 218);
    transform: translate3d(0px, -2px, 0px);
  }
 
  .contest .handImageContainer {
    display: flex;
    justify-content: center;
  }
 
  .referee {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
} 35
.referee h1 {
    font-size: 45px;
    color: white;
  }
 
  .computerhand {
    display: flex;
    flex-direction: column;
  }

Coding (index.js)

const handOptions = {
    "rock": "Rock.png",
    "paper": "Paper.png",
    "scissors": "Scissors.png"
  }
 
  let SCORE = 0;
 
  const pickUserHand = (hand) => {
    let hands = document.querySelector(".hands");
    hands.style.display = "none";
 
    let contest = document.querySelector(".contest");
    contest.style.display = "flex";
 
    // set user Image
    document.getElementById("userPickImage").src =
handOptions[hand];
 
    pickComputerHand(hand);
  };
 
  const pickComputerHand = (hand) => {
      let hands = ["rock", "paper", "scissors"];
      let cpHand = hands[Math.floor(Math.random() *
hands.length)];
      referee(hand, cpHand);

36
// set computer image
      document.getElementById("computerPickImage").src =
handOptions[cpHand]
     
      referee(hand, cpHand);
  };
 
  const referee = (userHand, cpHand) => {
    if (userHand == "paper" && cpHand == "scissors") {
      setDecision("YOU LOSE!");
     
    }
    if (userHand == "paper" && cpHand == "rock") {
      setDecision("YOU WIN!");
      setScore(SCORE + 1);
    }
    if (userHand == "paper" && cpHand == "paper") {
      setDecision("It's a tie!");
    }
    if (userHand == "rock" && cpHand == "scissors") {
      setDecision("YOU WIN!");
      setScore(SCORE + 1);
    }
    if (userHand == "rock" && cpHand == "paper") {
      setDecision("YOU LOSE!");
    }
if (userHand == "rock" && cpHand == "rock") {
      setDecision("It's a tie!");
    }
    if (userHand == "scissors" && cpHand == "scissors") {
      setDecision("It's a tie!");
    }
    if (userHand == "scissors" && cpHand == "rock") {
      setDecision("YOU LOSE!");
    }
    if (userHand == "scissors" && cpHand == "paper") {
      setDecision("YOU WIN!");
      setScore(SCORE + 1);
    }
  };
37
 const restartGame = () => {
    let contest = document.querySelector(".contest");
    contest.style.display = "none";
 
    let hands = document.querySelector(".hands");
    hands.style.display = "flex";
  }
 
  const setDecision = (decision) => {
    document.querySelector(".decision h1").innerText =
decision;
  }
 
  const setScore = (newScore) => {
    SCORE = newScore;
   

    document.querySelector(".score h1").innerText =
newScore;
  }

tetris.html

38
 Coding (tetris.html)
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">      
        <meta name="viewport" content="width = device-
width, initial-scale = 1">
        <title>Tetris</title>
        <link rel="stylesheet" type="text/css"
href="mainstyle.css">
        <script src="TetrisBasic.js"></script>
    </head>
    <body>
        <canvas id='my-canvas'></canvas>
    </body>
</html>

Coding (mainstyle.css)

body {
    text-align: center;
    background: rgb(176, 100, 100);
    background: url("tetrisback.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100%;
    display: flex;
}
#my-canvas {
    background: rgb(183, 197, 134);
    margin-left: 600px;
    margin-top: 120px;
    display: block;
    justify-content: center;
    background: linear-gradient(rgb(224, 193, 193)) ;
}
39
 Coding (mainstyle.css)

let canvas;
let ctx;
let gBArrayHeight = 20; // Number of cells in array height
let gBArrayWidth = 12; // Number of cells in array width
let startX = 4; // Starting X position for Tetromino
let startY = 0; // Starting Y position for Tetromino
let score = 0; // Tracks the score
let level = 1; // Tracks current level
let winOrLose = "Playing";
// Used as a look up table where each value in the array
// contains the x & y position we can use to draw the
// box on the canvas
let coordinateArray = [...Array(gBArrayHeight)].map(e =>
Array(gBArrayWidth).fill(0));

let curTetromino = [[1,0], [0,1], [1,1], [2,1]];

// 3. Will hold all the Tetrominos

let tetrominos = [];
// 3. The tetromino array with the colors matched to the
tetrominos array
let tetrominoColors =
['purple','cyan','blue','yellow','orange','green','red'];
// 3. Holds current Tetromino color
let curTetrominoColor;

// 4. Create gameboard array so we know where other squares

are
let gameBoardArray = [...Array(20)].map(e =>
Array(12).fill(0));

// 6. Array for storing stopped shapes

// It will hold colors when a shape stops and is added
let stoppedShapeArray = [...Array(20)].map(e =>
Array(12).fill(0));

40
// 4. Created to track the direction I'm moving the
Tetromino
// so that I can stop trying to move through walls
let DIRECTION = {
    IDLE: 0,
    DOWN: 1,
    LEFT: 2,
    RIGHT: 3
};
let direction;

class Coordinates{
    constructor(x, y){
        this.x = x;
        this.y = y;
    }
}

// Execute SetupCanvas when page loads

document.addEventListener('DOMContentLoaded', SetupCanvas);

// Creates the array with square coordinates [Lookup Table]

// [0,0] Pixels X: 11 Y: 9, [1,0] Pixels X: 34 Y: 9, ...
function CreateCoordArray(){
    let xR = 0, yR = 19;
    let i = 0, j = 0;
    for(let y = 9; y <= 446; y += 23){
        // 12 * 23 = 276 - 12 = 264 Max X value
        for(let x = 11; x <= 264; x += 23){
            coordinateArray[i][j] = new Coordinates(x,y);
            // console.log(i + ":" + j + " = " +
coordinateArray[i][j].x + ":" + coordinateArray[i][j].y);
            i++;
        }
        j++;
        i = 0;
    }
}

function SetupCanvas(){
    canvas = document.getElementById('my-canvas');
41
   
ctx = canvas.getContext('2d');
    canvas.width = 936;
    canvas.height = 956;

    // Double the size of elements to fit the screen

    ctx.scale(2, 2);

    // Draw Canvas background

    ctx.fillStyle = 'yellow';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
   
    // Draw gameboard rectangle
    ctx.strokeStyle = 'black';
    ctx.strokeRect(8, 8, 280, 462);

    tetrisLogo = new Image(161, 54);

    tetrisLogo.onload = DrawTetrisLogo;
    tetrisLogo.src = "tetrislogo.png";

    // Set font for score label text and draw

    ctx.fillStyle = 'black';
    ctx.font = '21px Arial';
    ctx.fillText("SCORE", 300, 98);

    // Draw score rectangle

    ctx.strokeRect(300, 107, 161, 24);

    // Draw score
    ctx.fillText(score.toString(), 310, 127);
   
    // Draw level label text
    ctx.fillText("LEVEL", 300, 157);

    // Draw level rectangle

    ctx.strokeRect(300, 171, 161, 24);

    // Draw level
    ctx.fillText(level.toString(), 310, 190);

    // Draw next label text

    ctx.fillText("WIN / LOSE", 300, 221);
42
   
// Draw playing condition
    ctx.fillText(winOrLose, 310, 261);

    // Draw playing condition rectangle

    ctx.strokeRect(300, 232, 161, 95);
   
    // Draw controls label text
    ctx.fillText("CONTROLS", 300, 354);

    // Draw controls rectangle

    ctx.strokeRect(300, 366, 161, 104);

    // Draw controls text

    ctx.font = '19px Arial';
    ctx.fillText("A : Move Left", 310, 388);
    ctx.fillText("D : Move Right", 310, 413);
    ctx.fillText("S : Move Down", 310, 438);
    ctx.fillText("E : Rotate Right", 310, 463);

    // 2. Handle keyboard presses

    document.addEventListener('keydown', HandleKeyPress);

    // 3. Create the array of Tetromino arrays

    CreateTetrominos();
    // 3. Generate random Tetromino
    CreateTetromino();

    // Create the rectangle lookup table

    CreateCoordArray();

    DrawTetromino();
}

function DrawTetrisLogo(){
    ctx.drawImage(tetrisLogo, 300, 8, 161, 54);
}

function DrawTetromino(){
    // Cycle through the x & y array for the tetromino
looking
43
   

// for all the places a square would be drawn

    for(let i = 0; i < curTetromino.length; i++){

        // Move the Tetromino x & y values to the tetromino

        // shows in the middle of the gameboard
        let x = curTetromino[i][0] + startX;
        let y = curTetromino[i][1] + startY;

        // 4. Put Tetromino shape in the gameboard array

        gameBoardArray[x][y] = 1;
        // console.log("Put 1 at [" + x + "," + y + "]");

        // Look for the x & y values in the lookup table

        let coorX = coordinateArray[x][y].x;
        let coorY = coordinateArray[x][y].y;

        // console.log("X : " + x + " Y : " + y);

        // console.log("Rect X : " + coordinateArray[x]
[y].x + " Rect Y : " + coordinateArray[x][y].y);

        // 1. Draw a square at the x & y coordinates that

the lookup
        // table provides
        ctx.fillStyle = curTetrominoColor;
        ctx.fillRect(coorX, coorY, 21, 21);
    }
}

// ----- 2. Move & Delete Old Tetrimino -----

// Each time a key is pressed we change the either the
starting
// x or y value for where we want to draw the new Tetromino
// We also delete the previously drawn shape and draw the
new one
function HandleKeyPress(key){
    if(winOrLose != "Game Over"){
    // a keycode (LEFT)
    if(key.keyCode === 65){
        // 4. Check if I'll hit the wall
        direction = DIRECTION.LEFT;
44
     

  if(!HittingTheWall() && !CheckForHorizontalCollision()){

            DeleteTetromino();
            startX--;
            DrawTetromino();
        }

    // d keycode (RIGHT)
    } else if(key.keyCode === 68){
       
        // 4. Check if I'll hit the wall
        direction = DIRECTION.RIGHT;
        if(!HittingTheWall() && !
CheckForHorizontalCollision()){
            DeleteTetromino();
            startX++;
            DrawTetromino();
        }

    // s keycode (DOWN)
    } else if(key.keyCode === 83){
        MoveTetrominoDown();
        // 9. e keycode calls for rotation of Tetromino
    } else if(key.keyCode === 69){
        RotateTetromino();
    }
    }
}

function MoveTetrominoDown(){
    // 4. Track that I want to move down
    direction = DIRECTION.DOWN;

    // 5. Check for a vertical collision

    if(!CheckForVerticalCollison()){
        DeleteTetromino();
        startY++;
        DrawTetromino();
    }
}

45
// 10. Automatically calls for a Tetromino to fall every
second

window.setInterval(function(){
    if(winOrLose != "Game Over"){
        MoveTetrominoDown();
    }
  }, 1000);

// Clears the previously drawn Tetromino

// Do the same stuff when we drew originally
// but make the square white this time
function DeleteTetromino(){
    for(let i = 0; i < curTetromino.length; i++){
        let x = curTetromino[i][0] + startX;
        let y = curTetromino[i][1] + startY;

        // 4. Delete Tetromino square from the gameboard

array
        gameBoardArray[x][y] = 0;

        // Draw white where colored squares used to be

        let coorX = coordinateArray[x][y].x;
        let coorY = coordinateArray[x][y].y;
        ctx.fillStyle = 'white';
        ctx.fillRect(coorX, coorY, 21, 21);
    }
}

// 3. Generate random Tetrominos with color

// We'll define every index where there is a colored block
function CreateTetrominos(){
    // Push T
    tetrominos.push([[1,0], [0,1], [1,1], [2,1]]);
    // Push I
    tetrominos.push([[0,0], [1,0], [2,0], [3,0]]);
    // Push J
    tetrominos.push([[0,0], [0,1], [1,1], [2,1]]);
    // Push Square
46
    tetrominos.push([[0,0], [1,0], [0,1], [1,1]]);
    // Push L
    tetrominos.push([[2,0], [0,1], [1,1], [2,1]]);
    // Push S
    tetrominos.push([[1,0], [2,0], [0,1], [1,1]]);
    // Push Z
    tetrominos.push([[0,0], [1,0], [1,1], [2,1]]);
}

function CreateTetromino(){
    // Get a random tetromino index
    let randomTetromino = Math.floor(Math.random() *
tetrominos.length);
    // Set the one to draw
    curTetromino = tetrominos[randomTetromino];
    // Get the color for it
    curTetrominoColor = tetrominoColors[randomTetromino];
}

// 4. Check if the Tetromino hits the wall

// Cycle through the squares adding the upper left hand
corner
// position to see if the value is <= to 0 or >= 11
// If they are also moving in a direction that would be off
// the board stop movement
function HittingTheWall(){
    for(let i = 0; i < curTetromino.length; i++){
        let newX = curTetromino[i][0] + startX;
        if(newX <= 0 && direction === DIRECTION.LEFT){
            return true;
        } else if(newX >= 11 && direction ===
DIRECTION.RIGHT){
            return true;
        }  
    }
    return false;
}

// 5. Check for vertical collison

function CheckForVerticalCollison(){
    // Make a copy of the tetromino so that I can move a
fake
47
    // Tetromino and check for collisions before I move the
real
    // Tetromino
    let tetrominoCopy = curTetromino;
    // Will change values based on collisions
    let collision = false;

    // Cycle through all Tetromino squares

    for(let i = 0; i < tetrominoCopy.length; i++){
        // Get each square of the Tetromino and adjust the
square
        // position so I can check for collisions
        let square = tetrominoCopy[i];
        // Move into position based on the changing upper
left
        // hand corner of the entire Tetromino shape
        let x = square[0] + startX;
        let y = square[1] + startY;

        // If I'm moving down increment y to check for a

collison
        if(direction === DIRECTION.DOWN){
            y++;
        }

        // Check if I'm going to hit a previously set piece

        // if(gameBoardArray[x][y+1] === 1){
        if(typeof stoppedShapeArray[x][y+1] === 'string'){
            // console.log("COLLISON x : " + x + " y : " +
y);
            // If so delete Tetromino
            DeleteTetromino();
            // Increment to put into place and draw
            startY++;
            DrawTetromino();
            collision = true;
            break;
        }
        if(y >= 20){
            collision = true;
            break;
        }
48
   

}
    if(collision){
        // Check for game over and if so set game over text
        if(startY <= 2){
            winOrLose = "Game Over";
            ctx.fillStyle = 'white';
            ctx.fillRect(310, 242, 140, 30);
            ctx.fillStyle = 'black';
            ctx.fillText(winOrLose, 310, 261);
        } else {

            // 6. Add stopped Tetromino to stopped shape

array
            // so I can check for future collisions
            for(let i = 0; i < tetrominoCopy.length; i++){
                let square = tetrominoCopy[i];
                let x = square[0] + startX;
                let y = square[1] + startY;
                // Add the current Tetromino color
                stoppedShapeArray[x][y] =
curTetrominoColor;
            }

            // 7. Check for completed rows

            CheckForCompletedRows();

            CreateTetromino();

            // Create the next Tetromino and draw it and

reset direction
            direction = DIRECTION.IDLE;
            startX = 4;
            startY = 0;
            DrawTetromino();
        }

    }
}

// 6. Check for horizontal shape collision

49
function CheckForHorizontalCollision(){
   

// Copy the Teromino so I can manipulate its x value

    // and check if its new value would collide with
    // a stopped Tetromino
    var tetrominoCopy = curTetromino;
    var collision = false;

    // Cycle through all Tetromino squares

    for(var i = 0; i < tetrominoCopy.length; i++)
    {
        // Get the square and move it into position using
        // the upper left hand coordinates
        var square = tetrominoCopy[i];
        var x = square[0] + startX;
        var y = square[1] + startY;

        // Move Tetromino clone square into position based

        // on direction moving
        if (direction == DIRECTION.LEFT){
            x--;
        }else if (direction == DIRECTION.RIGHT){
            x++;
        }

        // Get the potential stopped square that may exist

        var stoppedShapeVal = stoppedShapeArray[x][y];

        // If it is a string we know a stopped square is

there
        if (typeof stoppedShapeVal === 'string')
        {
            collision=true;
            break;
        }
    }

    return collision;
}

// 7. Check for completed rows

50
// ***** SLIDE *****

function CheckForCompletedRows(){

    // 8. Track how many rows to delete and where to start

deleting
    let rowsToDelete = 0;
    let startOfDeletion = 0;

    // Check every row to see if it has been completed

    for (let y = 0; y < gBArrayHeight; y++)
    {
        let completed = true;
        // Cycle through x values
        for(let x = 0; x < gBArrayWidth; x++)
        {
            // Get values stored in the stopped block array
            let square = stoppedShapeArray[x][y];

            // Check if nothing is there

            if (square === 0 || (typeof square ===
'undefined'))
            {
                // If there is nothing there once then jump
out
                // because the row isn't completed
                completed=false;
                break;
            }
        }

        // If a row has been completed

        if (completed)
        {
            // 8. Used to shift down the rows
            if(startOfDeletion === 0) startOfDeletion = y;
            rowsToDelete++;

            // Delete the line everywhere

            for(let i = 0; i < gBArrayWidth; i++)
            {
51
               

// Update the arrays by deleting previous squares

                stoppedShapeArray[i][y] = 0;
                gameBoardArray[i][y] = 0;
                // Look for the x & y values in the lookup
table
                let coorX = coordinateArray[i][y].x;
                let coorY = coordinateArray[i][y].y;
                // Draw the square as white
                ctx.fillStyle = 'white';
                ctx.fillRect(coorX, coorY, 21, 21);
            }
        }
    }
    if(rowsToDelete > 0){
        score += 10;
        ctx.fillStyle = 'white';
        ctx.fillRect(310, 109, 140, 19);
        ctx.fillStyle = 'black';
        ctx.fillText(score.toString(), 310, 127);
        MoveAllRowsDown(rowsToDelete, startOfDeletion);
    }
}

// 8. Move rows down after a row has been deleted

function MoveAllRowsDown(rowsToDelete, startOfDeletion){
    for (var i = startOfDeletion-1; i >= 0; i--)
    {
        for(var x = 0; x < gBArrayWidth; x++)
        {
            var y2 = i + rowsToDelete;
            var square = stoppedShapeArray[x][i];
            var nextSquare = stoppedShapeArray[x][y2];

            if (typeof square === 'string')

            {
                nextSquare = square;
                gameBoardArray[x][y2] = 1; // Put block
into GBA

52
                stoppedShapeArray[x][y2] = square; // Draw
color into stopped

             
  // Look for the x & y values in the lookup table
                let coorX = coordinateArray[x][y2].x;
                let coorY = coordinateArray[x][y2].y;
                ctx.fillStyle = nextSquare;
                ctx.fillRect(coorX, coorY, 21, 21);

                square = 0;
                gameBoardArray[x][i] = 0; // Clear the spot
in GBA
                stoppedShapeArray[x][i] = 0; // Clear the
spot in SSA
                coorX = coordinateArray[x][i].x;
                coorY = coordinateArray[x][i].y;
                ctx.fillStyle = 'white';
                ctx.fillRect(coorX, coorY, 21, 21);
            }
        }
    }
}

// 9. Rotate the Tetromino

// ***** SLIDE *****
function RotateTetromino()
{
    let newRotation = new Array();
    let tetrominoCopy = curTetromino;
    let curTetrominoBU;

    for(let i = 0; i < tetrominoCopy.length; i++)

    {
        // Here to handle a error with a backup Tetromino
        // We are cloning the array otherwise it would
        // create a reference to the array that caused the
error
        curTetrominoBU = [...curTetromino];

        // Find the new rotation by getting the x value of

the
53
        // last square of the Tetromino and then we
orientate
       

// the others squares based on it [SLIDE]

        let x = tetrominoCopy[i][0];
        let y = tetrominoCopy[i][1];
        let newX = (GetLastSquareX() - y);
        let newY = x;
        newRotation.push([newX, newY]);
    }
    DeleteTetromino();

    // Try to draw the new Tetromino rotation

    try{
        curTetromino = newRotation;
        DrawTetromino();
    }  
    // If there is an error get the backup Tetromino and
    // draw it instead
    catch (e){
        if(e instanceof TypeError) {
            curTetromino = curTetrominoBU;
            DeleteTetromino();
            DrawTetromino();
        }
    }
}

// Gets the x value for the last square in the Tetromino

// so we can orientate all other squares using that as
// a boundary. This simulates rotating the Tetromino
function GetLastSquareX()
{
    let lastX = 0;
     for(let i = 0; i < curTetromino.length; i++)
    {
        let square = curTetromino[i];
        if (square[0] > lastX)
            lastX = square[0];
    }
    return lastX;
54
}

rule.html

Coding (rule.html)
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Rule</title>
        <style>
*{
    margin:0;
    padding: 0;
   
    box-sizing: border-box;
}
body{
    background-repeat: no-repeat;
    background-size: cover;
    background: url("rule.png"); 55
    background-size: 100%;
}
header{
header ul li:hover{
    background: linearGradient(#c53d8e,#f4f4f4);
    Color: rgb(99, 187, 209);
}  
a:link {
    color: rgb(255, 255, 255);
    text-decoration: none;
  }
a:active {
    color: hotpink;
}
a:hover {
    color: hotpink;
}
.img{
    height:"60%" ;
56
    width:"50%";
     margin:"50px";
}
 BIBLIOGRAPHY
 https://www.youtube.com/watch?
v=C6jSg4VPNZE&t=1062s
 https://github.com/marcoris/tetrisJS
 https://www.codingnepalweb.com/login-and-
registration-form-in-html/
 https://www.youtube.com/watch?v=tXn4cLwdY7w

57
Thank You

58