Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Location
    Scandinavia
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript 2D game, item spawn, fullscreen mode, time limit

    This is my first javascript game and it's pretty much built of code I've gathered over
    time and cleaned up. Here's a manipulated screenshot of what I'm trying to accomplish.

    You're an ant and you want those goodies on the map as quickly as possible!

    click this link to view a bigger manipulated screenshot
    click this link to view the goodies (items)

    • The ant is the playable character you control by using the arrow keys.
    • Every time you load the page, or click "restart game", three new items will
      spawn randomly on the level and the time will be reset to 0 seconds.
    • An arrow key must be pressed to start the time counter and the game itself.
    • There are only 5 items so far, cheese, apple, banana, candy and donut.
    • The items are supposed to be collected as quickly as possible, when the last item has been collected
      (by simply running over it) the game will end, save the time and display a hi-score list.
    • Time limit is 30 seconds, the game will display a classic "GAMER OVER" if the limit is overrided.


    Problems I'm trying to solve:

    1: Fullscreen mode (and make the ant actually STAY on the screen)
    I want the game level to adapt itself to the computer screen. The game dimensions are 1000x600px at the moment but the ant does not respect the level dimensions. Screenshot: http://i41.tinypic.com/kc1j81.jpg. I have a feeling about that somekind of percental code has to be implented but I've never done this before. (Please note that the size of the ant and the items will remain as they are)

    2: Spawning three items randomly on the level
    I drew 5 items and saved them as 100x100 PNG. Three of these items have to spawn at a random location on the fullscreen level. The LAST item collected must trigger the time counter to stop. The time will later be used on the hi-score list where he/she can type her nickname. This information will be uploaded to a database.

    3: 30 second time limit
    Letting the time counter reach 30 seconds will trigger a "GAME OVER". The only way to try again is page refresh or "restart game".

    Code:
    <html>
    <head>
    <style type="text/css">
    div#game {
    	width:1000px;
    	height:600px;
    	position:absolute;
    	background:#c3c3c3;
    }
    </style>
    <script type='text/javascript'>
    
    // movement vars
    var xpos = 100;
    var ypos = 100;
    var xspeed = 1;
    var yspeed =1;
    var maxSpeed = 5;
    
    // boundary
    var minx = 0;
    var miny = 0;
    var maxx = 1000; // characters movement field, width
    var maxy =600; // characters movement field, height
    
    // controller vars
    var upPressed = 0;
    var downPressed = 0;
    var leftPressed = 0;
    var rightPressed = 0;
    
    function slowDownX()
    {
      if (xspeed > 0)
        xspeed = xspeed - 1;
      if (xspeed < 0)
        xspeed = xspeed + 1;
    }
    
    function slowDownY()
    {
      if (yspeed > 0)
        yspeed = yspeed - 1;
      if (yspeed < 0)
        yspeed = yspeed + 1;
    }
    
    function gameLoop()
    {
      // change position based on speed
      xpos = Math.min(Math.max(xpos + xspeed,minx),maxx);
      ypos = Math.min(Math.max(ypos + yspeed,miny),maxy);
    
      // or, without boundaries:
      // xpos = xpos + xspeed;
      // ypos = ypos + yspeed;
    
      // change actual position
      document.getElementById('character').style.left = xpos + "px";
      document.getElementById('character').style.top = ypos + "px";
    
      // change speed based on keyboard events
      if (upPressed == 1)
        yspeed = Math.max(yspeed - 1,-1*maxSpeed);
      if (downPressed == 1)
        yspeed = Math.min(yspeed + 1,1*maxSpeed)
      if (rightPressed == 1)
        xspeed = Math.min(xspeed + 1,1*maxSpeed);
      if (leftPressed == 1)
        xspeed = Math.max(xspeed - 1,-1*maxSpeed);
    
      // deceleration
      if (upPressed == 0 && downPressed == 0)
         slowDownY();
      if (leftPressed == 0 && rightPressed == 0)
         slowDownX();
    
      // loop
      setTimeout("gameLoop()",10);
    }
    
    function keyDown(e)
    {
      var code = e.keyCode ? e.keyCode : e.which;
      if (code == 38)
        upPressed = 1;
      if (code == 40)
        downPressed = 1;
      if (code == 37)
        leftPressed = 1;
      if (code == 39)
        rightPressed = 1;
    }
    
    function keyUp(e)
    {
      var code = e.keyCode ? e.keyCode : e.which;
      if (code == 38)
        upPressed = 0;
      if (code == 40)
        downPressed = 0;
      if (code == 37)
        leftPressed = 0;
      if (code == 39)
        rightPressed = 0;
    }
    
    </script>
    </head>
    <body onload="gameLoop()" onkeydown="keyDown(event)" onkeyup="keyUp(event)" bgcolor='gray'>
    
    <!-- level -->
    <div id="game"></div>
    
    <!-- ant character -->
    <img id='character' src='images/ant.png' style='position:absolute;left:500px;top:500px;height:125px;width:200px;'/>
    </body>
    </html>
    Last edited by MissOnly; 12-27-2011 at 05:58 PM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •