Begining HTML5 game part 1

OK. Let's start .

Do you know HTML ?
Create file game.html with content :
       
 <!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Insert title here</title>

</head>

<body>



</body>

</html> 

Adding some javascript as framework
       
<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Insert title here</title>

<script type="text/javascript">

    function update()

    {

        // Game UPDATE login

    }

    function draw()

    {

        // game DRAW

       

    }

    function setup()

    {

       

        setInterval(draw, 21);

        setInterval(update, 21);

    }

</script>

</head>

<body onload="setup()">

    <canvas id="gameCanvas" width="800"  height="550">



</canvas>

</body>

</html>


You can see a HTML5 Canvas tag . We will create game , and draw all thing on this canvas
function setup  some variables and create game loop .

Now we will addling some object to game . A image may be good for begin .
I will draw this image on canvas :


you can download and reset name for image is "monday.jpg" in same location of html file aaaa
       
function draw()
{

        // game DRAW

        var gameCanvas = document.getElementById("gameCanvas");

        var graphic =  gameCanvas.getContext('2d');

        var monday = new Image(); 
        // you can download and reset name for image is "monday.jpg"

            monday.src="monday.jpg";

             graphic.drawImage(monday,100, 100);

} 
               
 Open browser and you can see this image show on canvas .

OK.  For now we implement simple event mouse event .
       

          function setup()

    {

        var gameCanvas= document.getElementById("gameCanvas");

        gameCanvas.addEventListener("click", canvasClicked,true);

        //setInterval(draw, 21);

        setInterval(update, 21);

        

    }

    function canvasClicked(e)

    {

        

        var gameCanvas = document.getElementById("gameCanvas");

        var graphic =  gameCanvas.getContext('2d');

        var monday = new Image();

        monday.src="monday.jpg";

         graphic.drawImage(monday,e.clientX, e.clientY);

    }     
 

Function draw is not loop (commented //setInterval function call), to you can see when click to canvas , new Image is drawn.

As you see HTML5 not so hard as you think , it very simple .

Result : when you click mouse, you could see  monday.jpg draw :D
Full source
<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Insert title here</title>

<script type="text/javascript">

    function update()

    {

        // Game UPDATE login

    }

    function draw()

    {

        // game DRAW

        var gameCanvas = document.getElementById("gameCanvas");

        var graphic =  gameCanvas.getContext('2d');

        var monday = new Image();

        monday.src="monday.jpg";

         graphic.drawImage(monday,100, 100);

        

    }

    function setup()

    {

        var gameCanvas= document.getElementById("gameCanvas");

        gameCanvas.addEventListener("click", canvasClicked,true);

        //setInterval(draw, 21);

        setInterval(update, 21);

        

    }

    function canvasClicked(e)

    {
        var gameCanvas = document.getElementById("gameCanvas");

        var graphic =  gameCanvas.getContext('2d');

        var monday = new Image();

        monday.src="monday.jpg";

         graphic.drawImage(monday,e.clientX, e.clientY);

        

    }

</script>

</head><body onload="setup()">
    <canvas id="gameCanvas" width="800"  height="550">



</canvas>

</body>

</html>


part 2 is for next post .
Part 3

Share this

Related Posts

Previous
Next Post »

56 comments

comments
October 1, 2013 at 4:25 AM delete

Your technical information related with java programming is very useful and interesting. Also share updated details about java in your website. Thanks for sharing this article.
Java training institute in chennai

Reply
avatar
May 15, 2015 at 3:00 AM delete

Your particular information hadoop training in chennai related with java composing PC projects is greatly useful and charming. In like manner offer overhauled bits of knowledge about java in your site. Thankful for sharing this article.oracle training in chennai | informatuca training in chennai

Reply
avatar
June 4, 2015 at 2:59 AM delete


Hi, This is Jamuna from Chennai. I have read your blog and I got some knowledgeable information through this blog. Really useful blog. Keep update your blog.

Regards...
Java Course in Chennai

Reply
avatar
August 8, 2015 at 4:25 AM delete

This information is impressive; I am inspired with your post writing style & how continuously you describe this topic. After reading your post, thanks for taking the time to discuss this, I feel happy about it and I love learning more about this topic.
Regards,
Informatica training chennai|Informatica course in Chennai

Reply
avatar
January 10, 2016 at 9:22 PM delete

Good work admin. me too providing Study Materials for Software Testing.your blog provides me a absolute blueprint of how we should provide information

Reply
avatar
January 11, 2016 at 1:28 AM delete

Cloud has beome the common word that is being used by most of the professional these day. The reason for relying on this technology is security. Your content too lecture the same. Thanks for sharing this worth able information in here. Keep blogging article like this.

Hadoop Training Chennai
| Hadoop training institutes in chennai | Manual testing training in Chennai

Reply
avatar
January 25, 2016 at 4:15 AM delete

This information is impressive; I am inspired with your post writing style & how continuously you describe this topic. After reading your post, thanks for taking the time to discuss this, I feel happy about it and I love learning more about this topic.
Regards,
Informatica training in chennai|Informatica training institutes in Chennai|Informatica training center in Chennai|FITA Academy Complaints|SAS Training in Chennai

Reply
avatar
February 18, 2016 at 2:37 AM delete

Truely a very good article on how to handle the future technology. After reading your post,thanks for taking the time to discuss this, I feel happy about and I love learning more about this topic.keep sharing your information regularly for my future reference. This content creates a new hope and inspiration with in me. Thanks for sharing article like this. The way you have stated everything above is quite awesome. Keep blogging like this. Thanks.

Hadoop Training in Chennai

Reply
avatar
March 14, 2016 at 3:15 AM delete

This article explains about the future technology and its development. Writing skills are impressive. Gained knowledge about the new concepta and technologies.
ssis training in chennai

Reply
avatar
March 14, 2016 at 3:48 AM delete

Amazing...Your explanation about HTML5 game part1..Your coding is very useful to understand..Keep on blogging more blog like this..
Linux training in chennai

Reply
avatar
March 14, 2016 at 4:44 AM delete

This is for beginners, of HTML learners. This is very interesting with the area of game development. Thank you for this useful information.
VMWare Workstation Training in Chennai

Reply
avatar
March 14, 2016 at 5:14 AM delete

This HTML 5 game coding is very useful for all.It is important matter for develop the game.It has valuable blog.
Sharepoint developer training in chennai

Reply
avatar
March 21, 2016 at 11:54 PM delete

its really wonderful explanation for HTML gaming part. really very helpful and is simple concept really understood. thanks for sharing.
Data warehousing Training in Chennai

Reply
avatar
March 22, 2016 at 12:02 AM delete

I like this concept it is really interesting and useful for java developers thanks for sharing this information,it is good and nice too.


sharepoint developer training in chennai

Reply
avatar
March 22, 2016 at 12:26 AM delete

Very good article on how to handle the future technology. After reading your post,thanks for taking the time to discuss this, I feel happy about and I love learning more about this topic.keep sharing your information regularly for my future reference. This content creates a new hope and inspiration with in me. Thanks for sharing article like this. The way you have stated everything above is quite awesome. Keep blogging like this. Thanks.
weblogic training in chennai

Reply
avatar
March 23, 2016 at 5:34 AM delete

its really good information to know about java module for using exception handling. thanks for your explanation. keep sharing.
Hadoop Training in Chennai

Reply
avatar
March 25, 2016 at 5:05 AM delete

your information is really nice it is very much attractive too thanks fr sharing your valuable tips .

sas training in chennai

Reply
avatar
April 19, 2016 at 11:50 PM delete

Superb article ,I really appreciated with it, This is fine to read and valuable pro potential, I really bookmark it, pro broaden read. Appreciation pro sharing. I like it Official Blog

Reply
avatar
April 21, 2016 at 7:11 AM delete

Really a Good POst me too providing Software Testing Material check it out

Reply
avatar
June 22, 2016 at 12:13 AM delete

nice posts..
SAS Institute introduced the SAS Certified Professional Program,training proper understanding of how the SAS software works. Among the five certification programs that SAS Institute has come up with, SAS training can be considered as the entry point into the big data and the data analytics industry.
SAS online training in hyderabad

Reply
avatar
September 9, 2016 at 12:10 AM delete

Very informative ..i suggest this blog to my friends..Thank you for sharing Best Selenium Training in Chennai

Reply
avatar
September 23, 2016 at 3:25 AM delete

Java Training Institutes Java Training Institutes
Java Spring Hibernate Training Institutes in Chennai J2EE Training Institutes in Chennai J2EE Training Institutes in Chennai Core Java Training Institutes in Chennai Core Java Training Institutes in Chennai

Hibernate Online Training Hibernate Online Training Hibernate Training in Chennai Hibernate Training in Chennai Java Online Training Java Online Training Hibernate Training Institutes in ChennaiHibernate Training Institutes in Chennai

Reply
avatar
September 23, 2016 at 3:27 AM delete

Wow. This really made my day. Thanks a lot!

HTML5 Training in ChennaiHTML5 Training in Chennai JavaScript Training in Chennai JavaScript Training in Chennai

JavaScript Training Courses JavaScript Training Courses | Javascript Online Training Angular 2 Training in Chennai Angular 2 Training in Chennai

Reply
avatar
September 23, 2016 at 3:28 AM delete

HTML5 Training in Chennai HTML5 Training in Chennai JQuery Training in Chennai JQuery Training in Chennai JavaScript Training in Chennai JavaScript Training in Chennai Full Stack Developer Training in Chennai Full Stack Developer Training in Chennai


AngularJS Training in Chennai AngularJS Training in Chennai Node.js Training in CHennai Angular 2 Training in Chennai Angular 2 Training in Chennai Node.js Training in CHennai Node.js Training in chennai MEAN Developer Training in Chennai

Reply
avatar
October 11, 2016 at 4:20 AM delete

Professional Expert level Android Training in chennai, Android App Development
Android Training | Android App Development | Training in chennai

Reply
avatar
February 10, 2017 at 12:45 AM delete

great information about java. keep sharing this type of useful article. Software Testing Training in Chennai

Reply
avatar
February 21, 2017 at 4:48 AM delete

Hi, Really your post was very informative. Today's internet era learn Hadoop Online Training will helps you to reach your goal.Selenium Training

Reply
avatar
February 22, 2017 at 12:33 AM delete

I just read and search now some article at the time I was seen to our site it's magnificent post.I really like that your useful content.Selenium Training in Chennai | Best Selenium Training Institute in Chennai

Reply
avatar
February 24, 2017 at 4:26 AM delete

You have done really great job. Your blog is very unique and informative. Thanks. Devops Online Training | Data Science Online Training

Reply
avatar
February 25, 2017 at 1:48 AM delete

This blog post is a great information. I like that our share this topic.We update our site has a lot of uses.Many useful interesting blogs found off here. :)
Selenium Course in Velachery | Best Selenium Training Institutes in Chennai

Reply
avatar
March 3, 2017 at 12:06 AM delete

I have read your blog its very Interesting. Thanks for sharing. ERP Providers in Chennai | ERP in Chennai. We provide best quality cost effective ERP software applications and end to end enterprise solutions to all the industry verticals with the affordable cost.

Reply
avatar
March 15, 2017 at 11:51 PM delete

Thank you for this valuable information. I have got some important suggestions from it. I'm working in Brave Technologies Private Limited. We provides lowest price of ERP Software for our clients. Contact us on info@bravetechnologies.in. ERP in Chennai

Reply
avatar
March 24, 2017 at 4:02 AM delete

Nice blog. Thank you for sharing. The information you shared is very effective for learners I have got some important suggestions from it. erp in chennai.

Reply
avatar
April 12, 2017 at 4:03 AM delete

Hi admin your blog was user friendly.easy to learn all that things. Now java was most wanted course.so you get more course details & learn in best institute...
Android Training in Chennai
Dot Net Training in Chennai
Selenium Training in Chennai


Reply
avatar
May 29, 2017 at 5:58 AM delete

This HTML 5 game coding is very useful for all. Thanks for the sharing.
SAP PS training in Gurgaon | SAP HR Training in Gurgaon

Reply
avatar
June 20, 2017 at 1:01 AM delete

This HTML 5 game coding is very useful for all. Thanks for the sharing.
Best SAP Training Course in gurgaon

Reply
avatar