But I've been intrigued by this ever since I reviewed Captain Rogers. You could say that Captain Rogers is the same as Flappy Bird, in that you are flying through something and avoiding something and that the mechanism is the same. At first I didn't like the game because it was too hard, and I don't like Flappy Bird either. But the mechanic is interesting, so I'm going to create a game that uses touch and moves an object through an always-scrolling maze. But I need something that flies. How about a fox?
This is an image created by Nicu Buculei of Romania, who has been doing cool SVG tutorials for years. This image grew out of a tutorial called Pac-Man baddies with Inkscape and is available on the OpenClipart.org site (where I get all my clip art from). I really love SVG and this game will be done in SVG, using our fox-like friend, who can magically fly.
In earlier SVG game posts, I've just concentrated on shapes like squares and circles, but it's time to take wings and fly. But how to use a beautiful work of art in SVG? You can see the source code for this work of art at http://openclipart.org/detail/19560/game-baddie:-fox-by-nicubunu and I won't paste it in here because it takes up several hundred lines. Now Nicu didn't plot out the art by hand, he used Inkscape, which makes the details of the SVG art hidden, and all you need to do is use the art.
The game will let you keep the fox flying by tapping on the screen. Here's a screen shot of what it looks like on my Geeksphone Peak (now running in FxOS 1.2):
Tap and he flied upward. Don't do anything, and the fox falls! In later posts I'll show how to scroll and how to draw in the obstacles, but being able to import an SVG file is enough for now.
Here is the code for Part 1.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Flying Fox Part 1
</title>
<style>
#mySVG
{
width: 360px;
height: 620px;
position: absolute;
top: 0px;
left: 0px;
}
</style>
<script>
// --- Global variables ---
// Width and height of board in pixels
var boardWidth = 360;
var boardHeight = 620;
var boardWidthPixels = boardWidth + "px";
var boardHeightPixels = boardHeight + "px";
// URL for W3C definition of SVG elements
var svgURL = "http://www.w3.org/2000/svg";
var svgLink = "http://www.w3.org/1999/xlink";
// Variables for fox initial position.
var foxX = boardWidth / 2 - 100;
var foxY = boardHeight / 2;
var foxH = 50;
var foxW = 50;
// Use requestAnimationFrame.
var requestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
// --- Event listeners ---
// Page load event listener.
window.addEventListener("load",
runFirst, false);
// Runs when page loads.
function runFirst() {
// Define the game board as an SVG element.
gameBoard =
document.createElementNS(svgURL, "svg");
// Width and height of the SVG board element.
gameBoard.width.baseVal.valueAsString =
boardWidthPixels;
gameBoard.height.baseVal.valueAsString =
boardHeightPixels;
gameBoard.id = "mySVG";
// You must append the board to the body.
document.getElementById("pageBody").
appendChild(gameBoard);
// Add a background element for color.
gameBack =
document.createElementNS(svgURL, "rect");
gameBack.x.baseVal.valueAsString =
"0px";
gameBack.y.baseVal.valueAsString =
"0px";
gameBack.width.baseVal.valueAsString =
boardWidthPixels;
gameBack.height.baseVal.valueAsString =
boardHeightPixels;
gameBack.style.
setProperty("fill","Thistle","");
// Attach the background to the game board.
gameBoard.appendChild(gameBack);
// Mouse down event listener
gameBoard.addEventListener(
"mousedown", foxJump, false);
// Import SVG fox image.
// Set height, width, x, and y.
myFox = document.createElementNS(svgURL,"image");
myFox.setAttribute("height",foxH);
myFox.setAttribute("width",foxW);
myFox.setAttribute("x",foxX);
myFox.setAttribute("y",foxY);
// Use different namespace for xlink.
myFox.setAttributeNS(svgLink,"href","fox.svg");
// Add the fox to the game board.
gameBoard.appendChild(myFox);
// Start the game loop.
gameLoop();
}
// Game loop.
function gameLoop(){
// Endless loop with requestAnimationFrame.
requestAnimationFrame(gameLoop);
// The fox waits to drop.
// Only you can save him.
foxWait();
}
// Fox is waiting to fall.
function foxWait() {
// Make the fox fall after one second.
foxFallTimer = setTimeout(foxFall, 1000);
}
// Fox is falling.
function foxFall() {
// Make the fox fall one pixel.
foxY = foxY + 1;
// Does he hit the floor?
if (foxY > (boardHeight - 50)){
// Calculate new position.
foxY = (boardHeight / 2) - 50;
// Alert and reset.
alert("Fox hit the floor!");
console.log("Fox hit the floor!");
return;
}
// Draw the fox.
myFox.y.baseVal.valueAsString =
foxY + "px";
// Report progress.
console.log("Fox is falling.");
}
// Fox is jumping.
function foxJump() {
// Fox jumps up!
foxY = foxY - 20;
// Does he hit the roof?
if (foxY < 20) {
// Calculate new position.
foxY = (boardHeight /2) - 50;
// Alert and reset.
alert("Fox hit the roof!");
console.log("Fox hit the roof!");
return;
}
// Otherwise, draw the fox.
myFox.y.baseVal.valueAsString =
foxY + "px";
// Report progress.
console.log("Fox is jumping.");
}
</script>
</head>
<body id="pageBody">
</body>
</html>
A lot of this code is similar to other SVG posts I've written, and here's a brief outline.
Shell
Uses the standard HTML5 shell for SVG. For a detailed explanation, see this post: http://firefoxosgaming.blogspot.com/2013/11/bouncing-svg-part-3-game-programming.html.I have some globals, I set up an event listener, and then start running the game when the page loads.
Game Loop
The game runs in a game loop, using requestAnimationFrame for the basic display timing.Action
Every time through the game loop, the program goes to a waiting routine that waits one second. After the second has passed, the fox falls a small amount. If the fox hits the ground, the game is reset.Touch
But to keep the fox from falling, you can tap the screen. I use the mousedown event in much the same way I did in the post Touch and SVG Spirals. Tap on the screen, trap the tap with an event handler, and then move the fox up. But be careful. If the mouse hits the roof, the game is also reset.SVG
The real meat of this is importing the SVG image. Here's the code that does this:// Import SVG fox image.
// Set height, width, x, and y.
myFox = document.createElementNS(svgURL,"image");
myFox.setAttribute("height",foxH);
myFox.setAttribute("width",foxW);
myFox.setAttribute("x",foxX);
myFox.setAttribute("y",foxY);
// Use different namespace for xlink.
myFox.setAttributeNS(svgLink,"href","fox.svg");
// Add the fox to the game board.
gameBoard.appendChild(myFox);
This code is in three steps:
1. Create an SVG element called myFox using the SVG image element. Define the height, width, x, and y values to give it a location and size. foxX and foxY will determine where the fox is placed.
2. Then we must import the fox, which is in a separate file called fox.svg. We do this by using a magic technology called XLINK. One of the tricks to working with SVG is to remember that under the hood, SVG is XML, not HTML. Even though HTML5 has graciously allowed SVG to come and live in their house, SVG is still an XML animal. And XLINK is a linking protocol that was designed for XML. To use XLINK, you must introduce a separate namespace. SVG has one and now XLINK does too. Up in the globals, I defined svgLink as the namespace for XLINK, so you must use that when you invoke it, because it isn't part of HTML5 or SVG. But it works just fine. You import it by adding the href attribute to the SVG object myFox and then supply the URL, which in this case is just the filename, fox.svg. Complicated, but you only need to learn it once.
3. Then, once you've created the SVG image and imported the art into the image, you just need to add the image to the main SVG object, gameBoard. The image is now part of the SVG drawing and you can manipulate it all you want through JavaScript.
The fox is now ready to fly. Load this into your phone, watch the fox fall, and then tap to keep him from falling to the floor or hitting the roof.
Background
I had one problem with this that I needed to fix. In my last post when I was raving about how cool App Manager was, I showed a preliminary screen shot of the game I'm writing about now.
You'll notice that the top and left edges show a white margin. That's not what I wanted, and it made me dig out my old code from my post on screen sizes: http://firefoxosgaming.blogspot.com/2013/10/how-big-am-i-game-programming.html. Turns out that I hadn't measured the screen with my code and the new code showed this:
My inner screen size was now 360 x 620 pixels. So I added an SVG rectangle that I could color just to show a completely solid background, helpful to see where the fox is. Here's the code I used:
// Add a background element for color.
gameBack =
document.createElementNS(svgURL, "rect");
gameBack.x.baseVal.valueAsString =
"0px";
gameBack.y.baseVal.valueAsString =
"0px";
gameBack.width.baseVal.valueAsString =
boardWidthPixels;
gameBack.height.baseVal.valueAsString =
boardHeightPixels;
gameBack.style.
setProperty("fill","Thistle","");
// Attach the background to the game board.
gameBoard.appendChild(gameBack);
Standard stuff, just a rectangle. Define it, attach it, color it "Thistle", and you're done.
But when I loaded it into my phone, it still had that damn margin. I check and all browsers give you a margin when you throw an SVG object at them.
But when things don't work, there is the cousin of SVG, known as CSS! By simply giving the SVG board an ID, I could then place it exactly where I want it to go with some simple CSS. I understand browser manufacturers wanting to give a little margin (I don't think this was always true), but I want the game to go right to the edge.
So I added this CSS and everything fit perfectly:
<style>
#mySVG
{
width: 360px;
height: 620px;
position: absolute;
top: 0px;
left: 0px;
}
</style>
How cool is that? The mixture of HTML5, CSS, JavaScript, and SVG is really rocking. And thank you to Nicu for sharing with the world how to draw SVG and make it look good.
But it also makes me see that you have to be sure of what your screen is. I'm thinking I might clean up my "How Big?" app and putting it in the Marketplace for other programmers. We will be having more phones, tablets, and devices.
Next up, scrolling the screen.
