soilchau Posted January 7, 2016 Share Posted January 7, 2016 Ive been making a html game and continuously trying to figure out how to properly process text input with phaser. I would like to move the sprite by text command. For example, by typing "move 10" in text field, the sprite.x will +10; however i tried many different method and as known all didnt work. Below is the source code ive written. Can anyone tell me which part i got wrong or link me to a tutorial explaining how to make it work. Many thanks! <!DOCTYPE html><html><head> <style type="text/css"> .absolute { position: absolute; top: 10px; left: 420px; width: 200px; height: 1000px; z-index: 10; } </style> <script type="text/javascript" src="phaser.min.js"></script> </head> <body> <script type="text/javascript"> var game = new Phaser.Game(600, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { game.load.image('bg','images.jpeg'); game.load.image('goat','goat.png'); game.load.image('run','run.png'); } var goat; var background; function create(){ game.stage.backgroundColor='#ffffff'; background = game.add.image(0,0,'bg'); goat = game.add.sprite(100,100,'goat'); } function checkText(check){ var move = 'move 10' var showText1 = document.getElementById('comments').value; if(showText1.value=== move) { goat.x= +10; } } function update(){ } </script> <div class='absolute'> <form action="" method="post"> <textarea name="comments" id="comments" style="width:96%;height:490px;background-color:white;color:olive;border:2px;padding:2%;font:22px/30px sans-serif;"> </textarea> <button onclick="checkText(check)" style="width:200px;height:100px;border:none;padding:0%;"> <img src='run.png'> </button> </form> </div> </body></html> Link to comment Share on other sites More sharing options...
Batzi Posted January 7, 2016 Share Posted January 7, 2016 Here's an example:var userInput = 'move 10 0'.split(' '); //there is a space between 10 & 0 (x & y)var action = userInput[0]; //stores movevar x = userInput[1]; //stores 10var y = userInput[2]; //stores 0switch(action){case 'move': move(x,y);break;case 'jump': jump(x,y);break;...}function move(x,y){sprite.x += x;sprite.y +=y;} Link to comment Share on other sites More sharing options...
soilchau Posted January 8, 2016 Author Share Posted January 8, 2016 Here's an example:var userInput = 'move 10 0'.split(' '); //there is a space between 10 & 0 (x & y)var action = userInput[0]; //stores movevar x = userInput[1]; //stores 10var y = userInput[2]; //stores 0switch(action){case 'move': move(x,y);break;case 'jump': jump(x,y);break;...}function move(x,y){sprite.x += x;sprite.y +=y;} Thanks Batzi,Although i followed the code, i dun know why, i cant make the sprite move by typing the text.Is it because i added "button" function? <div class='absolute'> <form action="" method="post"> <textarea name="comments" id="comments" style="width:96%;height:490px;background-color:white;color:olive;border:2px;padding:2%;font:22px/30px sans-serif;"> </textarea> <button onclick="move" style="width:200px;height:100px;border:none;padding:0%;"> <img src='run.png'> </button> </form> </div> Link to comment Share on other sites More sharing options...
Recommended Posts