Member Avatar for Kent55

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.

  • 2 Contributors
  • 1 Reply
  • 350 Views
  • 11 Months Discussion Span
  • Latest Post Latest Post by DaveAmour
Member Avatar for DaveAmour

I would look at CSS using layers and respond to key presses to change the position of the layer.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.