{"id":15724,"date":"2015-07-02T05:01:16","date_gmt":"2015-07-01T19:01:16","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=15724"},"modified":"2015-07-02T09:23:47","modified_gmt":"2015-07-01T23:23:47","slug":"htmljavascript-kenken-game-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-kenken-game-primer-tutorial\/","title":{"rendered":"HTML\/Javascript KenKen Game Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/kenken.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML\/Javascript KenKen Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/kenken.jpg\" title=\"HTML\/Javascript KenKen Game Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript KenKen Game Primer Tutorial<\/p><\/div>\n<p>KenKen is a well known mathematical game, featuring in the puzzle section of some newspapers.  We see it here in Sydney, Australia, in <a target=_blank title='The Sydney Morning Herald' href='http:\/\/www.smh.com.au\/\u200e'>The Sydney Morning Herald<\/a> newspaper.<\/p>\n<p>Do not know what the paper KenKen puzzle creators use to create their KenKen puzzles, but we do end up with a bit of a trial and error approach (populating the KenKen grid with numbers).<\/p>\n<p>Am sure if you are interested in the methodology you would not have too much trouble seeing what we did by examining the HTML and Javascript code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/kenken.html_GETME\" title='kenken.html'>kenken.html<\/a><\/p>\n<p>KenKen consists of a grid (ours is 6&#215;6) of numbers (from 1 to 6) not repeated horizontally nor vertically within that grid.<\/p>\n<p>The user solving the KenKen puzzle is not shown those numbers, except the ones caught in a 1&#215;1 &#8220;cage&#8221; &#8230; and these can help you greatly to solve the puzzle, the rest of which is made up of 1&#215;2 and 1&#215;3 &#8220;cages&#8221; that have a &#8220;clue&#8221; &#8230; for example &#8230;<\/p>\n<ul>\n<li>\n<table>\n<tr>\n<div align='center'>\n<td style='border:11px solid green'><sup style='color:red;'>12*<\/sup><select><option><\/option><option value=1>1<\/option><option value=2>2<\/option><option value=3>3<\/option><option value=4>4<\/option><option value=5>5<\/option><option value=6>6<\/option><\/select><\/div>\n<\/td>\n<\/tr>\n<\/table>\n<\/li>\n<li>\n<table>\n<tr>\n<div align='center'>\n<td style='border:11px solid green'><sup style='color:red;'>7+<\/sup><select><option><\/option><option value=1>1<\/option><option value=2>2<\/option><option value=3>3<\/option><option value=4>4<\/option><option value=5>5<\/option><option value=6>6<\/option><\/select><\/div>\n<\/td>\n<\/tr>\n<\/table>\n<\/li>\n<li>\n<table>\n<tr>\n<div align='center'>\n<td style='border:11px solid green'><sup style='color:red;'>3-<\/sup><select><option><\/option><option value=1>1<\/option><option value=2>2<\/option><option value=3>3<\/option><option value=4>4<\/option><option value=5>5<\/option><option value=6>6<\/option><\/select><\/div>\n<\/td>\n<\/tr>\n<\/table>\n<\/li>\n<li>\n<table>\n<tr>\n<div align='center'>\n<td style='border:11px solid green'><sup style='color:red;'>2\/<\/sup><select><option><\/option><option value=1>1<\/option><option value=2>2<\/option><option value=3>3<\/option><option value=4>4<\/option><option value=5>5<\/option><option value=6>6<\/option><\/select><\/div>\n<\/td>\n<\/tr>\n<\/table>\n<\/li>\n<\/ul>\n<p> &#8230; which tell you a clue about the numbers you can use dropdowns with which to solve.<\/p>\n<p>There is no surprise with the HTML &#8220;grid&#8221; being composed of an HTML <a target=_blank title='HTML table information from w3schools' href='http:\/\/www.w3schools.com\/html\/html_tables.asp'>table<\/a> element, shadowed by a multi-dimensional array we initialize for our 6&#215;6 grid scenario via &#8230;<\/p>\n<p><code><br \/>\nvar mda=[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]];<br \/>\n<\/code><\/p>\n<p> in the Javascript.<\/p>\n<p>You&#8217;ll see that we made use of the HTML <a target=_blank title='HTML sup tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_sup.asp'>sup<\/a> tag for a superimposed feel to the clues within some of the grid squares at the start of the &#8220;cage&#8221;.<\/p>\n<p>Hope you get some HTML and Javascript ideas about games, and have fun playing this mathematical and logic game, today, with our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/kenken.html\" title='click picture'>live run<\/a>.<\/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='#d15724' onclick='var dv=document.getElementById(\"d15724\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=mathematics\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d15724' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>KenKen is a well known mathematical game, featuring in the puzzle section of some newspapers. We see it here in Sydney, Australia, in The Sydney Morning Herald newspaper. Do not know what the paper KenKen puzzle creators use to create &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-kenken-game-primer-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,15,37],"tags":[103,476,477,576,652,1602,752,997,1010,1319],"class_list":["post-15724","post","type-post","status-publish","format-standard","hentry","category-elearning","category-games","category-tutorials","tag-array","tag-game","tag-games-2","tag-html","tag-javascript","tag-kenken","tag-mathematics","tag-programming","tag-puzzle","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/15724"}],"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=15724"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/15724\/revisions"}],"predecessor-version":[{"id":15740,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/15724\/revisions\/15740"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=15724"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=15724"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=15724"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}