High level - I am trying to build a Slot Machine game using HTML, CSS, and JavaScript. At this current step, my goal is to keep 3 blank images before the user selects the 'SPIN' button which will result in running a function that returns 3 random images from an array.
Here is the current repo: https://github.com/feasible-creative/slotmachine
Here is the current repo running live: https://feasible-creative.github.io/slotmachine/
The JavaScript snippet below works to return a random image, but my code currently has this function twice - the first instance seemingly runs automatically which makes it seem like there is a placeholder image when you first access the app (see second link above). Whereas the second instance runs as designed when the user hits spin. [Eventually all 3 images need to be randomized by the function but I think that is a later step].
imgArray = ['img_1.jpg', 'img_2.jpg', 'img_3.jpg']
function getRandomImg() {
randomIndex = Math.floor(Math.random()* imgArray.length);
selectedImg = imgArray[randomIndex]
document.getElementById('slotResult').src = `./img/${selectedImg}`
slotResult.className = 'casino';
}
getRandomImg();
To troubleshoot - I've tried removing the first instance of the above code, but that just leaves a blank space that is filled once the user hits 'SPIN'.
Related
I have a question on how to stop the timer in a "find the pair" game, built in javascript for a school project.
While trying to look for help online I noticed other javascript projects for a similar game.
However, the ones I found had more use of CSS functionalities, while the one I am trying to finish has practically all the functionalities built in javascript.
To give a description, there is a board (6x8) with random logos, let's call them 'cards'.
The game starts and all the cards are sorted randomly and then hidden.
For 60 seconds all the cards remain in the same position while the player tries to match them.
After that time, only the cards that have not been paired are sorted again, and the player will have to try to pair them again.
One of the things that the code must do is to stop the time when all the cards are correctly paired, i.e. when the game is finished.
Below there is the last version of the code made to end the game.
The function tempo() is supposed to define the time.
The temporizador is the time progress bar.
The contador is the variable used to count the time.
function tempo(){ //function that controls our time progress bar, uses 60 seconds (maxCount) for its cycle
let contador=0;
let maxCount=60;
temporizador=null;
if (temporizador != null) clearInterval(temporizador)
else
temporizador=setInterval(()=>{
contador++;
document.getElementById("time").value=contador;
if(contador===maxCount-5)document.getElementById("time").classList.add("warning"); //when it takes 5 seconds to end the 60 seconds
if(contador===maxCount) { //in the time bar, you can see the bar in red, blinking
clearInterval(temporizador);
document.getElementById("time").classList.remove("warning"); //when cycle finished the red blinking stops
scramblerEscondidas(); //and the function scramblerEscondidas() to sort the unmatched pairs, is executed
}
},1000)
for (let i=0; i<6; i++) { //cycle to iterate the rows of the board
for(let j=0; j<8; j++){ //cycle to iterate the columns of the board
if (game.board[i][j].virada=true) tempo.stop(); //'virada' is a property of each card of the board, if true it displays the logo. defined in the 'const' for the card
game.sounds.win.play();
}
}
}
The last cycle for in this function is supposed to check if all the cards are turned to the player, meaning the game is finished.
It is supposed to stop the time (the progress in the time bar) when this happens, but the timer doesn't stop.
Sorry for my noobness. Can anyone give any tips on how to find a solution for this?
I also tried different approaches but I fear they all used the same logic, which is likely faulty.
Any simple tip would help as I just recently started using javascript.
I didn't see what are you trying to do with these code.
But I got your point in stopping the timer.
To make a timer stop, you just have to make a boolean variable called isHaveWinner set it with with default false value.
Then wrap your counter function with
if (!isHaveWinner) {
...your timer iteration
}
In your game logic, if the game finished set the isHaveWinner to true. So your timer won't run no more
There is a JS code snippet
var FINISH_TIME = 20;
on a website.
It means a user has to wait FINISH_TIME seconds to do the next step. I can modify it via the Console panel FINISH_TIME = 1, but it can work only if I rapidly input it and hit the Enter key.
Someone told me (actually showed me), he could set a break point after var FINISH_TIME = 20; and hit F5 to refrest the website to let the code runs onto the break point. We can safely execute FINISH_TIME = 1 when the code onto the break point.
But I foget how to set such a break point.
I find the way. In the Sources Panel, find the current website js, find the line, Ctrl+B
I have forked a Tensorflow.js code which essentially detects a variety of objects using a webcam video. I would like to know, if there is a way to track the moved distance ( X and Y coordinates) of specific objects like humans within the webcam to calculate their speed.
The most important thing for me right now is, to give every detected human, a unique ID. So that i can use that ID to store the object's coordinates in an array, for example:
let speed = { ID: 1, xVal: [1,2,3,4], yVal: [2,3,4,5] } // this code works fine and gives the predicted image an ID
The problems here is, the code breaks down the video into image frames and predicts every object in every image frame independently. So if i give a predicted object an ID for example ID = 1,
The predicted element will have an ID which is equal to 1. But that id will be lost whenever a new image frame appears, the code will predict again and the new image frame will lose all the IDs.
if(prediction.class == 'person'){
prediction.id = 1;
}
// this code gives the predicted human object an id equal to 1. what i want is to give every human a unique ID.
// Let's say the camera detects 5 people, i want each of them to have a unique ID
// so that i can track their moved distance.
Here is a demo which shows the code in action: https://codesandbox.io/s/z364noozrm .
Here is the tutorial i got the code from: https://hackernoon.com/tensorflow-js-real-time-object-detection-in-10-lines-of-code-baf15dfb95b2 .
I have been brought in mid stream on an Adobe Acrobat Pro DC customization project. The goal of this project is to add a warning along the left edge of each page. I have been given a piece of JavaScript that does this with one exception and asked to fix that exception.
The code is:
var inch = 72;
for (var p = 0; p < this.numPages; p++) {
var aRect = this.getPageBox( {nPage: p} );
aRect[0] = 8.25*inch; //how far from the left the box ends
aRect[1] = 0.5*inch; //how high from the bottom the box is
aRect[2] = 7.75*inch; //how far from the left the box starts
aRect[3] = 11.0*inch; //how tall the box is
var f = this.addField("ControlledDoc", "text", p, aRect )
f.rotation = 270;
f.delay = true;
f.textSize = 7.5;
f.textFont = font.HelvB;
f.textColor = color.red;
f.alignment = "center";
f.readonly = true;
f.display = display.visible;
f.delay = false;
}
var myWillSaveScript = 'var f = this.getField("ControlledDoc"); \r'
+ 'f.value = "This is an electronic controlled copy of a paper based document management system. When printed on the copy machine it becomes an uncontrolled paper copy valid until the end of the printing day."; \r';
this.setAction("WillSave", myWillSaveScript);
The problem presents when a document is more than one page in length. The ControlledDoc field is replicated on each page as expected. Each page gets a ControlledDoc#n-1 field, where n is the page number. On the first page, the f.rotation setting is retained and shows up in the UI as the Orientation dropdown in the Properties dialog being set to 270. However, on the second and subsequent pages the Orientation is set to 0. I can manually edit the document and set the Orientation to 270, but that defeats the purpose of automating things with JavaScript.
I am new to controlling Acrobat Pro DC with JavaScript, so I will not be surprised if I am missing something stupid...
What do I need to change to make the rotation setting stick on the second and subsequent pages?
Field properties can be on a field level (the same for all copies of the field, with the same nam), or on a widget level (can be different from copy of the field to copy of the field).
The Acrobat JavaScript documentation has a list of those properties. Unfortunately, those two lists (field level and widget level) do not contain the rotation property. That means, we do not really know whether it is field or widget level. From your description, I get the feeling that it is widget level.
What you may try is to create an individual field for every page. You would do that with the line
var f = this.addField("ControlledDoc." + p, "text", p, aRect) ;
About the delay property: I always use the doc.delay property (instead of the field.delay), and because of that outside of a loop, so that it can provide maximum performance gain. However, if the script exits from within the loop, I would have to set delay to false via the Console. From my experience, this will create all appearances (but in order to find out, we'd have to get onto that page, and then they are created immediately…).
I'm assuming you're on page 1 when you run the script. That's why it looks correct on page one.
The delay property, when false, tells Acrobat to delay updating the appearance of the field until it's set to true. When you add the field to the pages, you're telling Acrobat not to generate appearances until all of the settings are set... that's OK... but then, I suspect, you never visit the subsequent pages so the appearances never get updated for those pages even though the delay property is now set to true. Just pull out the two lines that set the delay property and it should work.
I've tried many solutions off my head like using setInterval in various ways but I can't seem to get it working.
Currently on every refresh, the patterns will all be random. The closest thing to what I wanted was that I made a setInterval and code but it only made 1 square continuously change its color. I deleted it by the way.
I just want after the page loads, it will continue to flip through random colors and not just be stuck on what was already generated.
var rndTile = Math.floor((Math.random() * 40) + 1);
var base = 2 / 2;
var colChoices = ["#81A594","#79BEDB","#6B78B4", "#593E1A", "#99CCCC"];
var fadeTime = Math.floor((Math.random * 6000));
Code: https://jsfiddle.net/nL56woyy/8/
Since i can't understand your fiddle properly i am presenting my own solution here. Your first problem is that the random number is only generated once on site load. Second thing: your var base is always 1 and gets reseted to 0 in the each call. Thats why your output is always the same.
Since the code is to long to put it on stackoverflow here is the fiddle: https://jsfiddle.net/0ajg01y1/1/