Web Development

<div id="container">
    <div id="wrapper">

    </div>
    <span id = "waveNum">Current Wave: 0</span>
    <input type = "button" value = "Start Game" onclick = "startGame()"></input>
</div>

<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="main.js"></script>
</body>

Javascript

var keyArray = [];
var currentWave = 1;


var player;
var player2;
function initiate(){
    player = new createPlayer(150,50,"player1","relative","blue"); 
    player2 = new createPlayer(150,0,"player2","relative","green");
}

function startGame() {
    point();
}

function createPlayer(l,t,id,pos,color){
    this.speed = 3;
    this.width = 25;
    this.height = 25;
    this.left = l;
    this.top = t;
    this.id = id;
    this.model = $("<div id=" + id + "/>")
        .css({"backgroundColor":color,"height":this.height,"width":this.width,
            "left":this.left,"top":this.top,"position":pos})

  $('#wrapper').append($(this.model));
}

function point(){ 
  leftP = parseInt(Math.random()*970);
  topP = parseInt(Math.random()*580);
  $points = $("<div class=point/>")
    .css({"backgroundColor":"yellow","height":"10px","width":"10px","left":0,
        "top":0,"position":"relative"})
  $('#wrapper').append($points)
}



function update(){
  //left
    if(keyArray[65]){
        var newLeft = parseInt(player.left)-player.speed+"px"
        player.left = newLeft;
        document.getElementById(player.id).style.left = newLeft;
    }
    //right
    if(keyArray[68]){
        var newLeft = parseInt(player.left)+player.speed+"px"
        player.left = newLeft;
        document.getElementById(player.id).style.left = newLeft;
    }
    //up
    if(keyArray[87]){
        var newTop = parseInt(player.top)-player.speed+"px"
        player.top = newTop;
        document.getElementById(player.id).style.top = newTop;
    }
    //down
    if(keyArray[83]){
        var newTop = parseInt(player.top)+player.speed+"px"
        player.top = newTop;
        document.getElementById(player.id).style.top = newTop;
    }

  //player2
    //left
    if(keyArray[37]){
        var newLeft = parseInt(player2.left)-player2.speed+"px"
        player2.left = newLeft;
        document.getElementById(player2.id).style.left = newLeft;
    }
    //right
    if(keyArray[39]){
        var newLeft = parseInt(player2.left)+player2.speed+"px"
        player2.left = newLeft;
        document.getElementById(player2.id).style.left = newLeft;
    }
    //up
    if(keyArray[38]){
        var newTop = parseInt(player2.top)-player2.speed+"px"
        player2.top = newTop;
        document.getElementById(player2.id).style.top = newTop;
    }
    //down
    if(keyArray[40]){
        var newTop = parseInt(player2.top)+player2.speed+"px"
        player2.top = newTop;
        document.getElementById(player2.id).style.top = newTop;
    }
    blockade();
    requestAnimationFrame(update);
}

function blockade(){
    var elemLeft = parseInt($('#wrapper').css('left'));
    var elemWidth = parseInt($('#wrapper').css('width'));
    var elemTop= parseInt($('#wrapper').css('height'));
  //blocks players from moving outside of game
    if(parseInt(player.left) + player.width >= elemLeft+elemWidth){
        player.left = elemWidth - player.width - 2;
    }
    if(parseInt(player.top) + player.height >= elemTop){
        player.top = elemTop - player.height - 2;
    }
    if(parseInt(player.top) < 3){
        player.top = 3;
    }
    if(parseInt(player.left) < 3){
        player.left = 3;
    }
    if(parseInt(player2.left) + player2.width >= elemLeft+elemWidth){
        player2.left = elemWidth - player2.width - 2;
    }
    if(parseInt(player2.top) + player2.height >= elemTop){
        player2.top = elemTop - player2.height - 2;
    }
    if(parseInt(player2.top) < 3){
        player2.top = 3;
    }
    if(parseInt(player2.left) < 3){
        player2.left = 3;
    }
}

window.onkeydown = function(page){
    keyArray[page.keyCode] = page.type === 'keydown';
}
    window.onkeyup = function(page){
        keyArray[page.keyCode] = page.type === 'keydown'
}

CSS

html, body {margin: 0; height: 100%; overflow: hidden}

#container{
    width:80%;
    height:60%;
    display: block;
    text-align:center;
    margin: 0 auto;
}
#wrapper{
    left:0px;
    width:1000px; /* 100% */
    height:600px;
    border:1px solid lime;
    margin:0 auto;
    background-color:black;
}

#player1, .point {
    float: left;
    clear: both;
}
body{
    background-color:black;
}
#waveNum{
    color:white;
    font-size:200%;
}

.point {
    overflow: auto;    
}

The point() function within the wrapper div is generating a random div but after several spawns, it starts to move out of the container. It appears that the container for the points might be shifting down over time, causing them to appear at the bottom and outside the intended area.

My goal is for all points to have the same initial top and left positions so that I can use the players to collect them by matching their positions. However, I am facing issues with getting them to share an origin point, which may be related to the positioning problems mentioned above.