{"id":8415,"date":"2014-07-08T05:04:30","date_gmt":"2014-07-07T19:04:30","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=8415"},"modified":"2014-07-08T05:04:30","modified_gmt":"2014-07-07T19:04:30","slug":"htmljavascript-canvas-tic-tac-toe-game-drag-and-drop-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-canvas-tic-tac-toe-game-drag-and-drop-tutorial\/","title":{"rendered":"HTML\/Javascript Canvas Tic Tac Toe Game Drag and Drop Tutorial"},"content":{"rendered":"
\"HTML\/Javascript<\/a>

HTML\/Javascript Canvas Tic Tac Toe Game Drag and Drop Tutorial<\/p><\/div>\n

The Canvas HTML element tag can be used as the container to draw graphics on the fly usually via the use of Javascript functions for rendering and event management.<\/p>\n

In today’s tutorial we show some image Drag and Drop functionality that you can use with the Canvas HTML5 element where we create a Tic Tac Toe game webpage. We thank w3schools for the great advice at this link<\/a>.<\/p>\n

The Drag and Drop does not work well on tablets, but for own Tic Tac Toe game today we allow either a drag and drop approach, or a touch\/click approach.<\/p>\n

You may want to read more at HTML Canvas Reference<\/a> as a generic reference, or here, at the tutorial javascript – How do I add a simple onClick event handler to a canvas element? – Stack Overflow<\/a>.<\/p>\n

As you can imagine, this HTML canvas element, new to HTML5, can be very useful for some practical client-side web functionality.<\/p>\n

Link to some downloadable HTML programming code … rename to tictactoe_chalkboard.html<\/a>\n<\/p>\n

You’ll notice heavy use of the Javascript Math.random()<\/a> function.<\/p>\n

We hope you enjoy this tutorial as a live run<\/a>.<\/p>\n

Should you find Tac Tac Toe (or even Noughts and Crosses) addictive you should see this<\/a> … amazing!<\/p>\n

Yes … you’ve reached the end … go first<\/a> in each game and see if you can beat the computer!<\/p>\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n