Digital Workshop

Just a couple of simple games built with Opus Pro HTML5 to see what might be involved:

Simon Says is a HTML5 version of Simon - the memory sequence game. It was simple to build and mostly used Opus Actions, except where an array was required as the Action Array does not allow for a variable index value. This meant using a small amount of basic OpusScript.

The game creates a random sequence of colour flashes which increase in length once the user successfully recalls the current sequence.

http://activities.interaktiv.co.uk/simon

Sudoku Sensei is a HTML5 version of the popular game found in many daily newspapers. Years ago, I had wanted to build a Plexus version of this game, but never found the time to look at the code required to generate the Sudoku pattern. With Opus HTML5, we can concentrate less on reinventing code and instead tap into a vast library of existing JavaScript. My intention was to use the Sudoku.js library and then use Opus for the interface and OpusScript for communication with the library.

I hit a few walls and realised that it was easier to use my own external JavaScript directly to communicate with the Opus generated HTML5 and Opus.js files. My biggest problem initially, was trying to build it as I would have done for a traditional Opus Project rather than splitting it into a designer (Opus HTML) & developer (JavaScript) project.

The game fills the grid based on the Sudoku level the player selects. The player can then complete the remaining blank cells and at any point check the grid. This last feature allows novices to confirm the validity of their numbers rather than have to complete the entire grid in a single game - making it approachable for a younger audience or Sudoku newbies. The grid is entirely dynamic - and this means that it must be generated each time. I've run it on various devices and with the except of a smart TV, there seems to be very little lag in the populating function.

http://activities.interaktiv.co.uk/sudoku

Feel free to waste an hour or two playing or use them in class. Would also be interested in knowing how they fair on other devices.

</mack>

Hi Mack,
Tried sudoku on PC/FF, and a Google TV/Chrome-browser.
In both cases, changing a number involves hitting Backspace and then a number entry. I'd prefer some way to Select or Dbl-click the square and simply overwrite what is there. Even better, but probably not conventional to the game, would be to drag & drop from trays on any of the four sides. (or simply a 'pick & place'... click to choose a number, click square to write it there)

My Remote for the Google TV is an obstacle here. Have to click to get the Pointer to appear, and it goes away in ~7 sec. To input Backspace & number, the qwerty keys are on the flip-side of the remote. Then back to other side to get the pointer again. (LG TV)

-- 'yes', lag in loading. About 6-7 sec for 'Easy', maybe 8-10 sec for 'Med' or 'Hard'.
-- on Chrome in G_TV, Sudoku extends off-screen at the bottom initially -- as Chrome Tabs show until one scrolls down. So the Help & Play buttons are initially out of sight.

- - - - - - - - - -
Thanks for highlighting the Javascript and Opus/Opusscript relationship. I will need to jump into this stuff again, and learn all over again... where HTML5 and Javascript dovetail, where Opusscript and Javascript dovetail. Plus the libraries of course.

Hi Lar,

Thanks for the feedback.

The scaling issue is easily solved - I turned off the minimum width / height - so now it should fit - it did on my LG. Because of this, I made some of the buttons bigger.

The changing values issue was something I'd already had flagged. I did some digging and it seems to be an issue with Opus' handling of the input verification. I'll email DW.

That's about the same lag time I get on my LG TV. My desktop browsers come in at about 0.5 seconds and my tablet at about 2.0 seconds. I've not looked at the library code, but person who who converted it to JavaScript, did note that because of the complex calculations - a lag was likely.

As for your alternative interface idea - check out the beta below. Just click the number you require and then the cell.

http://activities.interaktiv.co.uk/sudoku-beta/

</mack>

Mack,

I do like your implementation of the pick & place. It is simple and it's clean.
I would note that
-- a person could accidentally click on a square where they previously input a number, and they may not remember what number they really wanted there. A solution, if needed, would be to require a 'pick' everytime rather than leaving a number in the tray selected.
-- it seems using the pick/place approach precludes selecting a square and typing-in a number. That's okay with me, but others may want typing for some reason?

On a sidenote, I have found the LG TV (xxGA6400) to be very under-powered. Chrome browser is very sluggish (latency AND page/content display). I'm at Android 4.2.2 (Oct 2013) and I doubt there will be any OS upgrades. Apps on GooglePlay are very limited due to filtering for compatibility. Sideloading is hit and miss. https://en.wikipedia.org/wiki/LG_L9

Thanks again for making your productions visible, and for including explanations and insights into the efforts.

That fits with something I was thinking about last night.

I've tweaked the beta version. It now resets the presets column to 'empty'. Additionally, when no preset is selected, clicking a user populated cell will clear the value.

And lastly, for those 'grey' moments of overwriting your value, there is a last edit message beneath the grid to show what changed

From a development perspective, switching from the text entry to the touch entry was a straightforward affair. The original tapped into the HTML elements which are objects and the touch tapped into Opus variables which are also object based.

Two useful things that really make life easier are:

1. use logical naming - the Sudoku.js library returns an object using grid reference properties - IE A1, B5. Therefore, the Opus variables and text box names used in the grid - followed the same logic. IE myA1 or myB5 for variables and A1 or B5 for Text Box names.

As everything is object based, we can use one of mysteries of JavaScript and treat them as Associative arrays - allowing us to easily access the properties of the sudoku object, the variables object and the opus object.

2. As highlighted in the Lesson Ten video (https://www.youtube.com/watch?v=6kVkpVj ... 4ucrELVYhq), using a script object for central coding is paramount when shared code is needed. This last set of changes required a few additional lines of code to ONE function rather than editing the Opus Actions for EIGHTY-ONE cells.

The official home of this version will now be:

http://activities.interaktiv.co.uk/sudoku-touch/


</mack>

Mack,
Appreciate the "How I" tips. Just the mention of a few, simple structure-hints helps (me) to understand where the leverage is in a planned approach, and the object/property and array facets.

I think your UI tweaks make sense. I am not a Sudoku-player, but can appreciate the game and its scaling difficulty. It is amazing how many incarnations of the game and its designs there are out there.

One last point, I had not considered making a game. But you've essentially pointed out the value of simply doing something complete to the end as an exercise --- apart from working on one's 'main project'. As a learning/challenge exercise, I won't be slowed-down by considering the perfect way I wanted to do 'my project' where 1,000 other design decisions would keep popping-up.

Cheers,
Larry