Creating a Sushi Shop Game with Device Scaling - HTML5 Game Development - page 306

4. We then deine graphics for the phone buton:
#phone {
background: #D8D8D8 url(../images/refill-phone.png)
center center no-repeat;
background-size: contain;
}
5. We also deine the trash buton that discards our sushi:
#delete-sushi-btn {
display: block;
width: 100px;
height: 30px;
background: url(../images/trash.png) center center
no-repeat;
background-size: contain;
}
6. Next, we define the ingredient's graphics:
.ingredient {
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
.ingredient[data-type='rice'] {
background-image: url(../images/rice.png);
}
.ingredient[data-type='egg'] {
background-image: url(../images/egg.png);
}
.ingredient[data-type='octopus'] {
background-image: url(../images/octopus.png);
}
.ingredient[data-type='salmon'] {
background-image: url(../images/salmon.png);
}
.ingredient[data-type='salmon-roe'] {
background-image: url(../images/salmon-roe.png);
}
.ingredient[data-type='seaweed'] {
background-image: url(../images/seaweed.png);
}