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
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 :
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
