Now with levels, shadows, and new monster AI
For those of you who don’t know I’m creating a simple-ish RPG causal arcade game for NaGaDeMon - I’ve only got until the end of the month to finish it, and it’s been interesting juggling ambitions with a very strict time constraint. In the last couple days I’ve added simple gamestate + menu options to the project and worked on adding new levels and new monster AI.
Monsters now have a couple different AI modes – they have the original meandering one or they can make a straight beeline to the player. I used Oreilly’s HTML5 Canvas as a reference for the new equation:
if (monster.AImode == 1) {
//Move in a straight line to the player
var p1 = { x: monster.x, y: monster.y };
var p2 = { x: 640, y: 225 }; //player ie center of screen
var dx = p2.x – p1.x;
var dy = p2.y – p1.y;
var distance = Math.sqrt((dx * dx) + (dy * dy)); //distance equation
var moves = distance / (monster.accel);
var xunits = (p2.x – p1.x) / moves;
var yunits = (p2.y – p1.y) / moves;
if (moves > 0){
moves–;
ship.x += xunits;
ship.y += yunits;
}
I’d still like to build more interesting modes here (circling bats and archers that wander the edge of the screen should be quickly doable) but we’ll see how we’re doing with time towards the end of the month.
Monsters now vary in speed, damage and hitpoints, and there is a level progression where the monsters grow in number and difficulty. Here’s some shaky footage of the latest build:
Not quite where I’d like to be in the 2nd to 3rd week. My todo list for last week isn’t completely scratched off and there’s quite a bit added onto it, and there’s a lot of testing I’m skimping on to get features into the game.
The whole project is still very simple. The lack of progress is really about me getting enough free time to sit down and focus on it (I’ve only had a few hours since mid-week to play). I also took some dead-ends while learning HTML 5. For instance, I spent some time looking at the built in HTML5 canvas shadow for the player shadow, only to then instead create copies of the player images, turn them black, squish them a bit in drawimage() and render them under the regular player image because it was faster to implement (I knew I could get the look I wanted in a graphics program in a few minutes, or I could spend hours tweaking shadowBlur, shadowColor, shadow.OffsetX etc, values – I chose the former).
I also spent way too much time thinking and and prototyping a menu using several different html pages and brilliant looking metro, only to realize I’m not going to have enough content (leaderboards) to warrant it, so instead I just shoved html5 buttons on the default page and use style.visibility now to hide them during play:
//Set Up Menu Screen UI Elements
function showMenu(event) {
menuEnabled = true;
txtPlayerName.style.visibility = “hidden”;
txtScore.style.visibility = “hidden”;
imgPlayer.style.visibility = “hidden”;
imgMenu.style.visibility = “visible”;
btnStart.style.visibility = “visible”;
btnHelp.style.visibility = “visible”;
btnCredits.style.visibility = “visible”;
btnOptions.style.visibility = “visible”;
btnLevel1.style.visibility = “visible”;
btnLevel2.style.visibility = “visible”;
btnLevel3.style.visibility = “visible”;
btnLevel4.style.visibility = “visible”;
btnLevel5.style.visibility = “visible”;
In my opinion there are way better ways to do this, but hey this works, and didn’t take very long.
Not pretty but functional menu buttons
Here is the updated TODO list – completed items are crossed off, new items in bold.
“Code” work:
Player character Hit points + health barUnique monster attributes (speed, strength, hit points)- Level up screens and
travel to new areas - Powerups/dropped coins
- Gamestate screens (intro, instructions/help, credits, etc)
“Content”
New AI modes(Archer and circling monster type)- Prettier health bar
- Player walking on/off screen anim
- Screen obstructions
Player shadow- Sounds
Next up – power ups and cleaning up the gamestates.
