reactive-extensions-js

How to detect konami code with Rx.js (reactive extensions for javascript)?

I want to start learning Rx.js and I'm looking for a cool example to start the ball rolling. How do I detect konami code with Rx.js?

I want to detect a sequence of key press events (up up down down left right left right B A) and display an image if this happens.

Solution

  • Here is my version:

    <html>
<head>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="rx.js"></script>
<script type="text/javascript" src="rx.jQuery.js"></script>
</head>
<body>
<p id="result"></p>
<script type="text/javascript">
    $(function() {
        var konami = $(document).toObservable("keyup").Select(function(e) {
            return e.keyCode
        }).SkipWhile(function(k) {
            return (k != 38)
        }).BufferWithCount(
            10
        ).Where(function(ks) {
            return ks.length == 10 &&
                ks[0] == 38 && ks[1] == 38 &&
                ks[2] == 40 && ks[3] == 40 &&
                ks[4] == 37 && ks[5] == 39 &&
                ks[6] == 37 && ks[7] == 39 &&
                ks[8] == 66 && ks[9] == 65
        })

        var konamisub = konami.Subscribe(function(e) {
            $("#result").text("KONAMI!")
            $("#result").fadeIn().fadeOut()
        })
    })
</script>
</body>
</html>

    I convert the stream of keyup events into a stream of keycodes with the Select, then ignoring keypresses until the user press up (keycode 38) with the SkipWhile, then collecting 10 keystrokes with the BufferWithCount, then checking the keystrokes with the Where.

    I tried using BufferWithTime, but it tends to cut in the middle of keystrokes.

    If somebody can suggest improvements, I would love to hear them.