Posts Tagged ‘Connect!’

The Final Cut (for now)

February 18, 2008

After a final tweak (namely switching which color shows up if you decide not to differently color dead ends), I have decided to be DONE with Connect!

http://www.playdeez.com/JSConnect.html

Enjoy.

What’s next?

Well, I’ll have a new computer in about a week, and it’ll have a XNA able video card, it’ll run Vista(so I can make a gadget), and it’ll be able to run WinterMute in something other than super slow software mode.

And all of my source code is now safely tucked away on the external HD in an SVN repository, so it is a simple matter of plugging it into the new machine and installing a handful of things.

I still haven’t gotten sick of javascript programming, and  I’ve progressed beyond my initial primitive usage of the DOM (as can be found in Pipes!) into a more “sophisticated” usage of a handful of rather versatile HTML elements with some heavy manipulation of styles.  At this point, I use <div> <img> <input> <button> <p> <a> and occasionally <span>, and I’m just not seeing a need to use others at this point.

The Final Stretch?

February 9, 2008

http://www.playdeez.com/pocket/lint/connect/connect!.html

Well, I’ve got all of the buttons on the main menu doing something, and my last two dialogs (theme selection and options) are now in and working.

Which means I now head into polish mode.  The game has been functionally there for quite some time, and now I’ve got all of the menuing and UI support stuff finished.

Typically, where I am at right now would be about as far as I’d go with a game. While I actually touched the real game code today (the stuff that actually contains game mechanics), it was a small change to support the options I put in.

From here on out, it is all small, barely noticeable changes that  take a lot of time and, truth be told, are really annoying and frustrating.

For example, there is one tweak that will be necessary involving the menu button and how it initially shows up in internet explorer. IE and fox handle the “right” style a little differently, and making code that works in both is a little hackish.

Another thing still to do is put in a “you win” dialog or something when the puzzle is complete. I’ve long since ditched the cheerleader, and I’m most likely to just go with a simple window popping up that states “you win! congrats!” and maybe show some statistics.

For a while, I had toyed with the idea of completely ditching <img> tags everywhere, and strictly go with html tags <input> <button> <div> for my graphical elements.  I could easily replace all of the images used on the board with <div>s, and the load time would be amazing, since there would be no images to download.

I have decided not to go that route for this game (I’d like to be done someday, and this sort of constraint reminds me a bit of my ASCII graphics and hexagonal board fetishes, and nobody likes an eccentric game developer) .

New Updates

February 7, 2008

http://www.playdeez.com/pocket/lint/connect/connect!.html

It’s getting to the point where I can begin to see the end of development!

I now have some content for Instructions, Tips and Tricks, and About.  I used the same “dialog box” for all three.

Also, a minor improvement that I was remiss in adding for quite some time now…. the “are you sure” prompt when you start a new game when the old game isn’t finished yet.

Contents in the help/about/tips windows are likely just placeholder, but I tried to give them some semblance of being decent content, as I have a tendency to have placeholder content become permanent.

Through this game, I have become a lot more <div> savvy.  For example… if I were to rewrite JetLag again, it would be done with 41 <div> tags(score, high score, background, head, 5 tail pieces, 2 walls, 30 blocks), a whole lot of style manipulation(mostly left and top), and two updates to innerHTML for scoring.

….

I’ve been thinking about my previous MakeDeez Games project, and I’ve been making a new list of games that I think I should have on the site.  Again it is over 50.

Considering that Connect! has taken about a month to get to where it is, and is likely to take at least another 2-4 weeks to be “finished” with all of the tweaks and whatnot, and that Connect! isn’t a very complex game (I’d give it a “2” on a scale of 1 to 5 with 1 being “Click the yellow rhombus” and 5 being “Space Trader” or “Rogue”, which is about as complex as I feel I could possibly complete on my own) .

If a “2” takes a month and a half to two months, a “1” may take a week or two, a “3” is likely to take at least three months, a “4” would be up to six months, and a “5” up to a year, I think I’ve got myself booked for the next 20 years.

To be honest, the itch to write “Dungeon Delver” is upon me.  Not for the first time, of course, and doubtfully for the last.

Update

February 4, 2008

New Version of Connect!

Currently, I’m working on it in an isolated manner, so this link is a temporary work in progress type of deal. Eventually it’ll be merged into the real online version again.  Really this isn’t too big of a deal… I only have to changed a couple of paths to images (on the actual version, the path to images is images/jsconnect rather than simply images), but I have over numerous updates tired of doing this as often as I have been.

Also, as far as Connect! is concerned, I want to have it as fully functional as possible before  I update it on the main site again.

The main menu is up and two buttons are operational.  The new game dialog has been made and is operational.  You can now use game numbers to play the same game over again. I currently don’t have a way to retrieve the game number of the current game, but that’ll happen soon.

This project has really taught me a lot about the platform I’m working on. I’m a lot more <div> savvy than I was before, and I’ve picked up a couple of “this’ll work in browser X but not browser Y” tricks.  At the moment, I still only target IE and Fox.

In copying the project to the site, I noticed there is a bit of image clutter for me to clean up. I completely ditched images for the main menu and new game dialog (and all other dialogs, but I didn’t make any images for them, so there is nothing to get rid of).

I am on Revision 32 in my SVN repository already, which is quite a few to go through from January 18 to February 3.   Of course, I don’t make myself go through code reviews.

New Backup Scheme and Other Tales

February 3, 2008

The title of the post may be a little misleading, as a “new” backup scheme implies that I had an “old” backup scheme, and I didn’t.  Yes, shame on me.

Yesterday, I got an external 160GB USB hard drive, and have since migrated my SVN Repository to it.

Today I was working on Connect!, especially the main menu and now the sub menus (the new game menu for instance).  When I was first putting together the main menu, I made images for each button’s up, down, disabled, and hover states. With 7 buttons, that’s 28 images.  I then changed one button today, and it was rather a pain to do, so at this time I am making a decision to switch from image based buttons on the menu screens to <button> tags.  Yes, to a degree I lose the consistent look and feel across browsers, but I do still have the ability to manipulate styles.

I will be leaving the imagebuttons on the navigator, however.  Mostly because they are “done”.

Menu Dialog

February 1, 2008

I’ve got a main menu dialog coming along for Connect!

While I originally used <input> and <button> tags, I am now ditching those in favor of my own “buttons” using <img> tags.  This is mainly so that I can get a consist look and feel across browsers. Also, buttons and check boxes are not terribly difficult to implement with an <img> tag: just four images and a few javascript handlers (onmouseover, onmouseout, onmousedown, onmouseup, and onclick).

For some things, I’m going to be stuck with the inconsistent rendering of various <input> tags, especially text boxes and combo boxes. I’ll go as far as reinventing the wheel with simple controls, but not when it comes to complex controls like that.

I’m really quite pleased with how Connect! is turning out. My earlier javascript work looked very cheesy and plain, but as I improve with my mad js/html skills, it is looking like nothing is too hard to do in js.

Which means that the programming world has become something like it was when I first started approximately 20 years ago, by which I mean that anybody can write software without buying big, expensive, complicated tools and IDEs and compilers.  I can make a game with notepad and MS Paint if I want (although I don’t… I use Notepad++ and Paint .NET)

Stand Alone Version

January 30, 2008

For a stand alone version of Connect!, I could have gone with a number of different solutions.

One, I could just distribute a zip file with the html and js files in it. This did not appeal to me, as it wasn’t really any better than just having it on the web.

Two, I could make an Adobe Air application. While I still may do this at some point, I don’t want to go through learning where all of the little tweaks have to be done to make it work. Also, I don’t want to force players to install Adobe Air.

Three, I could translate it into a Yahoo! Widget or other widget/gadget/doodad thingie. While I am likely to still make it a Yahoo! Widget, the same idea of requiring the user to have a particular install on their machine isn’t what I want.

Four, I could translate it into another language. I considered C#, ActionScript, and the ECMA-esque scripting language of Wintermute.

I actually decided on C# (realizing that I’m limiting the players to windows, but the Mac folks can wait for the Yahoo! Widget), but I also decided not to translate the game itself… I decided to simply use the WebBrowser control in .net to run my game inside of a very simple C# winforms application.

As it turns out, this is a pretty easy thing to set up. It’s pretty easy to link the C# application to the script running inside of the browser. The script can tell the application to resize, and the application can tell the script to start a new game, and that’s about as far as I’ve gotten, but the proof of concept is there, and I’ll be able to flesh out all of the functionality within a normal windows menu bar once I’ve got the game itself done.

Here’s what it looks like:

connectcsss200801290916.png

And here’s where you can download a RAR file with an installer. Keep in mind, not all of the functionality is in the stand-alone yet…. this is merely a concept demo.

http://www.playdeez.com/games/connect/1_0_0_0.rar

Problem Solved(ish)

January 28, 2008

The issue with the clever JavaScript code not working in IE has been solved, and an important lesson has been learned!

That lesson?

Don’t do:

eval(“function(){/*…*/}”);

And expect it to work in IE.

Fox likes it just fine.

And yes, I know clever use of eval is discouraged, but I needed it! No, really! I needed to encapsulate the event handling mechanism for a DOM object, shunting the event to a different controller object!  eval was the only way!

Fixing the problem for IE caused a different problem for IE. I was calling a different event handler from one of my event handlers, but in the IE version of the event handler window.event.type is used, which caused a stack overflow. So, I took out the call, replaced with equivalent code, and moved on.

It now works in both fox and IE, with the new navigator. I’ll upload it after I’ve gotten a few more kinks out.

I had my wife play the game with the new navigator, and the only part that she did not find intuitive was my “revert” button.  I had originally designed it so that if you were looking at a historical view of the game (by using the previous move or previous mark buttons), making new moves was not allowed (because it would mess up the rest of the history), so I made a “revert” button to restore the game to that point in the history.

Except that it turns out that the natural inclination of a player is to back up to the point they want, and then just start making moves.

I didn’t want to just make an auto-revert when making a move, because that might be a mistake on the part of the player. However, I it was clear that the revert button wasn’t the right solution, so I left the revert button in (although I’ll likely take it back out) and made a prompt if the player decides to make a move when looking at the history. This way, I prevent mistakes on the player’s part by being too hasty with a move while scanning the history, but I also don’t frustrate the player with unintuitive controls.

In the next few days, I should have it updated on the site, and I should have an updated feature list left to implement.  I’m feeling it start to take some of its final shape at last.

UI enhancements, and a new problem…

January 27, 2008

New screenshot:

Connect Screen Shot with new Navigator Controls

Here you can see the new navigator controls on the bottom of the screen. I like the new scheme a lot better than the old one.

Unfortunately, in the creation of this navigator, I used some clever JavaScript that IE apparently does not like, so until I figure out what’ll make IE happy, no update on the site.

Refactor #2

January 26, 2008

Well, I added a lot of stuff, and Connect! got messy again.  Also, I think I’m evolving in the way I do my JSHTML projects, so my style is changing, which means I need to go through and make stuff consistent again.

I’ve pretty much touched every script file in the project making a handful of functions into an object instead.

One of the things  I really like aboutJavaScript is the easy way I can go from:

function  createThings(){/*…*/}

function showThings() {/*…*/}

function  hideThings(){/*…*/}

to:

var things=

{

“create”:function(){/*…*/},

“show”:function(){/*…*/},

“hide”:function(){/*…*/}

};

I’m starting to build up a pretty good library of objects that are reusable. For example, I have a htmlGenerator object that can make tags for me given the following:

htmlGenerator.createTag

(

{

“tag”:”img”,

“attributes”:

{

“id”:”theImage” ,

“src”:”images/theimage.png”
},

“styles”:

{

“position”:”absolute”,

“left”:”16px”,

“top”:”16px”

}
}

);

Which will spit a string that contains:

<img id=”theImage” src=”images/theimage.png” style=”position:absolute;left:16px;top:16px;”>

And this may lead you to question “What does this gain?”

Now I can manipulate tag descriptor objects (say in an array) and use the same descriptor object multiple times.

Anyway, I find this more useful than my old way of just writing the text out.