Menu
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.
618
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.
126
I don't want to spoil the answer for you since you're learning, but I would try to think of the problem as, "How can I transform the Key up event into the sequence of the last 10 characters that were recently pressed", and compare that list to the constant list of "UUDDLRLRBA". (Hint: Buffer, Where, Select, Take, Repeat are your friends here)
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
