Where did I go wrong in the Bonus Game?

Hi Wayne. Good on you for daring to go 'off-piste' early in your learning curve. I'm not that far ahead of you but continually working with code that simply works is not that great for learning, but when things go wrong, then the learning really starts :)

Here is what I found...

1: So as you say, in preview, nothing is visible, just a black page. The first thing to do is to open your browser's devtools JavaScript console. (e.g. F12 in Chrome). Here it says...

Uncaught SyntaxError: Unexpected end of input game.js:184

Now line 184 happens to be the last line of code in game.js. Although your Treehouse Workspace doesn't report errors in code files, many popular code editors do. I happen to use Visual Studio Code but there are other popular editors like ATOM etc. All of that said, my VSC simply confirms what the Chrome browser said, that the code is incomplete but it cannot show exactly where.

A nice feature in these editors (and in Treehouse Workspace), is that you can rest your mouse on an opening ( or [ or { and the editor will show you what it believes to be the matching closing bracket.

So long story short, I examined your game.js file and found 2 functions where the closing } were missing. Here is a code snippet showing them added...

function starCollect(player, star) {
    star.kill();
    currentScore = currentScore + 20;
    if (currentScore === winningScore) {
        won = true;
    }
} // Added

  function coinCollect(player, coin) {
    coin.kill();
    currentScore = currentScore + 40;
    if (currentScore === winningScore) {
        won = true;
    }
} // Added

2: So if you make and save the above changes, then refresh your browser, it still does not work. You do now see a blue background, but there are now a lot more error messages reported in the JavaScript console. Don't panic. It can be that just one small error creates several other error messages. Let's look at the first one.

Uncaught TypeError: Cannot read property 'create' of undefined game.js:64

Line 64 is...

var coins = coins.create(left, top, coinImage);

Seeing 'coins' on both sides of the variable declaration looked odd, and sure enough, looking at the other functions nearby, it is apparent that the declaration should actually be 'var coin = ' i.e.

    var coin = coins.create(left, top, coinImage);

So make this change, save, refresh your browser and bingo, all should be good.

In your console, there should be no more red error messages, just yellow warning messages referring to issues with the phaser.js file concerning timing violations and deprecated code usage.