Begining HTML5 game part 2

To continue Begining HTML5 game part 1 .

Download images for this tutorial .

https://docs.google.com/open?id=0B3wmdk4k7b_-V3Q1TTVIWW5LaWM (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">
</canvas>

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 :
       
 update();

 requestAnimFrame(draw);
      
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
       

           this.flip=function()

       {

               if(this.status==0)

               { 

                       this.status=1;

               }

               else

               {

                       this.status=0;

               }

       }

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

shuffle(this.cards);
 Create position and draw cards in card.js

       
for ( var i = 0; i < this.cards.length; i++) {

                     

           t=parseInt(i/15)*4;

            

           // no animation

          

           this.cards[i].x=this.x+t;

           this.cards[i].y=this.y;

           

                     

           }

    

    this.draw = function(graphic)

    {

        for ( var i = 0; i < this.cards.length; i++) 

        {

            

            this.cards[i].draw(graphic);

        }

              

    }
 
 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 < dealer.cards.length; i++) {

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

            {

                dealer.cards[i].flip();

            }

    }

}
       
 
and add more code in initGame function :

 // listerner event click
 var gameCanvas = document.getElementById("gameCanvas");
 gameCanvas.addEventListener("click",canvasClicked,true);
 
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
  e.printStackTrace();
 }


And draw cards in draw function
dealer.draw(graphic);


Result : Drew cards and when you click to card, card will be flip.
Source code :  https://docs.google.com/open?id=0Bw97UupVaNHuVDVIZ1ZOQ21hQWc

Part 1
Part 3

Share this

Related Posts

Previous
Next Post »