{"id":34351,"date":"2017-11-18T03:01:02","date_gmt":"2017-11-17T17:01:02","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=34351"},"modified":"2017-11-18T07:27:20","modified_gmt":"2017-11-17T21:27:20","slug":"sushi-train-circuit-game-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/sushi-train-circuit-game-tutorial\/","title":{"rendered":"Sushi Train Circuit Game Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circuit.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Sushi Train Circuit Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circuit.jpg\" title=\"Sushi Train Circuit Game Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Sushi Train Circuit Game Tutorial<\/p><\/div>\n<p>In today&#8217;s Sushi Train Circuit Game we use yesterday&#8217;s <a title='Circuit Webpage Primer Tutorial' href='#cwpt'>Circuit Webpage Primer Tutorial<\/a> as the underlying webpage design basis.<\/p>\n<p>Many things in life are based on circuits.  Think electronics, think racing, think cycling velodromes, think roller derby, think ice skating, think round trips, think lunch &#8230; think Sushi Train.<\/p>\n<p>Think Sushi Train &#8230; think (in particular) <a target=_blank title='Emojis food-asian plus plus' href='https:\/\/unicode.org\/emoji\/charts\/full-emoji-list.html#food-asian'>Asian food emojis<\/a>, we reckon.  Are you hungry yet?<\/p>\n<p>So what were the challenges making this game?<\/p>\n<ul>\n<li>marrying the order of <a target=_blank title='HTML td element information from wschools' href='http:\/\/www.w3schools.com\/tags\/tag_td.asp'>td<\/a> element cells with the different order of a Sushi Train &#8220;circuit&#8221; (which would be clockwise, or anticlockwise) &#8230; resulting in us using &#8220;array mapped indexing&#8221; (ie. array indexes which map to the &#8220;reorderings&#8221; required)<\/li>\n<li>making a game out of the Sushi Train scenario &#8230; so we have a &#8220;lame&#8221; 4 player game, where the player with the most expensive tastes wins<\/li>\n<li>using multiple <a target=_blank title='HTML and CSS class' href='https:\/\/www.w3schools.com\/tags\/att_class.asp'>class<\/a> techniques (CSS functionality involving <a target=_blank title='CSS :before selector information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/sel_before.asp'>:before<\/a> and <a target=_blank title='CSS :after selector information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/sel_after.asp'>:after<\/a> (selectors) and <a target=_blank title='CSS content: property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_gen_content.asp'>content:<\/a> exemplified by &#8230;<br \/>\n<code><br \/>\n.f1:before { content: '\\01f371' }<br \/>\n<\/code><br \/>\n) to make the Sushi Train go around (ie. shuffle along to adjacent Sushi Train cells the styling of its predecessor, when the <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> Javascript (timer) function re-executes) &#8230; that is, unless in the meantime &#8230;<\/li>\n<li>the player, in focus (each is given 6 seconds &#8220;air time&#8221; (or until a click\/touch happens)), clicks\/touches (ie. selects) a &#8220;food&#8221; item, whose &#8220;price&#8221; value (hidden to the user, whereas its name is available &#8220;on hover&#8221;) contributes to that player&#8217;s score in the game<\/li>\n<\/ul>\n<p>Again, you can see the HTML and CSS (combination of head style definitions and inline CSS within the HTML) at <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circuit.html-GETME\" title=\"circuit.htm\">circuit.htm<\/a> (changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circuit.html-GETME\" title=\"circuit.htm\">this way<\/a>) and try it out for yourself at our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circuit.htm\" title=\"Click picture\">live run<\/a> link today.  We hope it gets you singing &#8230;<\/p>\n<blockquote><p>\n&#127926; If you knew sushi,<br \/>\nLike I know sushi,   &#127926;<br \/>\nOh, oh, &#127926; oh what a Californian r<span style='color:#777777; opacity:0.8; margin-left:-2px;text-decoration:line-through;'>n<\/span>oll\n<\/p><\/blockquote>\n<hr>\n<p id='cwpt'>Previous relevant <a target=_blank title='Circuit Webpage Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/circuit-webpage-primer-tutorial\/'>Circuit Webpage Primer 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\/circuit.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Circuit Webpage Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circuit.jpeg\" title=\"Circuit Webpage Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Circuit Webpage Primer Tutorial<\/p><\/div>\n<p>We&#8217;re on our way to a more fully fleshed out web application that makes use of a &#8220;circuit&#8221;, but we want to approach this project in stages.<\/p>\n<p>Stage one is to create some initial HTML and CSS to show a circuit.  We construct it, debatably, via underpinnings that involve &#8230;<\/p>\n<ul>\n<li>HTML <a target=_blank title='HTML table element information from W3schools' href='http:\/\/www.w3schools.com\/tags\/tag_table.asp'>table<\/a> element<\/li>\n<li>Cells (<a target=_blank title='HTML td element information from wschools' href='http:\/\/www.w3schools.com\/tags\/tag_td.asp'>td<\/a> elements) involving <a target=_blank title='HTML table cell colspan information from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_td_colspan.asp'>colspan<\/a> and <a target=_blank title='HTML table cell rowspan information from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_td_rowspan.asp'>rowspan<\/a> attributes<\/li>\n<li><a target=_blank title='Background information at w3schools ... thanks' href='http:\/\/www.w3schools.com\/css\/css_background.asp'>Background<\/a> colours strategically defined<\/li>\n<li><a target=_blank href='https:\/\/www.w3schools.com\/cssref\/pr_border.asp' title='CSS border information from w3schools'>Border<\/a> characteristics such as &#8230;\n<ol>\n<li>CSS <a target=_blank title='CSS3 border-radius information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_border-radius.asp'>border-radius<\/a><\/li>\n<li>Some CSS border-top and border-bottom merged into background colour with an offset &#8230;<\/li>\n<li>HTML <a target=_blank title='HTML hr element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_hr.asp'>hr<\/a> elements replace some border-top and border-bottom &#8220;lines&#8221;<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>You can see the HTML and CSS (combination of head style definitions and inline CSS within the HTML) at <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circuit.html_GETME\" title=\"circuit.html\">circuit.html<\/a> and try it out for yourself at our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/circuit.html\" title=\"Click picture\">live run<\/a> link today.  We hope it gets you thinking.<\/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='#d34336' onclick='var dv=document.getElementById(\"d34336\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34336' 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='#d34351' onclick='var dv=document.getElementById(\"d34351\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/emoji\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34351' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In today&#8217;s Sushi Train Circuit Game we use yesterday&#8217;s Circuit Webpage Primer Tutorial as the underlying webpage design basis. Many things in life are based on circuits. Think electronics, think racing, think cycling velodromes, think roller derby, think ice skating, &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/sushi-train-circuit-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":[12,14,15,37],"tags":[103,126,161,1798,1580,2390,2388,281,385,576,604,861,2076,997,2389,1126,1238,1319],"class_list":["post-34351","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-array","tag-background","tag-border","tag-border-radius","tag-cell","tag-circuit","tag-colspan","tag-css","tag-emoji","tag-html","tag-index","tag-onclick","tag-order","tag-programming","tag-rowspan","tag-settimeout","tag-table","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34351"}],"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=34351"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34351\/revisions"}],"predecessor-version":[{"id":34368,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34351\/revisions\/34368"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=34351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=34351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=34351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}