Question

HTML

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

所以目前我需要我的point()函数在<div id="wrapper">内生成一个随机div，但是在几个不同的生成之后，最终不会留在包装div中。似乎point()的容器似乎正在向下移动。生成的越多，它就越容易出现在容器的底部和外部。

最终我的想法是让他们所有人都拥有相同的顶部和左侧原始位置，这样我就可以使用我的player和player2来触摸它们（匹配左侧和顶部位置）并制作他们就像点积分一样消失了。我也不能让他们有相同的起源点。我认为这些问题可能是相关的

Answer 1

你可以用来制作特定的div

z-index: 0

Answer 2

尝试将绝对定位添加到包装器div并将相对位置添加到容器div：

#container {
  position: relative;
}

#wrapper {
  position: absolute;
  top: 0;
  left: 0;
}

这会使div脱离文档其余部分的正常流程。

有关其原因的更多说明，请参阅here。

如何使我的随机生成的div出现在容器div中？

2 个答案: