A few years ago SAP released a development kit which showcased some of the new dev libraries with a couple of WebDynpro built Demo Games, for example Chess.
The Dev Games were a great Idea, but as I had limited WDJ skills at this point I decided to undertake the task in Visual Composer.
My peers were not slow in telling me that VC wasn't complex enough and that the controls would limit the ability to create an exciting interactive game.
These words were like red rag to a bull and within minutes I had decided that 'Connect Four / Four in a Row' was the game to make.
So, was it possible ?????
Lets walk it through !
1. Create the Grid
The first thing we need to do is to create a grid for the coins to sit in. The design view of the application can be very simple as all the work is in the form, the context and the logic.
As you can see the main element of the layout is 1 single form split into an 8x8 grid, with each cell containing an image field, this field can have three states, EMMPTY, PLAYER 1 COIN, PLAYER 2 COIN.
This Logic is based on a deep context in a data store, where we keep a track of every cell in the grid and what its state is. In this store we also keep a track of who's turn it is and what the count is for the column (how many coins have been dropped in this column A).
Once this deep data store was complete we need to link all the cell's in the UI as shown in the image above.
2. Update the Grid on the drop of a coin
The next step requires us to tell the store when we have dropped a coin, where we dropped it and how many we have dropped in that column.
To do this we have a number of actions on each drop button at the top of each column.
Depending on how many coins have already been dropped in this column, we will skip through the actions to update the right element in the data store, this will then reflect either one of the players coins in the UI.
Setting all the fields and the button actions up can take some time but once you have the logic ironed out for one column it is identical going across from left to right.
3. Determine when someone has won!
At this point I would love to tell you that there was a nice simple 4-5 line bit of logic to determine when someone has won, but as time was short and my mind was frazzled from adding and defining over 100 actions! I decided to go with the first way that came to mind. . . . . Checking every possible win combination!!!!
This takes’ a while and if anyone can come up with a better solution, please go ahead! :smile:
4. Lets Play !
Once all this is done and setup correctly, find another Tech Geek and play a bit of Connect 4 / Four in a Row in VC
Link to a video showing the game in action - http://www.youtube.com/watch?v=dcVDgTjkpNA
Finally, you may ask yourself Why is this relevant ???
To be honest making a game in SAP isn't that relevant, this was a bit of fun to prove we could create working games using some of the netweaver tooling, in particular VC. Right now GAMIFICATION is a big buzz word at the moment, not just in SAP but in all areas in business.
As a point of reference see this great Document by Mark Yolton - http://scn.sap.com/community/gamification/blog/2013/04/30/gamification-much-more-than-fun-and-games
The document by Mark touches on how we use Gamification already in everyday life, and why it matters to SAP.
I believe gamification to be a real solid foundation for future development and design. Competition is everywhere in our day to day life and being able to harness a workforces’ natural competitive spirit without losing sight of the end goal, can only be a positive approach.
If gameification interests you, check out the SCN Gamification page, it might just get you thinking about your first gamified app!
SCN Gamification - http://scn.sap.com/community/gamification
As always, Thanks for Reading and I hope you enjoyed the content (Just a bit of fun :smile: )
- SAP Managed Tags:
4 Comments
