Thursday, January 30, 2014

PROGRESS ON NATZY

Post no. 9

So since there's a week left to the final submission, I have decided to just input the text box instead of separating the individual sourced words into falling elements. I would do some animation every time the users presses the space bar and would include a new interface to suit the textbox.

The new background interface, square, not round anymore to compliment the rectangular text box.
Will have an animation at the center.

I had a little trouble with the keypresses where I could not modify the clicks from a fiddle I found online. So, I created a StackOverFlow account and asked my questions online since I no longer had access to my tutors.

Here is my question on StackOverflow.

Through this site, I have had a lot of help from people from all around the world that would look and tried to troubleshoot my codes. I received comments and people edited my post for easier viewing.

This is the original fiddle I would like to achieve with Spacebar keypress. But it's my first time looking at a code which combined the var and functions together.

I have also created a JSFiddle account, will use it soon.

Tuesday, January 28, 2014

PROGRESS ON NATZY

Post no. 8


Fixed my audio and buttons today at class. Set a barrier so the volume seeker wouldn't over shoot the bar. This is actually done via px and not actually setting a div there which acts like a barrier.

Troubleshooted the buttons' background positions as well.

Will implement them into the game today. I actually lost Joanne's code from last week so I had to recode them from scratch. Lucky I remembered some keywords.

What else I plan to do :


  • Place the end game swiffy js when game ends.
  • generate random elements which animate
  • redesign UI to fit textbox
  • Hide mouse ingame
  • Execute the Hard and Easy levels by changing the text in the xml for the hard level into Shakesperian English. 

Tuesday, January 21, 2014

PROGRESS ON NATZY

Post no. 7

Had a really  good tutorial session with my tutor Joanne today regarding the Natzy's coding.

Issues discussed were:

  • My volume control

Initially I used canvas to control the volume. I was told that I could do the same with div   tags without needing to use the tabindex like for canvas. We had a little trouble troubleshooting this but the problem was, the arrow keys needed to listen to the window instead of the element itself.
  • The lag from my sound effects
Turns out that it was my mp3 itself that has a small little buffer time in front of it that prevents the track from playing instantaneously. 

  • Learned that I neednt need to use canvas for the random generated elements.

  • Learned that native Javascript and Jquery are two seperate languages and I should just use one. Jquery being $, and Javascript being vars.

  • To have the game fit on all screen sizes, 1000x700 would be most ideal.

So those were the stuff I fixed when I returned home. 
   

Sunday, January 19, 2014

NATZY : USER TEST RESULTS

Post  no. 6 

Questions:

Do you think the idea is interesting?
How are the Graphics and game mechanics?
What do you like about it?
How else can Natzy be improved?


Feedback:
USER 1
1. Yes.

2. The graphics are simple but can be refined. The sound for the front menu page lag when I type. Can't really comment on the in game mechanics cause it is incomplete. The volume has no boundary. It disappeared when I up or put down the volume too much.

3. The colors and the logo. And the game over animation.

4. just finish the game!


Saturday, January 18, 2014

PROGRESS ON NATZY

Post no.5

What I did so far:

  • Linked up my fonts
         I referred to my ThirdWheelers website and copy and pasted the codes from there.
  • Added some sound effects when user is typing.
         I had to put the sound effect for each keycode to prevent the sound from triggering when                users key in the wrong key.
  • Did my Favicon today too.
  • Added in the ending animation, but it isn't on queue yet.
  • Prevented the page from scrolling to avoid page scrolling when I attempt to control the volume of the sound with the arrow keys.

Sunday, January 12, 2014

PROGRESS ON NATZY

Post no. 4

Had a second presentation on our learning progress today.

And this is what I had so far:


  •  Hid the mouse to encourage players to use the keyboard.
  •  Implemented sound control via arrow keys
  • Modified the typing test 

   1. Removed their "allow mistakes" function which makes the word red when they word is typed in wrongly.

2. Force players to type in the correct spelling in order to progress to the next word.


  • Linked the credits/about/index pages. Input by keyboard.

Reasons why I decided to implement typing right ahead at the menu section is to let the players know that the input to this game is only via keyboard. It gives them a hint on what to expect later.

What's next?
  • Link the fonts
  • Implement scoring
  • Generate elements at random positions
  • Animate Sprite
  • Sounds for typing and enemy bursting.
  • Win page.

What I want for the future for this game?
  • Multi player mode (Sock OI / Node js.)
  • For this game to be available on mobiles.

Monday, January 6, 2014

PROGRESS ON NATZY

Post. no 3

Had a consultation with Joanne today, discovered a few problems. She suggested to simplify my mechanics into something simpler, that is up to my skill of coding.

Problems:

  • I can modify a chunk of text from the typing game, but it is all at random and it doesn't make sense. Basically, it's at random. But it's a string of text nevertheless.
  • I could hack current 'falling' html5 typing games, BUT, I could only input 1 letter at a time.
  • I need a code that could track the form box automatically when the first letter of each textbox is pressed. Kedydown?

What I can do now:
  • Instead of keying in long strings of text, I could put in text that suggest the particular word like 'Br_wn' or 'He_lo', that way it would still be a typing game, just not in long texts.
  • Stick with the giant chunks of text. 
  • Once typing the text is complete, it will redirect to another page. Get the links to work!
  • I could connect the game only with the help of LocalHost. Xammp.




Sunday, January 5, 2014

Progress on NATZY

Post no. 1

Week 1



Obtained the brief today, I have always been intrigued with typing games. Also, I have always wanted to code my own game in HTML5. Out of the jealousy of my previous classmates who had the opportunity to do it in their last assignment, I stuck with this idea.

The story of this game complements my individual character, I personally love to correct grammar. I feel like it's important that proper use of acronyms and grammar should be used. Looking at a text on Facebook which says, 'Your so pretty' drives me nuts. It's 'YOU'RE!' pants. Misspelling Nazi might trigger the inner Grammar Nazi in you to correct it's spelling. Oh, did it also in case as it is quite a sensitive word to throw around.

I started researching on a few typing games online, both coded in Flash and Javascript. It's somehow always easier to code it in Flash, but I feel more comfortable with good ol' HTML.

Went home, did a couple of sketches on my notebook of the characters and logos.


Post no. 2

Decided to combine two posts into one due to late blogging. So here are some of the sketches and references I looked at. Have fun playing them!

TouchType

Pros: It senses the keys automatically and the animations are great.
Cons: Once I press a letter, like say.. "T", all the T's in the text would be selected and that would be a mess.


TypingMonster (Flash)

Pros: That it works well.
Cons: It's graphics and animation. I get a little tired trying to type the text and numbers flying by me.








ClockWorks (Flash)

Pros: Graphics and animation
Cons: Too much going on in the items section.









Ztype

Pros: Graphics, animation and mechanics
Cons: That it's not on Mobile!





Now for my learning progress.

I hacked the typing game and put in my own text. It's possible!
 Another typing test that I managed to hack.
 Some of my sketches for my grammar nazi character. I'm going to name him Harold Natzy.
In case you were wondering about the other two characters beside him on his left and right, I initially wanted to create two modes, a Facebook girl mode and a Shakespere mode. 

I figured no one knows what in the world is Shakespere even saying in his novels and poems. So I planned to do a typing game that masks ancient words with its original meaning. Four weeks left, looks like I'm stuck with a more relevant character, the Facebook Girl. I only have time to do one mode.


I tried out sprite and it is ridiculously difficult. I had to align the pictures exactly symmetrical to one another if not it wouldn't work. They had to be the same size, height and width. This LOL sprite down here 'somewhat' works. A bouncing red ball, not so much.



Above is a before and after picture of my in-game interface, after I consulted with the tutors Kelvin and Zui.
I wanted to have the same game mechanics as TypingMonster(link above) But it was suggested to refine and make it simpler.

I took out the text box and fully focused on the flying words instead. I put the scores and the hp bar at the side as well. It was suggested that I maintain one input instead of two. It wasn't encouraged that I make the user switch between inputs, mouse clicks and keyboard. So, I integrated the volume via type of numbers.

So that wraps up the past couple of weeks.