Making the Fox Fly
http://firefoxosgaming.blogspot.com/2014/02/flying-fox-part-1-game-programming.html
Making the Clouds Move
http://firefoxosgaming.blogspot.com/2014/02/svg-and-z-order-game-programming.html
The first post showed how to import a complex SVG drawing made in Inkscape and make it jump up if it is touched and to fall down if it is not. The second post talked about z-order in SVG (there isn't any) and showed how to make clouds fly by, creating the illusion that the Fox is flying.
Today's post wraps up things. Three final parts are added:
1. Pipes are moving and the Fox must avoid them.
2. A way to detect if the Fox collides with the pipe.
3. The result of any Fox/Pipe collision.
Here's what it will look like when the Fox is flying:
Here's the Fox about to hit a pipe:
And here is the exploded Fox after he hits the pipe a second later:
And so, here is the code, all 408 lines. (Not too much, really, and I hope it is well-enough organized to follow along. A lot of this code is reused from other posts.)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Floppy Fox Part 3
</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;
// Cloud initial x coordinate value.
var cloud1X = boardWidth;
var cloud2X = boardWidth / 2;
// Pipe globals
var uPipeLength = 260;
var lPipeLength = 260;
var pipeWidth = 50;
var uPipeX = boardWidth - pipeWidth;
// 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 SVG element.
gameBoard =
document.
createElementNS(svgURL, "svg");
// Width and height of 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 game board.
gameBoard.appendChild(gameBack);
// Create cloud1.
cloud1 =
document.
createElementNS(svgURL, "circle");
cloud1.cx.baseVal.valueAsString =
cloud1X + "px";
cloud1.cy.baseVal.valueAsString =
"400px";
cloud1.r.baseVal.valueAsString =
"50px";
cloud1.style.
setProperty("fill","blue","");
// Attach cloud1 to the game board.
gameBoard.appendChild(cloud1);
// Create cloud2.
cloud2 =
document.
createElementNS(svgURL, "circle");
cloud2.cx.baseVal.valueAsString =
cloud2X + "px";
cloud2.cy.baseVal.valueAsString =
"200px";
cloud2.r.baseVal.valueAsString =
"50px";
cloud2.style.
setProperty("fill","green","");
// Attach cloud1 to the game board.
gameBoard.appendChild(cloud2);
// 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);
// Pipes
// Upper Pipe
// Define the pipe.
uPipe = document.
createElementNS(svgURL,"rect");
// Set the values.
uPipe.x.baseVal.valueAsString =
uPipeX + "px";
uPipe.y.baseVal.valueAsString = "0px";
uPipe.width.baseVal.valueAsString =
pipeWidth + "px";
uPipe.height.baseVal.valueAsString =
uPipeLength + "px";
uPipe.style.setProperty("fill","red","");
// Attach it to the board.
gameBoard.appendChild(uPipe);
// Lower Pipe
// Define the pipe.
lPipe = document.
createElementNS(svgURL,"rect");
// Set the values.
lPipe.x.baseVal.valueAsString =
uPipeX + "px";
lPipe.y.baseVal.valueAsString =
uPipeLength + 100 + "px";
lPipe.width.baseVal.valueAsString =
pipeWidth + "px";
lPipe.height.baseVal.valueAsString =
uPipeLength + "px";
lPipe.style.setProperty("fill","red","");
// Attach it to the board.
gameBoard.appendChild(lPipe);
// Start the game loop.
gameLoop();
}
// Game loop.
function gameLoop(){
// Endless loop requestAnimationFrame.
requestAnimationFrame(gameLoop);
// The fox waits to drop.
// Only you can save him.
foxWait();
// Move the clouds.
moveClouds();
// Move the pipes.
movePipes();
}
// Game over!
function gameOver() {
// Make the fox big!
myFox.setAttribute("height",200);
myFox.setAttribute("width",200);
//Wait wait a short time!
foxBlowUpTimer =
setTimeout(foxBlowUp, 700);
}
// Fox blow up!
function foxBlowUp() {
// Reset fox values.
foxX = boardWidth / 2 - 100;
foxY = boardHeight / 2;
foxW = 50;
foxH = 50;
// Reset fox position.
myFox.setAttribute("height",foxH);
myFox.setAttribute("width",foxW);
myFox.setAttribute("x",foxX);
myFox.setAttribute("y",foxY);
}
// Move the pipes.
function movePipes() {
// Move the pipe X value.
uPipeX = uPipeX - 2;
// Check if pipes off left edge.
if (uPipeX < -50) {
// If too far, send to right side.
uPipeX = boardWidth;
// Resize pipes.
// Generate random change.
change =
Math.
floor((Math.random()*60)+1) - 30;
// Calculate new pipe lengths.
uPipeLength = uPipeLength + change;
lPipeLength = lPipeLength - change;
// If upper pipe is too short, back up.
if (uPipeLength < 100) {
uPipeLength = uPipeLength - change;
lPipeLength = lPipeLength + change;
console.log("UPPER PIPE TOO SHORT");
}
// If lower pipe is too short, back up.
if ((uPipeLength + 100) >
(boardHeight)) {
uPipeLength = uPipeLength - change;
lPipeLength = lPipeLength + change;
console.log("LOWER PIPE TOO SHORT");
}
// Draw upper pipe if new size.
uPipe.height.baseVal.valueAsString =
uPipeLength + "px";
// Draw lower pipe if new size.
lPipe.y.baseVal.valueAsString =
uPipeLength + 150 + "px";
lPipe.height.baseVal.valueAsString =
lPipeLength + "px";
// Display current values.
console.log(uPipeLength,
lPipeLength, change);
}
// Test for upper pipe collision.
if ((foxX > uPipeX) &&
(foxX < (uPipeX + 50)) &&
(foxY < uPipeLength)
){
console.log("Hit upper pipe. Ouch!");
// Game is over.
gameOver();
}
// Test for lower pipe collision.
if ((foxX > uPipeX) &&
(foxX < (uPipeX + 50)) &&
(foxY > (boardHeight - lPipeLength))
){
console.log("Hit lower pipe. Ouch!");
// Game is over.
gameOver();
}
// Draw pipes at new x location.
uPipe.x.baseVal.valueAsString = uPipeX;
lPipe.x.baseVal.valueAsString = uPipeX;
}
// Move the clouds.
function moveClouds() {
// Move cloud 1.
cloud1X = cloud1X - 0.5;
// Does it go off the edge?
if (cloud1X < -100) {
cloud1X = boardWidth;
}
// Move cloud 2.
cloud2X = cloud2X - 1;
// Does it go off the edge?
if (cloud2X < -100) {
cloud2X = boardWidth;
}
cloud1.cx.baseVal.valueAsString =
cloud1X + "px";
cloud2.cx.baseVal.valueAsString =
cloud2X + "px";
}
// 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;
// Game is over!
gameOver();
console.log("Fox hit the floor!");
}
// 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;
// Game is over!
gameOver();
console.log("Fox hit the roof!");
}
// Otherwise, draw the fox.
myFox.y.baseVal.valueAsString =
foxY + "px";
// Report progress.
console.log("Fox is jumping.");
}
</script>
</head>
<body id="pageBody">
</body>
</html>
Most of this code is explained in the previous two posts, but here is the new stuff:
Globals
I added a few globals to keep track of the pipe data. There are two pipes. They move from right to left (but at a different speed from the clouds).// Pipe globals
var uPipeLength = 260;
var lPipeLength = 260;
var pipeWidth = 50;
var uPipeX = boardWidth - pipeWidth;
The upper and lower pipes are given a length. This length will change to simulate new pipes that are of different lengths. This change happens off-screen, every time the pipes are hidden. When they come back on the right, their lengths will be changed, but the gap will be the same so the Fox has a fighting chance to get through.
The width of the pipe is a constant: 50 pixels.
I needed a value that would reflect the upper pipe's x value at the bottom point of the pipe. This will be used to calculate whether the bird hits either pipe. Essentially I needed a base point to measure from, and this seemed handy.
Adding the Pipes
I added two pipes, using SVG rectangles. Notice that I had to add them after the clouds and the Fox. The pipes are in the foreground. As I wrote about the last time, the order you define SVG object becomes the z-order. The last one defined is the object in front of the rest. We want the clouds behind the pipes and the Fox might as well be there too.Here's the code for the two pipes:
// Pipes
// Upper Pipe
// Define the pipe.
uPipe = document.
createElementNS(svgURL,"rect");
// Set the values.
uPipe.x.baseVal.valueAsString =
uPipeX + "px";
uPipe.y.baseVal.valueAsString = "0px";
uPipe.width.baseVal.valueAsString =
pipeWidth + "px";
uPipe.height.baseVal.valueAsString =
uPipeLength + "px";
uPipe.style.setProperty("fill","red","");
// Attach it to the board.
gameBoard.appendChild(uPipe);
// Lower Pipe
// Define the pipe.
lPipe = document.
createElementNS(svgURL,"rect");
// Set the values.
lPipe.x.baseVal.valueAsString =
uPipeX + "px";
lPipe.y.baseVal.valueAsString =
uPipeLength + 100 + "px";
lPipe.width.baseVal.valueAsString =
pipeWidth + "px";
lPipe.height.baseVal.valueAsString =
uPipeLength + "px";
lPipe.style.setProperty("fill","red","");
// Attach it to the board.
gameBoard.appendChild(lPipe);
Moving the Pipes
This is in two parts. The first part is a call to a pipe moving function from the game loop. This call takes place every time through the loop. This line does it:movePipes();
The actual function both moves the pipes and checks for collisions. First we move the pipes and check to see if the pipes move off the left edge. If they do, we start them over again but change the lengths by a random amount so that the pipes give a different challenge every time the Fox encounters them. In addition, a check is made to make sure that the pipes aren't too short or too tall. When making a game, you have to think of every possibility and deal with it.
Here's the code for moving the pipes, checking for off-screen motion, resizing the pipes, and then checking to make sure that the resizing went okay.
// Move the pipes.
function movePipes() {
// Move the pipe X value.
uPipeX = uPipeX - 2;
// Check if pipes off left edge.
if (uPipeX < -50) {
// If too far, send to right side.
uPipeX = boardWidth;
// Resize pipes.
// Generate random change.
change =
Math.
floor((Math.random()*60)+1) - 30;
// Calculate new pipe lengths.
uPipeLength = uPipeLength + change;
lPipeLength = lPipeLength - change;
// If upper pipe is too short, back up.
if (uPipeLength < 100) {
uPipeLength = uPipeLength - change;
lPipeLength = lPipeLength + change;
console.log("UPPER PIPE TOO SHORT");
}
// If lower pipe is too short, back up.
if ((uPipeLength + 100) >
(boardHeight)) {
uPipeLength = uPipeLength - change;
lPipeLength = lPipeLength + change;
console.log("LOWER PIPE TOO SHORT");
}
// Draw upper pipe if new size.
uPipe.height.baseVal.valueAsString =
uPipeLength + "px";
// Draw lower pipe if new size.
lPipe.y.baseVal.valueAsString =
uPipeLength + 150 + "px";
lPipe.height.baseVal.valueAsString =
lPipeLength + "px";
// Display current values.
console.log(uPipeLength,
lPipeLength, change);
}
Essentially here is how it goes:
1. The pipe moves 2 pixels to the left.
2. If the pipes go off the left edge, the pipes are resized.
3. Is the upper pipe too short? If so, ignore the change.
4. Is the lower pipe too short? If so, ignore the change.
5. If all is well, draw the upper pipe.
6. If all is well, draw the lower pipe, basing it on the upper pipe.
Note: the pipes are drawn in this part only if they are being resized. Otherwise the pipes are redrawn every time the game loop runs and that code will be at the end of the function.
Testing for Collision
Still in the same function, we need to now test to see if the pipe hit the Fox (which is the same as the Fox hitting the pipe, but because the Fox is flying, it is easier to test from the pipe's point of view). Here are the tests, base on simple calculation.// Test for upper pipe collision.
if ((foxX > uPipeX) &&
(foxX < (uPipeX + 50)) &&
(foxY < uPipeLength)
){
console.log("Hit upper pipe. Ouch!");
// Game is over.
gameOver();
}
// Test for lower pipe collision.
if ((foxX > uPipeX) &&
(foxX < (uPipeX + 50)) &&
(foxY > (boardHeight - lPipeLength))
){
console.log("Hit lower pipe. Ouch!");
// Game is over.
gameOver();
}
This simply check for the x and y values of the Fox and each pipe. It is simpler to test each pipe separately. If they collide, the game is over and a separate function is called. Note that I've used the console.log here a lot. It was invaluable in determining whether things collide and where they are. Don't leave home without it!
Draw the Pipes Every Time
The pipes need to be drawn so they move every time through the game loop. But this is separate from the drawing that takes place if the pipes move off the left edge. Here's the simple drawing:uPipe.x.baseVal.valueAsString = uPipeX;
lPipe.x.baseVal.valueAsString = uPipeX;
}
Ending the Game
I had fun deciding how to do this. When there is a collision with the pipes or the Fox hits the top or bottom of the screen, the gameOver function is called. This just does two things:
1. Make the Fox big. Really big. He blows up!
2. Then a quick timer call takes place so the Fox won't stay blown up too long.
Here's the code for that:
// Game over!
function gameOver() {
// Make the fox big!
myFox.setAttribute("height",200);
myFox.setAttribute("width",200);
//Wait wait a short time!
foxBlowUpTimer =
setTimeout(foxBlowUp, 700);
}
And the final code sets the Fox back to normal size and puts him back to the starting position. The game continues. Here's that code:
// Fox blow up!
function foxBlowUp() {
// Reset fox values.
foxX = boardWidth / 2 - 100;
foxY = boardHeight / 2;
foxW = 50;
foxH = 50;
// Reset fox position.
myFox.setAttribute("height",foxH);
myFox.setAttribute("width",foxW);
myFox.setAttribute("x",foxX);
myFox.setAttribute("y",foxY);
}
So that's it for the Flying Fox! I hope you've enjoyed this walk through a simple game and if you get a chance, check out all the other games that were inspired by Flappy Bird at http://itch.io/jam/flappyjam.
No comments:
Post a Comment