{"id":3103,"date":"2021-09-10T04:16:22","date_gmt":"2021-09-10T04:16:22","guid":{"rendered":"https:\/\/org.saito.tech\/?p=3103"},"modified":"2022-04-18T03:26:01","modified_gmt":"2022-04-18T03:26:01","slug":"wuziqi-childs-play","status":"publish","type":"post","link":"https:\/\/saito.tech\/wuziqi-childs-play\/","title":{"rendered":"Wuziqi – Child’s Play"},"content":{"rendered":"\n

With travel difficult my son has spent a large part of the summer in the Saitoplex. To make the most of the opportunity, we decided to build a simple Saito module together.<\/p>\n\n\n\n

He is 10 and has been learning to code, scratch at school and camp, javascript\/html\/css with me for a few years. We decided on \u4e94\u5b50\u68cb (Gobang) – five in a row, played on a Go board, as a simple project that could result in a playable game. He had built Towers of Hannoi and Naughts and Crosses (Tic Tac Toe) in javascript before, so this seemed like a good level, and we started with a playable \u2018local\u2019 version as step one.<\/p>\n\n\n\n

Design meetings were held every morning on the walk to the office and he\u2019d code up parts during the day. It took a little over a week of very non-intensive coding to put the initial version together.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Things I learned along the way.<\/p>\n\n\n\n

The game stack is not intuitive for a ten year old. Particularly the first in last out way moves are stacked up then played out took him a while to understand. This isn\u2019t helped by there not being complex moves in such a simple game, so it can be hard to see what it\u2019s for.<\/p>\n\n\n\n

Once you have a game that can be played by two players at the same browser, it is very, very simple to move it to the Saito game engine. You need to add a way to record the state of the game (simple if you already had it in a single object) and work out what needs to be sent to opponents as part of each move. Putting this onto the chain and broadcasting it, receiving it and playing out the moves, is\u2026 child\u2019s play.<\/p>\n\n\n\n

To a kid, maths is more intuitive than nested loops. Set the problem of assigning a row and column value to each cell on the board, the solution was:<\/p>\n\n\n\n

Loop through all the cells, and determine the row and column from the ordinal using equations:<\/p>\n\n\n\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Set the row as the total divided by the side length rounded up.<\/p>

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cell.sets.row = Math.ceil(n \/ x);<\/p>

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Set the column as the cell id mod side length.<\/p>

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cell.sets.col = ((n – 1) % x) + 1;<\/p><\/blockquote>\n\n\n\n

 Rather than, what I think would be every coder\u2019s instinct: to loop through the rows, and have a nested loop for the columns.<\/p>\n\n\n\n

We will probably pretty the game up some, and will definitely take feedback from the community on features and changes, but we\u2019ll have it up, playable in it\u2019s \u2018unvarnished\u2019 state for a while.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

I have also made an effort to comment up the code as a simple tutorial, something that should explain all the things we bumped into that might help someone building a game on Saito for the first time. These are mostly about handling p2p and the lack of a server.<\/p>\n\n\n\n

You can try Wuziqi now on the Saito Arcade<\/a>.  Enjoy.<\/p>\n","protected":false},"excerpt":{"rendered":"

With travel difficult my son has spent a large part of the summer in the Saitoplex. To make the most of the opportunity, we decided to build a simple Saito module together. He is 10 and has been learning to code, scratch at school and camp, javascript\/html\/css with me for a few years. We decided on \u4e94\u5b50\u68cb (Gobang) – five in a row, played on a Go board, as a simple project that could result in a playable game. He had built Towers of Hannoi and Naughts and Crosses (Tic Tac Toe) in javascript before, so this seemed like a […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[43,36],"tags":[],"class_list":["post-3103","post","type-post","status-publish","format-standard","hentry","category-tech","category-update"],"yoast_head":"\nWuziqi - Child's Play - Saito<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/saito.tech\/wuziqi-childs-play\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wuziqi - Child's Play - Saito\" \/>\n<meta property=\"og:description\" content=\"With travel difficult my son has spent a large part of the summer in the Saitoplex. To make the most of the opportunity, we decided to build a simple Saito module together. He is 10 and has been learning to code, scratch at school and camp, javascript\/html\/css with me for a few years. We decided on \u4e94\u5b50\u68cb (Gobang) – five in a row, played on a Go board, as a simple project that could result in a playable game. He had built Towers of Hannoi and Naughts and Crosses (Tic Tac Toe) in javascript before, so this seemed like a […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/saito.tech\/wuziqi-childs-play\/\" \/>\n<meta property=\"og:site_name\" content=\"Saito\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-10T04:16:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-18T03:26:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/saito.tech\/wp-content\/uploads\/2022\/04\/Screenshot-from-2021-09-10-11-57-50.png\" \/>\n<meta name=\"author\" content=\"Richard Parris\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Richard Parris\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/saito.tech\/wuziqi-childs-play\/\",\"url\":\"https:\/\/saito.tech\/wuziqi-childs-play\/\",\"name\":\"Wuziqi - Child's Play - Saito\",\"isPartOf\":{\"@id\":\"https:\/\/saito.tech\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/saito.tech\/wuziqi-childs-play\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/saito.tech\/wuziqi-childs-play\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/saito.tech\/wp-content\/uploads\/2022\/04\/Screenshot-from-2021-09-10-11-57-50.png\",\"datePublished\":\"2021-09-10T04:16:22+00:00\",\"dateModified\":\"2022-04-18T03:26:01+00:00\",\"author\":{\"@id\":\"https:\/\/saito.tech\/#\/schema\/person\/35d32f85c2cddaa1b657669b0e6d70ec\"},\"breadcrumb\":{\"@id\":\"https:\/\/saito.tech\/wuziqi-childs-play\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/saito.tech\/wuziqi-childs-play\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/saito.tech\/wuziqi-childs-play\/#primaryimage\",\"url\":\"https:\/\/saito.tech\/wp-content\/uploads\/2022\/04\/Screenshot-from-2021-09-10-11-57-50.png\",\"contentUrl\":\"https:\/\/saito.tech\/wp-content\/uploads\/2022\/04\/Screenshot-from-2021-09-10-11-57-50.png\",\"width\":731,\"height\":775},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/saito.tech\/wuziqi-childs-play\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/saito.tech\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Wuziqi – Child’s Play\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/saito.tech\/#website\",\"url\":\"https:\/\/saito.tech\/\",\"name\":\"Saito\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/saito.tech\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/saito.tech\/#\/schema\/person\/35d32f85c2cddaa1b657669b0e6d70ec\",\"name\":\"Richard Parris\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/saito.tech\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3929de12bbd3a0b11245d04a4fd51ef79841a1d333b8fb2df0afac60931ade2a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3929de12bbd3a0b11245d04a4fd51ef79841a1d333b8fb2df0afac60931ade2a?s=96&d=mm&r=g\",\"caption\":\"Richard Parris\"},\"url\":\"https:\/\/saito.tech\/author\/richard\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Wuziqi - Child's Play - Saito","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/saito.tech\/wuziqi-childs-play\/","og_locale":"en_US","og_type":"article","og_title":"Wuziqi - Child's Play - Saito","og_description":"With travel difficult my son has spent a large part of the summer in the Saitoplex. To make the most of the opportunity, we decided to build a simple Saito module together. He is 10 and has been learning to code, scratch at school and camp, javascript\/html\/css with me for a few years. We decided on \u4e94\u5b50\u68cb (Gobang) – five in a row, played on a Go board, as a simple project that could result in a playable game. He had built Towers of Hannoi and Naughts and Crosses (Tic Tac Toe) in javascript before, so this seemed like a […]","og_url":"https:\/\/saito.tech\/wuziqi-childs-play\/","og_site_name":"Saito","article_published_time":"2021-09-10T04:16:22+00:00","article_modified_time":"2022-04-18T03:26:01+00:00","og_image":[{"url":"https:\/\/saito.tech\/wp-content\/uploads\/2022\/04\/Screenshot-from-2021-09-10-11-57-50.png","type":"","width":"","height":""}],"author":"Richard Parris","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Richard Parris","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/saito.tech\/wuziqi-childs-play\/","url":"https:\/\/saito.tech\/wuziqi-childs-play\/","name":"Wuziqi - Child's Play - Saito","isPartOf":{"@id":"https:\/\/saito.tech\/#website"},"primaryImageOfPage":{"@id":"https:\/\/saito.tech\/wuziqi-childs-play\/#primaryimage"},"image":{"@id":"https:\/\/saito.tech\/wuziqi-childs-play\/#primaryimage"},"thumbnailUrl":"https:\/\/saito.tech\/wp-content\/uploads\/2022\/04\/Screenshot-from-2021-09-10-11-57-50.png","datePublished":"2021-09-10T04:16:22+00:00","dateModified":"2022-04-18T03:26:01+00:00","author":{"@id":"https:\/\/saito.tech\/#\/schema\/person\/35d32f85c2cddaa1b657669b0e6d70ec"},"breadcrumb":{"@id":"https:\/\/saito.tech\/wuziqi-childs-play\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/saito.tech\/wuziqi-childs-play\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/saito.tech\/wuziqi-childs-play\/#primaryimage","url":"https:\/\/saito.tech\/wp-content\/uploads\/2022\/04\/Screenshot-from-2021-09-10-11-57-50.png","contentUrl":"https:\/\/saito.tech\/wp-content\/uploads\/2022\/04\/Screenshot-from-2021-09-10-11-57-50.png","width":731,"height":775},{"@type":"BreadcrumbList","@id":"https:\/\/saito.tech\/wuziqi-childs-play\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/saito.tech\/"},{"@type":"ListItem","position":2,"name":"Wuziqi – Child’s Play"}]},{"@type":"WebSite","@id":"https:\/\/saito.tech\/#website","url":"https:\/\/saito.tech\/","name":"Saito","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/saito.tech\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/saito.tech\/#\/schema\/person\/35d32f85c2cddaa1b657669b0e6d70ec","name":"Richard Parris","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/saito.tech\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3929de12bbd3a0b11245d04a4fd51ef79841a1d333b8fb2df0afac60931ade2a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3929de12bbd3a0b11245d04a4fd51ef79841a1d333b8fb2df0afac60931ade2a?s=96&d=mm&r=g","caption":"Richard Parris"},"url":"https:\/\/saito.tech\/author\/richard\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/saito.tech\/wp-json\/wp\/v2\/posts\/3103","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/saito.tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/saito.tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/saito.tech\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/saito.tech\/wp-json\/wp\/v2\/comments?post=3103"}],"version-history":[{"count":1,"href":"https:\/\/saito.tech\/wp-json\/wp\/v2\/posts\/3103\/revisions"}],"predecessor-version":[{"id":3868,"href":"https:\/\/saito.tech\/wp-json\/wp\/v2\/posts\/3103\/revisions\/3868"}],"wp:attachment":[{"href":"https:\/\/saito.tech\/wp-json\/wp\/v2\/media?parent=3103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/saito.tech\/wp-json\/wp\/v2\/categories?post=3103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/saito.tech\/wp-json\/wp\/v2\/tags?post=3103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}