Creating a game in JQuery - javascript

I am trying to create a simple game on a webpage.
The game should be like this:
The web page should display at random times images placed in random positions on the browser window.
Each image lasts on the browser window for a short period of time and then it disappears.
If the user clicks an image before it disappears, he/she gets a point.
The game ends when the user wins 10 points.
So far I managed to display all elements on a page at random positions, then delete them, and display them again.
Right now I am having problems with the count of each click.
JavaScript
$(document).ready(function () {
timeOut();
});
function timeOut() {
setInterval(function () {
deleteImages();
createImages();
}, 3000);
}
function createImages() {
var myarray = ["img/Angel.gif", "img/Angry.gif", "img/BigSmile.gif",
"img/Confused.gif", "img/Cool.gif", "img/Crying.gif",
"img/Eyebrow.gif", "img/Goofy.gif", "img/Happy.gif"];
var count = 0;
var div;
for (var i = 0; i < 9; i++) {
var randPos = 0 + Math.floor(Math.random() * 500);
this.img = document.createElement("img");
div = document.createElement("div");
$("div").attr("id", "div" + i);
var randNew = 0 + Math.floor(Math.random() * (5));
var rand = 0 + Math.floor(Math.random() * (9 - count));
this.img.src = myarray[rand];
$('#div' + i).css("left", randPosition());
$('#div' + i).css("right", randPosition());
$('#div' + i).css("top", randPosition());
$('#div' + i).css("bottom", randPosition());
$('#div' + i).css("position", "relative");
$('#div' + i).show();
div.appendChild(this.img);
$("body").prepend(div);
myarray.splice(rand, 1);
count++;
}
//setTimeout(function(){ jQuery("div").hide(); }, 3000);
}
function deleteImages() {
$("div").remove();
}
function randPosition() {
return 0 + Math.floor(Math.random() * 500);
}
$(function () {
$("div").click(function (e) {
var offset = $(this).offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);
alert("X: " + relativeX + " Y: " + relativeY);
});
});
css
.active-div{
position:relative;
}
.menu-div{
position:absolute;
top:0;
right:0;
display:none;
}

Use a counter and increment when you click an image:
var count = 0;
count++;
Also you need to reapply the click event because you are recreating new elements instead of moving the already created ones:
Call this:
$("div").click(function(e) {
var offset = $(this).offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);
});
after createImages function like so:
var count = 0;
var holder;
$(document).ready(function(){
timeOut();
});
function addOnClicks() {
$("div").on('click',function(e) {
var offset = $(this).offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);
count++;
if(count >= 10)
{
deleteImages();
clearInterval(holder);
alert("Game Over");
}
});
}
function timeOut(){
holder = setInterval(function(){deleteImages();createImages();addOnClicks(); }, 3000);
}
function createImages(){
var myarray=["img/Angel.gif","img/Angry.gif","img/BigSmile.gif",
"img/Confused.gif","img/Cool.gif","img/Crying.gif",
"img/Eyebrow.gif","img/Goofy.gif","img/Happy.gif"
];
var count=0;
var div;
for (var i = 0; i < 9; i++) {
var randPos = 0 + Math.floor(Math.random() * 500);
this.img = document.createElement("img");
div = document.createElement("div");
$("div").attr("id","div"+i);
var randNew = 0 + Math.floor(Math.random() * (5));
var rand = 0 + Math.floor(Math.random() * (9-count));
this.img.src = myarray[rand];
$('#div'+i).css("left", randPosition());
$('#div'+i).css("right",randPosition());
$('#div'+i).css("top",randPosition());
$('#div'+i).css("bottom",randPosition());
$('#div'+i).css("position","relative");
$('#div'+i).show();
div.appendChild(this.img);
$("body").prepend(div);
myarray.splice(rand,1);
count++;
}
//setTimeout(function(){ jQuery("div").hide(); }, 3000);
}
function deleteImages(){
$("div").remove();
}
function randPosition(){
return 0 + Math.floor(Math.random() * 500);
}
.active-div{
position:relative;
}
.menu-div{
position:absolute;
top:0;
right:0;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Use an incremented variable like so:
$(function() {
var click_count = 0;
$("div").click(function(e) {
click_count++;
});
});

Related

I need to make a countdown of where the images show up and move in random directions. I could only use Javascript

So I have to make a countdown of where the images show up and they slide in random directions. I have gotten the countdown to work, but the shapes do not move. I could only use Javascript, no JQuery. Here is my code so far:
https://jsfiddle.net/IyamSIM/L6umLkt8/
function countdown() {
var seconds;
var way;
seconds = document.getElementById('countdown').innerHTML;
seconds = parseInt(seconds, 10);
if (seconds == 1) {
way = document.getElementById('countdown');
way.innerHTML = "End";
ham();
sis();
wash();
return;
}
seconds--;
way = document.getElementById('countdown');
way.innerHTML = seconds;
timeoutMyStop = setTimeout(countdown, 100);
}
countdown();
function ham() {
var elem = document.getElementById("ham");
var pos = 0;
var id = setInterval(frame, 8);
function frame() {
if (pos == 550) {} else {
pos++;
elem.style.bottom = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
function sis() {
var elem = document.getElementById("sis");
var pos = 0;
var id = setInterval(frame, 8);
function frame() {
if (pos == 250) {} else {
pos++;
elem.style.left = pos + 'px';
}
}
}
function wash() {
var elem = document.getElementById("wash");
var pos = 0;
var id = setInterval(frame, 8);
function frame() {
if (pos == 290) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
img{
width: 100px;
height: 100px;
}
<body>
<h1>Countdown Surprise Assignment</h1>
<center><div id="countdown">10</div></center>
<img id ="ham" src="https://simranjits-swamped-story.neocities.org/FINAL_PROJECT/hamilton.jpg">
<img id ="sis" src="https://simranjits-swamped-story.neocities.org/FINAL_PROJECT/sisters.jpg">
<img id ="sis" src="https://simranjits-swamped-story.neocities.org/FINAL_PROJECT/washington.jpg">
You could let CSS3 do the job for you.
Also why don't you create a random function generator? That's what you need after all, the one below will generate a number given a min and max value range.
var EL_countdown = document.getElementById('countdown'),
ELs_card = document.getElementsByClassName('card'),
sec = 10;
// random generator
function rnd(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
function countdown() {
sec--;
EL_countdown.innerHTML = !sec ? "End" : sec;
if (!sec) return flyTime();
else setTimeout(countdown, 100);
}
// Assign a random transition-timing and translate(x, y) position
function flyTime() {
// assign CSS3 transition and transform to every card
for (var i = 0; i < ELs_card.length; i++) {
ELs_card[i].style.transition = rnd(1, 6) + "s";
ELs_card[i].style.transform = "translate(" + rnd(20, 250) + "px, " + rnd(30, 120) + "px)";
}
}
countdown();
<div id="countdown">-</div>
<img class="card" src="//placehold.it/50x50/0bf">
<img class="card" src="//placehold.it/50x50/f0b">
<img class="card" src="//placehold.it/50x50/fb0">

Cannot call a functoin that is declared in javascript

I have declared a function in JavaScript, and inside it some JQuery code, and I'm calling this function inside a click event, and its not getting called.
And when I define an function with function keyword its saying expecting a function, so I have to use the functions as expression. The function is getting called when its outside the click event, like getting called globally when the document is ready.
JavaScript
var item_width = $('.item-slider').width();
var item_margin = (item_width-600)/5; //sum of 4 elements divided by 5 margin spaces
var items = $('ul.item-slider>li');
var x = 0;
$.each(items,function(index){
$(this).data("id",x);
x = x+1;
});
var x = function(){
$.each(items,function(index){
var pos = $(this).data('id');
if($(this).data('id') < 1){
var left =(pos-1) * 150 + (pos-1) * 10;
-Math.abs(left);
$(this).css("left",left);
}
else if($(this).data('id') === 1){
$(this).css("left", 0);
console.log("positon is set to" + $(this).css("left"));
}
else if($(this).data('id') > 1){
var left = (pos-1) * 150 + (pos-1) * 10;
$(this).css("left", left);
console.log("positon is set to " + $(this).css("left"));
}
});
}
// commented x();
$(".explore_matches > button[name = 'pre']").click(function(){
$.each(items,function(index){
console.log("each working");
$(this).data('id',"abc");
})
x();
console.log("skipped");
});
var item_width = $('.item-slider').width();
var item_margin = (item_width-600)/5; //sum of 4 elements divided by 5 margin spaces
var items = $('ul.item-slider>li');
var x = 0;
$.each(items,function(index){
$(this).data("id",x);
x = x+1;
});
function needToCall(){
$.each(items,function(index){
var pos = $(this).data('id');
if($(this).data('id') < 1){
var left =(pos-1) * 150 + (pos-1) * 10;
-Math.abs(left);
$(this).css("left",left);
}
else if($(this).data('id') === 1){
$(this).css("left", 0);
console.log("positon is set to" + $(this).css("left"));
}
else if($(this).data('id') > 1){
var left = (pos-1) * 150 + (pos-1) * 10;
$(this).css("left", left);
console.log("positon is set to " + $(this).css("left"));
}
});
}
$(".explore_matches > button[name = 'pre']").click(function(){
$.each(items,function(index){
console.log("each working");
$(this).data('id',"abc");
})
needToCall();
console.log("skipped");
});

jQuery Promises with chained setTimeouts

I'm doing a little dice game to learn.
What I do is i scrumble the dice X amount of times, keep slowing the random down until it gets to the final value, and that's the "winning number".
But i would like to execute the scrumble 1 by 1 on the dices. Imagine I got 2. And later I do a little zoom effect.
I was thinking I could achieve this by using promises but is not working for me, I don't know what I'm missing.
Here's the JS code:
var counter = 0.8;
var diceNumber = 0;
var rollDice = function(diceId){
var dfd = new $.Deferred();
$('#' + diceId).removeClass('idle');
counter *= 1.2;
diceNumber = Math.round(Math.random()*5) + 1;
$('#' + diceId).removeClass();
$('#' + diceId).addClass('dice_' + diceNumber);
if(counter < 800) {
timeout = setTimeout(rollDice, counter, diceId);
}else{
$('.winner').text(diceNumber);
$('#' + diceId).removeClass();
$('#' + diceId).addClass('animate');
$('#' + diceId).addClass('dice_' + diceNumber)
.animate({ zoom: '1.3' }, 200)
.animate({ zoom: '1' }, 100);
dfd.resolve();
return dfd.promise();
}
}
var startToDice = function() {
rollDice('dice_1').then(rollDice('dice_2'));
}
startToDice();
And what it ends up doing is running both dices simultaneously.
Any advice? Thanks.
You're on the right track. I couldn't test cause I don't have all the elements in place, but try this out:
var counter = 0.8;
var diceNumber = 0;
var rollDice = function(diceId){
var dfd = new $.Deferred();
var roll = function() {
$('#' + diceId).removeClass('idle');
counter *= 1.2;
diceNumber = Math.round(Math.random()*5) + 1;
$('#' + diceId).removeClass();
$('#' + diceId).addClass('dice_' + diceNumber);
if(counter < 800) {
timeout = setTimeout(roll, counter);
}else{
$('.winner').text(diceNumber);
$('#' + diceId).removeClass();
$('#' + diceId).addClass('animate');
$('#' + diceId).addClass('dice_' + diceNumber)
.animate({ zoom: '1.3' }, 200)
.animate({ zoom: '1' }, 100);
dfd.resolve();
}
}
roll();
return dfd.promise();
}
var startToDice = function() {
rollDice('dice_1').then(function(){
rollDice('dice_2');
});
}
startToDice();
Let me know if you get any errors when you run it so I can make adjustments as necessary.
Like comented by bergi:
var startToDice = function() {
rollDice('dice_1').then(function() { rollDice('dice_2'); });
}

how to use setInterval to continue animation while mouse is over div

I am trying to modify a slideshow to continuously animate while the mouse is over the back or next arrow. If the mouse leaves, I would like the animation to stop where it is.
I found this post and this post which are helpful in telling me I need to use setInterval, but because I am a beginner I am not sure how to implement it with the code I have. I tried updating the miliseconds set in the counter variable but that didn't change anything.
Here is the hover code so far. It advances the image on hover but not continuously.
$(document).ready(function(){
var thumbs = $('ul.thumbHolder li');
var bigImgs = $('ul.imgHolder li');
var mask = $('.imgHolder');
var imgW = $('ul.imgHolder li').width();
var speed = 800;
thumbs.removeClass('selected').first().addClass('selected');
thumbs.click(function () {
var target = $(this).index();
mask.animate({
'left': '-' + imgW * target + 'px'
}, speed);
thumbs.removeClass('selected');
$(this).addClass('selected');
});
$('.Bleft').on('mouseover', function () {
var i = $('ul.thumbHolder li.selected').index();
i--;
$('ul.thumbHolder li.selected').removeClass('selected');
thumbs.eq(i).addClass('selected');
if (i === -1) {
mask.animate({
'left': '-' + imgW * $('ul.thumbHolder li').index() + 'px'
}, speed);
} else {
mask.animate({
'left': '-' + imgW * i + 'px'
}, speed);
}
clearInterval(counter);
});
$('.Bright').on('mouseover', function () {
var i = $('ul.thumbHolder li.selected').index();
i = i >= thumbs.length - 1 ? 0 : i + 1;
$('ul.thumbHolder li.selected').removeClass('selected');
thumbs.eq(i).addClass('selected');
mask.animate({
'left': '-' + imgW * i + 'px'
}, speed);
clearInterval(counter);
});
var count = 0;
var counter = window.setInterval(timer, 5000);
function timer() {
count = count + 0;
if (count >= 0) {
count = 0;
return;
}
mask.animate({
'left': '-' + imgW * count + 'px'
}, speed);
thumbs.removeClass('selected');
thumbs.eq(count).addClass('selected');
}
});
This is an example of what I am trying to achieve (I know it is flash but I think it can be done with jQuery too).
This is a fiddle that has all my work so far.
Thank you for any help.
I think I am close to the solution. This is my idea.
Every ul.imgHolder li is divided in many blocks of 20px ( you can change the size of course ), so if a div has a size of 980px you will have 49 blocks for image.
When mouseover event is fired I will slide for a block every speed milliseconds until the mouseout is fired.
I've implemented only the slide right button, I've deleted partially some logic, sorry!
var $ = jQuery.noConflict(true);
$(document).ready(function(){
var thumbs = $('ul.thumbHolder li');
var bigImgs = $('ul.imgHolder li');
var mask = $('.imgHolder');
var imgW = $('ul.imgHolder li').width(); //Assuming imgW % 20 = 0
var blockSize = 20; //20px
var blocksPerThumb = imgW/blockSize;
var numBlocks = (blocksPerThumb)*thumbs.length;
var speed = 400;
var blockPos = 0;
var currentAnim = null;
thumbs.removeClass('selected').first().addClass('selected');
thumbs.click(function () {
var target = $(this).index();
mask.animate({
'left': '-' + imgW * target + 'px'
}, speed,'linear');
thumbs.removeClass('selected');
$(this).addClass('selected');
});
$('.Bleft').on('mouseover', function () {
});
$('.Bright').on('mouseover', function(){
currentAnim = setInterval(goRight,speed);
}).mouseout(function(){
clearInterval(currentAnim);
});
var goRight = function () {
blockPos = (blockPos+1)%numBlocks;
mask.animate({
'left': '-' + blockSize * blockPos + 'px'
}, speed,'linear');
};
});
Good Work!

Event on margin change

I have an element with animated top margin. I need to detect if it isn't too close from the border, and if it is, scroll parent div to lower position, to prevent animated element from hiding. Here is an example:
http://jsfiddle.net/zYYBR/5/
This green box shouldn't be below the red line after clicking the "down" button.
Do you mean this?
var new_margin;
var step = 75;
var limit = $("#max")[0].offsetTop;
$('#down').click(function() {
var goStep = step;
var elHeight = $("#animated")[0].offsetTop + $("#animated")[0].offsetHeight;
if((elHeight + step) > limit)
{
goStep = limit - elHeight;
}
new_margin = goStep + parseInt($('#animated').css('margin-top'));
$("#animated").animate({marginTop: new_margin}, 1000);
});
http://jsfiddle.net/zYYBR/8/
EDIT: Or maybe something like that (of course you can improve the calculation, because currently it's very buggy with scroll):
var new_margin;
var step = 75;
$('#down').click(function () {
scroll(1000);
});
var scrollTimer = null;
$("#container").bind("scroll", function () {
clearTimeout(scrollTimer);
scrollTimer = setTimeout(function () { scroll(1); }, 10);
});
function scroll(speed) {
var scrollStep, animationStep = step;
var currentBoxBottom = $("#animated")[0].offsetTop + $("#animated")[0].offsetHeight;
var nextCurrentBoxBottom = currentBoxBottom + step;
var limit = $("#max")[0].offsetTop + $("#container")[0].scrollTop;
if (nextCurrentBoxBottom > limit) {
if (limit >= $("#container")[0].scrollTop) {
scrollStep = $("#container")[0].scrollTop + nextCurrentBoxBottom - limit;
}
else {
scrollStep = $("#container")[0].scrollTop - nextCurrentBoxBottom - limit;
animationStep = nextCurrentBoxBottom - limit;
}
$("#container")[0].scrollTop = scrollStep;
}
new_margin = animationStep + parseInt($('#animated').css('margin-top'));
$("#animated").animate({ marginTop: new_margin }, speed);
}
http://jsfiddle.net/zYYBR/13/
Do you mean something like this?
I have the same visual result as Alex Dn did, but I added a little extra direction to what I think you're talking about. If it's what you're looking for I'll make updates:
var new_margin;
var step = 75;
var limit = $("#max")[0].offsetTop;
$('#down2').click(function() {
var anim = $("#animated");
var hrOff = $("#max").offset();
var thOff = anim.offset();
new_margin = Math.min(hrOff.top - thOff.top - anim.height(), 75);
console.log(new_margin, hrOff.top, thOff.top);
var st = 0;
if (new_margin < 75) {
st = 75 - new_margin;
//have container scroll by this much?
}
anim.animate({
marginTop: "+=" + new_margin
}, 1000);
});​
​
http://jsfiddle.net/zYYBR/10/

Categories

Resources