I'm trying to make a little puzzle game in HTML5 and I'm having trouble figuring out how to make a puzzle. In the puzzle you have to click the squares in a certain order to beat it. I don't know how to make it to where you have to click the buttons in order and if you don't you'll lose.
<!DOCTYPE html>
<html>
<head>
<title>Room Two</title>
<link rel="stylesheet" type="text/css" href="youtubeGame.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans|Oxygen|Ubuntu|Coming+Soon">
</head>
<body>
<div id="content">
<h1 id="roomNum">Room 2</h1>
<p id="roomInfo">Once again the door seems to magically close behind
you.<br /> Unlike the stone floor from the previous room, this one is divided up
into wooden slabs.<br /> You press your foot onto a slab. It slides down, and an
arrrow shoots from the roof.<br /> You barely get out of the way but somehow you
dodge it. You tell yourself to watch your step...</p>
<p id="step"></p>
<p id="step2"></p>
<div class="menu-container" id="puzzle">
<div class="button-container">
1
2
3
4
5
6
7
8
9
</div>
</div>
</div>
<br><br>
<div id="death">
Try Again?
</div>
Next Room
<script type="text/javascript">
document.getElementById("death").style.display = "none";
document.getElementById("nextRoom").style.display = "none";
function correctStep1() {
return true;
}
function correctStep2() {
return true;
}
function correctStep3() {
return true;
}
function correctStep4() {
return true;
}
function correctStep5() {
return true;
}
function correctStep6() {
return true;
}
function correctStep7() {
return true;
}
function wrongStep() {
document.getElementById("content").style.display = "none;"
document.getElementById("puzzle").style.display = "none";
document.getElementById("death").style.display = "block";
document.getElementById("roomNum").innerHTML = "You Have
Died";
document.getElementById("roomInfo").style.display = "none";
}
</script>
</body>
</html>
Please help me fix this
A very simple way would be to save the correct order in an array and if the user clicks, increment a clickcounter and check if the clicked button is at this position in the array:
var state = {
clickedButtons:[]
};
var correctClickSettings = {
order:[7,8,9,6,5,2,3],
resetOn:7 // order has 7 elements, so the user have to click 7 buttons, after that it will be checked and the clicked buttons will be resolved or rejected
};
// called from every button that can be clicked to solve the game
function onClick(evt) {
evt = evt || window.event;
var sourceButtonText = this.innerText;
state.clickedButtons.push(sourceButtonText);
if(state.clickedButtons.length >= correctClickSettings.resetOn) {
var distanceBetweenArrays = state.clickedButtons.reduce((cur,val,idx)=>cur+Math.abs(val-correctClickSettings.order[idx]),0);
if(distanceBetweenArrays > 0) {
wrongStep();
state.clickedButtons = [];
} else {
alert('This was right!');
}
}
}
This solution has one problem: Everybody with a little bit of understanding for javascript can open the webpage and read out the solution. So if you want to do it a little better (not so easaly cheatable) you have to use another solution:
You can use a hash instead of an array of button clicks as correct order:
function simpleHash(currentHash, idx, sourceButtonText) {
currentHash = currentHash*137+parseInt(sourceButtonText,10);
}
Now simply calculate the correct solution value: 46672273550408 (in your case)
Now with every button click calculate the next hash and compare it after 7 steps with the solution.
This is a very similar approach to your current implementation, however uses attributes to declare the order of the options. It also does the binding of the events directly through javascript.
var options = [];
var expected = 0;
document.querySelectorAll('.button').forEach((button, index)=>{
options.push({
button: button,
order: button.getAttribute('order'),
index: index,
clicked: false
});
button.addEventListener('click',onClick);
//console.log(options[options.length-1]);
});
function onClick(event){
let order = parseInt(event.currentTarget.getAttribute('order'));
if(order == expected){
expected++;
options[order].clicked = true;
console.log(options[order]);
}
}
<div id="content">
<h1 id="roomNum">Room 2</h1>
<p id="roomInfo">Once again the door seems to magically close behind you.
<br /> Unlike the stone floor from the previous room, this one is divided up into wooden slabs.<br /> You press your foot onto a slab. It slides down, and an arrrow shoots from the roof.<br /> You barely get out of the way but somehow you dodge it.
You tell yourself to watch your step...</p>
<p id="step"></p>
<p id="step2"></p>
<div class="menu-container" id="puzzle">
<div class="button-container">
1
2
3
4
5
6
7
8
9
</div>
</div>
</div>
<br><br>
<div id="death">
Try Again?
</div>
Next Room
Related
Firstly, I'm super (SUPER) new to coding in general. I'm doing a college project for a site, and I wanted to make a certain page have 2 buttons that play songs, 2 different versions, one for each button. I copied the code from stack overflow, can't remember where but I'll be forever thankful for that one answer. I'm new to SO too so I hope I put the code here the right way :|
<!-- BTN1-->
<button id="ASong" onClick="playPause()" >
<audio
src="mp3/Persona_5_OST-_Beneath_the_Mask_(getmp3.pro).mp3"
autoplay
loop
></audio>
<img src="img/musica2.png" width="100px" align="left" margin-top="40px">
<br/>
</button>
<script>
var aud = document.getElementById("ASong").children[0];
var isPlaying = false;
aud.pause();
function playPause() {
if (isPlaying) {
aud.pause();
} else {
aud.play();
}
isPlaying = !isPlaying;
}
</script>
<!-- BTN1-->
<!-- BTN2-->
<button id="ASong2" onClick="playPause()" >
<audio
src="mp3/Persona_5_OST_-_Beneath_the_Mask_r_(getmp3.pro).mp3"
autoplay
loop
></audio>
<img src="img/musica2.png" width="100px" align="left" margin-top="40px">
<br/>
</button>
<script>
var aud = document.getElementById("ASong2").children[0];
var isPlaying = false;
aud.pause();
function playPause() {
if (isPlaying) {
aud.pause();
} else {
aud.play();
}
isPlaying = !isPlaying;
}
</script>
<!-- BTN2-->
The only thing I really tried was changing the ID name for the second song. What happens is. I choose a button and click it first. That one button, with that specific song is the one that'll play (edit, it's not the first one I click, it's only one of the songs :/ it switched which one it was when I changed the ID name) , even if I try to press the other button afterwards. It's like both of them become the same button, they function the same. What I wanted is that each one of them worked separately. I want to be able to click, start one song, pause it, click on the other button and start the other song, which is not what's happening right now. I hope that makes sense D=
I'm going to modernize this a bit. Inline event handlers listeners are not the way to go these days. I'' use addEventListener instead.
Next, I'm going to use one lot of code to handle the actions. One concept to get used to as you learn to program is DRY: Don't Repeat Yourself. To facilitate the state of your playback I'll use a data attribute on the button
/*Get the buttons*/
document.querySelectorAll(".playPause").forEach(function(el) {
/*Add a click event listener*/
el.addEventListener("click", function() {
/*Get the first audio tag in the clicked button*/
var aud = this.querySelector("audio");
/*Check the data attirbute on the button if playing*/
if (this.dataset.isplaying === "true") {
/*Debug line*/
console.log("Pausing " + aud.src)
/*Change the status of the data attribute*/
this.dataset.isplaying = "false";
/*Pause the audio element*/
aud.pause();
} else {
/*Debug line*/
console.log("Playing " + aud.src)
/*Change the status of the data attribute*/
this.dataset.isplaying = "true";
/*PLay the audio element*/
aud.play();
}
})
});
<button id="ASong" class="playPause" data-isplaying="false">
<audio
src="mp3/Persona_5_OST-_Beneath_the_Mask_(getmp3.pro).mp3"
autoplay
loop
></audio>
<img src="img/musica2.png" width="100px" align="left" margin-top="40px">
</button>
<button id="ASong2" class="playPause" data-isplaying="false">
<audio
src="mp3/Persona_5_OST_-_Beneath_the_Mask_r_(getmp3.pro).mp3"
autoplay
loop
></audio>
<img src="img/musica2.png" width="100px" align="left" margin-top="40px">
</button>
<button type="button"
style="background-color:skyblue; border-color:blue; color:white"
className="bn49"
onClick = "this.style.visibility= 'hidden'; window.open('https://frankvanasch.com/elementor-158/','_blank')"
>go
</button>
Reaching your objective with HTML and JavaScript might be impossible if you user know what they are doing.
If you want to hide the button for 11 hours, I'd use localStorage or a cookie to store its status, and to choose if you want to show the button.
And invert the logic, like the button must be hidden by default, and shown only if no interaction has been made, or if the last interaction was more than 11 hours ago.
Somthing like this, of course this snippet cannot run here because of SO localStorage restrictions.
$(".bn49").on("click", function(evt) {
let tgt = evt.target;
$(tgt).hide();
localStorage.setItem("bn49", new Date().toISOString());
window.open('https://frankvanasch.com/elementor-158/', '_blank');
});
$(function() {
let btnTime = localStorage.getItem("bn49");
if (btnTime) {
// there is a time stored, we'll check it
let t = new Date();
t.setHours(t.getHours() - 11);
if (new Date(btnTime).getTime() > t.getTime()) {
// 11 hours have passed, show the button
$(".bn49").show();
}
} else {
// there isn't a time stored, show the button
$(".bn49").show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" style="background-color:skyblue; border-color:blue; color:white; visibility: hidden;" className="bn49">go</button>
I would like to filter and mark words from a page, something similar to the way Google marks words when you type a find query.
I am trying to do the filter and mark simultaneously. There are lots of solutions across the net that give examples of marking and examples of filtering but none that combine the two operations. Is this even possible?
I can show my filter script but not the marking script because I simply can't find one that actually works. I would have to upload dozens of scripts that I have tried.
Can anyone assist in pointing me in the right direction or even better maybe help with a snippet that actually works.
I can't believe it is so difficult to find.
This works wonderfully to filter the words or phrase but it does not mark it in the paragraph.
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myDIV *").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
Assuming myDIV contains elements only one layer deep, the following code should work:
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myDIV>*").map(function() {
var el = $(this);
var content = el.html().replace(/(<span class="highlighted">)|(<\/span>)/g, "");
el.html(content);
var hasText = el.text().toLowerCase().indexOf(value) > -1;
el.toggle(hasText);
if (hasText) {
// escape value for use in regex
var textRegex = new RegExp(value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "g");
el.html(content.replace(textRegex, '<span class="highlighted">$&</span>'));
}
});
});
});
.highlighted {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="myInput" />
<div id="myDIV">
<p>some text</p>
<p>some filler</p>
<p>I like cheese</p>
<p>this should work</p>
</div>
I would like to have two buttons which are basically categories. Let's name them category A and category B. The are displayed left and right. Below i would like to display some text which is dependent of the chosen category (i.e the clicked button) so that category A shows text A and category B shows text B.
This if for html. I'm working on a wordpress homepage.
I was able to install one button which toggles text (basically button 1 = Category A). But i couldn't manage to insert a second button (basically button 2 = Category B). Any ideas? Highly appreciated!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>Click the button to swap the text of the DIV element:</p>
<p><button onclick="myFunction()">Click Me</button></p>
<div id="myDIV">Hello</div>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.innerHTML === "Hello") {
x.innerHTML = "Swapped text!";
} else {
x.innerHTML = "Hello";
}
}
</script>
</body>
</html>
I expect to have 2 buttons which display 2 categories, the text should toggle according to which button has been clicked.
Could put the description in an attribute, then get the attributes value on click and change the html of the description. Here is a jsFiddle
<div>
<button class="js-button default-button" data-description="Category A's Description" onclick="myFunction(this)">
Category A
</button>
<button class="js-button default-button" data-description="Category B's Description" onclick="myFunction(this)">
Category B
</button>
</div>
<div id="js-description" class="description">
</div>
<script>
function myFunction(elem) {
var x = document.getElementById("js-description");
var description = elem.getAttribute('data-description');
x.innerHTML = description;
var button = document.getElementsByClassName('js-button');
for (var i = 0; i < button.length; i++) {
button[i].classList.remove('active-button');
}
elem.classList.add('active-button');
}
</script>
<style>
.default-button{
font-size:16px;
border-radius: 4px;
padding:7px 12px;
}
.active-button{
background:blue;
color:#fff;
}
.description{
margin-top:20px;
}
</style>
I don't really like all these solutions because everything is written from JS but contents probably come from database. So here is my solution :
// Native JS version
// Working Fiddle : https://jsfiddle.net/d34cbtw7/
var togglers = document.querySelectorAll('[data-toggle="tab"]');
for (var i = 0; i < togglers.length; i++) {
togglers[i].addEventListener('click', function() {
var tabs = document.querySelectorAll('.tab');
for(var j = 0; j < tabs.length; j++) {
tabs[j].classList.remove('active');
}
var $target = document.querySelector(this.getAttribute('data-target'));
$target.classList.add('active');
});
}
// jQuery version
$('body').on('click', '[data-toggle="tab"]', function(e) {
e.preventDefault();
// Select our target
var $target = $($(this).data('target'));
// Hide all tabs
$('.tab-contents .tab').removeClass('active');
// Show only $target tab
$target.addClass('active');
});
.tab-contents .tab {
display: none;
}
.tab-contents .tab.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-toggle="tab" data-target="#cat-A-content">
Cat A
</button>
<button data-toggle="tab" data-target="#cat-B-content">
Cat B
</button>
<div class="tab-contents">
<div class="tab active" id="cat-A-content">
My category A contents
</div>
<div class="tab" id="cat-B-content">
My category B contents
</div>
</div>
I also don't really like "onclick" attribute in HTML...
I've made a quick codepen as example.
You can achieve this by passing a parameter to the onClick function. In this example I keep track of the last button clicked, and the text it should render. If the last button clicked was the same button, the switched back to default. I hope this helps.
https://codepen.io/maffekill/pen/rbpjzw
HTML
<p>Click the button to swap the text of the DIV element:</p>
<p><button onclick="myFunction(1, 'TEXT A')">TEXT A</button></p>
<p><button onclick="myFunction(2, 'TEXT B')">TEXT B</button></p>
<div id="myDIV">Default Text</div>
JS
// Keep track of the button currently clicked
var activeBtn = null;
function myFunction(btnId, text) {
var x = document.getElementById("myDIV");
// If the last button is the same as the new one, show default text
if (activeBtn === btnId) {
x.innerHTML = "Default Text";
activeBtn = null
} else {
// Else show the text given to the text param
x.innerHTML = text;
activeBtn = btnId;
}
}
There are multiple ways to achieve this, but the easiest way I could come up with to explain this to you would be as following:
function myFunction(myEle) {
var x = document.getElementById("myDIV");
x.innerHTML = "This is category " + myEle.value;
}
<p>Click the button to swap the text of the DIV element:</p>
<p>
<button onclick="myFunction(this)" value="a">
Category A
</button>
<button onclick="myFunction(this)" value="b">
Category B
</button>
</p>
<div id="myDIV">Hello</div>
JSFiddle
No need to overcomplicate things.
Firstly you would like to send the clicked element from the caller (which in this case would be the clicked element as well, the <button> element). You could use JavaScript's thisfor this purpose.
Within your function you can name a parameter between parenthesis, so in my example above: function myFunction() contains a parameter called myEle so it will look like: function myFunction(myEle). Once the function will be triggered, the parameter called myEle will be set to the clicked element (or
JavaScript's this). You can simply access any of its attributes like value by using a dot: myEle.value.
Knowing the above, you could apply it to whatever you require your function to do (refer to my example code above).
i'm back from nowhere.
I have something for school where we need to make a website.
Everyone in my class uses those easy drag 'n drop builders.
I'm ofcourse making it with Notepad++.
So, a 1990 looking page is ofcourse not enough with some fun music.
I have found around 3 to 4 Mario Bros online music to use.
But it only starts the first source link, never the others.
I want to know how to do it, Google doesn't really help.
This is my code:
<audio autoplay="autoplay" controls="controls" title="Radio implented by Rootel">
So my question is, how do I autoplay this list? I didn't give a full list of the music, sorry.
Here you can make it with javascript!
//javascript
var _player = document.getElementById("player"),
_playlist = document.getElementById("playlist"),
_stop = document.getElementById("stop");
// functions
function playlistItemClick(clickedElement) {
var selected = _playlist.querySelector(".selected");
if (selected) {
selected.classList.remove("selected");
}
clickedElement.classList.add("selected");
_player.src = clickedElement.getAttribute("data-ogg");
_player.play();
}
function playNext() {
var selected = _playlist.querySelector("li.selected");
if (selected && selected.nextSibling) {
playlistItemClick(selected.nextSibling);
}
}
// event listeners
_stop.addEventListener("click", function () {
_player.pause();
});
_player.addEventListener("ended", playNext);
_playlist.addEventListener("click", function (e) {
if (e.target && e.target.nodeName === "LI") {
playlistItemClick(e.target);
}
});
.selected {
font-weight: bold;
font-size:20px;
}
<!--html-->
<audio id="player"></audio>
<ul id="playlist"><li data-ogg="http://www.lunerouge.org/sons/sf/LRWeird%201%20by%20Lionel%20Allorge.ogg">Space 1</li><li data-ogg="http://www.lunerouge.org/sons/sf/LRWeird%202%20by%20Lionel%20Allorge.ogg">Space 2</li><li data-ogg="http://www.lunerouge.org/sons/sf/LRWeird%203%20by%20Lionel%20Allorge.ogg">Space Lab</li></ul>
<button id="stop">Stop</button>
hope it helps!!!