...

View Full Version : Javascript 2D game, item spawn, fullscreen mode, time limit



MissOnly
12-27-2011, 05:56 PM
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!
http://i40.tinypic.com/amryh5.jpg
click this link to view a bigger manipulated screenshot (http://i39.tinypic.com/jj0e9i.jpg)
click this link to view the goodies (items) (http://i41.tinypic.com/2qxxso1.jpg)

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".



<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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum