Neocodex Design - Blog - HTML/GAMES
HTML/GAMES - 2
Hi
How are you?
I'm Emilio Dami Silva and this is my first article about HTML/GAMES.
These articles are basic and are for beginners, those who don't have any knowledge about
developing games with HTML and Javascript.
In this series of articles we are going to develop something very simple, while studying
the theory behind games displayed in HTML and Javascript.
You need to have some knowledge of HTML and that's why it's good that you read this set
of HTML articles on my page, at least for you to have a basic knowledge.
Follow our basic HTML articles here:
12 lessons to get started in HTML - Article 1
Also, you need to have some knowledge of Javascript, in this case you need read this
Javascript articles on my page, at least for you to have a basic knowledge.
Follow our basic Javascript articles here:
24 lessons to get started in Javascript - Article 1
We are not going to deal with HTML / Javascript here in these articles, but only
HTML/CANVA/GAMES.
- • A Computer with Windows;
- • a text editor; and
- • a browser, I suggest Google Chrome Browser
Let's start our learning!
You should already know how to use a text editor, if you don't, see article number 1 in our series of articles by clicking here:
12 lessons to get started in HTML - Article 1
Open your editor and copy the code below into it, save it in your preferred folder, open your BROWSER and run the Game Script and see the result.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<meta name="author" content="Emilio Dami Silva"/>
<meta name="description" content="Article 2 - HTML/CANVA/JS"/>
<meta name="keywords" content="Courses, HTML, site, web, website, development"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Neocodex Design Blog - HTML/CANVA/JS</title>
<style>
canvas {
border: 1px solid gray;
background-color: black;
margin: auto;
}
</style>
</head>
<body>
<div align="center">
<h1>
My Official Page
</h1>
<p>
Our first page Game/Canva/JS/HTML.
</p>
<br />
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<br />
<button onclick="clearRect()">
Clean the Screen
</button>
<button onclick="drawBrick()">
Draw the Rect
</button>
<button onclick="drawBall()">
Draw the Ball
</button>
</div>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "black";
ctx.fillRect(0, 0, 400, 400);
drawBall();
function drawBrick() {
ctx.beginPath();
ctx.rect(162.5, 190, 75, 20);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function drawBall() {
ctx.beginPath();
ctx.arc(200, 200, 10, 0, Math.PI * 2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function clearRect() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
</script>
</body>
</html>
- Save your work in the workbook you created for this course.
Explaining:
1-Canvas:
Canvas opens an area within the browser for you to work with graphics and drawings.
When Canvas is created, it opens a range of commands for you to run inside it.
To draw we need to learn to use the Cartesian Plane, invented by French philosopher and mathematician René Descartes in the 17th century.
The Cartesian Plane consists of two axes, x and y, being perpendicular to each other, that is, the axes cross each other forming a right angle (angle that measures 90°). The horizontal x-axis is called the abscissa axis, while the vertical y-axis is called the ordinate axis.
We can notice four large distinct areas, if we focus on the width, we can see the y axis cutting the graph in half, the left part is negative and will not interest us for now.
If we focus on the height of the graph, we will also see the x-axis cutting the graph in half, the top part is the positive part and the bottom part is the negative part and that won't interest us for now.
A dot on the screen of our device is formed by the union of these two axes, x and y, an ordered pair , so any point on the screen will be P(x,y), where xa is x-coordinated, we will call it width and y-coordinated which we will call height.
Now let's try to mark what would be the exact point that is in the middle of our example.
Note the code:
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;">
<canvas>
Our Canvas has a width and height of 400. The center would be an exact point of P(200,200), understand?
Then we will draw the two elements of our game, the bricks and the ball in the center of the screen. In time, do you need to be good at math? No, but you have to like it and if it's bad, you won't be a good programmer.
To draw the ball, we have a method in Canvas which is the ARC, the arc draws a circle.
The arc method has the following parameters:
arc(x, y, radius, start, end, counterclockwise)
(x,y) - is the point of origin of the circle in which the arc forms part
radius - radius of such a circle
start - Arc start angle
end - End angle of the arc.
veja a figura:
Can you guess what the coordinates of the center of the circle are? In our example, we are going to use radius 10.
ctx.arc(200, 200, 10, 0, Math.PI * 2);
And now we are going to draw the bricks that will be part of our game, considering that our brick is 75 width by 20 heigth.
What is the starting point for our brick to be in the center of the screen?
Let's answer then, our canvas is 400 x 400 and the center of it is 200 x 200, so let's calculate the width first. If the width of the brick is 75, we need to calculate the half that is 75 / 2 = 37.5.
Now so to put the brick in the center, we're going to decrease from 200 to 37.5 which will be 162.5. This is the x-axis point.
Now let's calculate the y-axis point, the height of the brick is 20 points, so half of that is 10 points, which decreasing from the 200 central points we have 190 as the y-axis coordinate.
Now we have our central point: P(162.5, 190) check your code and see if that's right!
To draw the brick, we have an element on the canvas which is the rectangle, the command format is
rect(x, y, width, height);
Substituting the values in the command will then look like this:
ctx.rect(162.5, 190, 75, 20);
And finally we have the button to clear the screen
Cleaning the workspace it is nothing more than an area that must be painted with some color, when the background color is equal to the color of the whole, the impression you get is that the area has been cleaned.
You have completed your first HTML/GAMES lesson, congratulations!
That's all for now.
I'm Emílio Dami and we'll be back soon.
Watch our videos on our you-tube channel, subscribe there to continue to receive all the news automatically and leave your comment, oh and share!
You can send an email to info@neocodexdesign.com
HTML/GAMES - Article 1 - English
Lets talk about your project?
Got a Project? Let’s Get to Work!
Contact us or use the form below and we will contact with you immediately
Feel free to contact us via e-mail or by phone. Also, you can fill out the form and send us
a
message.
We will contact you back immediately.
Thank you very much for visiting our website!