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
触摸它们(匹配左侧和顶部位置)并使它们消失,就像它们像点一样被收集。我也不能让他们有相同的原点。我认为这些问题可能是相关的
最佳答案
你可以用来制作出现的特定div
z-index: 0
关于javascript - 如何让我随机生成的 div 出现在容器 div 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44353000/