Browse Source

Initial commit

master
Stephen 1 week ago
commit
6fc34d3484
3 changed files with 95 additions and 0 deletions
  1. BIN
      bee.png
  2. +26
    -0
      index.html
  3. +69
    -0
      script.js

BIN
bee.png View File

Before After
Width: 250  |  Height: 250  |  Size: 9.3 KiB

+ 26
- 0
index.html View File

@ -0,0 +1,26 @@
<html>
<head>
<title>Buzz buzz</title>
<script src="script.js">
</script>
<style>
#container {
width: 100%;
height: 100%;
}
.bee {
position: absolute;
top: 50px;
left: 50px;
width: 64px;
height: 64px;
}
</style>
</head>
<body>
<div id="container">
<button onclick="addBee()">Add bee</button>
</div>
</body>
</html>

+ 69
- 0
script.js View File

@ -0,0 +1,69 @@
function addBee() {
const width = window.innerWidth;
const height = window.innerHeight;
const body = document.body;
const bee = document.createElement("img");
bee.src = "bee.png";
bee.className = "bee";
bee.vars = {
x: width / 2,
y: height / 2,
velX: Math.random() * 6 - 3,
velY: Math.random() * 6 - 3
};
bee.style.top = `${bee.vars.y}px`;
bee.style.left = `${bee.vars.x}px`;
document.body.appendChild(bee);
}
window.onload = function() {
const width = window.innerWidth;
const height = window.innerHeight;
const bees = document.getElementsByClassName("bee");
for(let i = 0; i < bees.length; i++) {
bees[i].vars = {
x: width / 2,
y: height / 2
};
}
let i = 0;
setInterval(() => {
const beesNew = document.getElementsByClassName("bee");
const width = window.innerWidth;
const height = window.innerHeight;
for(let j = 0; j < beesNew.length; j++) {
const bee = beesNew[j];
if(i % 250 == 0) {
bee.vars.velX = Math.random() * 6 - 3;
bee.vars.velY = Math.random() * 6 - 3;
}
bee.vars.x += Math.random() * 10 - 5 + bee.vars.velX;
if(bee.vars.x < 20) {
bee.vars.x = 20 + Math.random() * 10;
bee.vars.velX = Math.random() * 3 + 1;
}
if(bee.vars.x > width - 80) {
bee.vars.x = width - 80 - Math.random() * 10;
bee.vars.velX = Math.random() * 3 - 4;
}
bee.vars.y += Math.random() * 10 - 5 + bee.vars.velY;
if(bee.vars.y < 20) {
bee.vars.y = 20 + Math.random() * 10;
bee.vars.velY = Math.random() * 3 + 1;
}
if(bee.vars.y > height - 80) {
bee.vars.y = height - 80 - Math.random() * 10;
bee.vars.velY = Math.random() * 3 - 4;
}
bee.style.top = `${bee.vars.y}px`;
bee.style.left = `${bee.vars.x}px`;
}
i++;
}, 20);
}

Loading…
Cancel
Save