<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="glow"></div>
<img src="https://app.bsd.education/resources/moon_bg.png" id="moon">
<img src="https://app.bsd.education/resources/dark_town.png" id="town">
<img src="https://app.bsd.education/resources/flying_broom.png" id="broom">
<img src="https://app.bsd.education/resources/pumpkin_item.png" id="pumpkin">
<h1>Score: 0</h1>
</div>
<script src="script.js"></script>
</body>
</html>
body {
margin: 0;
background-color: #27053c;
}
#container {
background: rgb(110, 6, 174);
background: linear-gradient(0deg, rgb(114, 15, 176) 0%, rgba(149,14,215,1) 100%);
position: relative;
width: 1200px;
height: 800px;
margin: 0 auto;
overflow: hidden;
}
#glow {
position: absolute;
top: -30px;
left: 50%;
margin-left: -300px;
width: 650px;
height: 650px;
background-color: white;
border-radius: 400px;
box-shadow: 0 0 250px 80px rgba(120, 179, 3, 0.543);
}
#moon {
opacity: 1;
position: absolute;
top: -30px;
left: 50%;
margin-left: -319px;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-moz-user-select: none;
user-select: none;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-359deg);
}
}
#town {
position: absolute;
top: 400px;
left: 0px;
width: 1200px;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
animation-name: spin;
animation-duration: 50s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#broom {
position: absolute;
transition: transform 1.5s ease-out;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
#pumpkin {
position: absolute;
left: -1000px;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
}
h1 {
color: #ffffff;
position: absolute;
top: 15px;
left: 30px;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
}
var broom = document.getElementById("broom");
var container = document.getElementById("container");
var pumpkin = document.getElementById("pumpkin");
var mousePosX;
var gravity = 0.3;
var speedY = 0;
var score = 0;
var scoreText = document.querySelector("h1");
container.addEventListener("click", flyUp);
function flyUp(event) {
speedY = -10;
mousePosX = event.clientX - container.offsetLeft;
}
function update() {
updateBroom();
updatePumpkin();
checkForItemCollect();
window.requestAnimationFrame(update);
}
function updateBroom() {
// horizontal moves
var diffX = mousePosX - broom.offsetLeft - (broom.offsetWidth/2);
var broomTargetX = broom.offsetLeft + (diffX * 0.015);
broom.style.left = broomTargetX + "px";
// vertical moves
speedY += gravity;
var broomTargetY = broom.offsetTop + speedY;
if (broomTargetY > container.offsetHeight) {
broomTargetY = container.offsetHeight;
}
broom.style.top = broomTargetY + "px";
// rotate
if (speedY < -5) {
// going up
broom.style.transform = "rotate(-25deg)";
}
else if (speedY > 5) {
// falling down
broom.style.transform = "rotate(25deg)";
}
else {
broom.style.transform = "rotate(0deg)";
}
}
function updatePumpkin() {
var targetPumpkinX = pumpkin.offsetLeft - 5;
if (targetPumpkinX < -pumpkin.offsetWidth) {
targetPumpkinX = container.offsetWidth;
pumpkin.style.top = (Math.random() * 400) + "px";
}
pumpkin.style.left = targetPumpkinX + "px";
}
function checkForItemCollect() {
var diffX = (pumpkin.offsetLeft + (pumpkin.offsetWidth/2)) - (broom.offsetLeft + (broom.offsetWidth/2));
//console.log(diffX);
var diffY = (pumpkin.offsetTop + (pumpkin.offsetHeight/2)) - (broom.offsetTop + (broom.offsetHeight/2));
//console.log(diffY);
if (Math.abs(diffX) < 40 && Math.abs(diffY) < 40) {
//console.log("collect item");
pumpkin.style.left = container.offsetWidth + "px";
pumpkin.style.top = (Math.random() * 400) + "px";
score++;
scoreText.innerHTML = "Score: " + score;
}
}
window.requestAnimationFrame(update);
window.onload = window.onresize = resizeGame;
function resizeGame() {
var gameRatio = container.offsetWidth / container.offsetHeight;
var windowRatio = window.innerWidth / window.innerHeight;
container.style.position = "absolute";
container.style.left = `${(window.innerWidth - container.offsetWidth) / 2}px`;
container.style.top = `${(window.innerHeight - container.offsetHeight) / 2}px`;
var newScale;
if (gameRatio > windowRatio) {
newScale = window.innerWidth / container.offsetWidth;
if (newScale > 1) newScale = 1;
}
else {
newScale = window.innerHeight / container.offsetHeight;
if (newScale > 1) newScale = 1;
}
container.style.transform = `scale(${newScale})`;
}