var b = 1;
for(var i= 0; i < 5; i++){
fisk(b);
}
function getRandomPosition(element) {
var x = document.body.offsetHeight-element.clientHeight;
var y = document.body.offsetWidth-element.clientWidth;
var randomX = Math.floor(Math.random() * x);
var randomY = Math.floor(Math.random() * y);
return [randomX,randomY];
}
function fisk(skala) {
var img = document.createElement('img');
img.setAttribute("style", "position:fixed;");
img.setAttribute("src", "http://i.imgur.com/K9egEbW.jpg");
document.body.appendChild(img);
var xy = getRandomPosition(img);
img.style.top = xy[0] + 'px';
img.style.left = xy[1] + 'px';
}
With this code above i have made a tiny game where i am supposed to click on some fished that spawns with this code and when you click them all you win. But i'm having trouble finding out how to make the images disappear when i click them. Here is a jsbin link that shows all i've done so far so it's easier to understand. https://jsbin.com/josamuxoce/edit?html,css,js Anybody have a clue on how to make the fishes that spawn disappear when i click on them with the fishing rod?
Thanks
Add $(img).click(function(){ $(this).remove();}); to function fisk(skala);
But. img will never get click becaurse all clicks will be handled by #fiskespo.
Use fiskespo image as cursor image instead of extended img object (Using external images for CSS custom cursors). Should work;
Related
im currently having a big problem with a javascript little game im programming. Essentially the player finds specific objects, but to make it easier i want to make a menu to show which objects are there to find
for (let i = 0; i < figuresCount; i++) {
var img = document.createElement("img");
img.src = "figure" + randomNumber(1,10)+ ".svg";
img.id = "figure"+i;
var div = document.getElementById("main");
div.appendChild(img);
document.getElementById("figure"+i).style.top = randomNumber(10, 95) + "%";
document.getElementById("figure"+i).style.left = randomNumber(1, 90) + "%";
document.getElementById("figure"+i).style.width = randomNumber(30, 60) + "px";
document.getElementById("figure"+i).style.transform = "rotate("+ randomNumber(0,360) +"deg)";
document.getElementById("figure"+i).style.position = "fixed";
document.getElementById("figure"+i).addEventListener("click", findFigure);
}
this is the loop where the objects are taken and shown on the playing field. The problem im having is saving the same randomized photos in the menu. Another thing that is difficult is that when a specific object is found, then the object in the menu should disappear too. Can someone help me with this?
I tried creating another variable and saving it there but it does not work.
var menu = document.getElementById("menu");
menu.appendChild(img);
Hi currently I'm making some RPG game. I want to move my character with arrows. Which is working right now. But I want to change image when I clicking let's say the right arrow. Right now when I click right arrow with this code:
function rightArrowPressed() {
var element = document.getElementById("image1").src = "/img/run_1.png";
element = document.getElementById("image1");
element.style.left = parseInt(element.style.left) + 5 + 'px';
}
The image change's to run_1.png ant it stays like that. Than just the image slides in one pose. How to change the image again when I click right arrow ?
HTML
<img id="image1" src="{{Auth::user()->char_image}}" style="position:absolute;left:0; top:0;height: 45px; image-rendering: -webkit-optimize-contrast;">
You can use a counter variable:
var counter = 0;
function rightArrowPressed() {
counter = (counter === 4) ? 1 : counter+1;
var image = "/img/run_"+counter+".png";
var element = document.getElementById("image1");
element.src = image;
var left = parseInt(element.style.left)+5;
element.style.left = left + "px";
}
And this would make it so that every time you right click, a different image is used.
You can use an arry imeges sources to make a scene
function rightArrowPressed() {
var slides=['/img/run_1.png','/img/run_2.png','/img/run_1.png'];
slides.forEach(slide => {
setTimeout(function(){
var element = document.getElementById("image1").src = slide;
element = document.getElementById("image1");
element.style.left = parseInt(element.style.left) + 5 + 'px';
}, 500);//add a time in screen
});
}
i have a set of small sized images on the browser. What i want to do is when i click on the image a larger format of the image clicked will show up in a div above. here is javascript code. The code below shows an empty image. how do i fix this? I dont want jquery to do this.
//for images
var largeImageViewer = document.getElementById('large-image-viewer');
var smallImages = document.querySelectorAll('.small-images');
for(i = 0; i < smallImages.length; i++){
smallImages[i].addEventListener('click', function(event){
if (event) {
var img = document.createElement("img");
img.style.width = 500 + "px";
img.style.height = 500 + "px";
img.src = smallImages.src;
largeImageViewer.appendChild(img);
};
});
}
Inside an event handler the current element can be get by 'this' keyword.
img.src = this.src;
I am trying to modify this game, right now it shows 9 images at random positions and the user has to click on them and when it reaches 10 clicks the game ends. I want to appear only one image. I will share the original function and the function I have modified it.
Original
function createImages(){
var myarray= ["img/img1.gif","img/img2.gif","img/img3.png",
"img/img4.gif","img/img5.gif","img/img6.gif",
"img/img7.gif","img/img8.png", "img/img9.jpg"];
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++;
}
}
After I modified it
function createImages(){
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");
var randNew = 0 + Math.floor(Math.random() * (5));
var rand = 0 + Math.floor(Math.random() * (9-count));
this.img.src = "img/img1.gif";
$('#div').css("left", randPosition());
$('#div').css("right", randPosition());
$('#div').css("top", randPosition());
$('#div').css("bottom",randPosition());
$('#div').css("position","relative");
$('#div').show();
div.appendChild(this.img);
$("body").prepend(div);
count++;
}
}
The problem is that now it appears the same image 10 times, I want it to appear only once and then disappear and appear again. Can anyone help me fix this issue.
If it's not to much to ask I would like to put this image inside a div so it wouldn't appear all over the page.
function randPosition() {
return 0 + Math.floor(Math.random() * 500);
}
In createImages() function you have a loop that adds the image 10 times:
for (var i = 0; i < 9; i++) {
...
}
Remove it, and it'll do it only once. Also you can simplify the code removing some random variables that are not used.
Further, this two sentences aren't correct. The first one creates a div in a variable named also div. The second is selector for all div elements, you are not referencing the new created one as I think you expect.
div = document.createElement("div");
$("div").attr("id","div");
You should create a jQuery object with the new created div to work with it:
var div = document.createElement("div");
$div = $(div); // << Create jQuery object wrapping the new div
$div.css("left", randPosition());
Edited function:
function createImages(){
var div = document.createElement("div");
$div = $(div);
$div.css("left", randPosition());
$div.css("right", randPosition());
$div.css("top", randPosition());
$div.css("bottom",randPosition());
$div.css("position","relative");
$div.show();
var img = document.createElement("img");
img.src = "http://dummyimage.com/25x25/4F4/000.png";
div.appendChild(img);
$("body").prepend(div);
}
EDIT: I've built a JSFiddle for you so you can play with it: http://jsfiddle.net/6aLh9qam/3/
I'm writing a rather complex AJAX driven menu with multiple levels that animate around allowing a user to navigate a complicated tree structure at some point I had to add a function that auto centers (vert and horz) the images associated with each item on the menu tree. In order to measure the images and position them accordingly I must first write them to a hidden div ("#tempHolder") once they .load() I can then get their dimensions, calculate my offsets and then write the images to the DOM in the appropriate place.
This all works A Okay in the standards compliant browsers but IE7-8 seem to only process the .load() command when they feel like it. (homepage the menu loads okay, first visit to a sub-page breaks the menu, refreshing said page fixes it again...etc.). I restructured my function to make the .load() declaration early because of the advice I read here (http://blog.stchur.com/2008/02/26/ie-quirk-with-onload-event-for-img-elements/) but that doesn't seem to have worked. I also added e.preventDefault because of a stackOverflow thread that said this might prevent IE from caching my load statements.
Here is the function causing the issues:
if (this.imagePath != "") {
runImage = function (imagePath, $itemEle) {
var $itemEleA = $itemEle.find('a');
var image = new Image();
//$thisImage = $(image);
$(image).load(function (e) {
//alert('image loaded')
$(image).evenIfHidden(function (element) {
//alert('even if hidden');
////////////console.log($thisImage);
var elementWidth = element.width();
var elementHeight = element.height();
this.imageHeight = elementHeight;
this.imageWidth = elementWidth;
//alert('widthoffset = ' + widthOffset + 'imagewidth = ' + imageWidth + 'this.imageWidth = ' + this.imageWidth + 'elementWidth = ' + elementWidth);
var imagePaddingWidth = 230 - imageWidth;
var widthOffset = imagePaddingWidth / 2;
widthOffset = widthOffset + "px";
element.css("left", widthOffset);
var imagePaddingHeight = 112 - imageHeight;
if (imagePaddingHeight < 0) {
var heightOffset = imagePaddingHeight;
heightOffset = heightOffset + "px";
element.css("top", heightOffset);
}
if (imagePaddingHeight > 0) {
var heightOffset = imagePaddingHeight - 18;
heightOffset = heightOffset + "px";
element.css("top", heightOffset);
}
});
$(this).appendTo($itemEleA);
e.preventDefault();
return image;
});
image.src = imagePath;
//var tempvar = $itemEle.find('a');
$(image).appendTo("#tempHolder");
}
this.image = runImage(this.imagePath, $itemEle);
}
Since this is for a big client and the site is not yet live I can't show the site but I'll try to throw up some screen shots later.
Any help is greatly appreciated.
It is quite a common problem, and if the images are already in the cache some browsers (shall I say directly - IE?) fails to trigger load events on them. Hence there is a technique for a workaround.
// After this line of your code
image.src = imagePath;
// put this
if (image.complete || image.naturalWidth > 0) { // if image already loaded
$(image).load(); // trigger event manually
}