1
私は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 ==40) {
if (y < spelTopMax) {
$("#box1").animate({top: '+=20px'}, 0)
}
}
else if (e.keycode ==38) {
if (y > spelTopMin) {
$("#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>"
$(element).css('left',randPosX);
$("#spelplan").append(element);
}
</script>
</head>
<body>
<header class="col-12 col-m-12">
<h1>Titel</h1>
</header>
<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>
<div id="spelplan">
<div id="box1"></div>
<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」内のランダムな場所に自動的に産卵する「rand」の産卵を行うにはどうすればよいですか？
もう一度私が得ることができる助けに感謝するでしょう、事前に感謝！本当に作業
@ guest271314私は知っています。もう一度見てみよう... –
@Jonaswありがとう、今は自動的に生まれる！今問題は、 "rand"というオブジェクトがゲームボード "spelplan"内にスポーンプランの中でどのように作成される必要があるかということです。 – John
@ guest271314 jqueryオブジェクトを追加する必要があります。文字列 'element'ではありません – xar