Sprites in showcase are by @Chubberdy
I’ve made a framework to deal with a lot of the boilerplate code required to make a weight gain game.
All that you need to do is include the engine.js file before your script in HTML. The download link above includes the showcase code as well if you need help or reference.
Changelog
17/08/20:
Fixed gainer class initialization by setting a default currentGainStage.
07/05/20:
Fixed engine not initializing if no images given.
08/05/20:
Fixed default gain stage not being set in gainer constructor
Disabled animations resetting when gain stage name is changed to allow for smoother custom animations
Showcase files:
Showcase index.html file
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="engine.js"></script>
<script src="script.js"></script>
</body>
</html>
Showcase script.js file
var game = new Game(1920,1080,["images/-1.png","images/0.png","images/1.png","images/2.png","images/3.png","images/4.png","images/5.png","images/6.png","images/7.png"])
game.ctx.font = "40px 'Trebuchet MS'"
var gainer = new Gainer(150,10,{default:[{weight:-1,image:"images/-1.png"},{weight:0,image:"images/0.png"},{weight:200,image:"images/1.png"},{weight:250,image:"images/2.png"},{weight:350,image:"images/3.png"},{weight:450,image:"images/4.png"},{weight:550,image:"images/5.png"},{weight:750,image:"images/6.png"},{weight:1337,image:"images/7.png"}]})
gainer.scale = 4
gainer.gainSpeed = .01
var counter = 0
game.addUpdateFunction(function() {
if(game.mousePressed) {
gainer.feed(4)
}
if(game.rightMousePressed) {
gainer.feed(-4)
}
//space bar
if(game.keyPressed(32)) {
gainer.setFat(0)
}
counter++
gainer.update()
})
game.addRenderFunction(function() {
game.clearCanvas()
game.ctx.fillStyle = "red"
game.ctx.fillRect(game.mouseX-5,game.mouseY-5,10,10)
gainer.render(game.width/2,game.height/2 + (gainer.getWeight() <= 0 ? Math.sin(counter/16)*10 : 0),game)
game.ctx.fillStyle = "white"
game.ctx.textAlign = "center"
game.ctx.textBaseline = "center"
game.ctx.fillText("Weight: " + Math.round(gainer.getWeight()),game.width/2,game.height/4)
})
Documentation:
Game Class
-
new Game(canvasWidth,canvasHeight,images)
Example:var game = new Game(1920,1080)
Example 2:var game = new Game(undefined,undefined,["images/picture.png","images/anotherimage.png","images/finalimage.jpg"])
Example 3:var game = new Game(1920,1080,["textures/background.png"])
Example 4:var game = new Game(1920,1080,undefined)
=canvasWidth should be the canvas width in pixels. If left undefined or blank, it will be 1920.
Example:1920
=canvasHeight should be the canvas height in pixels. If left undefined or blank, it will be 1080.
Example:1080
=images should be a list/array of paths to images that you would like to use. If left undefined or blank, no images will be loaded.
Example:["images/picture.png","images/anotherimage.png","images/finalimage.jpg"]
Once you do this, you may get an image that you passed here by saying:
game.images["imageFolderName/imageName.png"]
Using this image, you can do something such as drawing it onto the canvas:
game.ctx.drawImage(game.images["imageFolderName/imageName.png"],0,0) -
Game.canvas
Canvas that’s created when the Game object is created -
Game.ctx
Canvas API - Web APIs | MDN
The canvas context is used for rendering.
This is also created when the game object is created -
Game.mousePressed
This is set to true if the mouse is held -
Game.mouseJustPressed
This is set to true for one frame if the mouse has been just pressed -
Game.mouseJustReleased
This is set to true for one frame if the mouse has been just released -
Game.rightMousePressed
This is set to true if the right mouse button is held -
Game.rightMouseJustPressed
This is set to true for one frame if the right mouse button has been just pressed -
Game.rightMouseJustReleased
This is set to true for one frame if the right mouse button has been just released -
Game.mouseX
This is the X position of the mouse on the canvas -
Game.mouseY
This is the Y position of the mouse on the canvas -
Game.width
This is the width of the canvas -
Game.height
This is the height of the canvas -
Game.fps
This is the framerate of the game. The framerate is limited to 60. -
Game.images
To get an image by its path, once you’ve given its path (usingnew Game(canvasWidth,canvasHeight,images)), useGame.images[path]
Example:game.images["textures/imageName.png"]
Example 2:game.ctx.drawImage(game.images["imageFolderName/imageName.png"]) -
Game.addUpdateFunction(function)
Add a function to be called once per frame. It’s recommended that you separate your update and render functions, with render being for drawing and update being for everything else.
Example:
game.addUpdateFunction(function() {
console.log(game.fps)
})
-
Game.addRenderFunction(function)
Add a function to be called once per frame. It’s recommended that you separate your update and render functions, with render being for drawing and update being for everything else.
Example:
game.addRenderFunction(function() {
game.clearCanvas()
game.ctx.fillStyle = “red”
game.ctx.fillRect(game.mouseX,game.mouseY,50,50)
})
-
Game.clearCanvas()
Clears everything on the canvas, including what was drawn last frame. It’s important to call this at the beginning of the frame if you want the canvas to be clear for each new frame. -
Game.keyPressed(keyCode)
Returns true if a key is being held
Pass a key code into the function (http://keycode.info)
Example (Left arrow key):if(game.keyJustReleased(37) == true) {...} -
Game.keyJustPressed(keyCode)
Returns true if a key has been just pressed
Pass a key code into the function (http://keycode.info)
Example (Right arrow key):if(game.keyJustReleased(39) == true) {...} -
Game.keyJustReleased(keyCode)
Returns true if a key has been just released
Pass a key code into the function (http://keycode.info)
Example (Up arrow key):if(game.keyJustReleased(38) == true) {...}
Gainer Class
-
new Gainer(defaultWeight,startingFat,gainStages,defaultGainStageName)
Example:var gainer = new Gainer(150,0,{idle:[{weight:0,image:"images/0.png"},{weight:200,image:"images/1.png"},{weight:240,image:"images/2.png"}],runLeftFrame0:[{weight:0,image:"images/0rl.png"},{weight:200,image:"images/1rl.png"},{weight:240,image:"images/2rl.png"}]})
=defaultWeight is how much the gainer weights without any fat
Example:150
=startingFat is how much fat the gainer has
Example:0
=gainStages is a list of arrays of image paths to be used for certain weights (Image path must be loaded in the game)
Example:{idle:[{weight:0,image:"images/0.png"},{weight:200,image:"images/1.png"},{weight:240,image:"images/2.png"}],runLeftFrame0:[{weight:0,image:"images/0rl.png"},{weight:200,image:"images/1rl.png"},{weight:240,image:"images/2rl.png"}]}
Note: The type of gainStage to be used depends on the variable “gainStageName” which will refer to one of these gain stage names. It’s recommended, if you don’t want to use mutiple gainStages, to just name the stage “default”
=defaultGainStageName is set to “default” by default, if not specified. -
Gainer.defaultWeight
Default:150
Base weight with no fat added onto it -
Gainer.fat
Default:0
Gainer’s fat without base weight added onto it -
Gainer.gainStages
Default: none
Gainer’s gain stages, described above -
Gainer.gainSpeed
Default:0.05
Setting gainSpeed to0freezes gaining
Setting gainSpeed to1applies weight instantaneously when fed
Values inbetween0and1will apply weight more gradually, with values closer to0being slower -
Gainer.animationSpeed
Default:1/60
Percentage of the gaining animation that will be progressed per frame. 1/60 means that it will take 60 frames (1 second) to reach 100% or 1. If you set it to 1/10, it will take ten frames to reach 100%. -
Gainer.scale
Default:1
The scale that the gainer will be drawn at -
Gainer.feed(lbs)
Feeds the gainer by the specified amount (The amount will be added to their weight). -
Gainer.setFat(lbs)
Sets fat, ignoring default weight. If set to 0, then the player’s weight will be their default weight -
Gainer.setWeight(lbs)
Sets weight, including default weight. If defaultWeight is 140 and you setWeight to 150, fat will be set to 10 and the player’s total weight will be 150. -
Gainer.setGainStageName(name)
Sets the gainer’s gain stage name. It will be a string that refers to a named list of GainStages in the Gainer.gainStages array. More on that described above innew Gainer(...) -
Gainer.getWeight()
Returns weight by adding the Gainer’s default weight and fat -
Gainer.getGainStage()
Returns the gain stage for the gainer, which looks like this:
{weight:200,image:"images/1.png"} -
Gainer.getHitbox(game)
Returns an object containing a width and height, which looks like this: {width:1250,height:520}
You must pass your game object (Which you created like this:new Game(...)) so the function can get the image sizes.
Example:
var hitbox = gainer.getHitbox(game)
console.log(hitbox.width)
-
Gainer.update()
Call this once per frame in your function created bygame.addUpdateFunction(...)to ensure that the weight and animations are updated -
Gainer.render(x,y,game)
=x is the x position to draw the gainer, from the center
Example:50
=y is the x position to draw the gainer, from the center
Example:400
=game is your game object created from this line of code:var game = new Game(...)
It’s passed so the Gainer object may use the canvas context to draw
Call this once per frame in your render function created bygame.addRenderFunction(...)to draw the gainer every frame
If you use this framework, I would appreciate it if you credit me by linking back to this post or the showcase on Itch.