{"id":3575,"date":"2016-11-04T11:45:44","date_gmt":"2016-11-04T15:45:44","guid":{"rendered":"http:\/\/www.acarlstein.com\/?p=3575"},"modified":"2016-11-08T16:45:02","modified_gmt":"2016-11-08T20:45:02","slug":"codepen-my-notes","status":"publish","type":"post","link":"http:\/\/blog.acarlstein.com\/?p=3575","title":{"rendered":"Quintus: Notes and Code Examples (in CodePen.io)"},"content":{"rendered":"<h1>My Notes and Code Examples (in CodePen.io)<\/h1>\n<p>Recently, I started to use the website CodePen in order to share code examples; as well as, making notes of random things I am learning in my speared time.<\/p>\n<p> Currently, I am experimenting with this game framework\/library called <a href=\"http:\/\/www.html5quintus.com\/\">Quintus<\/a><\/p>\n<p>The order goes from the newest, down to the oldest.<br \/>\n In this way, you don&#8217;t have to scroll all the way down to the final result.<\/p>\n<h2>Quintus JS HTML5<\/h2>\n<table>\n<tbody>\n<tr style=\"height: 37.804px;\">\n<td style=\"height: 37.804px;\"><a href=\"http:\/\/www.acarlstein.com\/?attachment_id=3588\" rel=\"attachment wp-att-3588\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-3588\" src=\"http:\/\/www.elblender.com\/wordpress\/wp-content\/uploads\/2016\/11\/dialog-warning-2.png\" alt=\"dialog-warning-2\" width=\"16\" height=\"16\" \/><\/a>Warning: For these notes\/examples, I am using external url resources (such as Open Source sprites). If any of those resources are missing, then the code examples will not\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Resources<\/strong><\/p>\n<table border=\"1\">\n<tbody>\n<tr style=\"height: 101px;\">\n<td style=\"height: 101px;\">\n<p><a href=\"http:\/\/www.acarlstein.com\/?attachment_id=3591\" rel=\"attachment wp-att-3591\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-3591\" src=\"http:\/\/www.elblender.com\/wordpress\/wp-content\/uploads\/2016\/11\/EXL-BR2-sizes.gif\" alt=\"exl-br2-sizes\" width=\"90\" height=\"79\" \/><\/a>Art Author:\u00a0grenaderifle<\/p>\n<p>Url:\u00a0<a href=\"http:\/\/s23.photobucket.com\/user\/grenaderifle\/media\/EXL-BR2-sizes.gif\">http:\/\/s23.photobucket.com\/user\/grenaderifle\/media\/EXL-BR2-sizes.gif<\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"height: 61px;\">\n<td style=\"height: 61px;\">\n<p><a href=\"http:\/\/www.acarlstein.com\/?attachment_id=3593\" rel=\"attachment wp-att-3593\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft  wp-image-3593\" src=\"http:\/\/www.elblender.com\/wordpress\/wp-content\/uploads\/2016\/11\/spaceship.png\" alt=\"spaceship\" width=\"87\" height=\"19\" \/><\/a>\u00a0Art Author:\u00a0thomaswp<\/p>\n<p>Url:\u00a0<a href=\"http:\/\/opengameart.org\/sites\/default\/files\/styles\/medium\/public\/spaceship.png\">http:\/\/opengameart.org\/sites\/default\/files\/styles\/medium\/public\/spaceship.png<\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"height: 88.7017px;\">\n<td style=\"height: 88.7017px;\">\n<p><a href=\"http:\/\/www.acarlstein.com\/?attachment_id=3594\" rel=\"attachment wp-att-3594\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-3594 alignleft\" src=\"http:\/\/www.elblender.com\/wordpress\/wp-content\/uploads\/2016\/11\/M484BulletCollection1.png\" alt=\"m484bulletcollection1\" width=\"86\" height=\"60\" srcset=\"http:\/\/blog.acarlstein.com\/wp-content\/uploads\/2016\/11\/M484BulletCollection1.png 520w, http:\/\/blog.acarlstein.com\/wp-content\/uploads\/2016\/11\/M484BulletCollection1-300x208.png 300w\" sizes=\"auto, (max-width: 86px) 100vw, 86px\" \/><\/a>Art Author: Master484<\/p>\n<p>Url: <a href=\"http:\/\/opengameart.org\/sites\/default\/files\/M484BulletCollection1.png\">http:\/\/opengameart.org\/sites\/default\/files\/M484BulletCollection1.png<\/a><\/p>\n<p>&nbsp;<\/p>\n<\/td>\n<\/tr>\n<tr style=\"height: 88.7017px;\">\n<td style=\"height: 88.7017px;\">\n<p><a href=\"http:\/\/www.elblender.com\/wordpress\/wp-content\/uploads\/2016\/11\/bg5.jpg\" rel=\"attachment wp-att-3596\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-3603\" src=\"http:\/\/www.elblender.com\/wordpress\/wp-content\/uploads\/2016\/11\/bg5.jpg\" width=\"81\" height=\"65\" srcset=\"http:\/\/blog.acarlstein.com\/wp-content\/uploads\/2016\/11\/bg5.jpg 1280w, http:\/\/blog.acarlstein.com\/wp-content\/uploads\/2016\/11\/bg5-300x240.jpg 300w, http:\/\/blog.acarlstein.com\/wp-content\/uploads\/2016\/11\/bg5-768x614.jpg 768w, http:\/\/blog.acarlstein.com\/wp-content\/uploads\/2016\/11\/bg5-1024x819.jpg 1024w\" sizes=\"auto, (max-width: 81px) 100vw, 81px\" \/><\/a>Art Author: Cuzco<br \/>\n Url:\u00a0<a href=\"http:\/\/opengameart.org\/sites\/default\/files\/bg5.jpg\">http:\/\/opengameart.org\/sites\/default\/files\/bg5.jpg<\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"height: 88.7017px;\">\n<td style=\"height: 88.7017px;\">\n<p><a href=\"http:\/\/www.acarlstein.com\/?attachment_id=3598\" rel=\"attachment wp-att-3598\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft  wp-image-3598\" src=\"http:\/\/www.elblender.com\/wordpress\/wp-content\/uploads\/2016\/11\/Spaceship_tut.png\" alt=\"spaceship_tut\" width=\"80\" height=\"118\" \/><\/a>Art Author: Skorpio<br \/>\n Url:\u00a0<a href=\"http:\/\/opengameart.org\/sites\/default\/files\/styles\/medium\/public\/Spaceship_tut.png\">http:\/\/opengameart.org\/sites\/default\/files\/styles\/medium\/public\/Spaceship_tut.png<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Player: Enemies: Image + Animation<\/strong><\/p>\n<p class='codepen'  data-height='300' data-theme-id='1' data-slug-hash='MjNLBQ' data-default-tab='html' data-animations='run' data-editable='' data-embed-version='2'>\n See the Pen Quintus: Player: Enemies: Image + Animation  on CodePen <\/p>\n\n<p>&nbsp;<\/p>\n<p><strong>Player: Shots: Throttling<\/strong><\/p>\n<p class='codepen'  data-height='300' data-theme-id='1' data-slug-hash='ameXLa' data-default-tab='html' data-animations='run' data-editable='' data-embed-version='2'>\n See the Pen Quintus: Player: Shots: Throttling on CodePen <\/p>\n\n<p>\n <strong>Player: Shots: Refactoring<\/strong><\/p>\n<p class='codepen'  data-height='300' data-theme-id='1' data-slug-hash='Zpgwea' data-default-tab='html' data-animations='run' data-editable='' data-embed-version='2'>\n See the Pen Quintus: Player: Shots: Refactoring on CodePen <\/p>\n\n<p>&nbsp;<\/p>\n<p><strong>Player: Gun: Refactoring<\/strong><\/p>\n<p class='codepen'  data-height='300' data-theme-id='1' data-slug-hash='rMXPMp' data-default-tab='html' data-animations='run' data-editable='' data-embed-version='2'>\n See the Pen Quintus: Player: Gun: Refactoring on CodePen <\/p>\n\n<p>&nbsp;<\/p>\n<p><strong>Player: Gun: Shots Movement<\/strong><\/p>\n<p class='codepen'  data-height='300' data-theme-id='1' data-slug-hash='wzVGwK' data-default-tab='html' data-animations='run' data-editable='' data-embed-version='2'>\n See the Pen Quintus: Player: Gun: Shots Movement on CodePen <\/p>\n\n<p>&nbsp;<\/p>\n<p><strong>Player: Gun<\/strong><\/p>\n<p class='codepen'  data-height='300' data-theme-id='1' data-slug-hash='jMgWxW' data-default-tab='html' data-animations='run' data-editable='' data-embed-version='2'>\n See the Pen Quintus: Player: Gun on CodePen <\/p>\n\n<p>&nbsp;<\/p>\n<p><strong>Player: Shot<\/strong><\/p>\n<p class='codepen'  data-height='300' data-theme-id='1' data-slug-hash='bwXVoj' data-default-tab='html' data-animations='run' data-editable='' data-embed-version='2'>\n See the Pen Quintus: Player: Shot on CodePen <\/p>\n\n<p>&nbsp;<\/p>\n<p><strong>Control: Customization<\/strong><\/p>\n<p class='codepen'  data-height='300' data-theme-id='1' data-slug-hash='jMgbye' data-default-tab='html' data-animations='run' data-editable='' data-embed-version='2'>\n See the Pen Quintus: Control: Customization on CodePen <\/p>\n\n<p>\n <strong>Scene Module<\/strong><\/p>\n<p class='codepen'  data-height='300' data-theme-id='1' data-slug-hash='LRwEKg' data-default-tab='html' data-animations='run' data-editable='' data-embed-version='2'>\n See the Pen Quintus: Scene Module on CodePen <\/p>\n\n<p>&nbsp;<\/p>\n<p><strong>Sprites: Player: Movement: Boundaries<\/strong><\/p>\n<p class='codepen'  data-height='300' data-theme-id='1' data-slug-hash='vXoBOq' data-default-tab='html' data-animations='run' data-editable='' data-embed-version='2'>\n See the Pen Quintus: Sprites: Player: Movement: Boundaries on CodePen <\/p>\n\n<p>&nbsp;<\/p>\n<p><strong>Sprites: Player: Movement<\/strong><\/p>\n<p class='codepen'  data-height='300' data-theme-id='1' data-slug-hash='KgOPPW' data-default-tab='html' data-animations='run' data-editable='' data-embed-version='2'>\n See the Pen Quintus: Sprites: Player: Movement on CodePen <\/p>\n\n<p>&nbsp;<\/p>\n<p><strong>Sprites: Player: Input<\/strong><\/p>\n<p class='codepen'  data-height='300' data-theme-id='1' data-slug-hash='OReKYP' data-default-tab='html' data-animations='run' data-editable='' data-embed-version='2'>\n See the Pen Quintus: Sprites: Player: Input on CodePen <\/p>\n\n<p>&nbsp;<\/p>\n<p><strong>Sprite: Player: Animation<\/strong><\/p>\n<p class='codepen'  data-height='300' data-theme-id='1' data-slug-hash='KgjZvz' data-default-tab='html' data-animations='run' data-editable='' data-embed-version='2'>\n See the Pen Quintus: Sprites: Player: Animation on CodePen <\/p>\n\n<p>&nbsp;<\/p>\n<p><strong>Sprite: Player<\/strong><\/p>\n<p class='codepen'  data-height='300' data-theme-id='1' data-slug-hash='qaGwgL' data-default-tab='html' data-animations='run' data-editable='' data-embed-version='2'>\n See the Pen Quintus: Sprites: Player on CodePen <\/p>\n\n<p>&nbsp;<\/p>\n<p><strong>Background<\/strong><\/p>\n<p class='codepen'  data-height='300' data-theme-id='1' data-slug-hash='WGBWKG' data-default-tab='html' data-animations='run' data-editable='' data-embed-version='2'>\n See the Pen Quintus: Background on CodePen <\/p>\n\n<p>\n <strong>Basic<\/strong><\/p>\n<p class='codepen'  data-height='300' data-theme-id='1' data-slug-hash='QKRPdy' data-default-tab='html' data-animations='run' data-editable='' data-embed-version='2'>\n See the Pen Quintus: Basic on CodePen <\/p>\n\n<p>&nbsp;<\/p>\n\n<script>\nvar zbPregResult = '0';\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>My Notes and Code Examples (in CodePen.io) Recently, I started to use the website CodePen in order to share code examples; as well as, making notes of random things I am learning in my speared time. Currently, I am experimenting with this game framework\/library called Quintus The order goes from the newest, down to the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,19,1468],"tags":[1470,1211,1222,1469,1471],"class_list":["post-3575","post","type-post","status-publish","format-standard","hentry","category-2d-game","category-programming","category-quintus-js","tag-html5","tag-javascript","tag-jquery","tag-quintus","tag-video-game"],"_links":{"self":[{"href":"http:\/\/blog.acarlstein.com\/index.php?rest_route=\/wp\/v2\/posts\/3575","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/blog.acarlstein.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.acarlstein.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.acarlstein.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.acarlstein.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3575"}],"version-history":[{"count":21,"href":"http:\/\/blog.acarlstein.com\/index.php?rest_route=\/wp\/v2\/posts\/3575\/revisions"}],"predecessor-version":[{"id":3604,"href":"http:\/\/blog.acarlstein.com\/index.php?rest_route=\/wp\/v2\/posts\/3575\/revisions\/3604"}],"wp:attachment":[{"href":"http:\/\/blog.acarlstein.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3575"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.acarlstein.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3575"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.acarlstein.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3575"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}