Question

我正在尝试使用Jquery创建一个游戏但是我确实有一个很大的问题，我很乐意帮助。

首先，这是我的代码。

HTML：

AnyObject.Type

的CSS：

        <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8"><link rel="stylesheet" type="text/css" href="style20.css"><title>     Jquery spel</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
    $(document).keydown(function(e){ 
    var spelLeftMax = $('#spelplan').width();
    var spelLeftMin = $('#box1').width();
    var spelTopMax = $('#spelplan').height();
    var spelTopMin = $('#box1').height();

    var x = $('#box1').position().left + $('#box1').width();
    var y = $('#box1').position().top + $('#box1').height();


    if (e.keyCode ==39){
        if (x < spelLeftMax) {
            $("#box1").animate({left: '+=20px'}, 0);
        }
    } 

    else if (e.keyCode ==37) {
        if (x > spelLeftMin) {
            $("#box1").animate({left: '-=20px'}, 0);
        }
    }

    else if (e.keyCode ==38) {
 if (y > spelLeftMin) {
    $("#box1").animate({top: '-=20px'}, 0);
    }
    }

    else if (e.keyCode ==40) {
  if (y < spelTopMax) {
    $("#box1").animate({top: '+=20px'}, 0)
 }
 }

    else if (e.keyCode ==38) 
        $("#box1").animate({top: '-=20px'}, 0);
    else if (e.keyCode ==40) 
        $("#box1").animate({top: '+=20px'}, 0); 
    });

setInterval(spawnrand,1000);
});

function spawnrand(){
var spelplanWidth = $('#spelplan').width();
var randPosX = Math.floor((Math.random()*spelplanWidth));
var element = $("<div class='rand'></div>").css('left',randPosX);
$("#spelplan").append(element);
}


</script>
</head>
<body>
<header class="col-12 col-m-12">
<h1>Titel</h1>
</header>

<button class="new_pos">New position</button>


<div id="spelplan">
<div id="box1"></div>
<div id="rand_pos" class="rand"></div>
<div id="pos_log" class="log">x: 0<br />y: 0</div>
<button class="new_pos">New position</button>
<br>
<p>Lives:</p>
<p>Score:</p>
</div>
</div>

</body>

</html>

所以我的问题是：如何让食物“rand”物体在游戏牌“spelplan”中的随机位置产生。宽度上的放置似乎没什么问题，但它没有将对象正确地放置到游戏板的高度，而是让对象在网站上越来越低地生成。

再次感谢我能得到任何帮助，谢谢！

Answer 1

首先，您尚未为垂直定位定义随机函数。为了解决这个问题，我们需要另一个随机变量进行垂直定位：

var spelplanHeight = $('#spelplan').height();
var randPosY = Math.floor((Math.random()*spelplanHeight));

var element = $("<div class='rand'></div>").css('left',randPosX).css('top',randPosY);

现在，如果我理解正确，你希望所有那些小绿框出现在蓝框内。为此，请在css中进行以下更改：

 .rand {
   background-color:green;
   height:15px;
   width:15px;
   position:absolute;
   z-index:3;
   }

您也可以查看this answer。

Working fiddle

如何使用Jquery在我的游戏中修复自动生成的食物

1 个答案: