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