{"id":5,"date":"2021-03-03T21:55:29","date_gmt":"2021-03-04T05:55:29","guid":{"rendered":"http:\/\/timothyn.com\/?page_id=5"},"modified":"2026-06-27T12:25:18","modified_gmt":"2026-06-27T20:25:18","slug":"home-page","status":"publish","type":"page","link":"https:\/\/timothyn.com\/","title":{"rendered":"Home Page"},"content":{"rendered":"<div id=\"pl-5\"  class=\"panel-layout\" ><div id=\"pg-5-0\"  class=\"panel-grid panel-no-style\" ><div id=\"pgc-5-0-0\"  class=\"panel-grid-cell\" ><div id=\"panel-5-0-0-0\" class=\"widget_text so-panel widget widget_custom_html panel-first-child panel-last-child\" data-index=\"0\" ><div id=\"snake\" class=\"widget_text panel-widget-style panel-widget-style-for-5-0-0-0\" ><div class=\"textwidget custom-html-widget\"><canvas id=\"stage\" height=\"500\" width=\"1080\"><\/canvas>\n<script>\n\/**\n * Namespace\n *\/\nvar Game      = Game      || {};\nvar Keyboard  = Keyboard  || {}; \nvar Component = Component || {};\n\n\/**\n * Keyboard Map\n *\/\nKeyboard.Keymap = {\n  37: 'left',\n  38: 'up',\n  39: 'right',\n  40: 'down'\n};\n\n\/**\n * Keyboard Events\n *\/\nKeyboard.ControllerEvents = function() {\n  \n  \/\/ Setts\n  var self      = this;\n  this.pressKey = null;\n  this.keymap   = Keyboard.Keymap;\n  \n  \/\/ Keydown Event\n  document.onkeydown = function(event) {\n    self.pressKey = event.which;\n  };\n  \n  \/\/ Get Key\n  this.getKey = function() {\n    return this.keymap[this.pressKey];\n  };\n};\n\n\/**\n * Game Component Stage\n *\/\nComponent.Stage = function(canvas, conf) {  \n  \n  \/\/ Sets\n  this.keyEvent  = new Keyboard.ControllerEvents();\n  this.width     = canvas.width;\n  this.height    = canvas.height;\n  this.length    = [];\n  this.food      = {};\n  this.score     = 0;\n  this.direction = 'right';\n  this.conf      = {\n    cw   : 10,\n    size : 5,\n    fps  : 1000\n  };\n  \n  \/\/ Merge Conf\n  if (typeof conf == 'object') {\n    for (var key in conf) {\n      if (conf.hasOwnProperty(key)) {\n        this.conf[key] = conf[key];\n      }\n    }\n  }\n  \n};\n\n\/**\n * Game Component Snake\n *\/\nComponent.Snake = function(canvas, conf) {\n  \n  \/\/ Game Stage\n  this.stage = new Component.Stage(canvas, conf);\n  \n  \/\/ Init Snake\n  this.initSnake = function() {\n    \n    \/\/ Itaration in Snake Conf Size\n    for (var i = 0; i < this.stage.conf.size; i++) {\n      \n      \/\/ Add Snake Cells\n      this.stage.length.push({x: i, y:0});\n\t\t}\n\t};\n  \n  \/\/ Call init Snake\n  this.initSnake();\n  \n  \/\/ Init Food  \n  this.initFood = function() {\n\t\t\n    \/\/ Add food on stage\n    this.stage.food = {\n\t\t\tx: Math.round(Math.random() * (this.stage.width - this.stage.conf.cw) \/ this.stage.conf.cw), \n\t\t\ty: Math.round(Math.random() * (this.stage.height - this.stage.conf.cw) \/ this.stage.conf.cw), \n\t\t};\n\t};\n  \n  \/\/ Init Food\n  this.initFood();\n  \n  \/\/ Restart Stage\n  this.restart = function() {\n    this.stage.length            = [];\n    this.stage.food              = {};\n    this.stage.score             = 0;\n    this.stage.direction         = 'right';\n    this.stage.keyEvent.pressKey = null;\n    this.initSnake();\n    this.initFood();\n  };\n};\n\n\/**\n * Game Draw\n *\/\nGame.Draw = function(context, snake) {\n  \n  \/\/ Draw Stage\n  this.drawStage = function() {\n    \n    \/\/ Check Keypress And Set Stage direction\n    var keyPress = snake.stage.keyEvent.getKey(); \n    if (typeof(keyPress) != 'undefined') {\n      snake.stage.direction = keyPress;\n    }\n    \n    \/\/ Draw White Stage\n\t\tcontext.fillStyle = \"white\";\n\t\tcontext.fillRect(0, 0, snake.stage.width, snake.stage.height);\n\t\t\n    \/\/ Snake Position\n    var nx = snake.stage.length[0].x;\n\t\tvar ny = snake.stage.length[0].y;\n\t\t\n    \/\/ Add position by stage direction\n    switch (snake.stage.direction) {\n      case 'right':\n        nx++;\n        break;\n      case 'left':\n        nx--;\n        break;\n      case 'up':\n        ny--;\n        break;\n      case 'down':\n        ny++;\n        break;\n    }\n    \n    \/\/ Check Collision\n    if (this.collision(nx, ny) == true) {\n      snake.restart();\n      return;\n    }\n    \n    \/\/ Logic of Snake food\n    if (nx == snake.stage.food.x && ny == snake.stage.food.y) {\n      var tail = {x: nx, y: ny};\n      snake.stage.score++;\n      snake.initFood();\n    } else {\n      var tail = snake.stage.length.pop();\n      tail.x   = nx;\n      tail.y   = ny;\t\n    }\n    snake.stage.length.unshift(tail);\n    \n    \/\/ Draw Snake\n    for (var i = 0; i < snake.stage.length.length; i++) {\n      var cell = snake.stage.length[i];\n      this.drawCell(cell.x, cell.y);\n    }\n    \n    \/\/ Draw Food\n    this.drawCell(snake.stage.food.x, snake.stage.food.y);\n    \n\n  };\n  \n  \/\/ Draw Cell\n  this.drawCell = function(x, y) {\n    context.fillStyle = 'rgb(170, 170, 170)';\n    context.beginPath();\n    context.arc((x * snake.stage.conf.cw + 6), (y * snake.stage.conf.cw + 6), 4, 0, 2*Math.PI, false);    \n    context.fill();\n  };\n  \n  \/\/ Check Collision with walls\n  this.collision = function(nx, ny) {  \n    if (nx == -1 || nx == (snake.stage.width \/ snake.stage.conf.cw) || ny == -1 || ny == (snake.stage.height \/ snake.stage.conf.cw)) {\n      return true;\n    }\n    return false;    \n\t}\n};\n\n\n\/**\n * Game Snake\n *\/\nGame.Snake = function(elementId, conf) {\n  \n  \/\/ Sets\n  var canvas   = document.getElementById(elementId);\n  var context  = canvas.getContext(\"2d\");\n  var snake    = new Component.Snake(canvas, conf);\n  var gameDraw = new Game.Draw(context, snake);\n  \n  \/\/ Game Interval\n  setInterval(function() {gameDraw.drawStage();}, snake.stage.conf.fps);\n};\n\n\n\/**\n * Window Load\n *\/\nwindow.onload = function() {\n  var snake = new Game.Snake('stage', {fps: 60, size: 10});\n};\n<\/script><\/div><\/div><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"0","ocean_second_sidebar":"0","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"0","ocean_custom_header_template":"0","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"0","ocean_menu_typo_font_family":"0","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"0","footnotes":""},"class_list":["post-5","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/timothyn.com\/index.php\/wp-json\/wp\/v2\/pages\/5","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/timothyn.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/timothyn.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/timothyn.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/timothyn.com\/index.php\/wp-json\/wp\/v2\/comments?post=5"}],"version-history":[{"count":74,"href":"https:\/\/timothyn.com\/index.php\/wp-json\/wp\/v2\/pages\/5\/revisions"}],"predecessor-version":[{"id":174,"href":"https:\/\/timothyn.com\/index.php\/wp-json\/wp\/v2\/pages\/5\/revisions\/174"}],"wp:attachment":[{"href":"https:\/\/timothyn.com\/index.php\/wp-json\/wp\/v2\/media?parent=5"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}