To make a canvas game, we will need two files: An HTML page to display it, and the JavaScript code of the game. Let's start making a file called "index.html", we open it for edit (Left click » Open with » Notepad++, or whichever editor you use) and copy the next code within:
The ID is the unique name of our element in the page, and is needed to make reference to it from the code; we can change it to whichever we want, but we need to do so also on our code (That we will see in a moment).
Finally, we add a grey background to identify where is our canvas. If there is a problem with your game code, the grey background will be the only thing to display, and this will work as an alert. You may change it or erase it later, but for now, we shall leave it in there.
Now, we will make the code for our game. Let's begin with the most simple: Drawing a rectangle inside the canvas. For this, we will make a second file named "game.js", and copy the next code within:
It's important to tell the code to start until the page loads, otherwise, the code could not find our canvas, and that would make errors that wouldn't allow us to play correctly our game.
Later, we start our "init" function. On the first line, we get our canvas, searching it by the ID "canvas" (If you changed the ID to your canvas, this is where you must put that same name). Below, we get the 2D context of our canvas. This is needed as it is our tool to paint on our canvas; we can imagine it as our brush. Finally, we call the function "paint", sending the context to it so we can paint on it.
The last part is our "paint" function. Here we tell the context to use the hexadecimal fill colour '#0f0' (green), and below, we fill a rectangle from coordinates x,y 50, 50, with 100 width and 60 height.
We save the file. If we have done it well, when we open index.html with double click on it, a web page will open, displaying the green rectangle that we made.
Go fun changing the colours and drawing more rectangles, until you get familiar with the canvas. You can use strokeStyle and strokeRect to draw the outline instead of filling them.
If only a grey square displays on the screen, you probably have an error in your code. To find the origin of the problem, you must debug your code.
Depending on the web browser you use, you can debug your code as shown next:
Chrome:
Press F12 or Ctrl + Shift + I and select the "console" tab.
Firefox:
Press Ctrl + Shift + K and select the "Web console" tab. You should disable all but JS notifications to easier debug your game code.
Internet Explorer:
Press F12 and select the "console" tab.
Opera:
Press Ctrl + Shift + I and select the "console" tab.
Safari:
Press Ctrl + Shift + I and select the "console" tab. You must enable before "Show Develop menu in menu bar" in the "Advanced tab" on "Preferences" to use this option.
With this information, you will be able to easily solve any problems you might encounter while you are developing your games.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<!--[if lte IE 8]><meta http-equiv="X-UA-Compatible" content="chrome=1" /><![endif]-->
<title>My First Canvas Game</title>
<script type="application/javascript" src="game.js"></script>
</head>
<body>
<h1>My First Canvas Game</h1>
<p><canvas id="canvas" width="300" height="150" style="background:#999">
Canvas not supported by your browser.
</canvas></p>
</body>
</html><script type="application/javascript" src="game.js"></script><canvas id="canvas" width="300" height="150" style="background:#999">
Canvas not supported by your browser.
</canvas>The ID is the unique name of our element in the page, and is needed to make reference to it from the code; we can change it to whichever we want, but we need to do so also on our code (That we will see in a moment).
Finally, we add a grey background to identify where is our canvas. If there is a problem with your game code, the grey background will be the only thing to display, and this will work as an alert. You may change it or erase it later, but for now, we shall leave it in there.
Now, we will make the code for our game. Let's begin with the most simple: Drawing a rectangle inside the canvas. For this, we will make a second file named "game.js", and copy the next code within:
window.addEventListener('load',init,false);
var canvas=null,ctx=null;
function init(){
canvas=document.getElementById('canvas');
ctx=canvas.getContext('2d');
paint(ctx);
}
function paint(ctx){
ctx.fillStyle='#0f0';
ctx.fillRect(50,50,100,60);
}It's important to tell the code to start until the page loads, otherwise, the code could not find our canvas, and that would make errors that wouldn't allow us to play correctly our game.
Later, we start our "init" function. On the first line, we get our canvas, searching it by the ID "canvas" (If you changed the ID to your canvas, this is where you must put that same name). Below, we get the 2D context of our canvas. This is needed as it is our tool to paint on our canvas; we can imagine it as our brush. Finally, we call the function "paint", sending the context to it so we can paint on it.
The last part is our "paint" function. Here we tell the context to use the hexadecimal fill colour '#0f0' (green), and below, we fill a rectangle from coordinates x,y 50, 50, with 100 width and 60 height.
We save the file. If we have done it well, when we open index.html with double click on it, a web page will open, displaying the green rectangle that we made.
Go fun changing the colours and drawing more rectangles, until you get familiar with the canvas. You can use strokeStyle and strokeRect to draw the outline instead of filling them.
Final code:
window.addEventListener('load',init,false);
var canvas=null,ctx=null;
function init(){
canvas=document.getElementById('canvas');
ctx=canvas.getContext('2d');
paint(ctx);
}
function paint(ctx){
ctx.fillStyle='#0f0';
ctx.fillRect(50,50,100,60);
}Debug
If only a grey square displays on the screen, you probably have an error in your code. To find the origin of the problem, you must debug your code.
Depending on the web browser you use, you can debug your code as shown next:
Chrome:
Press F12 or Ctrl + Shift + I and select the "console" tab.
Firefox:
Press Ctrl + Shift + K and select the "Web console" tab. You should disable all but JS notifications to easier debug your game code.
Internet Explorer:
Press F12 and select the "console" tab.
Opera:
Press Ctrl + Shift + I and select the "console" tab.
Safari:
Press Ctrl + Shift + I and select the "console" tab. You must enable before "Show Develop menu in menu bar" in the "Advanced tab" on "Preferences" to use this option.
With this information, you will be able to easily solve any problems you might encounter while you are developing your games.
No comments:
Post a Comment