{"id":4153,"date":"2023-06-23T03:57:30","date_gmt":"2023-06-23T03:57:30","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=4153"},"modified":"2023-08-28T23:51:18","modified_gmt":"2023-08-28T23:51:18","slug":"from-concept-to-creation-building-farm-memory-game-in-80-hours","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/from-concept-to-creation-building-farm-memory-game-in-80-hours\/","title":{"rendered":"From Concept to Creation: Building Farm Memory Game in 80 Hours"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; Farm Memory Game is a HTML5 Puzzle game. Match all identical cards before time runs out! From concept to Creation, I am building Farm Memory Game in 80 hours.<\/p>\n<p>This game can be played on a variety of devices, including desktops, laptops, tablets, and smartphones. It typically requires a stable internet connection and a modern web browser that supports HTML5 technology.<\/p>\n<h2><span style=\"color: #ff0000;\"><strong>How To Create:<\/strong><\/span><\/h2>\n<h3 id=\"cssFiles\"><span style=\"color: #ff0000;\"><strong>CSS Files and Structure<\/strong><\/span><\/h3>\n<p>The game use two CSS files. The first one is a generic reset file. Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. Keep in mind, that these values might be overridden somewhere else in the file.<\/p>\n<p>The second file contains all of the specific styles for the canvas and some hack to be fully compatible with all most popular mobile devices.<\/p>\n<h3><span style=\"color: #ff0000;\"><strong>JavaScript<\/strong><\/span><\/h3>\n<p>This game contains:<\/p>\n<ol>\n<li><strong>jQuery<\/strong><\/li>\n<li><strong>Our custom scripts<\/strong><\/li>\n<li><strong>CreateJs plugin<\/strong><\/li>\n<li><strong>Howler Sound library<\/strong><\/li>\n<\/ol>\n<ol>\n<li>jQuery is a Javascript library that greatly reduces the amount of code that you must write.<\/li>\n<li>The game have the following js files:\n<ul>\n<li>CMain: the main class called by the index file.<br \/>\nThis file controls the sprite_lib.js file that manages the sprite loading, the loop game and initialize the canvas with the CreateJs library<\/li>\n<li>ctl_utils: this file manages the canvas resize and its centering<\/li>\n<li>sprite_lib: this class loads all images declared in the main class<\/li>\n<li>settings: general game settings<\/li>\n<li>CLang: global string variables for language localization<\/li>\n<li>CPreloader: simple text preloader to show resources loading progress<\/li>\n<li>CMenu: simple menu with the play button<\/li>\n<li>CGfxButton: this class create a standard button<\/li>\n<li>CToggle: this class create a standard toggle button<\/li>\n<li>CTextButton: this class create a standard text button<\/li>\n<li>CGame: this class manages the game logic<\/li>\n<li>CInterface: this class controls game GUI that contains text and buttons<\/li>\n<li>CGameOver: the final game over panel<\/li>\n<li>CVictory: this panel is shown when user win the game<\/li>\n<li>CCard: this class manages the cards<\/li>\n<\/ul>\n<\/li>\n<li>CreateJs is a suite of modular libraries and tools which work together to enable rich interactive content on open web technologies via HTML5.<\/li>\n<li>Howler is a javascript Audio library.<\/li>\n<\/ol>\n<p>Resuming, the complete game flow is the following:<\/p>\n<ol>\n<li>The index.html file calls the CMain.js file after ready event is called<\/li>\n<li>The main class calls CPreloader.js to init preloader text and start sprite loading<\/li>\n<li>When all sprites contained in &#8220;\/sprites&#8221; folder are loaded, the main class removes the preloader and calls the CMenu.js file that shows the main menu<\/li>\n<li>If user click the play button in main menu, the CGame.js class is called and the game starts<\/li>\n<li>The User play the game<\/li>\n<li>When the level time is over, the game calls the Game Over panel<\/li>\n<li>If user click on the exit button in the up-left corner, the game returns to the menu screen<\/li>\n<\/ol>\n<h3><span style=\"color: #ff0000;\">Game Functions<\/span><\/h3>\n<p>In this section will be explained all the most important functions used in\u00a0<strong>CGame.js<\/strong>\u00a0file.<br \/>\n<strong>_init()<\/strong><\/p>\n<ul>\n<li>This function attach on the canvas some game sprites like background (oBg), GUI and create characters grid.<\/li>\n<li><strong>unload()<\/strong><br \/>\nThis function removes all images from canvas and event listeners on buttons. It&#8217;s called when user decide to exit from the game.<\/li>\n<li><strong>checkMatching()<\/strong><br \/>\nThis function check if two cards are identical.<\/li>\n<li><strong>checkVictory()<\/strong><br \/>\nThis function check if level is complete.<\/li>\n<li><strong>nextLevel()<\/strong><br \/>\nThis function is called when start a new level.<\/li>\n<li><strong>update<\/strong><br \/>\nMain game loop.<\/li>\n<\/ul>\n<h3><span style=\"color: #ff0000;\"><strong>Sample Code<\/strong><\/span><\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">var oMain = new CMain({\r\ncard_per_level :   [4,      \/\/NUM CARD IN LEVEL 1\r\n                    8,      \/\/NUM CARD IN LEVEL 2\r\n                    16,     \/\/NUM CARD IN LEVEL 3\r\n                    32      \/\/NUM CARD IN LEVEL 4\r\n                    ],     \r\n \r\ntime_level:[30,  \/\/NUM SECONDS PER LEVEL 1\r\n            60,  \/\/NUM SECONDS PER LEVEL 2\r\n            120, \/\/NUM SECONDS PER LEVEL 3\r\n            240  \/\/NUM SECONDS PER LEVEL 4\r\n            ],\r\n \r\n            score_match_card: 10,     \/\/SCORE ASSIGNED WHEN USER MATCH TWO CARDS\r\n            score_time_left_mult: 2,  \/\/MULTIPLIER ASSIGNED TO REMAINING LEVEL TIME\r\n            time_match_mult: 3000,     \/\/TIME AVAILABLE BETWEEN DISCOVERED MATCHING TO GET SCORE MULTIPLIER \r\n            show_cards: 0 ,            \/\/IF YOU WANT TO SHOW CARDS FOR SOME SECONDS WHEN LEVEL START, SET THIS VALUE &gt; 0 (NUM OF SECONDS)\r\n            audio_enable_on_startup:false, \/\/ENABLE\/DISABLE AUDIO WHEN GAME STARTS \r\n            fullscreen:true, \/\/SET THIS TO FALSE IF YOU DON'T WANT TO SHOW FULLSCREEN BUTTON\r\n            check_orientation:true     \/\/SET TO FALSE IF YOU DON'T WANT TO SHOW ORIENTATION ALERT ON MOBILE DEVICES\r\n             });<\/pre>\n<div class=\"su-row\">\n<div class=\"su-column su-column-size-1-2\"><div class=\"su-column-inner su-u-clearfix su-u-trim\"><div class=\"su-button-center\"><a href=\"https:\/\/rengga.dev\/game\/farm-memory\/\" class=\"su-button su-button-style-glass su-button-wide\" style=\"color:#FFFFFF;background-color:#3EBD0D;border-color:#32980b;border-radius:50px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#FFFFFF;padding:8px 24px;font-size:18px;line-height:27px;border-color:#78d156;border-radius:50px;text-shadow:1px 1px 1px #000000\"><i class=\"sui sui-github-square\" style=\"font-size:18px;color:#FFFFFF\"><\/i> Farm Memory Game<\/span><\/a><\/div><\/div><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; Farm Memory Game is a HTML5 Puzzle game. Match <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/from-concept-to-creation-building-farm-memory-game-in-80-hours\/\" title=\"From Concept to Creation: Building Farm Memory Game in 80 Hours\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":4403,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[493,406],"tags":[502,501,500,495,496,498,494],"newstopic":[610,572,571,601],"class_list":{"0":"post-4153","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-game","8":"category-pickup","9":"tag-card-game","10":"tag-farm-game","11":"tag-farm-memory-game","12":"tag-game","13":"tag-game-development","14":"tag-numbers-game","15":"tag-web-game","16":"newstopic-game","17":"newstopic-html","18":"newstopic-javascript","19":"newstopic-jquery"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/4153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=4153"}],"version-history":[{"count":3,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/4153\/revisions"}],"predecessor-version":[{"id":4453,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/4153\/revisions\/4453"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/4403"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=4153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=4153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=4153"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=4153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}