I am making a game where a user has to move a character around a grid and collect passengers. I have managed to construct this grid using some CSS and jQuery however I now need to add a player to the grid and have them move one square at at a time.
At the moment I have kept it all in one file:
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="jquery.min.js"></script>
<meta charset=utf-8 />
<title>BotMod</title>
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
ul{list-style:none;}
a{text-decoration:none;}
#grid{
width:500px;
height:500px;
background:#eee;
padding:10px;
border-radius:10px;
}
.box{
font-size:10px;
text-align:center;
float:left;
width:40px;
height:40px;
background:#fff;
border-radius:6px;
margin:4px;
border:1px solid #aaa;
}
</style>
<style id="jsbin-css">
</style>
</head>
<body>
<div id="grid"></div>
<script>
var boxX = 0;
var boxY = 0;
var box = '<div class="box" />';
for (var i = 0; i < 100; i ++){
$('#grid').append(box);
$('#grid .box:eq(0)').css('background', 'green');
$('#grid .box:eq(1)').css('background', 'green');
$('#grid .box:eq(2)').css('background', 'white');
$('#grid .box:eq(3)').css('background', 'white');
$('#grid .box:eq(4)').css('background', 'white');
$('#grid .box:eq(5)').css('background', 'white');
$('#grid .box:eq(6)').css('background', 'green');
$('#grid .box:eq(7)').css('background', 'green');
$('#grid .box:eq(8)').css('background', 'white');
$('#grid .box:eq(9)').css('background', 'white');
$('#grid .box:eq(10)').css('background', 'green');
$('#grid .box:eq(11)').css('background', '#49311c');
$('#grid .box:eq(12)').css('background', '#49311c');
$('#grid .box:eq(13)').css('background', 'white');
$('#grid .box:eq(14)').css('background', 'white');
$('#grid .box:eq(15)').css('background', 'white');
$('#grid .box:eq(16)').css('background', 'green');
$('#grid .box:eq(17)').css('background', 'green');
$('#grid .box:eq(18)').css('background', 'white');
$('#grid .box:eq(19)').css('background', 'white');
$('#grid .box:eq(20)').css('background', '#49311c');
$('#grid .box:eq(21)').css('background', '#49311c');
$('#grid .box:eq(22)').css('background', '#49311c');
$('#grid .box:eq(23)').css('background', 'green');
$('#grid .box:eq(24)').css('background', 'green');
$('#grid .box:eq(25)').css('background', 'white');
$('#grid .box:eq(26)').css('background', 'green');
$('#grid .box:eq(27)').css('background', 'green');
$('#grid .box:eq(28)').css('background', 'white');
$('#grid .box:eq(29)').css('background', 'white');
$('#grid .box:eq(30)').css('background', 'white');
$('#grid .box:eq(31)').css('background', '#49311c');
$('#grid .box:eq(32)').css('background', 'green');
$('#grid .box:eq(33)').css('background', 'green');
$('#grid .box:eq(34)').css('background', 'green');
$('#grid .box:eq(35)').css('background', 'green');
$('#grid .box:eq(36)').css('background', 'green');
$('#grid .box:eq(37)').css('background', 'green');
$('#grid .box:eq(38)').css('background', 'green');
$('#grid .box:eq(39)').css('background', 'green');
$('#grid .box:eq(40)').css('background', '#49311c');
$('#grid .box:eq(41)').css('background', '#49311c');
$('#grid .box:eq(42)').css('background', 'green');
$('#grid .box:eq(43)').css('background', 'white');
$('#grid .box:eq(44)').css('background', 'green');
$('#grid .box:eq(45)').css('background', 'white');
$('#grid .box:eq(46)').css('background', '#49311c');
$('#grid .box:eq(47)').css('background', '#49311c');
$('#grid .box:eq(48)').css('background', 'green');
$('#grid .box:eq(49)').css('background', 'green');
$('#grid .box:eq(50)').css('background', '#49311c');
$('#grid .box:eq(51)').css('background', '#49311c');
$('#grid .box:eq(52)').css('background', '#49311c');
$('#grid .box:eq(53)').css('background', 'white');
$('#grid .box:eq(54)').css('background', '#49311c');
$('#grid .box:eq(55)').css('background', '#49311c');
$('#grid .box:eq(56)').css('background', '#49311c');
$('#grid .box:eq(57)').css('background', '#49311c');
$('#grid .box:eq(58)').css('background', 'white');
$('#grid .box:eq(59)').css('background', 'green');
$('#grid .box:eq(60)').css('background', '#49311c');
$('#grid .box:eq(61)').css('background', '#49311c');
$('#grid .box:eq(62)').css('background', '#49311c');
$('#grid .box:eq(63)').css('background', '#49311c');
$('#grid .box:eq(64)').css('background', '#49311c');
$('#grid .box:eq(65)').css('background', 'white');
$('#grid .box:eq(66)').css('background', 'white');
$('#grid .box:eq(67)').css('background', 'white');
$('#grid .box:eq(68)').css('background', 'green');
$('#grid .box:eq(69)').css('background', 'green');
$('#grid .box:eq(70)').css('background', 'green');
$('#grid .box:eq(71)').css('background', '#49311c');
$('#grid .box:eq(72)').css('background', '#49311c');
$('#grid .box:eq(73)').css('background', '#49311c');
$('#grid .box:eq(74)').css('background', 'white');
$('#grid .box:eq(75)').css('background', 'white');
$('#grid .box:eq(76)').css('background', 'white');
$('#grid .box:eq(77)').css('background', 'white');
$('#grid .box:eq(78)').css('background', 'green');
$('#grid .box:eq(79)').css('background', 'white');
$('#grid .box:eq(80)').css('background', 'green');
$('#grid .box:eq(81)').css('background', 'green');
$('#grid .box:eq(82)').css('background', 'green');
$('#grid .box:eq(83)').css('background', 'green');
$('#grid .box:eq(84)').css('background', 'white');
$('#grid .box:eq(85)').css('background', 'green');
$('#grid .box:eq(86)').css('background', 'green');
$('#grid .box:eq(87)').css('background', 'white');
$('#grid .box:eq(88)').css('background', 'white');
$('#grid .box:eq(89)').css('background', 'white');
$('#grid .box:eq(90)').css('background', 'green');
$('#grid .box:eq(91)').css('background', 'green');
$('#grid .box:eq(92)').css('background', 'green');
$('#grid .box:eq(93)').css('background', 'green');
$('#grid .box:eq(94)').css('background', 'green');
$('#grid .box:eq(95)').css('background', 'green');
$('#grid .box:eq(96)').css('background', 'green');
$('#grid .box:eq(97)').css('background', 'green');
$('#grid .box:eq(98)').css('background', 'white');
$('#grid .box:eq(99)').css('background', '#49311c');
}
</script>
</body>
</html>
So what I am asking is how can I add a player (a circle or any shape for that matter) to start in the top left square and be controlled with the arrow keys? I am still learning JavaScript and jQuery so any code examples will be very helpful.
