alternate content  
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>

 

 

  • No labels