7 |
8 | ##### Play [here](http://tuliocll.github.io/supermariojs/)
9 |
--------------------------------------------------------------------------------
/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/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; }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | jump
44 |left
51 |right
52 |start
53 |