Begining HTML5 game part 2

To continue Begining HTML5 game part 1 .

Download images for this tutorial . (Save s to get zip package)

We using simple html5 game framework for develop a card game . Maybe blackjack

First, you need create Struct Folder to easy manager when your project become  complex 

In WebContent-> index.html :
Body part, add code into body of index.html file
<canvas id="gameCanvas" width="800"  height="550">

Body tag : add code into body tag :
           <body onload="initGame()">
Head-> add Script tag : define 3 methods  into <script></script> tag :
function draw()
function initGame()
function update()
 index.html -> draw function : add more code :

In js folder, create util.js file : contain some util functions and call util.js in index.htmla

            window.requestAnimFrame = (function(){

   return  window.requestAnimationFrame       ||

           window.webkitRequestAnimationFrame ||

           window.mozRequestAnimationFrame    ||

           window.oRequestAnimationFrame      ||

           window.msRequestAnimationFrame     ||

           function( callback ){

             window.setTimeout(callback, 1000 / 60);




 In js folder, create card.js file : description about card object : set name , set value, draw for a card
In js folder, create dealer.js file :init for 52 cards

In index.html  : add more code in draw function
        var gameCanvas = document.getElementById("gameCanvas");

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

and include 2 file :  card.js and dealer.js to script tag.

To test, i'll add more code to flip card when i click on card

Add flip function to card.js












Call shuffle() function of util.js in card.js to shuffle cards.

 Create position and draw cards in card.js

for ( var i = 0; i <; i++) {




           // no animation








    this.draw = function(graphic)


        for ( var i = 0; i <; i++) 






 In index.html : Add canvasClicked function to <script> tag of <head> tag to handle event


function canvasClicked(e)


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

    var x;

    var y;

    if (e.pageX || e.pageY) { 

      x = e.pageX;

      y = e.pageY;


    else { 

      x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 

      y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 


    x -= gameCanvas.offsetLeft;

    y -= gameCanvas.offsetTop;

    for ( var i = 0; i <; i++) {

            if(([i].x<x) &&([i].x+90>x) && ([i].y<y) &&([i].y+135>y)  )





and add more code in initGame function :

 // listerner event click
 var gameCanvas = document.getElementById("gameCanvas");
Declare and init value for dealer :
 QuercusScriptEngineFactory factory = new QuercusScriptEngineFactory();
 ScriptEngine engine = factory.getScriptEngine();
  engine.put("abc", "def");
   ScriptContext context = engine.getContext();
  try {
  engine.eval("<h1>hello   <?=$abc?>  </h1>");
 } catch (Exception e) {
  // TODO Auto-generated catch block

And draw cards in draw function

Result : Drew cards and when you click to card, card will be flip.
Source code :

Part 1
Part 3

Share this

Related Posts

Next Post »


May 8, 2019 at 12:01 AM delete

Thanks for sharing the knowledgeable stuff to enlighten us no words for this amazing blog.. learnt so many things I recommend everyone to learn something from this blogger and blog.. I am sharing it with others also
IT Software Training in Chennai | Python Training in Chennai | Dot Net Training in Chennai |Android Training in Chennai

September 14, 2019 at 2:47 AM delete

Excellent blog, I wish to share your post with my folks circle. It’s really helped me a lot, so keep sharing post like this
reactjs online training