Jump to content

Move sprite by text command


soilchau
 Share

Recommended Posts

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

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

 

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

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...