Sum 100, my first game ever :)

Showcase
1

screen cap sum 100
screen cap sum 100584×577 49.4 KB

http://www.game.st/games/sum100/

Just to match 2 numbers that sum 100.

1 Like
2

Not working for me. Interesting would be to see the game code, in case you want some feedback.

3

Hi Digitsensitive,

Thanks for trying it out. I am not sure if it is a hosting issue or what. Sometimes it does not load properly. But if on Chrome, using Ctrl-Refresh to reload it, it should work.

Will create a new link with source codes when I am back to home later today.

Updated for the version with source codes: Sum 100

function onEvent ()
{
    totalSeconds++;
    var hours = Math.floor(totalSeconds / 3600);
    var minutes = Math.floor(totalSeconds % 3600 / 60);
    var seconds = Math.floor(totalSeconds % 3600 % 60);
    timerText.setText(hours + ":" + minutes + ":" + seconds); 
}

function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1));
    let temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
  return array;
}

function setVariables(game_level) {
if (game_level === 1) {
    cols = 1;
    rows = 2;
} else 
if (game_level === 2) {
    cols = 2;
    rows = 2;
} else 
if (game_level === 3) {
    cols = 3;
    rows = 3;
} else 
if (game_level === 4) {
    cols = 4;
    rows = 4;
} else 
if (game_level === 5) {
    cols = 5;
    rows = 5;
} else 
if (game_level === 6) {
    cols = 6;
    rows = 6;
} else 
if (game_level === 7) {
    cols = 7;
    rows = 7;
} else 
if (game_level === 8) {
    cols = 8;
    rows = 8;
} else 
if (game_level === 9) {
    cols = 9;
    rows = 9;
} 

total_pairs = Math.floor(cols*rows/2);  
left_margin = (740-64*cols)/2;
top_margin = (600-64*cols)/2;
solved_pairs = 0;
}

var screen_width = 960;
var screen_height = 640;
var game_level;
var cols;
var rows;
var total_pairs;
var solved_pairs = 0;
var top_margin = 0;
var left_margin = 0;
var music_on = false;
var level_locked = false;
var timerText;
var totalSeconds = 0;

game_level = 1;
setVariables(game_level);

var Boot = new Phaser.Class({
    Extends: Phaser.Scene,
    initialize:

    function Boot ()
    {
        Phaser.Scene.call(this, { key: 'boot' });
    },

    preload: function ()
    {
        this.load.spritesheet('tiles', 'assets/sprites/numbers099.png', { frameWidth: 64, frameHeight: 64 });
        this.load.bitmapFont('atari', 'assets/fonts/bitmap/atari-smooth.png', 'assets/fonts/bitmap/atari-smooth.xml');
        this.load.image('turned_on_button', 'assets/turned_on_button.png');
        this.load.image('turned_off_button', 'assets/turned_off_button.png');
    },

    create: function ()
    {
//      this.scene.start('GameScene');
    }
});


var GameScene = new Phaser.Class({
    Extends: Phaser.Scene,

    initialize:

    function GameScene ()
    {
        Phaser.Scene.call(this, { key: 'GameScene', active: true}); 
    },

    preload: function ()
    {
        this.load.audio('done', 'assets/audio/mixkit-player-jumping-in-a-video-game-2043.wav');
    },

    create: function ()
    {

totalSeconds = 0;
timedEvent = this.time.addEvent({ delay: 1000, callback: onEvent, callbackScope: this, loop: true });

// Start setting up the utility area at the right
var r1 = this.add.rectangle(screen_width-120, 300, 225, 590, 0x6666ff);
r1.setStrokeStyle(4, 0xffff00);

var l0 = this.add.line(screen_width-120, 80, 0, 0, 230, 0);
l0.setStrokeStyle(0, 0xffff00);
l0.displayHeight = 1;

var l1 = this.add.line(screen_width-120, 160, 0, 0, 230, 0);
l1.setStrokeStyle(0, 0xffff00);
l1.displayHeight = 1;

var l2 = this.add.line(screen_width-120, 250, 0, 0, 230, 0);
l2.setStrokeStyle(0, 0xffff00);
l2.displayHeight = 1;

var l3 = this.add.line(screen_width-120, 320, 0, 0, 230, 0);
l3.setStrokeStyle(0, 0xffff00);
l3.displayHeight = 1;

// End setting up the utility area at the right

this.add.text(screen_width-200 , 20 , 'Sum 100', { fill:'#0ff', font: 'Bold 40px Arial'});
this.add.bitmapText(screen_width-180, 90 , 'atari', 'Level', 20).setAlpha(1);
this.add.bitmapText(screen_width-180, 170, 'atari', 'Moves', 20).setAlpha(1);

this.text0 = this.add.bitmapText(screen_width-140, 120, 'atari', game_level, 30).setAlpha(1);

var text2 = this.make.text({
        x: screen_width - 130,
        y: 220,
        text: total_pairs + '/' + total_pairs,
        origin: { x: 0.5, y: 0.5 },
        style: {
            font: 'bold 36px Arial',
            fill: 'white',
            align: 'center',
        }
    });

timerText = this.add.bitmapText(screen_width-200, 270, 'atari', '0:0:0', 26).setAlpha(1);

var g2 = this.add.grid(rows*32 + left_margin, cols*32 + top_margin, rows*64, cols*64, 64, 64, 0x444444).setAltFillStyle(0x333333).setOutlineStyle();


// Start set level lock on off
this.add.text(screen_width - 185,495,"Level lock ",{ fill:'#0ff', font: '24px Arial'});

if (level_locked === true) {
    var level_lock_off_image = this.add.image(screen_width - 30, 510,'turned_off_button').setInteractive({cursor: 'pointer'}).setScale(0.6);
    var level_lock_on_image = this.add.image(screen_width - 30, 510,'turned_on_button').setInteractive({cursor: 'pointer'}).setScale(0.6);
} else {
    var level_lock_on_image = this.add.image(screen_width - 30, 510,'turned_on_button').setInteractive({cursor: 'pointer'}).setScale(0.6);
    var level_lock_off_image = this.add.image(screen_width - 30, 510,'turned_off_button').setInteractive({cursor: 'pointer'}).setScale(0.6);
}

level_lock_on_image.on('pointerdown', function () {
    level_lock_on_image.setDepth(0);
    level_lock_off_image.setDepth(1);
    level_locked = false;
});

level_lock_off_image.on('pointerdown', function () {
    level_lock_off_image.setDepth(0);
    level_lock_on_image.setDepth(1);
    level_locked = true;
});
// End set level on off


// Start set sound on off
this.add.text(screen_width-185, 523,"Sound ",{ fill:'#0ff', font: '24px Arial'});
var music = this.sound.add('done');

//console.log(music_on);

if (music_on === false) {
    var speaker_on_image = this.add.image(screen_width-30,540,'turned_on_button').setInteractive({cursor: 'pointer'}).setScale(0.6);
    var speaker_off_image = this.add.image(screen_width-30,540,'turned_off_button').setInteractive({cursor: 'pointer'}).setScale(0.6);
//    console.log('Done for false');
} else {
    var speaker_off_image = this.add.image(screen_width-30,540,'turned_off_button').setInteractive({cursor: 'pointer'}).setScale(0.6);
    var speaker_on_image = this.add.image(screen_width-30,540,'turned_on_button').setInteractive({cursor: 'pointer'}).setScale(0.6);
//    console.log('Done for true');
}

speaker_on_image.on('pointerdown', function () {
    speaker_on_image.setDepth(0);
    speaker_off_image.setDepth(1);
    music_on = false;
//    console.log('pi, set for false');
});

speaker_off_image.on('pointerdown', function () {
    speaker_off_image.setDepth(0);
    speaker_on_image.setDepth(1);
    music_on = true;
//    console.log('bom, set for ture');
});
// End set sound on off

this.add.text(screen_width-220,570,"All rights reserved by game.st, 2022",{ fill:'#000', font: '12px Arial'});

var seeds = [];
const nums = new Set();
while(nums.size !== total_pairs) {
  nums.add(Math.floor(Math.random() * 49) + 1);
}

seeds = [...nums];

var co_seeds = [];

for (i=0; i < total_pairs; i++) {
    co_seeds[i] = 100 - seeds[i];
}

var rawFrameValue = co_seeds.concat(seeds);
var frameValue = shuffle(rawFrameValue);

var level = [];
var t = 0;

for (let i = 0; i < cols; i++) {
  level[i] = [];
  for (let j = 0; j < rows; j++) {
    level[i][j] = frameValue[t];
    t += 1;
  }
}

  const map = this.make.tilemap({ data: level, tileWidth: 64, tileHeight: 64 });
  var tileset = map.addTilesetImage('tiles', null, 64, 64, 0, 0);
  const layer = map.createLayer(0, tileset, left_margin, top_margin);


for (let x=0; x < cols; x++)
{
    for (let y=0; y < rows; y++) {
    }
}

var lastTile = null;

this.input.on('pointerup', function (pointer) {
  var tile = map.getTileAtWorldXY(pointer.worldX, pointer.worldY);

  if (tile === null ) {
    return;
  }

if (tile.alpha === 0 || tile.alpha === 0.5) {
    return;
}

    tile.alpha = 0.5;

    if (lastTile != null)  {
            lastTile.alpha = 1;

        if (lastTile.index + tile.index === 100) {

            var tween = this.tweens.add({
                    targets: tile,
                    alpha : 0,
                    duration: 250
                });


            var tween_last = this.tweens.add({
                    targets: lastTile,
                    alpha : 0,
                    duration: 250
                });

            if (music_on === true) {
                music.play();  
            }

            lastTile = null;

            solved_pairs++;

            if (total_pairs == solved_pairs) {
                this.text0.setText('');
                text2.text = "";

                if (level_locked == false) {
                    game_level +=1;
                    if (game_level == 10 ) {
                       game_level = 1;         
                    }
                }

                setVariables(game_level);
                this.scene.restart('GameScene');                
            } 
            else 
            { 
                text2.text = (total_pairs - solved_pairs) + "/" + total_pairs;
            }
        }
        else 
        {
            lastTile.visible = true;
            lastTile.alpha = 1;
            lastTile = tile;
        }
  } else {
            lastTile = tile;
  }

}, this);

}

});

var config = {
    type: Phaser.AUTO,
    width: screen_width,
    height: screen_height,
    parent: 'phaser-example',
    pixelArt: true,
    backgroundColor: '#ff6666',
    scene: [ Boot, GameScene ]};

var game = new Phaser.Game(config);
4

Now it worked for me. Great job for your first game!

Some ideas/feedback:

  • It’s worth to separate your code into multiple files (f.e. one file for each scene or game object). It is totally fine, that you didn’t do it with your first project, since it seems a bit overwhelming at first. Maybe have a look at my game examples here.
  • If you are interested, I would recommend the use of TypeScript
  • For the numbers in the game I would have used plain text and not a spritesheet (but it is ok to do so)
  • The setVariables function could be done much easier: Why not set the cols and rows directly? cols = rows = game_level;
  • The if-else with level_locked and music_on seems like double code → DRY. Or why have you done this? If you have done it because of the depth, you might want to add the images first and then an if-else for setting the depth with the setDepth() function
  • Some parts of the code seems like nonsense for example the two for loops with cols and rows without any content in the loops

Thats it after a short review.

1 Like
5

Hi digitsensitive,

Thank you for your valuable comments! I appreciate!!

Will look into my codes again, and do some tuning.

6

Hi digitsensitive,

I has updated my codes according to some of your findings. Will look in to the other advices later. :slight_smile:

function onEvent ()
{
    totalSeconds++;
    var hours = Math.floor(totalSeconds / 3600);
    var minutes = Math.floor(totalSeconds % 3600 / 60);
    var seconds = Math.floor(totalSeconds % 3600 % 60);
    timerText.setText(hours + ":" + minutes + ":" + seconds); 
}

function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1));
    let temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
  return array;
}

function setVariables(game_level) {
    cols = rows = game_level ;

    if (game_level === 1) {
        rows = 2;
    } 

total_pairs = Math.floor(cols*rows/2);  
left_margin = (740-64*cols)/2;
top_margin = (600-64*cols)/2;
solved_pairs = 0;
}

var screen_width = 960;
var screen_height = 640;
var game_level;
var cols;
var rows;
var total_pairs;
var solved_pairs = 0;
var top_margin = 0;
var left_margin = 0;
var music_on = false;
var level_locked = false;
var timerText;
var totalSeconds = 0;

game_level = 1;
setVariables(game_level);

var GameScene = new Phaser.Class({
    Extends: Phaser.Scene,

    initialize:

    function GameScene ()
    {
        Phaser.Scene.call(this, { key: 'GameScene', active: true}); 
    },

    preload: function ()
    {
        this.load.spritesheet('tiles', 'assets/sprites/numbers099.png', { frameWidth: 64, frameHeight: 64 });
        this.load.bitmapFont('atari', 'assets/fonts/bitmap/atari-smooth.png', 'assets/fonts/bitmap/atari-smooth.xml');
        this.load.image('turned_on_button', 'assets/turned_on_button.png');
        this.load.image('turned_off_button', 'assets/turned_off_button.png');
        this.load.audio('done', 'assets/audio/mixkit-player-jumping-in-a-video-game-2043.wav');
    },

    create: function ()
    {

totalSeconds = 0;
timedEvent = this.time.addEvent({ delay: 1000, callback: onEvent, callbackScope: this, loop: true });

// Start setting up the utility area at the right
var r1 = this.add.rectangle(screen_width-120, 300, 225, 590, 0x6666ff);
r1.setStrokeStyle(4, 0xffff00);

var l0 = this.add.line(screen_width-120, 80, 0, 0, 230, 0);
l0.setStrokeStyle(0, 0xffff00);
l0.displayHeight = 1;

var l1 = this.add.line(screen_width-120, 160, 0, 0, 230, 0);
l1.setStrokeStyle(0, 0xffff00);
l1.displayHeight = 1;

var l2 = this.add.line(screen_width-120, 250, 0, 0, 230, 0);
l2.setStrokeStyle(0, 0xffff00);
l2.displayHeight = 1;

var l3 = this.add.line(screen_width-120, 320, 0, 0, 230, 0);
l3.setStrokeStyle(0, 0xffff00);
l3.displayHeight = 1;

// End setting up the utility area at the right

this.add.text(screen_width-200 , 20 , 'Sum 100', { fill:'#0ff', font: 'Bold 40px Arial'});
this.add.bitmapText(screen_width-180, 90 , 'atari', 'Level', 20).setAlpha(1);
this.add.bitmapText(screen_width-180, 170, 'atari', 'Moves', 20).setAlpha(1);

this.text0 = this.add.bitmapText(screen_width-140, 120, 'atari', game_level, 30).setAlpha(1);

var text2 = this.make.text({
        x: screen_width - 130,
        y: 220,
        text: total_pairs + '/' + total_pairs,
        origin: { x: 0.5, y: 0.5 },
        style: {
            font: 'bold 36px Arial',
            fill: 'white',
            align: 'center',
        }
    });

timerText = this.add.bitmapText(screen_width-200, 270, 'atari', '0:0:0', 26).setAlpha(1);

var g2 = this.add.grid(rows*32 + left_margin, cols*32 + top_margin, rows*64, cols*64, 64, 64, 0x444444).setAltFillStyle(0x333333).setOutlineStyle();


// Start set level lock on off
this.add.text(screen_width - 185,495,"Level lock ",{ fill:'#0ff', font: '24px Arial'});

var level_lock_on_image = this.add.image(screen_width - 30, 510,'turned_on_button').setInteractive({cursor: 'pointer'}).setScale(0.6);
var level_lock_off_image = this.add.image(screen_width - 30, 510,'turned_off_button').setInteractive({cursor: 'pointer'}).setScale(0.6);

if (level_locked === true) {
    level_lock_on_image.setDepth(1);
    level_lock_off_image.setDepth(0);
} else {
    level_lock_on_image.setDepth(0);
    level_lock_off_image.setDepth(1);
}

level_lock_on_image.on('pointerdown', function () {
    level_lock_on_image.setDepth(0);
    level_lock_off_image.setDepth(1);
    level_locked = false;
});

level_lock_off_image.on('pointerdown', function () {
    level_lock_off_image.setDepth(0);
    level_lock_on_image.setDepth(1);
    level_locked = true;
});
// End set level on off


// Start set sound on off
this.add.text(screen_width-185, 523,"Sound ",{ fill:'#0ff', font: '24px Arial'});
var music = this.sound.add('done');

var speaker_on_image = this.add.image(screen_width-30,540,'turned_on_button').setInteractive({cursor: 'pointer'}).setScale(0.6);
var speaker_off_image = this.add.image(screen_width-30,540,'turned_off_button').setInteractive({cursor: 'pointer'}).setScale(0.6);


if (music_on === false) {
    speaker_on_image.setDepth(0);
    speaker_off_image.setDepth(1);
} else {
    speaker_on_image.setDepth(1);
    speaker_off_image.setDepth(0);
}

speaker_on_image.on('pointerdown', function () {
    speaker_on_image.setDepth(0);
    speaker_off_image.setDepth(1);
    music_on = false;
});

speaker_off_image.on('pointerdown', function () {
    speaker_off_image.setDepth(0);
    speaker_on_image.setDepth(1);
    music_on = true;
});
// End set sound on off

this.add.text(screen_width-220,570,"All rights reserved by game.st, 2022",{ fill:'#000', font: '12px Arial'});

var seeds = [];
const nums = new Set();
while(nums.size !== total_pairs) {
  nums.add(Math.floor(Math.random() * 49) + 1);
}

seeds = [...nums];

var co_seeds = [];

for (i=0; i < total_pairs; i++) {
    co_seeds[i] = 100 - seeds[i];
}

var rawFrameValue = co_seeds.concat(seeds);
var frameValue = shuffle(rawFrameValue);

var level = [];
var t = 0;

for (let i = 0; i < cols; i++) {
  level[i] = [];
  for (let j = 0; j < rows; j++) {
    level[i][j] = frameValue[t];
    t += 1;
  }
}

const map = this.make.tilemap({ data: level, tileWidth: 64, tileHeight: 64 });
var tileset = map.addTilesetImage('tiles', null, 64, 64, 0, 0);
const layer = map.createLayer(0, tileset, left_margin, top_margin);

var lastTile = null;

this.input.on('pointerup', function (pointer) {
  var tile = map.getTileAtWorldXY(pointer.worldX, pointer.worldY);

  if (tile === null ) {
    return;
  }

if (tile.alpha === 0 || tile.alpha === 0.5) {
    return;
}

    tile.alpha = 0.5;

    if (lastTile != null)  {
            lastTile.alpha = 1;

        if (lastTile.index + tile.index === 100) {

            var tween = this.tweens.add({
                    targets: tile,
                    alpha : 0,
                    duration: 250
                });


            var tween_last = this.tweens.add({
                    targets: lastTile,
                    alpha : 0,
                    duration: 250
                });

            if (music_on === true) {
                music.play();  
            }

            lastTile = null;

            solved_pairs++;

            if (total_pairs == solved_pairs) {
                this.text0.setText('');
                text2.text = "";

                if (level_locked == false) {
                    game_level +=1;
                    if (game_level == 10 ) {
                       game_level = 1;         
                    }
                }

                setVariables(game_level);
                this.scene.restart('GameScene');                
            } 
            else 
            { 
                text2.text = (total_pairs - solved_pairs) + "/" + total_pairs;
            }
        }
        else 
        {
            lastTile.visible = true;
            lastTile.alpha = 1;
            lastTile = tile;
        }
  } else {
            lastTile = tile;
  }

}, this);

}

});

var config = {
    type: Phaser.AUTO,
    width: screen_width,
    height: screen_height,
    pixelArt: true,
    backgroundColor: '#ff6666',
    scene: [GameScene]};

var game = new Phaser.Game(config);