Jump to content

Recommended Posts

Basically, I want my character to move to the left when I press the left arrow button, but nothing happens. Why won't my code work?

 

<!DOCTYPE html><html><head>    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>    <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>    <script src='script.js'></script></head><style>html{    background-color: lightblue;}.character{    height: 150px;    width: 70px;    margin-top: 300px;    margin-left: 300px}</style><script>$(document).ready(function(){    $(document).keydown(function(e){        if (e.keyCode == 37){            $('.character').animate({left:'-=30px'}, 200);        }    });});</script><body>    <img class = "character" src = "https://lh3.googleusercontent.com/-i1FpxHN6IGs/VUQpAAWIp0I/AAAAAAAAADo/lEkxwoauAyc/w346-h780/stickfigure.png"></img></body></html>

Share this post


Link to post
Share on other sites

moving using left property wont work unless position: absolute, relative or fixed are used.

Edited by dsonesuk

Share this post


Link to post
Share on other sites
<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>Document Title</title>        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <style>            html{                background-color: lightblue;            }            .character{                height: 150px;                width: 70px;                margin-top: 300px;                margin-left: 300px;                position: absolute;            }        </style>        <script>            $(document).ready(function() {                $(document).keydown(function(e) {                    if (e.keyCode == 37) {                        $('.character').animate({left: '-=30px'}, 200);                    }                });            });        </script>    <body>        <img class="character" src = "https://lh3.googleusercontent.com/-i1FpxHN6IGs/VUQpAAWIp0I/AAAAAAAAADo/lEkxwoauAyc/w346-h780/stickfigure.png">    </body></html>

Share this post


Link to post
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.

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...

×
×
  • Create New...