Hello there!
Welcome to Building a Web Game with JavaScript
Links you'll need for class:
Code for each stage of the game:
- Stage 1: https://codepen.io/panphora/pen/PJXvEj?editors=0010
- tell kontra to use the first canvas element on the page as our game board
- add a sprite with some configuration options, including an option that causes the sprite to gradually move to the right
- add a game loop
- update and render the sprite inside the game loop
- Stage 2: https://codepen.io/panphora/pen/ZXVNMP?editors=0010
- remove the sprite's automatic movement to the right and replace this with an update function so we can control it's movement directly
- check when the arrow keys are being pressed inside the sprite's update function
- when the arrow keys are pressed, change the sprite's coordinates
- prevent the arrow keys from scrolling the page as they normally would, so the page doesn't scroll as we're controlling our character
- Stage 3: https://codepen.io/panphora/pen/NaeVEM?editors=0010
- load an image of an alien standing that we can use in our game
- wait for the image to be loaded before we run our game code
- get rid of the color configuration option we're passing into the sprite
- add an image configuration option to the sprite and pass it our newly loaded image
- Stage 4: https://codepen.io/panphora/pen/mBaYgM?editors=0010
- load a really big image into our game. it's what's called a tile sheet!
- create a tile engine with kontra, so we can parse our tile sheet. the purpose of the tile engine is to split up a big image (like the one we loaded up in the step above) into individual tiles that we can paint onto our game board. this will let us create whatever kind of game board we want.
- render the tile engine in the game loop
- Stage 5: https://codepen.io/panphora/pen/yzGWrw?editors=0010
- add another layer to the tile engine, so we can create some scenery that looks interesting
- use all water tiles for the first layer in the tile engine and use a bunch of earth-type tiles for the second layer. leave some tiles in the earth layer transparent by setting them equal to the number 0, so it looks like our character is on an island!
- Stage 6: https://codepen.io/panphora/pen/jGXooQ?editors=0010
- load an image that contains two slightly different aliens into our game
- create a sprite sheet from this image. the purpose of the sprite sheet is to split up an image we give it into multiple frames, so we can animate through these frames and make it look like our character is walking.
- replace our sprite's image configuration option with the animation we defined in our new sprite sheet
- update and render our new walk animation inside our game loop
- Stage 7: https://codepen.io/panphora/pen/xXmNow?editors=0010
- change where the sprite gets added when the first gets loaded, so it appears at a position on the game board instead of at the same place every time
- make sure the sprite is created inside the boundaries of the game board and not outside the far edges
- Stage 8: https://codepen.io/panphora/pen/dVxZbq?editors=0010
- since we're using a few values in multiple places, we're going to assign them to variables and use the variables instead. this way, the code becomes more readable and if we want to change an option we can change it in once place.
- make sure the sprite is added within the boundaries of the island we created and not on top of the water surrounding the island
- make sure the sprite can't move outside the boundaries of the island
- Stage 9: https://codepen.io/panphora/pen/boXYGN?editors=0010
- add an image of a mushroom to our game
- add a new mushroom sprite with a new configuration that uses the image of the mushroom we loaded
- render the mushroom sprite in the game loop
- Stage 10: https://codepen.io/panphora/pen/MENOKp?editors=0010
- give the mushroom a random starting position, just like the alien sprite
- Stage 11: https://codepen.io/panphora/pen/JrgOGZ?editors=0010
- in the game loop's update function, check to see if the mushroom and the alien sprite collide as the alien moves around
- if the mushroom and alien sprite collide, reposition the mushroom somewhere else, so the alien has to go get it again
- Stage 12: https://codepen.io/panphora/pen/zPvzzY?editors=0010
- create an box next to the game board to hold the points
- when the alient collides with the mushroom, increase the points inside the box we created by 1
Simple HTML/CSS/JS example to learn from:
Where to find game assets:
Communities for game developers: