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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

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