├── LICENSE ├── README.md ├── audio ├── 3b31f0bf5d008849d181aadbf6bda791.png ├── f65afb18c59b49e6148b54ec0f48ce26.png ├── smb_background.mp3 ├── smb_coin.wav └── smb_jump-small.wav ├── index.html ├── package.json ├── preview.png └── src ├── engine ├── coin.js ├── fonts │ └── pressStart.ttf ├── graphics │ ├── block.png │ ├── coin │ │ ├── coin_1.gif │ │ ├── coin_2.gif │ │ ├── coin_3.gif │ │ └── coin_4.gif │ ├── fundo.jpg │ ├── mario │ │ ├── jump │ │ │ ├── jumping.png │ │ │ └── jumping_left.png │ │ └── walk │ │ │ ├── left │ │ │ ├── 1.gif │ │ │ ├── 2.gif │ │ │ └── 3.gif │ │ │ └── right │ │ │ ├── 1.gif │ │ │ ├── 2.gif │ │ │ └── 3.gif │ └── menu │ │ ├── logo_menu.png │ │ └── selector_icon.png └── styles │ ├── estilo.css │ └── nes_bkg.png └── index.js /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Language](https://img.shields.io/badge/Language-Javascript-yellow.svg)](https://github.com/topics/javascript) 2 | # supermariojs 3 | Super Mario Bros with Javascript 4 | 5 | ##### (under development). 6 | Super Mario JS preview 7 | 8 | ##### Play [here](http://tuliocll.github.io/supermariojs/) 9 | -------------------------------------------------------------------------------- /audio/3b31f0bf5d008849d181aadbf6bda791.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuliocll/supermariojs/fd2ede84a27171d322f4174d336e44f67e7997e8/audio/3b31f0bf5d008849d181aadbf6bda791.png -------------------------------------------------------------------------------- /audio/f65afb18c59b49e6148b54ec0f48ce26.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuliocll/supermariojs/fd2ede84a27171d322f4174d336e44f67e7997e8/audio/f65afb18c59b49e6148b54ec0f48ce26.png -------------------------------------------------------------------------------- /audio/smb_background.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuliocll/supermariojs/fd2ede84a27171d322f4174d336e44f67e7997e8/audio/smb_background.mp3 -------------------------------------------------------------------------------- /audio/smb_coin.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuliocll/supermariojs/fd2ede84a27171d322f4174d336e44f67e7997e8/audio/smb_coin.wav -------------------------------------------------------------------------------- /audio/smb_jump-small.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuliocll/supermariojs/fd2ede84a27171d322f4174d336e44f67e7997e8/audio/smb_jump-small.wav -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Super Mario JS by Tulio Calil 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 | 21 |
22 |
23 | Fork 24 | Star 25 | Follow @tuliocll 26 |
27 |
28 |
29 | 30 | Debug 31 | 32 |
33 |
34 | 35 |
36 | 37 |
38 |
39 |
40 |
41 |
How to play
42 |
43 |

jump

44 |
45 | 46 | W 47 | 48 |
49 |
50 |

left

51 |

right

52 |

start

53 |
54 |
55 |
56 | 57 | A 58 | 59 |
60 |
61 | 62 | 63 | 64 |
65 |
66 | 67 | D 68 | 69 |
70 | 71 |
72 | 73 | Enter 74 | 75 |
76 |
77 |
78 |
79 | 80 |
81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mariojs", 3 | "version": "1.0.0", 4 | "description": "Super Mario JS", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "Tulio Calil", 10 | "license": "ISC" 11 | } 12 | -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuliocll/supermariojs/fd2ede84a27171d322f4174d336e44f67e7997e8/preview.png -------------------------------------------------------------------------------- /src/engine/coin.js: -------------------------------------------------------------------------------- 1 | /* coin item animated */ 2 | /***super mario js*****/ 3 | const Coin = function(x, y, finalPosY) { 4 | this.x = x; 5 | this.y = y; 6 | this.finalPosY = finalPosY; 7 | 8 | const coinFrames = ["src/engine/graphics/coin/coin_1.gif", 9 | "src/engine/graphics/coin/coin_2.gif", 10 | "src/engine/graphics/coin/coin_3.gif", 11 | "src/engine/graphics/coin/coin_4.gif"]; 12 | 13 | const coinValue = 200; 14 | 15 | preLoad(coinFrames); 16 | 17 | return { 18 | //drop coin when hit the mistery box 19 | dropCoin: () => { 20 | return {name: "coin", posx: this.x, posy: this.y, value: coinValue, frames: coinFrames, img: new Image, index: 0, finalPosY: this.finalPosY}; 21 | }, 22 | //create the coin on the stage, i will create this someday 23 | createCoin: () => { 24 | 25 | } 26 | } 27 | 28 | //preload the images 29 | function preLoad(object){ 30 | var img = new Array(); 31 | 32 | for(var i=0; i < object.length; i++){ 33 | img[i] = new Image(); 34 | img[i].src = object[i]; 35 | } 36 | } 37 | } -------------------------------------------------------------------------------- /src/engine/fonts/pressStart.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuliocll/supermariojs/fd2ede84a27171d322f4174d336e44f67e7997e8/src/engine/fonts/pressStart.ttf -------------------------------------------------------------------------------- /src/engine/graphics/block.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuliocll/supermariojs/fd2ede84a27171d322f4174d336e44f67e7997e8/src/engine/graphics/block.png -------------------------------------------------------------------------------- /src/engine/graphics/coin/coin_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuliocll/supermariojs/fd2ede84a27171d322f4174d336e44f67e7997e8/src/engine/graphics/coin/coin_1.gif -------------------------------------------------------------------------------- /src/engine/graphics/coin/coin_2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuliocll/supermariojs/fd2ede84a27171d322f4174d336e44f67e7997e8/src/engine/graphics/coin/coin_2.gif -------------------------------------------------------------------------------- /src/engine/graphics/coin/coin_3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuliocll/supermariojs/fd2ede84a27171d322f4174d336e44f67e7997e8/src/engine/graphics/coin/coin_3.gif -------------------------------------------------------------------------------- /src/engine/graphics/coin/coin_4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuliocll/supermariojs/fd2ede84a27171d322f4174d336e44f67e7997e8/src/engine/graphics/coin/coin_4.gif -------------------------------------------------------------------------------- /src/engine/graphics/fundo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuliocll/supermariojs/fd2ede84a27171d322f4174d336e44f67e7997e8/src/engine/graphics/fundo.jpg -------------------------------------------------------------------------------- /src/engine/graphics/mario/jump/jumping.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuliocll/supermariojs/fd2ede84a27171d322f4174d336e44f67e7997e8/src/engine/graphics/mario/jump/jumping.png -------------------------------------------------------------------------------- /src/engine/graphics/mario/jump/jumping_left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuliocll/supermariojs/fd2ede84a27171d322f4174d336e44f67e7997e8/src/engine/graphics/mario/jump/jumping_left.png -------------------------------------------------------------------------------- /src/engine/graphics/mario/walk/left/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuliocll/supermariojs/fd2ede84a27171d322f4174d336e44f67e7997e8/src/engine/graphics/mario/walk/left/1.gif -------------------------------------------------------------------------------- /src/engine/graphics/mario/walk/left/2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuliocll/supermariojs/fd2ede84a27171d322f4174d336e44f67e7997e8/src/engine/graphics/mario/walk/left/2.gif -------------------------------------------------------------------------------- /src/engine/graphics/mario/walk/left/3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuliocll/supermariojs/fd2ede84a27171d322f4174d336e44f67e7997e8/src/engine/graphics/mario/walk/left/3.gif -------------------------------------------------------------------------------- /src/engine/graphics/mario/walk/right/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuliocll/supermariojs/fd2ede84a27171d322f4174d336e44f67e7997e8/src/engine/graphics/mario/walk/right/1.gif -------------------------------------------------------------------------------- /src/engine/graphics/mario/walk/right/2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuliocll/supermariojs/fd2ede84a27171d322f4174d336e44f67e7997e8/src/engine/graphics/mario/walk/right/2.gif -------------------------------------------------------------------------------- /src/engine/graphics/mario/walk/right/3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuliocll/supermariojs/fd2ede84a27171d322f4174d336e44f67e7997e8/src/engine/graphics/mario/walk/right/3.gif -------------------------------------------------------------------------------- /src/engine/graphics/menu/logo_menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuliocll/supermariojs/fd2ede84a27171d322f4174d336e44f67e7997e8/src/engine/graphics/menu/logo_menu.png -------------------------------------------------------------------------------- /src/engine/graphics/menu/selector_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuliocll/supermariojs/fd2ede84a27171d322f4174d336e44f67e7997e8/src/engine/graphics/menu/selector_icon.png -------------------------------------------------------------------------------- /src/engine/styles/estilo.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face { 3 | font-family: 'pressStart'; 4 | src: url('../fonts/pressStart.ttf'); /* IE9 Compat Modes */ 5 | src: url('../fonts/pressStart.ttf') format('embedded-opentype'), /* IE6-IE8 */ 6 | url('../fonts/pressStart.ttf') format('woff2'), /* Super Modern Browsers */ 7 | url('../fonts/pressStart.ttf') format('woff'), /* Pretty Modern Browsers */ 8 | url('../fonts/pressStart.ttf') format('truetype'), /* Safari, Android, iOS */ 9 | url('../fonts/pressStart.ttf') format('svg'); /* Legacy iOS */ 10 | } 11 | body{ 12 | font-family: 'pressStart', cursive; 13 | background: #C6FFDD; /* fallback for old browsers */ 14 | background: -webkit-linear-gradient(to right, #f7797d, #FBD786, #C6FFDD); /* Chrome 10-25, Safari 5.1-6 */ 15 | background: linear-gradient(to right, #f7797d, #FBD786, #C6FFDD); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 16 | 17 | } 18 | 19 | .noselect { 20 | -webkit-touch-callout: none; /* iOS Safari */ 21 | -webkit-user-select: none; /* Safari */ 22 | -khtml-user-select: none; /* Konqueror HTML */ 23 | -moz-user-select: none; /* Firefox */ 24 | -ms-user-select: none; /* Internet Explorer/Edge */ 25 | user-select: none; /* Non-prefixed version, currently 26 | supported by Chrome and Opera */ 27 | } 28 | 29 | 30 | /*************** 31 | css minimal keyboard keys BY Rizky Kurniawan Ritonga 32 | check it on Codepen: https://codepen.io/rizkykurniawanritonga/pen/wospJ 33 | ***************/ 34 | * { outline: none !important; } 35 | a, a:visited, a:hover, a:active { text-decoration: none; color: inherit; } 36 | 37 | div.key 38 | { 39 | width:35px; 40 | height: 37px; 41 | padding: 1px; 42 | margin: 10px; 43 | } 44 | div.key > span 45 | { 46 | background-color: #fff; /* only a modification */ 47 | display: block; 48 | width: 35px; 49 | height: 35px; 50 | border: 1px solid #a9a9a9; 51 | border-radius: 2px 2px 2px 2px; 52 | -moz-border-radius: 2px 2px 2px 2px; 53 | -webkit-border-radius: 2px 2px 2px 2px; 54 | font-size: 12px; 55 | -moz-box-sizing: border-box !important; 56 | -webkit-box-sizing: border-box !important; 57 | box-sizing: border-box !important; 58 | text-align: center; 59 | padding-top: 10px; 60 | color: #7c7c7c; 61 | -webkit-box-shadow: 0px 3px 0px -2px rgba(255,255,255,1), 0px 2px 0px 0px rgba(169,169,169,1); 62 | -moz-box-shadow: 0px 3px 0px -2px rgba(255,255,255,1), 0px 2px 0px 0px rgba(169,169,169,1); 63 | box-shadow: 0px 3px 0px -2px rgba(255,255,255,1), 0px 2px 0px 0px rgba(169,169,169,1); 64 | cursor: pointer; 65 | } 66 | 67 | div.key > span:hover 68 | { 69 | background-color: #75b4fb; 70 | border: 1px solid #5a88c5; 71 | color: #fff; 72 | text-shadow: 1px 1px 1px rgba(0,0,0,0.2); 73 | -webkit-box-shadow: 0px 3px 0px -2px rgba(117,180,251,1), 0px 2px 0px 0px rgba(90,136,197,1); 74 | -moz-box-shadow: 0px 3px 0px -2px rgba(117,180,251,1), 0px 2px 0px 0px rgba(90,136,197,1); 75 | box-shadow: 0px 3px 0px -2px rgba(117,180,251,1), 0px 2px 0px 0px rgba(90,136,197,1); 76 | cursor: pointer; 77 | } 78 | 79 | div.key > span:active 80 | { 81 | margin-top: 2px; 82 | box-shadow: none; 83 | -moz-box-shadow: none; 84 | -webkit-box-shadow: none; 85 | } 86 | 87 | div.key.special > span 88 | { 89 | padding-top: 15px; 90 | font-size: 11px; 91 | } 92 | 93 | div.key.icon > span 94 | { 95 | font-size: 14px; 96 | } 97 | center > h4 { color: #c5c5c5; margin-top: 50px; } 98 | body { margin: 0; font-family: Arial; background-color: #fff; } 99 | ul#keys-freebie { display: table; list-style: none; margin: 0 auto; padding: 0; } 100 | ul#keys-freebie > li { float: left; margin-right: 20px; margin-bottom: 20px; padding: 10px 10px; } 101 | ul#keys-freebie > li:last-child { margin-right: 0; } 102 | ul#keys-freebie > li > span { margin-bottom: 10px; } -------------------------------------------------------------------------------- /src/engine/styles/nes_bkg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuliocll/supermariojs/fd2ede84a27171d322f4174d336e44f67e7997e8/src/engine/styles/nes_bkg.png -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | *****Super marario js 3 | **tulio calil 4 | */ 5 | 6 | //Canvas configuration 7 | var canvasConfig = { 8 | height: 500, 9 | width: 1000 10 | } 11 | //Setup the canvas on the html page 12 | var canvas = document.getElementById("jogo"); 13 | canvas.height = canvasConfig.height; 14 | canvas.width = canvasConfig.width; 15 | //Get the canvas context 16 | var contexto = canvas.getContext("2d"); 17 | 18 | //Config the objets that will rendered 19 | //on the scene 20 | var objectsScene = {}; 21 | var animationSceneRender = true; 22 | var objSceneCount = 0; 23 | //Audio load 24 | var backgroundAudio = new Audio('audio/smb_background.mp3'); 25 | var audioJump = new Audio('audio/smb_jump-small.wav'); 26 | var audioCoin = new Audio('audio/smb_coin.wav'); 27 | //Show some debug options on scren and on console 28 | var debug = false; 29 | //if menu is enabled or not 30 | var menu = true; 31 | //get the floor limit, i will use this for the 32 | //death system in the future 33 | var floor = canvasConfig.height - 128; 34 | //Player sprite config 35 | var playerSprite = new Image; 36 | playerSprite.src = "src/engine/graphics/mario/jump/jumping.png"; 37 | var menuLogo = new Image; 38 | menuLogo.src = "src/engine/graphics/menu/logo_menu.png"; 39 | var iconSelector = new Image; 40 | iconSelector.src = "src/engine/graphics/menu/selector_icon.png"; 41 | var background = new Image; 42 | background.src = "src/engine/graphics/fundo.jpg"; 43 | var misteryBlock = new Image; 44 | misteryBlock.src = "src/engine/graphics/block.png"; 45 | 46 | //I will update this after, make the sprite and 47 | //config in one object like the coin object 48 | var misteryBlockConfig = { 49 | width: 40, 50 | height: 40, 51 | posX: 750, 52 | posY: 300, 53 | } 54 | 55 | //Animation controller for player 56 | //I will update this after, make the sprite and 57 | //config in one object like the coin object 58 | var playerAnim = { 59 | framesRight:["src/engine/graphics/mario/walk/right/1.gif", 60 | "src/engine/graphics/mario/walk/right/2.gif", 61 | "src/engine/graphics/mario/walk/right/3.gif",], 62 | framesLeft:["src/engine/graphics/mario/walk/left/1.gif", 63 | "src/engine/graphics/mario/walk/left/2.gif", 64 | "src/engine/graphics/mario/walk/left/3.gif",], 65 | framesJump: ["src/engine/graphics/mario/jump/jumping.png", 66 | "src/engine/graphics/mario/jump/jumping_left.png"], 67 | index: 0, 68 | height: 60, 69 | width: 40, 70 | direction: 1, 71 | } 72 | 73 | preLoad(playerAnim.framesRight); 74 | preLoad(playerAnim.framesLeft); 75 | preLoad(playerAnim.framesJump); 76 | 77 | //Object that receive the player input 78 | //and store to use in the controller 79 | var keyMapController = {}; 80 | //Player object, store the positions, 81 | //if grounded, points and more options. 82 | var player = { 83 | posX: 1, 84 | posY: 1, 85 | grounded: false, 86 | velocity: 5, 87 | points: 0, 88 | walking: false, 89 | blockCollider: false, 90 | } 91 | 92 | //Update interval for controller 93 | //and animations 94 | setInterval(function(){ 95 | controllerListener(); 96 | }, 30); 97 | setInterval(function(){ 98 | animation(); 99 | }, 50); 100 | 101 | //Start the game when load complete. 102 | window.onload = function() { 103 | if(!menu){ 104 | startGame(); 105 | }else{ 106 | drawMenu(); 107 | } 108 | }; 109 | 110 | function startGame(){ 111 | draw(player.posX,player.posY); 112 | gravity(); 113 | backgroundAudio.load(); 114 | backgroundAudio.play(); 115 | } 116 | 117 | function enableGravity(x) { 118 | return new Promise(resolve => { 119 | setTimeout(() => { 120 | player.posY += x; 121 | if(playerAnim.direction === 1 && player.walking){ 122 | // player.posX += x*0.4; 123 | }else if(playerAnim.direction === -1 && player.walking){ 124 | // player.posX -= x*0.4; 125 | } 126 | draw(player.posX, player.posY); 127 | gravity(); 128 | }, 10); 129 | }); 130 | } 131 | 132 | function jump(y) { 133 | return new Promise(resolve => { 134 | setTimeout(() => { 135 | player.posY -= y; 136 | draw(player.posX, player.posY); 137 | jumping(); 138 | }, 10); 139 | }); 140 | } 141 | 142 | 143 | function jumping() { 144 | if(player.posY > floor-100){ 145 | player.grounded = false; 146 | //check if colission with block 147 | if(!checkBlockCollision()){ 148 | player.blockCollider = false; 149 | jump(3); 150 | }else{ 151 | player.blockCollider = true; 152 | } 153 | }else{ 154 | gravity(); 155 | } 156 | } 157 | 158 | //I will modificate this function cause 159 | //acutuly he check just one object (misteryBlock) 160 | //and i its need to check all, include the coins 161 | function checkBlockCollision(){ 162 | var xmin = (misteryBlockConfig.posX - misteryBlockConfig.width); 163 | var xmax = (misteryBlockConfig.posX + misteryBlockConfig.width) -10; 164 | var ymin = (misteryBlockConfig.posY - misteryBlockConfig.height); 165 | var ymax = (misteryBlockConfig.posY + misteryBlockConfig.height); 166 | 167 | var xminH = (misteryBlockConfig.posX - misteryBlockConfig.width) - 5; 168 | var xmaxH = (misteryBlockConfig.posX + misteryBlockConfig.width) -10; 169 | var yminH = (misteryBlockConfig.posY - misteryBlockConfig.height); 170 | var ymaxH = (misteryBlockConfig.posY + misteryBlockConfig.height) -5; 171 | 172 | var collision = false; 173 | if(player.posX >= xminH && player.posX <= xmaxH){ 174 | if(player.posY >= yminH && player.posY <= ymaxH){ 175 | console.log("lado"); 176 | collision = true; 177 | player.walking = false; 178 | gravity(); 179 | } 180 | } 181 | if(!collision){ 182 | if(player.posX >= xmin && player.posX <= xmax){ 183 | if(player.posY >= ymin && player.posY <= ymax){ 184 | //hit the misteryBlock and drop coins 185 | if(!player.grounded){ 186 | //instantiate the coin 187 | var a = new Coin(misteryBlockConfig.posX, misteryBlockConfig.posY-misteryBlockConfig.height, misteryBlockConfig.posY-70); 188 | var coin = a.dropCoin(); 189 | objectsScene[objSceneCount] = coin; 190 | objSceneCount++; 191 | audioCoin.load(); 192 | audioCoin.play(); 193 | player.points += 200; 194 | collision = true; 195 | player.walking = false; 196 | gravity(); 197 | } 198 | } 199 | } 200 | } 201 | return collision; 202 | } 203 | 204 | function gravity() { 205 | if(player.posY < floor){ 206 | enableGravity(3); 207 | }else{ 208 | //set the grounded state, sprite and direction 209 | player.grounded = true; 210 | player.walking = false; 211 | if(playerAnim.direction === -1 && !player.walking){ 212 | playerSprite.src = playerAnim.framesLeft[2]; 213 | }else if(playerAnim.direction === 1 && !player.walking){ 214 | playerSprite.src = playerAnim.framesRight[2]; 215 | } 216 | draw(player.posX, player.posY); 217 | } 218 | } 219 | 220 | onkeydown = onkeyup = function(e){ 221 | e = e || event; 222 | keyMapController[e.keyCode] = e.type == 'keydown'; 223 | 224 | if(e.type === 'keyup'){ 225 | if(player.grounded){ 226 | player.walking = false; 227 | if(playerAnim.direction === -1 && !player.walking){ 228 | playerSprite.src = playerAnim.framesLeft[2]; 229 | }else if(playerAnim.direction === 1 && !player.walking){ 230 | playerSprite.src = playerAnim.framesRight[2]; 231 | } 232 | draw(player.posX, player.posY); 233 | } 234 | } 235 | } 236 | 237 | //animte objects in objectsScene 238 | function animation(){ 239 | if(!menu){ 240 | Object.keys(objectsScene).forEach(function (key) { 241 | var posYTemp = objectsScene[key].posy; 242 | if(objectsScene[key].index < objectsScene[key].frames.length){ 243 | objectsScene[key].img.src = objectsScene[key].frames[objectsScene[key].index]; 244 | objectsScene[key].index ++; 245 | }else{ 246 | objectsScene[key].index = 0; 247 | } 248 | if(objectsScene[key].finalPosY != 0){ 249 | console.log(objectsScene[key].posy, objectsScene[key].finalPosY); 250 | if(objectsScene[key].posy < objectsScene[key].finalPosY){ 251 | objectsScene[key].posy += 3; 252 | if(objectsScene[key].posy >= objectsScene[key].finalPosY){ 253 | delete objectsScene[key]; 254 | } 255 | }else if(objectsScene[key].posy > objectsScene[key].finalPosY){ 256 | objectsScene[key].posy -= 3; 257 | if(objectsScene[key].posy <= objectsScene[key].finalPosY){ 258 | delete objectsScene[key]; 259 | } 260 | } 261 | } 262 | draw(player.posX, player.posY); 263 | }); 264 | } 265 | } 266 | 267 | function draw(x,y) { 268 | contexto.restore(); 269 | contexto.drawImage(background, 0, 0, canvasConfig.width, canvasConfig.height); 270 | contexto.drawImage(playerSprite, x, y, playerAnim.width, playerAnim.height); 271 | 272 | //mistery block 273 | contexto.drawImage(misteryBlock, misteryBlockConfig.posX, 274 | misteryBlockConfig.posY, misteryBlockConfig.width, misteryBlockConfig.height); 275 | 276 | contexto.font = '20px pressStart'; 277 | contexto.fillStyle = 'white'; 278 | contexto.fillText ('Mario', 20, 30); 279 | contexto.fillText (("000000" + player.points).slice(-6), 20, 55); 280 | 281 | //draw objects in the objectsScene 282 | Object.keys(objectsScene).forEach(function (key) { 283 | contexto.drawImage(objectsScene[key].img, objectsScene[key].posx, objectsScene[key].posy, 40, 40); 284 | }); 285 | 286 | //Debug show player position on the canvas 287 | if(debug){ 288 | contexto.fillText ('posX ' + player.posX, 20, 76); 289 | contexto.fillText ('posY ' + player.posY, 20, 96); 290 | } 291 | contexto.save() 292 | } 293 | 294 | //Draw the menu screen 295 | function drawMenu() { 296 | if(menu){ 297 | contexto.drawImage(background, 0, 0, canvasConfig.width, canvasConfig.height); 298 | contexto.drawImage(playerSprite, 10, 355, playerAnim.width, playerAnim.height); 299 | contexto.drawImage(menuLogo, 200, 5, 600, 280); 300 | contexto.drawImage(iconSelector, 345, 334, 20, 20); 301 | 302 | contexto.font = '20px pressStart'; 303 | contexto.fillStyle = 'white'; 304 | contexto.fillText ('MARIO', 20, 30); 305 | contexto.fillText ('2019 TULIO CALIL', 485, 307); 306 | contexto.fillText ('1 PLAYER GAME', 385, 355); 307 | contexto.fillStyle = 'grey'; 308 | contexto.fillText ('2 PLAYER GAME', 385, 395); 309 | contexto.fillStyle = 'white'; 310 | contexto.fillText (("000000" + player.points).slice(-6), 20, 55); 311 | } 312 | } 313 | 314 | //Listener the key status on the 315 | //keyObjectController to do the actions 316 | function controllerListener() { 317 | //Right 318 | if(!menu){ 319 | if(keyMapController[68]){ 320 | if(player.grounded){ 321 | player.walking = true; 322 | player.posX += player.velocity; 323 | playerAnim.direction = 1; 324 | if(playerAnim.index