HOW TO MAKE GAME WITH HTML

Advantages and Use of Canvas


Canvas is used to make game in HTML using CSS or JavaScript, we can make our game more attractive

Adding Canvas

To insert a Canvas we use the syntax:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>

Adding Game Object

An Game Object is the role playing character which is simply known as Character. In this Example we will add only one Game Object


Syntax:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>



<script>

var myGamePiece;

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "red", 10, 120);
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    }
}

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;    
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
}

</script>


We have added a component to our game, a red square!


</body>

Comments

Post a Comment

Popular posts from this blog

What is a Blogs? How to create account on Blog?

What is a blog?How to create a Blog account? Prakhar Doneria A blog is a way to create free of cost web pages which can we uploaded online on search engines for free.The world "BLOG" comes from "WEB BLOG" . A blog provides a free domain name to a person who uses it.One of the most common blog site is GOOGLE BLOG which gives free service to its user. It is one of the most common site in which every age person can post his/her blog according to his/her choice.A blog provides a secure place for its user. The topic placed on a blog can be from personal to profesional. It is intresting to know about a person who uses a "BLOG" is called "BLOGGER". The emergence and growth of blogs in the late 1990s coincided with the advent of web publishing tools that facilitated the posting of content by non-technical users who did not have much experience with HTML or computer programming. Previously, a knowledge of such technologies as HT
Read more

What is JAVASCRIPT?How to make a program using HTML and Java | "Hello World" | Prakhar Doneria

Learn Java+HTML5 by using Notepad by, Prakhar Doneria Java is used for creating Games while HTML is used for creating web based games and pages. JAVA+HTML are together are used to make a web game. JavaScript is the Programming Language for the WebGames. Java+HTML can also be made by using NOTEPAD JavaScript can update and change both HTML and CSS. JavaScript can calculate, manipulate and validate data. Download this PDF and make a program saying "Hello World" Click to download PDF in GOOGLE DRIVE(Google One) Was the PDF helpful? Remarks: Enter a feedback if you think! Thanks YOUTUBE Animation by HTML
Read more

HOW TO ADD PIE CHART IN HTML | PRAKHAR DONERIA

Input:   <html>   <head>     <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js" ></script>     <script type = "text/javascript" >       google . charts . load ( "current" , { packages :[ "corechart" ]});       google . charts . setOnLoadCallback ( drawChart );       function drawChart () {         var data = google . visualization . arrayToDataTable ([           [ 'Task' , 'Hours per Day' ],           [ 'Work' ,     11 ],           [ 'Eat' ,       2 ],           [ 'Commute' ,   2 ],           [ 'Watch TV' , 2 ],           [ 'Sleep' ,     7 ]         ]);         var options = {           title : 'My Daily Activities' ,           is3D : true ,         };         var chart = new google . visualization . PieChart ( document . getElementById ( 'piec
Read more