Points accumulation techniques? (Counting a score)

Physics
1

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

2 Likes
2

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)

2 Likes
3

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

4

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

2 Likes
5

: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

1 Like
6

Yes Dave Mez, you really do.

1 Like
7

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:

8

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.

1 Like
9

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.

1 Like
10

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 …¿

3 Likes
11

That's a great piece of work Hans.

12

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!

1 Like
13

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:

1 Like
14

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.

15

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

16

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

17

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

2 Likes
18

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 …

19

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

20

Awesome Hans. Well done!