Fruit matcher Assignment PDF

Added on - May 2021

Trusted by 2+ million users,
1000+ happy students everyday
Showing pages 1 to 4 of 15 pages
Index.HtmlIndex.html is the building block of the game. This file contains head tag in which Title“Fruit Matcher” is given alongwith script for javascript and css are mentioned. In bodytag we have table as Difficulty level. Table is inbuilt with form which includes three gridas Easy, Medium, hard and Don’t do it again which is treated as level of the game andone button labelled as New Game to start a new game whenever user click on it. At theend of it, we have division for footer which includes header as “Fruit Matcher” andimage for restart the game..cssAttributes of CSS files are:html {width:100%;height:100%;}body {margin:0;padding:0;width:100%;height:100%;}Above code maintains the structure of the game. Html code gives the boundary to thegame while body maintains overall padding and between margin of the game layout.
Matching Cards-If you wish to have custom matching images, you can do so byleveraging the 'matching' class which is added to one of the matching cards. See theexample below..back.card-1 {background-image: url(../images/fruits/apple_1.jpg);}Initially hidden paneThis code determines how to card will look to the user beforeclicking on it or in initial phase..back {-webkit-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg);-ms-transform: rotateY(-180deg);-o-transform: rotateY(-180deg);transform: rotateY(-180deg);background-color: #fff;border-radius: 5%;background-position:50% 50%;background-repeat: no-repeat;background-size: cover;}Front pane, placed above backWhenever player clicks on card this code willimplement the look of the card..front
{-webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(0deg);background-color: #e12d00;border-radius: 5%;background-image: url(../images/card.svg);background-position:50% 50%;background-repeat: no-repeat;background-size: contain;}Hide back of pane during swapWhen player clicks on the card, and it doesn’tmatches it will regain its original position, this code help in retrieving the original positionnof the card..front, .back {width:100%;height:100%;display: block;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;backface-visibility: hidden;
-webkit-transition: 0.5s;-moz-transition: 0.5s;-ms-transition: 0.5s;-o-transition: 0.5s;transition: 0.5s;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;position: absolute;top: 0;left: 0;}Flip speed goes here-Speed of flipping is determined by the code mentioned below..flipper {width:90%;height:90%;margin:0% auto;-webkit-transition: 0.5s;-moz-transition: 0.5s;-ms-transition: 0.5s;-o-transition: 0.5s;transition: 0.5s;
Desklib Logo
You are reading a preview
Upload your documents to download or

Become a Desklib member to get access