Jqueryを使って自分のゲームに自動生成された料理を修正するには

Jqueryを使ってゲームを作成しようとしていますが、大きな問題があります。Jqueryを使って自分のゲームに自動生成された料理を修正するには

まずはここをクリックしてください。

HTML：

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

CSS：

 *{ 
    box-sizing : border-box; 
    margin:0; 
    padding:0; 
    } 

body { 
background-color: black; 
} 

header { 
position:absolute; 
top:50px; 
color:white; 
text-align:center; 
} 



#rand_pos{ 
position: absolute; 
top:20%; 
left: 30%; 
z-index: 10; 
} 

#box1 { 
background-color:red; 
height:50px; 
width:50px; 
position:absolute; 
left:30%; 
top:150px; 

} 
p { 
position:relative; 
left:10px; 
color:white; 
} 
#spelplan { 
position:absolute; 
left:25%; 
top:20%; 
height:600px; 
width:600px; 
background-color:blue; 
border-style:double; 
border-radius:40px; 

} 


.rand { 
background-color:green; 
height:15px; 
width:15px; 
position:relative; 
left:30%; 
top:150px; 
z-index:-1; 
} 


.new_pos { 
background: #ccc; 
border: 1px solid #000; 
padding: 5px; 
box-shadow: 0 0 20px #555; 
-webkit-transition: all .2s ease-in; 
transition: all .2s ease-in; 
} 

.new_pos:hover { 
background: #bbb; 
box-shadow: 0 0 20px #222; 
} 


.new_pos:active { 
box-shadow: 0 0 20px #000; 
background: #aaa; 
} 


*:focus { 
outline: none; 
} 



.new_pos { 
position: fixed; 
left: 0; 
bottom: 0; 
cursor: pointer; 
} 








/* For mobile phones: */ 
[class*="col-"] { 
width: 100%; 
} 
@media only screen and (min-width: 600px) { 
/* For tablets: */ 
.col-m-1 {width: 8.33%;} 
.col-m-2 {width: 16.66%;} 
.col-m-3 {width: 25%;} 
.col-m-4 {width: 33.33%;} 
.col-m-5 {width: 41.66%;} 
.col-m-6 {width: 50%;} 
.col-m-7 {width: 58.33%;} 
.col-m-8 {width: 66.66%;} 
.col-m-9 {width: 75%;} 
.col-m-10 {width: 83.33%;} 
.col-m-11 {width: 91.66%;} 
.col-m-12 {width: 100%;} 
img { 
    width: 80%; 
    height: auto; 
} 
} 
@media only screen and (min-width: 768px) { 
/* For desktop: */ 
.col-1 {width: 8.33%;} 
.col-2 {width: 16.66%;} 
.col-3 {width: 25%;} 
.col-4 {width: 33.33%;} 
.col-5 {width: 41.66%;} 
.col-6 {width: 50%;} 
.col-7 {width: 58.33%;} 
.col-8 {width: 66.66%;} 
.col-9 {width: 75%;} 
.col-10 {width: 83.33%;} 
.col-11 {width: 91.66%;} 
.col-12 {width: 100%;} 
img { 
    width:100%; 
    height:auto; 
} 
}

だから私の質問です：私は食べ物 "ランド" のオブジェクトがゲームボード "spelplan" 内のランダムな場所に出現させるにはどうすればよいです。それは、幅の配置上は問題ないと思われますが、オブジェクトをゲームボードの高さに正しく配置せず、代わりにウェブサイト上でオブジェクトを低くしたり低くしたりします。

もう一度私が得ることができるすべてのヘルプに感謝します、事前に感謝！

出典

2017-04-15 John

まず、垂直方向の位置決めにランダム関数を定義していません。

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を見てみることができます。

出典

2017-04-15 23:30:39 jrook

助けてくれてありがとう、それは一種の今青い箱の中に産卵小さな緑色のボックスを働いていたが、彼らは、同じ行のソートに斜めに産卵されています。小さな緑色のボックスが青色のボックス内の完全にランダムな場所に現れるようにこの問題を解決する方法を知っていますか？もう一度、本当に感謝していただきありがとうございます。 – John

この問題は、小さなボックスのコンティネーションが青いボックス内に斜めに生成され続けることを意味します。 – John

@John：私が作成したフィドルで動作しています：https://jsfiddle.net/erLv5rwb/ – jrook

Jqueryを使って自分のゲームに自動生成された料理を修正するには

答えて

関連する問題