Reviewing my upcoming article on events for Smashing Magazine for the umpteenth time I came across a short code example I ended up not using but being fun all the same. Can you scroll? is a very simple small game that asks you to predict the amount of pixels you will scroll and then tells you by how many you are off. You can then share your success or failure on Twitter.
Much like Time yourself released earlier, this game works with some very simple event handlers and a few lines of code. The source of can you scroll and source of time yourself are on GitHub for you to play with.
The functionality is simple – when you submit the form I hide it and when you click the document I read the
scrollTop of the current document and compare it with the value you entered. The only snag I ran into was that Chrome/Safari and Firefox/Opera read different properties, so you need to check for both with
end = document.body.scrollTop || document.documentElement.scrollTop.
My favourite about these things is though how people start gaming the game and find solutions to get good results:
Cheatsheet: Chrome, keyboard arrow-down once = 40px | Firefox: keyboard arrow-down once = 48px #canyouscroll 🙂
#canyouscroll for cheaters: window.scrollTo(0,document.querySelector(‘#amount’).value);document.body.click();
@codepo8 Or count the notches on your scroll wheel and try again with the correct number 😉 Neat little game!
.@codepo8 or use #Firefox that scrolls by steps of 16px 😀 — http://bit.ly/NCUJFa
I am sure more people will find clever ways to cheat. I love that about web games.
View full post on Christian Heilmann