...
HTML |
---|
<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="200160" height="100120" style="border:1px solid #000000;"> alternate content </canvas> <script> init(); </script> |
...