- simpleButton Class used from 1.30 Inheritance
- This is actually not using EaselJS library methods
- It's browser API
- Key code can be known here : http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_key_keycode2
- In order for the page to work properly, please go to :
- Click on keyboard shortcuts, and in General tab uncheck "Enable General Shortcuts", you can enable it when you need later.
- Click inside the canvas if it is not working
Source code
<script> var stage; var btnUp, btnLeft, btnDown, btnRight; // need to make variables global for other function to access function init() { stage = new createjs.Stage("demoCanvas"); stage.enableMouseOver(); btnUp = stage.addChild(new simpleButton(40, 40,"W", "#F00")); btnUp.x = 80; btnUp.y = 30; btnLeft = stage.addChild(new simpleButton(40, 40,"A", "#0F0")); btnLeft.x = 30; btnLeft.y = 80; btnRight = stage.addChild(new simpleButton(40, 40,"D", "#00F")); btnRight.x = 130; btnRight.y = 80; btnDown = stage.addChild(new simpleButton(40, 40,"S", "#FF0")); btnDown.x = 80; btnDown.y = 80; createjs.Ticker.addEventListener("tick", tick); this.document.onkeydown = keydown; this.document.onkeyup = keyup; } function keydown(event) { switch(event.keyCode){ case 87: // w btnUp.handleMouseDown(event); break; case 65: // a btnLeft.handleMouseDown(event); break; case 83: // s btnDown.handleMouseDown(event); break; case 68: // d btnRight.handleMouseDown(event); break; } } function keyup(event) { switch(event.keyCode){ case 87: // w btnUp.handlePressUp(event); break; case 65: // a btnLeft.handlePressUp(event); break; case 83: // s btnDown.handlePressUp(event); break; case 68: // d btnRight.handlePressUp(event); break; } } function tick() { stage.update(); } </script> <canvas id="demoCanvas" width="300" height="100" style="border:1px solid #000000;"> alternate content </canvas> <script> init(); </script>