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:
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.
3.145.87.161