Neocodex Design - Blog - Games
HTML/GAMES - 1
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, first of all, I want to show you a complete and working game so that you can see how an HTML game works.
Then we'll take it one step at a time to learn the game development process.
I'm going to say a few things about games here, developing games is a complicated mission and usually involves hundreds of people in the project, including designers, scriptwriters, directors, programmers, analysts, all working together to develop the software.
What we are going to understand here is not about creating a game company, nor even about learning to program, here we are going to give some initial concepts about HTML game development.
This advice is for you not to get too excited and think that you will develop a FIFA tomorrow, it's not quite like that, let's go.
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>
<!--
Ball Game in Javascript
Parte 0 - Show this complete game for you
For tutorial and lessons only
-->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8"/>
<meta name="author" content="Emilio Dami Silva"/>
<meta name="description" content="Articles - HTML/CANVAS/JAVASCRIPT/CSS"/>
<meta name="keywords" content="Courses, HTML, sites, web, websites, e-commerce, development"/>
<title>Neocodex Design - Blog - HTML/CANVAS GAME BALL</title>
<style>
canvas {
border: 1px solid #d3d3d3;
border-color: yellow;
background: #eee;
display: block;
width: 480px;
height: 320px;
border-style: solid;
padding: 0;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="480" height="320"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width / 2;
var y = canvas.height - 30;
var dx = 2;
var dy = -2;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width - paddleWidth) / 2;
var rightPressed = false;
var leftPressed = false;
var brickRowCount = 5;
var brickColumnCount = 3;
var brickWidth = 75;
var brickHeight = 20;
var brickPadding = 10;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;
var score = 0;
var bricks = [];
for (var c = 0; c < brickColumnCount; c++) {
bricks[c] = [];
for (var r = 0; r < brickRowCount; r++) {
bricks[c][r] = { x: 0, y: 0, status: 1 };
}
}
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
document.addEventListener("mousemove", mouseMoveHandler, false);
function keyDownHandler(e) {
if (e.key == "Right" || e.key == "ArrowRight") {
rightPressed = true;
}
else if (e.key == "Left" || e.key == "ArrowLeft") {
leftPressed = true;
}
}
function keyUpHandler(e) {
if (e.key == "Right" || e.key == "ArrowRight") {
rightPressed = false;
}
else if (e.key == "Left" || e.key == "ArrowLeft") {
leftPressed = false;
}
}
function mouseMoveHandler(e) {
var relativeX = e.clientX - canvas.offsetLeft;
if (relativeX > 0 && relativeX < canvas.width) {
paddleX = relativeX - paddleWidth / 2;
}
}
function collisionDetection() {
for (var c = 0; c < brickColumnCount; c++) {
for (var r = 0; r < brickRowCount; r++) {
var b = bricks[c][r];
if (b.status == 1) {
if (x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight) {
dy = -dy;
b.status = 0;
score++;
if (score == brickRowCount * brickColumnCount) {
alert("YOU WIN, CONGRATS!");
document.location.reload();
clearInterval(interval); // Needed for Chrome to end game
}
}
}
}
}
}
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function drawPaddle() {
ctx.beginPath();
ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function drawBricks() {
for (var c = 0; c < brickColumnCount; c++) {
for (var r = 0; r < brickRowCount; r++) {
if (bricks[c][r].status == 1) {
var brickX = (r * (brickWidth + brickPadding)) + brickOffsetLeft;
var brickY = (c * (brickHeight + brickPadding)) + brickOffsetTop;
bricks[c][r].x = brickX;
bricks[c][r].y = brickY;
ctx.beginPath();
ctx.rect(brickX, brickY, brickWidth, brickHeight);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
}
}
}
function drawScore() {
ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Score: " + score, 8, 20);
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBricks();
drawBall();
drawPaddle();
drawScore();
collisionDetection();
if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
dx = -dx;
}
if (y + dy < ballRadius) {
dy = -dy;
}
else if (y + dy > canvas.height - ballRadius) {
if (x > paddleX && x < paddleX + paddleWidth) {
dy = -dy;
}
else {
alert("GAME OVER");
document.location.reload();
clearInterval(interval); // Needed for Chrome to end game
}
}
if (rightPressed && paddleX < canvas.width - paddleWidth) {
paddleX += 7;
}
else if (leftPressed && paddleX > 0) {
paddleX -= 7;
}
x += dx;
y += dy;
}
var interval = setInterval(draw, 10);
</script>
</body>
</html>
- Save your work in the workbook you created for this course.
You have completed your first HTML/GAMES lesson, congratulations!
Now click on the link to go to the next article:
HTML/GAMES - Article 2 - English
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!