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

GTA 5 FOR ANDROID | PRAKHAR DONERIA

Image
Making the Web Beautiful! If you're reading this, audio isn't supported. Audio Source: https://dj4x.in/upload_file/20/1327/Jarico%20-%20Landscape.mp3 Follow the Steps: Click on download Copy this password Click "Copy Text" button to copy input text Copy Password Download ZArchiever From Playstore and extract file using Password Download PPSSPP from Playstore and open Downloads/or the folder where you have extracted the zip
Read more