Points accumulation techniques? (Counting a score)

It’s great to see all of the wonderful things that the Hype community is generating. By chance has anyone tried to tackle a positive reinforcement mechanism utilizing physics elements? For instance, a pinball machine that has elements that send data to a tabulation script of some sort so points can be displayed? I would love to see any examples or methods to accomplish this, thanks in advance!

Here’s something i put together that would really benefit from this kind of thing

That would be an interesting project, you could use a javascript to increment the tally for certain elements that get hit.

var el = document.getElementById('abc');
el.innerHTML = parseInt(el.innerHTML) + 10;

then to clear the score...

i = 0;
document.getElementById('abc').innerHTML = "0";

increment.hype.zip (15.1 KB)

Thanks for that! All that’s missing is a ‘reaction’ action, right? I need to learn some javascript, seriously.

That's the hard part :wink: -- I need to credit Daniel for help on the incremental script. http://hype.desk.com/customer/portal/questions/83903-increment-clear-help

:blush:

If you use localstorage, you can keep score even if the user closes their browser window: http://hype.desk.com/customer/portal/articles/search?q=localstorage

Here’s a nice plugin for working with that: https://github.com/julien-maurel/jQuery-Storage-API

Yes Dave Mez, you really do.

any responses as counting the collisions of elements (of any shape) with applied physics within can not be solved satisfiable with some utstanding js-collision-detect-library because there’s no event to catch for a element moving. that said MutationObserver records changes in the dom, so you can record the dom-changes of a element. This returns a record which gives you the ability to detect collisions, but you would have to write the collision-detection-code yourself as js-collision-detect-libraries will work with live-calls …
So, any hype-solution using the underlying physicsmachine, which surely offers collissions-response, would be great! :smile:
Just give us the abilty to grab the collision-event within the hype-js-api :slight_smile:

Well said, Hans. Also, I haven't seen any js libraries that can detect collisions without a dragged element. GameQuery is a jQuery plug in that may work, but it is too complicated, for me, to set up.

We'll definitely look into this post 3.0; it is an astonishingly popular request.

Your method of using the MutationObservers is pretty clever, just do note that it might be the transform or the top/left properties changing, and I believe the mutation api is only available new browsers. Also from an official standpoint we don't support this, so the technique may not work against future versions.

Looking forward :smile:

Tested a simple collision setup, but mostly disappointing :wink:
test.hype.zip (56.9 KB)

@hype note that both textboxes at top / right should have the same width as in inspector (45px), but they haven’t …¿

That's a great piece of work Hans.

You guys are so smart i get a smile every time. Will certainly muddle my way through how you set this up and see if I can learn a few things. Thanks!

Oh well, thought i figured it out but I can’t seem to get it to work. I saw the script looked for class names ‘buffer’ to use observe and count/compare differences. And that the buffers individually had been itemized. So i tried to copy & paste, call the elements by the IDs and adjust the number of buffers in the class. Somehow I must have done something wrong, will keep trying. (pssst… Dave, learn some Java man!..) I’m much better at the visual artsNewYearsCardAlt.zip (3.9 MB) than talking in alien languages :smile:

Yeah, in Safari the Debugger says...

[Error] ReferenceError: Can't find variable: jQuery
global code (e-smart-hittest-jquery.min.js, line 13)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (touch-icon-192x192.png, line 0)
[Error] TypeError: undefined is not a function (evaluating '$('#observe-' + observerID ).objectHitTest({"object":$('#buffer' + i), "transparency":true})')
observerChanges (undefined, line 38)

So it looks like ya missed something somehow (maybe ;-))

Look to see if you missed one of the '#' on one of the #buffer or #observe calls in the script.

I changed the width of both boxes to 50px, it looks like the font size was causing it.

hi!
you can take attachment for collisions in hype - i work a lot using this version.
collision_badsyntax.hype.zip (49.2 KB)

Keep in mind it’s buggy and doesn’t count really well. NewYearsCardAlt.hype.zip (3.8 MB)

attach some physics to the elements and let them bounce …

I’ve tried with intervallsettings too then went to mutationevent. It’s better but not 100% though. there are always some collisions left out …

New one, took DaveMez Soundeffects to play arround … :
pinball

Awesome Hans. Well done!