Step 10 - Finalize game and tutorial

Step 10: Finalize game and tutorial

• Finish up the game and resource

Score: 10

Evaluation & Deliverables:

This week I wrapped up the website. I made a tutorial to help users learn how to play the game. I used JavaScript and jQuery to make floating boxes that shifted around the screen to point out certain game features. I'm hoping the game makes sense to people. It's not exactly the most intuitive game. I almost feel like the game is an instance of Pavlov's conditioning--using punishments and rewards to help someone learn. Anyways, the instructional aspect may have some issues, but the game is up and running! The main point of the game is to help people learn a metaphor that may help them remember the purpose of different punctuation marks. Hopefully it helps!

Here's a link to the "finished" product: https://googledrive.com/host/0Bwuo-xxRHyjmOXZSZHA4YmVRSE0/punctuation_project/web_resource_mainpage.html 

Here's some scripting to run the tutorial:

function tutorialBoxNext() {
$('#comment').removeClass();
if(tutorialCount === 0) {
$('#comment').addClass('A');
document.getElementById("comment").innerHTML="<--This is Mark.";
tutorialCount++;
} else if (tutorialCount === 1) {
$('#comment').addClass('B');
document.getElementById("comment").innerHTML="This is one of Grammar's Thugs-->";
tutorialCount++;
} else if (tutorialCount === 2) {
$('#comment').addClass('C');
document.getElementById("comment").innerHTML="And so is he-->";
tutorialCount++;
} else if (tutorialCount === 3) {
$('#comment').addClass('C');
document.getElementById("comment").innerHTML="Avoid these guys.";
tutorialCount++;
} 

Step 9 - Animate the character

Step 9: Animate the character

• Learn how to get things to move on Canvas using JavaScript

Score: 10

Evaluation & Deliverables:

Well, the original plan was to learn how to get things to move using JavaScript, but I actually used JQuery (which is pretty much JavaScript, right?). I am glad I did! Once I learned how to use the animate function, it was pretty manageable to get the character movements set. I turned to my brother-in-law for help on this one. He's a BYU grad in computer science and works as a programmer for a company in Provo. He walked me through the basics of JQuery, specifically on the animate function, adding and removing classes from CSS using JQuery, fade in and fade out, and getting functions to occur in a certain order. We built two character movements together and then I completed the rest on my own.

Anyways, the animations are up and running! They work great on my computer. I noticed when I run the game online that the first few animations are kind of choppy, but then it looks smooth. Here's a link to the game: https://googledrive.com/host/0Bwuo-xxRHyjmOXZSZHA4YmVRSE0/punctuation_project/game.html

Here's some of the scripting to get the character to move. This particular script tells the hero to collect his stolen chips.

function collectCorrect(callback) {
$('#hero').addClass('walking');
$('#hero').animate({
left: 920
}, 1010, 'linear', function(){
$('#hero').removeClass();
$('#hero').addClass('up walking');
$('#hero').animate({
top: 280
}, 700, 'linear', function(){
$('#hero').removeClass('walking');
$('#hero').animate({
top: 280
}, 300, 'linear', function(){
$('#items3').hide();
$('#items2').show();
$('#items1').hide();
$('#itemsOff').hide();
$('#hero').removeClass();
$('#hero').addClass('right walking');
$('#hero').animate({
left: 965
}, 400, 'linear', function(){
$('#hero').removeClass('right walking');
$('#hero').addClass('up');
$('#hero').animate({
top: 280
}, 300, 'linear', function(){
$('#items3').hide();
$('#items2').hide();
$('#items1').show();
$('#itemsOff').hide();
$('#hero').removeClass();
$('#hero').addClass('right walking');
$('#hero').animate({
left: 1010
}, 400, 'linear', function(){
$('#hero').removeClass('right walking');
$('#hero').addClass('up');
$('#hero').animate({
top: 280
}, 300, 'linear', function(){
$('#items3').hide();
$('#items2').hide();
$('#items1').hide();
$('#itemsOff').show();
$('#hero').removeClass();
$('#hero').addClass('down walking');
$('#hero').animate({
top: 370
}, 800, 'linear', function(){
$('#hero').removeClass();
$('#hero').addClass('right walking');
$('#hero').animate({
left: 1020
}, 40, 'linear', callback);
});
});
});
});
});
});
});
});
}

Step 8 - Create background pieces of game

Step 8: Create background pieces of the game

• Test buttons against actions that should occur (doing text responses rather than the animations) - learn whatever functions are needed to get this to occur (I’m sure Arrays are involved.
• Learn about displaying things on Canvas for HTML

Score: 10

Evaluation & Deliverables:

This week, I made all the graphics necessary for the game, and I plugged them into the functions I made previously. Everything is in the right place and working as it should. Sometimes there is a lag in uploading the images, so you see parts popping up at random times as the page loads. I'm wondering if I did a JQuery fade in and fade out if that would cover up the graphics rendering lag? Or is there a function I can do that doesn't display any of the graphics until all the parts are ready?

Anyways, I abandoned the HTML Canvas approach to displaying the game. What I have now with HTML, CSS, and JavaScript seems to be working out alright.

I have several layers of graphics. This allows for the hero to move behind some pieces but in front of others. For example, there is a door that the hero sometimes has to go through. I wanted it to look like he was passing through the door, with some of the graphics in front and some behind. I tested it out by moving the hero around the screen and it seems to work well. Anyways, I have a list of all the images needed for the game in HTML (but I set them to a blank, transparent page; Javascript will change the blank pieces to other images as needed). In CSS, I have each image set to taking an absolute position so that they can be stacked on top of each other. I also assigned them z-scores so I can specify what should be above the hero and what should be below.

Next week I'll be working on getting the animations to come together. Just about done!

Step 7 - Create a randomizing function to shuffle content in game buttons

Step 7: Create a randomizing function to shuffle content in game buttons

• Learn about randomizing functions

Score: 10

Evaluation & Deliverables:

This week I searched all over on how to randomize numbers. Codecademy describes the basic Math.floor/Math.random tool. I tried several, but ended up really liking one I found in a Google search, but now I can't find where I got it from. And I can't remember if I combined two approaches, or what. I will do better about this in the future. Anyways, here's the function:

Array.prototype.randomize = function() { var i = this.length, j, temp; while ( --i ) { j = Math.floor( Math.random() * (i - 1) ); temp = this[i]; this[i] = this[j]; this[j] = temp; } }

The idea behind this function is that you can take any array and add .randomize to it to get it to use random numbers. I like this because you do not have to make a new function for each array. 

I have a lot of things in the game that need to be randomized. The main buttons display five different types of punctuation marks used in a sentence. I want each type to show, but I don't want it to always be in the same place every time. So I created an array that included each punctuation mark type and randomized it so that it was displayed in a different order for each new segment of the game. I also didn't want the same sentences to be used, so I created arrays of sentence options using each punctuation mark that could then be randomized. Finally, there are 5 different hallway options that make up the segments of the game. I needed to randomize which order those hallway options appeared in the game so the experience wasn't the same every time you played the game. Having the randomize function made it easy to do all these. Usually I just used an array of numbers, one for each option that the array represented. Then I made if statements to get the game to do different things based on the number produced from the randomizing function.

Here's an example:

var randomizeGameScreen = [1,2,3,4,5];

function renderGameScreen() {

randomizeGameScreen.randomize();

if (randomizeGameScreen[0] === 1) {

document.getElementById("feedback1").innerHTML="Collect Items";

addScorePossible();

document.getElementById("gameScreen").src="hallPractice.jpg";

} else if (randomizeGameScreen[0] === 2) {

document.getElementById("feedback1").innerHTML="Pause";

document.getElementById("gameScreen").src="hallPractice1.jpg";

} else if (randomizeGameScreen[0] === 3) {

document.getElementById("feedback1").innerHTML="Go Through Door";

document.getElementById("gameScreen").src="hallPractice.jpg";

} else if (randomizeGameScreen[0] === 4) {

document.getElementById("feedback1").innerHTML="Door and Collect";

document.getElementById("gameScreen").src="hallPractice1.jpg";

addScorePossible();

} else if (randomizeGameScreen[0] === 5) {

document.getElementById("feedback1").innerHTML="Turn Left";

document.getElementById("gameScreen").src="hallPractice.jpg";

}

}

Anyways, it is working out. I've also fiddled around with backgrounds and characters to see if the randomizing and if statements worked with the graphics, and it seems to be working well (you can see the graphic testing in the example above where a different background image is being displayed. I'll be inserting the real graphics for next week. I think it should be pretty easy to plug in.

Peer Critique

This week we are reviewing a peer's project and giving feedback. We are to discuss usability, purpose, flow, function, aesthetic and other relevant elements.

Here's a link to my website: https://googledrive.com/host/0Bwuo-xxRHyjmOXZSZHA4YmVRSE0/punctuation_project/web_resource_mainpage.html

Step 6 - Make game interface

Step 6: Make Game Interface

• Finish JavaScript lessons on Codecademy

Score: 10

Evaluation & Deliverables:

I updated my learning contract for the rest of the semester to better match what I have left to do. Here's a link to the updated file: Learning Contract. This week I finished the lessons on Codecademy. I wanted to get through them to better understand what I will still need to learn beyond Codecademy. I'm glad I finished the lessons there. While some of the lessons are not very clear, some are, and the overall idea of how JavaScript works is worth having.

I made the game interface using HTML and CSS. I realize I need to do better to comment on what I am doing in my files so others can follow what I am doing. I am trying to do that better, but mostly it is showing up in my JavaScript. I also realized that the naming I used for IDs or Classes no longer make sense to what the product is now. Sometimes I took the CSS I wrote for a specific element and ended up reusing it for other elements. I need to go and clean things up at some point so that my coding and programming make sense to others. Anyways, the interface for the game is up and running and I think it will work great.

Here's a link to the game: https://googledrive.com/host/0Bwuo-xxRHyjmOXZSZHA4YmVRSE0/punctuation_project/game_mainpage.html