Jump to content

.keydown()


brooke_theperson
 Share

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>
Link to comment
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>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...