如何使物体一遍又一遍地自动出现 [英] How to make an object appear automatically over and over again
本文介绍了如何使物体一遍又一遍地自动出现的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用Jquery创建游戏，但是我确实有一些问题，这是我非常感谢您提供帮助的主要问题.
I'm trying to create a game using Jquery however I do have a few problems, this is a major one that I would really appreciate help with.
首先是我的代码.
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;
}
}`
现在我的问题:
-
如何在游戏中自动生成食物"rand"?
How do I make the food "rand" in my game spawn automatically?
如何使自动生成的食物"rand"在游戏板"Spelplan"中的随机位置生成?
How do I make the automatically spawning food "rand" spawn on a random location within the gameboard "spelplan"?
再次感谢，我将非常感谢我能提供的任何帮助！
Once again I would really appreciate any help I can get, thanks in advance!
推荐答案
这确实不起作用:
var element = "<div class='rand'></div>"
$(element).css('left',randPosX);
$("#spelplan").append(element);
原因元素只是一个字符串.可以这样做:
cause element is just a string. May do this:
var element = $("<div class='rand'></div>").css('left',randPosX);
$("#spelplan").append(element);
这篇关于如何使物体一遍又一遍地自动出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
