Sign in
Download Opera News App

 

 

How To Create Web Application game Using HTML5 and Javascript

How To Create a Web Application Game using HTLM5 and JAVASCRIPT

Today, I will be creating a simple HTML game with pure JAVASCRIPT.

If you are a beginner to HTML and JAVASCRIPT, you can hook up with W3school. They provide unique tutorials for beginners.

Firstly, download a text editor from google. There are numerous text editor on google like Netbean, Notepad++, sublime etc. But for today's tutorial I will be using Notepad++.


Launch the Notepad++ software, after that create a new file and save the extension name as Rect.html, note the extension name must be .html.

In this tutorial, I will create a moving character with a keyboard press.

Next, we proceed with our code


<!Doctype>

<Html>

<head>

<title>Simple HTML Rectangle game<\title>

<\head>

<body>

<canvas id="game" style="border:2px solid black"><\canvas>

<\body>

<\Html>


Next, we create a new file name rect.js. this is a JAVASCRIPT extension file

Code:

var canvas =document.getElementById("game");

var ctx = canvas.getContext('2d');


canvas.width=300;

canvas.height=300;


//load the player image and the background image from your directory

var playerImage = new image();

playerImage.src="image/player.png";


var bg = new image();

bg.src= "image/tiles.png";


Function drawBg(){

ctx.beginPath();

ctx.drawImage(bg,0,0,300,300);

ctx.closePath();

}


//create a literal variable which will hold the players properties


var player = {x:100, y:100, img:playerImage,

drawPlayer:function(){

ctx.beginPath();

ctx.drawImage(this.img, this.x, this.y);

ctx.close();

}

}


var Frame = setInterval(draw, 100);


window.onkeydown =keypress;


Function keypress(e){

if(e.keyCode==37){

player.x -=5;

}

if(e.KeyCode ==38){

player.y -=5;

}

if(e.keyCode ==39){

player.x+=5;

}

if(e.keyCode ==40){

player.y+=5;

}

}

//we draw the player character


Function draw(){

//we clear the canvas

ctx.clearRect(0,0,canvas.width canvas.height)

drawBg();

player.drawPlayer();

}

Now our player can move around the canvas with a keyboard being pressed...

You have just created you first simple web application game.I hope you like the tutorial

Content created and supplied by: Emose (via Opera News )

HTML5 JAVASCRIPT Netbean Notepad++ Rect.html

COMMENTS

Load app to read more comments