I would like to get som help. How do I do if I want my pictures to stop some where in the html-page?
As it is right now, they are just falling and keeps on falling. but I would like to decide where they should stop.
Hope someone can help me! Would be much apreciated as always! :)
Cheers
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<p>Items falling down </p>
<form>
<input type="button" value="Click" onClick="thingsFallingDown();" />
</form>
<script>
class flyingPicture {
constructor() {
this.picture = document.createElement("img");
this.picture.style.width = 200 + "px";
this.picture.style.top = 0 + "px";
this.picture.src = "example.png";
this.picture.style.position = "absolute";
document.body.appendChild(this.picture);
this.xpos = parseInt(400 * Math.random());
this.picture.style.left = this.xpos + "px";
this.ypos = 0;
this.speed = 1;
}
moveme() {
this.ypos = this.ypos + this.speed;
this.picture.style.top = this.ypos + "px";
}
}
class PictureDisplay {
constructor(numberOfPics) {
this.picture = [];
for (var i = 0; i < numberOfPics; i++) {
this.picture[i] = new flyingPicture();
}
}
next() {
for (var i = 0; i < this.picture.length; i++) {
this.picture[i].moveme();
}
}
}
var picture;
function thingsFallingDown() {
picture = new PictureDisplay(30);
setInterval(function() {
picture.next()
}, 2);
}
</script>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
