Making a video game is easier than you think, you will see that with knowing the basics of a language and good knowledge of maths and physics you will be able to create cool games.
in this tutorial, I will show you how to make a simple pong game using HTML, CSS, and JavaScript.
I- make the game canvas
to make this game we will need a cool object called " canvas " , a canvas allows you to draw some shape, text, and images using javascript and manipulate these objects using animation and event listeners.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1>Pong Game</h1>
<div class="container">
<canvas id="pong" width="600" height="400"></canvas>
</div>
<script src="app.js" type="text/javascript"></script>
</body>
</html>
II-Add some style to the game
let's add some CSS style to our game. *{
margin: 0;
padding: 0;
outline: 0;
}
body{
background-color: #f0db4f;
}
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
/*border: 2px solid #212121;*/
padding: 15px;
background-color: #fafafa;
border-radius: 8px;
box-shadow: 0 8px 8px rgba(0,0,0,.1);
}
h1{
text-align: center;
font-size: 3rem;
text-transform: uppercase;
margin-top: 50px;
}
III- the game code
for this tutorial, it's important to have solid knowledge in JavaScript especially in oop because we will need to use objects to simplify the program.
the full source code is here:
the full source code is here:
class Vec
{
constructor(x = 0, y = 0){
this.x = x;
this.y = y;
}
}
class Rect
{
constructor(w,h){
this.pos = new Vec;
this.size = new Vec(w,h);
}
}
class Ball extends Rect
{
constructor(){
super(20,20);
this.Vel = new Vec;
}
}
class Player extends Rect
{
constructor(){
super(20,100);
this.score = 0;
}
}
const Canvas = document.getElementById('pong');
const context = Canvas.getContext("2d");
const ball = new Ball();
console.log(ball);
var velocity =200;
ball.Vel.x = velocity;
ball.Vel.y = velocity;
const ennemy = new Player();
ennemy.pos.x = Canvas.width - 40;
ennemy.pos.y = Canvas.height/2 - 50;
const player = new Player();
player.pos.x = 20;
player.pos.y = Canvas.height/2 - 50;
let LastTime;
function CallBack(millis){
if(LastTime){
update((millis - LastTime) /1000);
}
LastTime = millis;
requestAnimationFrame(CallBack);
}
function update(dt){
ball.pos.x += ball.Vel.x * dt;
ball.pos.y += ball.Vel.y * dt;
// we will start by adding the background
context.fillStyle = "#000";
context.fillRect(0,0,Canvas.width,Canvas.height);
// let's add the center line
context.fillStyle = "#fff";
context.fillRect((Canvas.width)/2,0,4,Canvas.height);
// let's add some text
context.fillStyle = "#fff";
context.font = "80px Arial";
context.fillText(player.score,Canvas.width/4 - 30,80);
context.fillStyle = "#fff";
context.font = "80px Arial";
context.fillText(ennemy.score,Canvas.width*0.75 - 30,80);
// we will make a ball
context.fillStyle = "#fff";
context.fillRect(ball.pos.x,ball.pos.y,ball.size.x,ball.size.y);
// we will make the player
context.fillStyle = "#fff";
context.fillRect(player.pos.x,player.pos.y,player.size.x,player.size.y);
// we will make the ennemi
context.fillStyle = "#fff";
context.fillRect(ennemy.pos.x,ennemy.pos.y,ennemy.size.x,ennemy.size.y);
if((ball.pos.y + ball.size.y) > Canvas.height || ball.pos.y < 0){
ball.Vel.y = - ball.Vel.y;
}
if((ball.pos.x + ball.size.x) > Canvas.width || ball.pos.x < 0){
ball.Vel.x = - ball.Vel.x;
}
// set enemy score
if(ball.pos.x <= 0){
ennemy.score++;
}
//set player score
if(ball.pos.x + 20 >= Canvas.width){
player.score++;
}
if(ball.pos.x >= Canvas.width/2){
if(ball.pos.y <= ennemy.pos.y ){
ennemy.pos.y -=2;
}else if(ball.pos.y >= ennemy.pos.y+100){
ennemy.pos.y +=2;
}
}
// now we will make the collistion between player and ball
if((ball.pos.x + 20 ) >= (ennemy.pos.x) && (ball.pos.y >= ennemy.pos.y && ball.pos.y <= ennemy.pos.y + 100)){
ball.Vel.x = - ball.Vel.x;
}
if((ball.pos.x ) <= (player.pos.x + 20) && (ball.pos.y >= player.pos.y && ball.pos.y <= player.pos.y + 100) ){
ball.Vel.x = - ball.Vel.x;
}
Canvas.addEventListener("mousemove", event => {
player.pos.y = event.offsetY;
});
}
CallBack();
i hope that you liked this tutorial.
