Step Seven - How it Works

For those wondering, the 'Staring into the Mirror' step requires using the mouse to click onto the candles. I did this by writing some javascript code that records where the mouse clicked on the page. Using that, I then was able to ascertain which grid square in Mosi was clicked. 

By default, Mosi uses a grid that is 12 by 12, starting with Row 0 and column 0. Each square in the grid is 8 pixels by 8 pixels. I then compare where the mouse was clicked to the top left hand corner of the grid, and divide that by 8. 

So, as a simple example, say a player clicked 9 pixels in from the right and 20 pixels down from the top. 9/8 equals 1 (and a bit). 20/8 equals 2 (and a bit). If we get rid of the bits after the decimal point, we can then figure out that they clicked on grid co-ordinate [1,2]. It is important to bear in mind that the grid uses 0 as a starting row and column. If you clicked in 5 pixels in from the right and 5 pixels down, you will have clicked [0,0]. This works out nicely for us as obviously, 5/8 comes out as 0 (and a bit).

Once I figured out what grid was clicked, I tried to move the avatar there. This was surprisingly easy with Mosi, as there is a function in place to already do this normally. This function is called moveAvatar(). All this needs is a X and Y co-ordinate, and the room name. As it's already been built, we can just hijack it and use it ourselves whenever we please.

This worked well enough and I was able to move my avatar around. Essentially I was teleporting the avatar from the original location, to the new location. I was happy with this, but what made it more interesting was how it worked with 'Wall' objects. Much like how Walls do not let you move past them in regular Bitsy / Mosi, they do not let you move past them when 'teleporting' to them. Despite the fact that the avatar may be on the other side of the screen.

In the actual game, when you are in the mirror clicking with the mouse is trying to teleport the avatar into the lit candle. The game will not let you do that, however, as it is set up as a Wall. However, the game still knows that you tried to move into it though. Much like how you would bump into a normal wall. This can then be used to trigger scripts, like normal. So while the avatar doesn't move, the candle thinks that it has bumped. A script runs that says if the candle is bumped, turn it into one that is out and update a counter somewhere.

To top it all off, I set the script to look at the players inventory. If a player has an item called 'Mouse' then the teleport is given the green light. If the player does not have a 'Mouse' it gets the red light. This is turned on when looking into the mirror, and turned off when not. This is so you can't just teleport around the room. 

All in all, I was happy with how the scripting went. I'm looking to see how to do it in Bitsy as well, if possible. I have attached the HTML file if anyone wants to look at it and use in their own Mosi games. The important part is the following that is right down at the bottom:

<script type="text/javascript">

    function getMousePosition(canvas, event) {

        let rect = canvas.getBoundingClientRect();

        let x = event.clientX - rect.left;

        let y = event.clientY - rect.top;

        let width = canvas.scrollWidth/12

        let xPos = Math.floor(x / width)

        let yPos = Math.floor(y / width)

        console.log(xPos,yPos)

        if (this.game.inventory["mouse"]){

            this.game.moveAvatar(this.game.currentRoomIndex,xPos,yPos)

        }

       
    }

    let canvasElem = document.querySelector("#game-wrapper");

    canvasElem.addEventListener("mousedown", function (e) {        

            getMousePosition(canvasElem, e);        

    });
</script>