Ask a question from expert
Fruit matcher Assignment PDF
15 Pages2364 Words155 Views
Added on 2021-05-27
Fruit matcher Assignment PDF
Added on 2021-05-27
BookmarkShareRelated Documents
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 pane – This 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 back – Whenever 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 swap – When 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;
End of preview
Want to access all the pages? Upload your documents or become a member.