Когда человек действительно хочет чего-то, вся Вселенная вступает в сговор, чтобы помочь этому человеку осуществить свою мечту.
2-ноября-2023, 20:48 3 0
Простая игра Падающие предметы на Хеллоуин для сайта. С помощью которой можно развлечёт ваших посетителей на праздник Хеллоуин и украсить веб проект. Предметы это рожицы всякой нечисти.
Несмотря на то, что это простая игра, мне понравилось в нее играть. Цель этой игры — нажимать на различные падающие фигуры, прежде чем они упадут на землю. Код сохраняет количество цифр, на которые нажимал пользователь. Кроме того, в игре предусмотрен обратный отсчет в 60 секунд.
HTML
<div class="game">
<div class="counter" id= "counter">00s</div>
<div class="score">
00
</div>
</div>
CSS(SCSS)
.game{
background: #efefef;
width:100%;
height:750px;
position: relative;
overflow: hidden;
}
.score{
font-size: 500px;
z-index: 20;
font-family: arial;
color: #d7e4d9;
user-select:none;
width:100%;
text-align:center;
}
.box{
width: 100px;
height:100px;
position:absolute;
top: -150px;
transition: transform 1.5s linear;
cursor: pointer;
z-index:100;
}
.move{
transform:translateY(120vh);
}
.counter{
width:100%;
margin: 0 auto;
text-align:center;
font-family:arial;
color:red;
font-weight:bold;
padding-top:10px;
font-size:20px;
position:relative;
z-index:9999;
}
Js
var score = 0;
var color = "blue";
function random(min,max){
return Math.round(Math.random() * (max-min) + min);
}
function setBG(){
if (Math.round(Math.random())){
return "http://icons.iconarchive.com/icons/hopstarter/halloween-avatars/128/Frankenstein-icon.png";
} else {
return "http://icons.iconarchive.com/icons/hopstarter/halloween-avatars/128/Scream-icon.png";
}
}
function dropBox(){
var length = random(100, ($(".game").width() - 100));
var velocity = random(850, 10000);
var size = random(50, 150);
var thisBox = $("<div/>", {
class: "box",
style: "width:" +size+ "px; height:"+size+"px; left:" + length+ "px; transition: transform " +velocity+ "ms linear;"
});
//set data and bg based on data
thisBox.data("test", Math.round(Math.random()));
if(thisBox.data("test")){
thisBox.css({"background": "url('http://icons.iconarchive.com/icons/hopstarter/halloween-avatars/128/Frankenstein-icon.png')", "background-size":"contain"});
} else {
thisBox.css({"background": "url('http://icons.iconarchive.com/icons/hopstarter/halloween-avatars/128/Scream-icon.png')", "background-size":"contain"});
}
//insert gift element
$(".game").append(thisBox);
//random start for animation
setTimeout(function(){
thisBox.addClass("move");
}, random(0, 5000) );
//remove this object when animation is over
thisBox.one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
function(event) {
$(this).remove();
});
}
for (i = 0; i < 10; i++) {
dropBox();
}
$(document).on('click', '.box', function(){
if($(this).data("test")){
score += 1;
} else {
score -= 1;
}
$(".score").html(score);
$(this).remove();
});
var runGame = setInterval(function(){
for (i = 0; i < 10; i++) {
dropBox();
}
}, 5000);
function countdown() {
var seconds = 60;
function tick() {
var counter = document.getElementById("counter");
seconds--;
counter.innerHTML = (seconds < 10 ? "0" : "") + String(seconds) + "S";
if( seconds > 0 ) {
setTimeout(tick, 1000);
draw();
update();
} else {
alert("Game over");
clearInterval(runGame);
}
}
tick();
}
countdown();