meth-meth-method / super-mario Goto Github PK

When there is no ground in an underwater world, there should be a down current dragging mario down. It also pulls mario sideways 1 block next to hole.

In castle levels, bowsers fire can appear in the level without being near bowser.

I'm curious why you chose to define level.background.ranges as arrays rather than objects with x1, x2, y1, and y2 properties?

I do like the use of destructuring into named variables in:

background.ranges.forEach(([x1, x2, y1, y2]) => { // ...

... but you could still use object destructuring, with the object's properties:

background.ranges.forEach(({ x1, x2, y1, y2 }) => { // ...

Enjoyed the video. Thanks!

Points should be added to various actions across the game and should be shown with the 8x4 /img/points.png font.

Create piranha plant, emerging from pipes.
Plant should not emerge when mario is next to or on top of a pipe.
Can be killed with fire balls.

When jumped on the axe and Bowser dies, Mario should animate down into the room behind Bowser, print text on the screen and progress to the next level.

Dependant on #98

We need 4 types of moving platforms.

1, one that goes on a track in one direction, as seen in level 1-2.

2, one that goes up and down in a pendulum move, as seen in level 1-3.

3, one that is suspended from ropes and move the other platform, and breaks loose both platforms when maxum bottom is reached, as seen in level 4-3.

4, one that goes from side to side as seen in castle

I had a problem with the timing on Firefox. It was driving me crazy : "Why it's working perfectly fine on chrome, but not in FF ??". In chrome the jump was smooth, but in FF it's was like Mario started near the end of the jump.

Firefox doesn't start as quickly as Chrome, so each time a launched the timer, mario was already near the end when it rendered the canvas.

First start - time : 746 (FF), 117 (Chrome), so i came up with :
it needed to render 42 Frames for Firefox vs 7 Frames for chrome.

this.updateProxy = (time) => {
	if (lastTime != 0) {
		accumulatedTime += (time - lastTime) / 1000;		
		while(accumulatedTime > deltaTime) {
			this.update(deltaTime);
			accumulatedTime -= deltaTime;
		}
	}
	
	lastTime = time;
	this.enqueue();
}

use the pixels of a .png image to build the design of the levels. for example a red pixel for a brick and a blue pixel for a turtle. With image analysis rather than level json

Koopa paratroopa needs a trait that makes him fly.
He will fly up and down within a given min and max on the Y axis.

Fake Bowser sits in the end of each *-4 level.
He jumps, open his mouth and spits fire.

64x64 sprite.

Can be killed with 5 fireballs, revealing its true enemy upon death or by stomping the axe, removing the bridge and falls down into lava.

1-4: Little Goomba - fire
2-4: Green Koopa Troopa - fire
3-4: Buzzy Beetle - fire
4-4: Spiny - fire
5-4: Lakitu - fire
6-4: Bloober - fire + hammer
7-4: Hammer Brother - fire + hammer

Video of all bowsers: https://www.youtube.com/watch?v=2Wr4G1_L1mM

If speed is defined in pixels per seconds, there is no need to multiply it by deltaTime to set velocity of entity.

And if you are pressing key, you want Mario move with constant velocity.

Castles has a firebar, consisting of fireballs.

A firebar consists of 6 or 12 animated fireballs, and rotate either clockwise or counter clockwise, around the center of a tile, shown or not.

Only level 5-4 uses the 12-length firebar.

Use Web Audio API in favor for basic playback embedding with HTML5 Audio element.

The Web Audio API offers more capabilites than the HTML5 Audio element and in our use case it is critical to create seamless looping of super mario music.

Jake Archibald did a write up on the subject in 2016: https://jakearchibald.com/2016/sounds-fun/

Looping: https://webaudio.github.io/web-audio-api/#looping-AudioBufferSourceNode

also in lines 37, 67 and 74:

You change the bounding box in a collision check. This can't be right.
I solved this error in my typescript Version at https://just-run.it/#/rySrbk86W/7 on File TileCollider.ts

Greetings, Andreas

When progressing into an underground level. Small cut scene with mario walking into the pipe should be played.

Mario should die when small upon contact with enemies, deadly things and when timer is up.
He should jump off the screen using "die" sprite, and play audio/music/die.ogg.

When destroying bricks in underground, the sprites from underworld should be used.

Red Koopa needs a trait, perhaps a flag to pendulumwalk, that prevents him from fall down from blocks.

In the end of each level and in warp zones, text appears on the background layer.

All text appears at once.

Text appears in sequence "THANK YOU MARIO" then "BUT OUR PRINCESS.."

When jumping on the axe the bridge should be removed.
Plays audio/fx/bowser-die.ogg

Mario should be able to collect mushrooms, fireflowers and coins from chance blocks.

Mario should also be able to collect power-ups from "hidden" and "invisible" blocks.

If you kill goomba by stomping on it you bounce of. Thats the right behavior.
But until the goomba leaves the level (the 2 seconds the flat animation is active) you bounce over and over again - and thats not right.

If you add
us.canCollide = false
to this position it won't happen anymore the dead goomba falls right through the level.

So you have to split up the canCollide property on the Entity class to

• canCollideWithBackground and
• canCollideWithOtherEntity

You have to Update the Level update function:

  public update(deltaTime: number) {
    this.entities.forEach(entity => {
      entity.update(deltaTime, this);

      entity.position.x += entity.velocity.x * deltaTime;
      if (entity.canCollideWithBackground) {
        this.tileCollider.checkX(entity);
      }

      entity.position.y += entity.velocity.y * deltaTime;
      if (entity.canCollideWithBackground) {
        this.tileCollider.checkY(entity);
      }

      entity.velocity.y += this.gravity * deltaTime;
    });

    this.entities.forEach(entity => {
      if (entity.canCollideWithOtherEntity) {
        this.entityCollider.check(entity);
      }
    });

    this.totalTime += deltaTime;
  }

You have to update the EntityCollider check function:

  public check(subject: Entity) {
    this.entities.forEach(candidate => {
      if (subject === candidate || !candidate.canCollideWithOtherEntity) {
        return;
      }

      if (subject.boundingBox.overlaps(candidate.boundingBox)) {
        subject.collides(candidate);
        candidate.collides(subject);
      }
    })
  }

Mario and entities should sit -1px on tiles.

Hello,

The purpose of the timer is to decouple the physics from the frame rate. If the frame rate drops, Mario's jumping arc should still stay the same.

The code as its written certainly does that, but I think it is causing many unnecessary repaints.
If the frame rate drops to 1 frame a second it'll still force 60 repaints, even though all but the 60th one will not be see on the screen.

I think you should have an extension to the Timer, maybe:

const timer = new Timer(1/60)
timer.update = (deltaTime, visible) => {
  //physics update logic goes here
  if (visible) {
    comp.draw(context)
  }
}
timer.start()

I love this Youtube Channel. Also, the Megaman graphics at the beginning makes me hope that one day you'll do one of those later. :)

Cheers

• Allain

There should be an animated coin in dashboard in front of the coin counter.

The 8x8 sprites is located at:

overword: [96, 200], [104, 200], [112, 200]
underworld: [120, 200], [128 200], [136, 200]
castle: [144, 200], [152, 200], [160, 200]
underwater: [168, 200], [176, 200], [184, 200]

Minor bug:
If you encueue

this.dead = true;

in the kill method you should encueue also all changes in revive:

revive = () => {
  this.enqueue(() => {
    this.dead = false;
    this.deadTime = 0;
  });
};

The kicked koopa shell should be deadly for both enemies and mario.
Kicking the shell should play /audio/fx/kick.ogg
The shell should play /audio/fx/brick-bump.ogg when colliding with tiles.

Mario should be able to grow to large mario when collecting a mushroom.
Sprite definitions ready, animation to be done.
Should play /audio/fx/power-up-consume.ogg

Mario should be able to collect points from stomping / killing enemies in various ways.
Points is also collected when collecting coins from bricks.
Points is using the 4x8 font located in points.png

When Mario is large, he should be able to shrink when in contact with enemies and deadly things.
He should use shrink animation (yet to be done), and also be invincible for x amount of time, indicated by "transparency" simulated by omitting every 2nd frame.

He should play /audio/fx/pipe.ogg when shrinking. (perhaps rename this sound into something more general.

While testing this on my laptop it appears that runlevel is called multiple times. I have been trying to debug this issue myself for a while but I still have not figured out why it is happening.

This is on a fresh clone of the master branch.

Here is a demo of the issue. https://imgur.com/dlZVpEU

Mario should be able to jump on trampolines.
Jumping can only happen when trampoline is compressed to its maximum.
Mario should bounce on the trampoline when no user input is given.
When jumping sprite run-1 should be used.

Mario should be able to end the level by riding the flag pole and collect points depending on where on the flag he touches, and then autowalk #61 to the castle.

If you allow me to jump in and implement ESlint and style-guide based on "standard", I could fork your project and make a PR for you.

I'm enjoying your channel) You do amazing job. Waiting each new episode. Thank you!
Would love to participate)

As I see, you are using Sublime text editor for super-mario development.
I used it for many years, but now switched to Atom. It has better plugins and development experience, and evolving much faster than Sublime.

Mario should be able to walk automatically without user input on "transfer" levels into underground, and after taking the flag.

Mario should be able to enter and exit from pipes and activate a trigger (inside the pipe?) and exit to any of the defined checkpoints in a level. This will be used to transition to underground coin rooms, transfer levels and warp zones.

You delete an entity in the collection of all entities in the level while you are looping over all entities in the level.
This causes a undefined behavior within the loop.

You should mark the entity for removing and remove it after the loop.

Mario should be able to shoot bouncing animated fireballs.
Fireballs play the explosion animation upon hitting targets and blocks.
The fireball is using 4 8x8 sprites in sequence from sprites.png.
Explosion is using 3 16x16 sprites from sprites.png.
Certain enemies are immune to this fire.

Hi, I really love the series so far.
Just a quick question, will you reorganize "main.js"?
Also, should Mario's initial position be in the JSON file for the levels.

I love everything you're doing! It is very interesting to see the code evolve from episode to episode and to look back at previous episodes and see the changes.

• Eitan

When Mario reaches the top of level, he should be above the dashboard layer.

Great project.
I noticed that You are using absolute paths in certain places and relative in others. I think it should be relative everywhere.
This is a list of absolute paths in files:
index.html line 18
js/loaders.js line 20
js/loaders/level.js line 37
sprites/goomba.json line 2
sprites/koopa.json line 2
sprites/mario.json line 2
sprites/overworld.json line 2
sprites/underworld.json line 2

Good luck in the project.

Mario should be able to swim and emit bubbles.
Bubble sprite 8x8 located in sprites.png at 144 / 208.

Perhaps the swim trait should be applied automatically from an environment key in levelspec.

Koopa paratroopa needs to jump and become a regular koopa when stomped.

Change aspect ratio of canvas and context to 4:3, 320x240 instead of NES defaults of 256x240.

Create Blooper.
Swims in diagonal like patterns and follows mario.
Unaffected by ground or corals.

Create fish entity "cheep cheep".
Unaffected by ground or corals.

4 different types:

• one red, fast - swims in a straight pattern
• one red, fast - swims in a triangle wave form pattern
• one grey, slow - swims in a straight pattern
• one grey, slow - swims in a triangle wave form pattern
• one jumping one for overworld levels

Issue partly resolved with #122

Mario should be able to climb a vine emerging from a block.
Animates using climb-1 and climb-2 sprites.
Playes vine.ogg when appears.

Exists in both overwold and underworld.

on entity collider we have both subject.collides(candidate) and candidate.collides(subject) and entity nested loops cause every subject != candidate pair go to this.
As result, on collision, for example mario.collides(goomba) is called with subject === mario and candidate == goomba and then with subject === goomba and candidate === mario.

With such a loop nesting calling only subject.collides(candidate) is enough.

Red koopa is the same as green koopa but with an added trait that don't permits him to fall down from a tile.

This issue is dependant on #55