In this chapter, we will be building a game called Rat-man, which is actually a modified version of the famous game Pac-Man. We will use canvas, JavaScript, CSS, and HTML to build our game.
Let's start with introducing our game's characters:
- Our game will have one rat. The player will act as the rat.
- There will be four cats who will try to catch the rat and a lot of cheese for the rat to eat.
- The main goal of the game is to eat all the cheese without being caught by the monster cats.
Sounds fun, right? Let's get right to it...
To start building our game, we need to prepare our canvas. Our HTML file should look similar to the following:
<html>
<head>
</head>
<body>
<canvas id="main_canvas"></canvas>
</body>
</html>Our game user interface will be in the <body></body> tags. We will add JavaScript to our canvas soon.
In the css folder, create a CSS file named styles.css, which will contain the following code for our HTML body, canvas, and a play button:
body {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #ffffff;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
}
canvas {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
border: 10px solid rgba(63, 72, 204, 0.7);
border-radius: 20px;
box-shadow: 0 0 500px 100px #ffffff;
}
button {
width: 100%;
height: 100%;
background-color: #000000;
color: #FFFFFF;
font-size: 60px;
opacity: 0;
z-index: 1000;
transition: 5s ease;
visibility: hidden;
}Create another CSS file named reset.css in the same folder and add the following code to the CSS file. This file will design the user interface for the initial screen of the game:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 0;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}Save both the files and include them in your HTML file with the following code in the <head></head> tags:
<link href="css/styles.css" rel="stylesheet"/> <link href="css/reset.css" rel="stylesheet"/>
If you open an HTML file of a browser now, you will see the following image:
We are going to draw our game interface in the preceding rectangle.