{"id":11956,"date":"2015-01-28T05:08:46","date_gmt":"2015-01-27T18:08:46","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=11956"},"modified":"2015-05-29T08:28:26","modified_gmt":"2015-05-28T22:28:26","slug":"android-studio-tic-tac-toe-game-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/android-studio-tic-tac-toe-game-tutorial\/","title":{"rendered":"Android Studio Tic Tac Toe Game Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Android\/TicTacToe\/\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Android Studio Tic Tac Toe Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Android\/TicTacToe\/AndroidStudio_TicTacToe-25of.jpg\" title=\"Android Studio Tic Tac Toe Game Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Android Studio Tic Tac Toe Game Tutorial<\/p><\/div>\n<p>Wonder if you were around when we created Tic Tac Toe (or more like Noughts and Crosses, in Australia) using the HTML5 Canvas element and drag and drop methods (if you liked, or just plain box clicking, otherwise, which will be okay for mobile usage) &#8230;  <a target=_blank title='HTML\/Javascript Canvas Tic Tac Toe Game Drag and Drop Tutorial' href='#hjctttgdad'>HTML\/Javascript Canvas Tic Tac Toe Game Drag and Drop Tutorial<\/a> as shown below?  Well, today, we turn that into an Android mobile application using Android Studio.<\/p>\n<p><a target=_blank title='Android Studio download' href='http:\/\/developer.android.com\/sdk\/'>Android Studio<\/a> is an alternative <a target=_blank title='ide info from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Integrated_development_environment'>IDE<\/a> to <a target=_blank title='eclipse download' href='https:\/\/eclipse.org\/downloads\/'>Eclipse<\/a> (and there are others too) to use the Android SDK and Java to develop mobile apps for an Android mobile device and in our aforesaid mentioned &#8220;start game&#8221;, &#8220;middle game&#8221; and &#8220;end game&#8221; view of mobile development we are just showing you the &#8220;middle game&#8221; today, but if you were to follow through &#8230; <a target=_blank title='fore information from Wikipedia ... thanks ... was going to spell it wrongly' href='http:\/\/en.wikipedia.org\/wiki\/Fore_%28golf%29'>fore<\/a>!!!!!!!! &#8230; and not shank &#8230; and not hook (ie. narrrrrrr &#8230; chortle, chortle) &#8230; then we may end up at <a target=_blank title='Google Play' href='https:\/\/play.google.com'>Google Play<\/a> with a mobile app &#8230; by the way, we talk about the &#8220;end game&#8221; at <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=2377'>Eclipse Android App Google Play Ready Primer Tutorial<\/a> (Android Studio has all this functionality and capability too).<\/p>\n<p>So what are some of the concepts in the Android Studio project, for which huge help came from this great <a target=_blank title='Embed WebView in Fragment' href='http:\/\/android-er.blogspot.com.au\/2013\/04\/embed-webview-in-fragment.html'>link<\/a> &#8230; thanks &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Android fragments' href='http:\/\/www.i-programmer.info\/programming\/android\/6882-introducing-android-fragments.html'>Fragments<\/a> &#8211; components of the Android UI &#8230; and setting of startup fragment of interest &#8230; fragments go some way to addressing that common issue for mobile developers that all the UI elements of a mobile application fit and would ideally be displayed with a tablet but it would be best to only conditionally display some when it comes to using a smaller format mobile device such as an Android mobile phone device<\/li>\n<li>Layout in activity_main.xml &#8230; similar to Eclipse<\/li>\n<li>WebView &#8230; similar to Eclipse &#8230; allows an Internet web component in your Android mobile app<\/li>\n<li>Use of <code> myWebView.getSettings().setJavaScriptEnabled(true); <\/code> to allow Javascript functionality for the WebView<\/li>\n<li>AndroidManifest.xml &#8230; INTERNET permission &#8230; similar to Eclipse<\/li>\n<li>Tools-&gt;Android-&gt;AVD Manager &#8230; emulator organization and emulator deployment help &#8230; remains the case that it is best to start the emulator all the way to the home page at the simulated device (right swipe unlocking any locks you get) &#8230; then run and attach your mobile app to this pre-established connection<\/li>\n<\/ul>\n<p>Source code wise, of interest, is &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Android\/TicTacToe\/MainActivity.java_GETME\" title='MainActivity.java'>MainActivity.java<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Android\/TicTacToe\/activity_main.xml_GETME\" title='activity_main.xml'>activity_main.xml<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Android\/TicTacToe\/layout_webfragment.xml_GETME\" title='layout_webfragment.xml'>layout_webfragment.xml<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Android\/TicTacToe\/AndroidManifest.xml_GETME\" title='AndroidManifest.xml'>AndroidManifest.xml<\/a><\/li>\n<\/ul>\n<p>So that&#8217;s a bit about the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Android\/TicTacToe\/\" title='click picture'>mobile world<\/a>, and so concerning the innards of that WebView &#8230;<\/p>\n<p>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<p>In today&#8217;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 <a target=_blank href='http:\/\/www.w3schools.com\/html\/html5_draganddrop.asp' title='Drag and drop advice at w3schools'>link<\/a>.<\/p>\n<p>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<p>You may want to read more at <a target=_blank title='HTML Canvas Reference' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>HTML Canvas Reference<\/a> as a generic reference, or here, at the tutorial <a target=_blank title='javascript - How do I add a simple onClick event handler to a canvas element? - Stack Overflow' href='http:\/\/stackoverflow.com\/questions\/9880279\/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element'>javascript &#8211; How do I add a simple onClick event handler to a canvas element? &#8211; Stack Overflow<\/a>.<\/p>\n<p>As you can imagine, this HTML canvas element, new to HTML5, can be very useful for some practical client-side web functionality.<\/p>\n<p>Link to some downloadable HTML programming code &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/tictactoe_chalkboard.html_GETME' title='tictactoe_chalkboard.html'>tictactoe_chalkboard.html<\/a>\n<\/p>\n<p>You&#8217;ll notice heavy use of the Javascript <a target=_blank title='Javascript Math.random() information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_random.asp'>Math.random()<\/a> function.<\/p>\n<p>We hope you enjoy this tutorial as a <a target=_blank title='Canvas HTML element live run tutorial'  href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/tictactoe_chalkboard.html\">live run<\/a>.<\/p>\n<p>Should you find Tac Tac Toe (or even Noughts and Crosses) addictive you should see <a target=_blank title='Wargames' href='http:\/\/www.youtube.com\/watch?v=NHWjlCaIrQo'>this<\/a> &#8230; amazing!<\/p>\n<p>Yes &#8230; you&#8217;ve reached the end &#8230; <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/tictactoe_chalkboard.html'>go first<\/a> in each game and see if you can beat the computer!<\/p>\n<hr \/>\n<p id='hjctttgdadt'>Previous relevant <a target=_blank title='HTML\/Javascript Canvas Tic Tac Toe Game Drag and Drop Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=8415'>HTML\/Javascript Canvas Tic Tac Toe Game Drag and Drop Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/tictactoe_chalkboard.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Canvas Tic Tac Toe Game Drag and Drop Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/TicTacToe_Chalkboard.jpg\" id=\"dadi\" onmouseover=\" var iqw=document.getElementById('dadi'); iqw.src = iqw.src.replace('.jpg','.PNG').replace('.png','.jpg').replace('.PNG','.png'); \" title=\"HTML\/Javascript Canvas Tic Tac Toe Game Drag and Drop Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Canvas Tic Tac Toe Game Drag and Drop Tutorial<\/p><\/div>\n<p>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<p>In today&#8217;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 <a target=_blank href='http:\/\/www.w3schools.com\/html\/html5_draganddrop.asp' title='Drag and drop advice at w3schools'>link<\/a>.<\/p>\n<p>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<p>You may want to read more at <a target=_blank title='HTML Canvas Reference' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>HTML Canvas Reference<\/a> as a generic reference, or here, at the tutorial <a target=_blank title='javascript - How do I add a simple onClick event handler to a canvas element? - Stack Overflow' href='http:\/\/stackoverflow.com\/questions\/9880279\/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element'>javascript &#8211; How do I add a simple onClick event handler to a canvas element? &#8211; Stack Overflow<\/a>.<\/p>\n<p>As you can imagine, this HTML canvas element, new to HTML5, can be very useful for some practical client-side web functionality.<\/p>\n<p>Link to some downloadable HTML programming code &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/tictactoe_chalkboard.html_GETME' title='tictactoe_chalkboard.html'>tictactoe_chalkboard.html<\/a>\n<\/p>\n<p>You&#8217;ll notice heavy use of the Javascript <a target=_blank title='Javascript Math.random() information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_random.asp'>Math.random()<\/a> function.<\/p>\n<p>We hope you enjoy this tutorial as a <a target=_blank title='Canvas HTML element live run tutorial'  href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/tictactoe_chalkboard.html\">live run<\/a>.<\/p>\n<p>Should you find Tac Tac Toe (or even Noughts and Crosses) addictive you should see <a target=_blank title='Wargames' href='http:\/\/www.youtube.com\/watch?v=NHWjlCaIrQo'>this<\/a> &#8230; amazing!<\/p>\n<p>Yes &#8230; you&#8217;ve reached the end &#8230; <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/tictactoe_chalkboard.html'>go first<\/a> in each game and see if you can beat the computer!<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d8415' onclick='var dv=document.getElementById(\"d8415\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d8415' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr \/>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d11956' onclick='var dv=document.getElementById(\"d11956\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=Android\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d11956' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Wonder if you were around when we created Tic Tac Toe (or more like Noughts and Crosses, in Australia) using the HTML5 Canvas element and drag and drop methods (if you liked, or just plain box clicking, otherwise, which will &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/android-studio-tic-tac-toe-game-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,12,15,33,37],"tags":[76,79,80,184,374,513,530,576,578,585,644,652,795,997,1319,1435],"class_list":["post-11956","post","type-post","status-publish","format-standard","hentry","category-android","category-elearning","category-games","category-software","category-tutorials","tag-android","tag-android-sdk","tag-android-studio","tag-canvas","tag-eclipse","tag-google","tag-google-play","tag-html","tag-html5","tag-ide","tag-java","tag-javascript","tag-mobile","tag-programming","tag-tutorial","tag-windows"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/11956"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=11956"}],"version-history":[{"count":1,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/11956\/revisions"}],"predecessor-version":[{"id":14760,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/11956\/revisions\/14760"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=11956"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=11956"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=11956"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}