Skip to content

a jQuery plugin to enable the "Konami code" (or any pre-defined key sequence) on any given web page

Notifications You must be signed in to change notification settings

theInternauts/Konami_Code

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

51 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Konami Code

This is a JQuery plugin to put a hidden code keycode on any website. The default is the classic Konami code for video games made by Konami--most notable, Contra and Teenage Mutant Ninja Turltles. (gotta' love old school games!)

How to use

Summary of all configuration options (all are optional)

  • callback: --- The function name that will be executed when the secret key sequence is pressed.
  • arguments: --- An array of arguments to be passed into the callback when it is called.
  • scope: --- The execution scope of the callback.
  • konami: --- The default key/value pair the contains the secret key sequence. You can define your own sequnce and reference it with the 'activeCode' option.
  • activeCode: --- The name of the options key that contains the secret key sequence. (default = 'konami')
  • maximum: --- The maximum number of times the callback will be executed by the correct key sequence.

Configuration Details

  1. Include the plugin --- Right now, this plugin assumes you have jQuery included in your HTML document. Use a script tag to include this plugin somewhere in the head tag and below your script tage that include the base jQuery library.
<script type="text/javascript" src="jQuery_konami_code.js"></script>
  1. Invoke the plugin --- In either the document head (preferred) or in the body include the following snippet to inkoke the plugin and start listing to keystrokes in the background.
<script type="text/javascript">
	$(document).konami_code()
</script>
  1. Overide the default behavior --- The current default action after inputting the proper key sequence is to output the phrase "Power up" in the browswer console and in an alert() popup message. You should specify your own function to run by setting the callback key in an options object. When you invoke the plugin pass in an object with a key/value pair. The key is 'callback:' and the value should be the name of the function that you want to execute when the proper sequence is typed.
<script type="text/javascript">
	myCallback = function(){ alert('yay!') }
	$(document).konami_code({ callback: myCallback })
</script>
  1. To enable the Street Fighter II code instead of the Konami Code pass in an object with a key/value pair when you invoke the plugin.
<script type="text/javascript">
	$(document).konami_code({ activeCode: 'SFII' })
</script>
  1. To enable your own key sequence add new key/value pair to the object and set the value for the key 'activeCode' to the name of your custom key (just like 'SFII' in the previous example). Be sure to make your key sequence a string of space seperated integers.
<script type="text/javascript">
	$(document).konami_code({
		mySequence: '49 50 51 52 53', // 1, 2, 3, 4, 5
		activeCode: 'mySequence'
	})
</script>
  1. If you need to set the execution scope of the custom callback and/or pass arguement If you want the callback to be an object's member function or you just doen't have to be declared in the global scope you can set the execution scope in the configuration object.
<script type="text/javascript">
    var myObj = { testName: "Bruce Wayne", myFunc: function(){alert(this.testName)} }
    var myScope = { testName: "Clark Kent" }
    $(document).konami_code({
      scope: myScope,
      callback: myObj.myFunc
    })
</script>
  1. To pass one or more arguments to the callback put each value in an array index and pass that array into the configuration object.
<script type="text/javascript">
    var myArgs = [{ property1: "some object" }, "some value", "some other value" ]
    $(document).konami_code({
      arguments: myArgs,
      callback: function(a, b, c){
        alert("These are your arguments:\n1. " + a + ",\n2. " + b + ",\n3. " + c)
      }
    })
</script>
  1. To pass limit the number of times a callback can be executed pass in a "maximum" variable to set the maximum number of possible executions. This number needs to be positive to be of any use.
<script type="text/javascript">
    $(document).konami_code({
      maximum: 3
    })
</script>

Demo

Supported Codes

  • Konami --- up, up, down, down, left, right, left, right, b, a
  • Capcom Street Fighter II --- down, r, up, l, y, b, x, a ( requires an option object to be passed to the plugin. See: How To Use )

Roadmap

(in no particular order)

  • Add support for options to be passed in for custom configuration.
  • Add the Capcom Street Fighter II code as a possible default.
  • allow for the custom callback's execution scope to be settable
  • limit the number of callback executions to a user settable number
  • Add a mode/utility that will record any series of keystrokes and return an encoded sequence to make it easier for less technical people to customize this feature for their site
  • mobile support. Maybe via directional swiping
  • re-tool to trigger a custom event to allow for greater flexibility and unknown use cases. (this could be ✨ epic ✨)

Your suggestions, bug fixes, and feature requests are welcome. [email Cricket] (mailto:cricketw@WeAreTheInternauts.com) or submit pull requests whichever you prefer.

In the Wild

Are you using this plugin? Let me know and I'll list your site here.

About

a jQuery plugin to enable the "Konami code" (or any pre-defined key sequence) on any given web page

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published