Question
Hello, I am quite new to jQuery so although it may sound stupid to some people, I really am not sure why this code isn't working. My JSfiddle
A basic explanation of what it is supposed to do is:
Start Up by clicking the start button << This works
Show the previously hidden circular div which is circular from the 'border-radius: 100%' CSS code included bellow. << This Works
Make the div move with Up, Down, Left and Right << This Does NOT work
That is currently my problem. I have attached on all 3 files which I included in this task.
HTML
<html>
<head>
<script src="http://ift.tt/1pD5F0p"></script>
<script src = 'script.js'></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id='runner'></div>
<div id='start'>START!</div>
</body>
</html>
CSS
body{
background-color: black;
}
#runner {
width: 100px;
height: 100px;
background-color: orange;
border-radius: 100%;
position:relative
left: 0;
top: 0;;
}
#start{
background-color: red;
border-radius: 6px;
color: white;
font-family:arial black;
text-align: center;
font-size: 48px;
width:200px;
height:75px;
position: absolute;
top:50%;
left:50%;
margin: -100px 0 0 -32.5px;
text-align: center;
}
Javascript Code
var main = function()
{
var $runner = $('#runner');
var $start = $('#start');
// STARTUP
$runner.hide();
$start.mouseenter(function(){
$start.css('width', '210px');
$start.css('height', '80px');
});
$start.mouseleave(function(){
$start.css('width', '200px');
$start.css('height', '75px');
});
$start.click(function(){
$start.hide();
$runner.show();
$(document).keydown(function(key){
switch(parseInt(key.which,10)) {
// Left arrow key pressed
case 37:
$('#runner').animate({left: "-=10px"}, 1);
break;
// Up Arrow Pressed
case 38:
// Put our code here
$('#runner').animate({top: "-=10px"}, 1);
break;
// Right Arrow Pressed
case 39:
// Put our code here
$('#runner').animate({left: "+=10px"}, 1);
break;
// Down Arrow Pressed
case 40:
// Put our code here
$('#runner').animate({top: "+=10px"}, 1);
break;
}
})
});
// STARTUP FINISHED
// GAME
}
$(document).ready(main);
So this is my code and I am really not sure why it isn't working. Any suggestions as to why not?
If you think you might see the problem or know an alternative way to do it, please answer your thoughts. I have included a JSfiddle link that just shows the output: My JSfiddle
Thanks.
Aucun commentaire:
Enregistrer un commentaire