I am currently constructing a roulette system programme ( this is more to keep me from betting than to bet! ) and am just doing the basic framework but already hit a problem with the main window '#results' not scrolling when it is filled with the results. The scroll needs to follow the latest line of content so the latest returned from the input in the modal box is always showing at the bottom. I have spent hours on lots of possible solutions to no avail.
Here is the code: ( i apologise for the length of the full script )
<!DOCTYPE html>
<html>
<body>
<div id="results">
</div>
<div id="modal">
<div id="modal-content">
<p>Select a number between 0 and 36:</p>
<div id="numberButtons"></div>
<button id="close-button" onclick="closeModal()">Close</button>
</div>
</div>
</div>
<style>
/* The modal background */
#modal {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
/* The modal content */
#modal-content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #fefefe;
padding: 20px;
width: 18%;
border: 3px solid black;
}
/* The close button */
#close-button {
display: block;
margin: 0 auto;
}
#numberButtons button {
color: white;
width: 50px;
height: 50px;
font-size:30px;
font-weight:600;
}
#modal.inactive{
opacity: 0.2;
}
</style>
<script>
var bankRoll = parseFloat(prompt("Please enter your starting bankroll:"));
if(isNaN(bankRoll)){
bankRoll = parseFloat(prompt("Invalid input. Please enter a valid number for your starting bankroll:"));
}
bankRoll = bankRoll.toFixed(2);
var spinNumber=0;
var backline="";
var isDragging = false;
var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;
const modalContent = document.querySelector("#modal-content");
modalContent.addEventListener("mousedown", dragStart);
modalContent.addEventListener("mouseup", dragEnd);
modalContent.addEventListener("mousemove", drag);
function dragStart(e) {
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
if (e.target === modalContent) {
isDragging = true;
}
}
let inactivityTimeout;
function dragEnd(e) {
initialX = currentX;
initialY = currentY;
isDragging = false;
clearTimeout(inactivityTimeout);
inactivityTimeout = setTimeout(() => {
modal.classList.add("inactive")
}, 15000)
}
function drag(e) {
if (e.buttons === 1) {
e.preventDefault();
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
xOffset = currentX;
yOffset = currentY;
setTranslate(currentX, currentY, modalContent);
clearTimeout(inactivityTimeout);
modal.classList.remove("inactive")
}
}
function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}
function getNumberType(number) {
if (number === 0) {
return "green";
} else if (number % 2 === 0) {
return "even";
} else {
return "odd";
}
}
function roulette(number) {
// Determine the color of the number
var color;
if (number === 0) {
color = "Green";
} else if (number === 1 || number === 3 || number === 5 || number === 7 || number === 9 || number === 12 || number === 14 || number === 16 || number === 18 || number === 19 || number === 21 || number === 23 || number === 25 || number === 27 || number === 30 || number === 32 || number === 34 || number === 36) {
color = "Red";
} else {
color = "Black";
}
// Map the color names to CSS color values
if (color === "Green") {
return "rgb(0, 128, 0)";
} else if (color === "Red") {
return "rgb(255, 0, 0)";
} else {
return "rgb(0, 0, 0)";
}
}
function backgroundline() {
if (spinNumber % 2 === 0) {
backline="#D3D3D3"
} else {
backline="#E5E4E2";
}
}
function spin(number) {
// Determine the color of the number
var color = roulette(number);
spinNumber= spinNumber+1;
bankRoll=bankRoll-10;
backgroundline();
// Display the result
var resultsDiv = document.getElementById("results");
var resultHTML = `${number}`;
resultHTML = `<div style="padding:10px 0; background: ${backline};vertical-align:middle;margin-bottom:- 20px;">
<div style="padding:5px; display: inline-block; background: yellow; color:black;vertical-align:middle; width:30px; text-align:right;">${spinNumber}</div>
<div style="margin: 0 10px; display:inline-block; width: 70px; text-align:center;vertical-align:middle">£ ${bankRoll}</div>
<div style="color: white; padding: 5px; display: inline-block; width:30px; padding-top:15px;vertical-align:middle; font-size: 25px; font-weight:600; height:30px; text-align:center; background-color: ${color}; ">${resultHTML}</div>
</div>
<br style="height:0px;"/>`;
resultsDiv.innerHTML += resultHTML;
}
// Set up the buttons
for (let i = 0; i <= 36; i++) {
let button = document.createElement("button");
button.innerHTML = i;
button.style.backgroundColor = roulette(i);
button.addEventListener("click", function() {
spin(i);
});
document.getElementById("numberButtons").appendChild(button);
}
function closeModal() {
// Get the modal element
var modal = document.getElementById("modal");
// Remove the modal element from the DOM
modal.remove();
}
</script>
</body>
</html>
I have tried lots of solutions on Stack Overflow and across the Internet further field that I thought might work but it just doesn't seem to want to do it.
after adding element in Results div you have to call this function.
add this function
window.scrollTo(0, document.body.scrollHeight)
after this line
resultsDiv.innerHTML += resultHTML;
My issue is with function onBall3Click1 (The code is at the bottom).
The ball, on click, is supposed to function as a lightbulb: when it's ON -> YELLOW color within ball, when it's OFF -> GRAY.
I have been covering the logic behind it for way too long for something so simple, and I just can't find the issue..
When I click on it, it changes the text to 'ON', but the colour remains gray..when it should be yellow.
Thanks in advance!
<html>
<head>
<style>
body {
background-color: black;
text-align: center;
}
h1 {
color: white;
}
div {
width: 100px;
height: 100px;
margin: auto;
margin-bottom: 10px;
border-radius: 50%;
transition: 0.3s;
line-height: 50px;
color: black
}
.ball1 {
background-color: yellow;
border: 6px solid gray;
color: black
}
.ball2 {
background-color: orange;
}
.ball3 {
background-color: gray;
}
.ball4 {
background-color: brown;
}
</style>
</head>
<body>
<h1>The Ball</h1>
<div class="ball1" onclick="onBall1Click()">
GROW 250 ORANGE
</div>
<div class="ball2" onclick="onBall2Click()">
GROW+50 SHRINK-50
</div>
<div class="ball3" onclick="onBall3Click1()">
OFF
</div>
<div class="ball4" onclick="onBall4Click()">
PROMPT
</div>
<script>
var ball1Size = 100;
var ball1SizeStep = 50;
function onBall1Click() {
var ball1 = document.querySelector('.ball1');
ball1Size = ball1Size + 50;
if (ball1Size > 400) {
ball1Size = 100;
}
ball1.innerText = ball1Size;
ball1.style.width = ball1Size;
ball1.style.height = ball1Size;
ball1.innerText = ball1Size;
if (ball1Size == 250) {
ball1.style.color = 'Orange';
} else {
ball1.style.color = 'black'
}
}
var ball2Size = 100;
var ball2SizeStep = 50;
function onBall2Click() {
var ball2 = document.querySelector('.ball2');
ball2Size += ball2SizeStep;
if (ball2Size === 400) {
ball2SizeStep = -50;
} else if (ball2Size === 100) {
ball2SizeStep = 50;
}
if (ball2Size > 100) {
ball2.style.backgroundColor = 'red';
} else if (ball2Size === 100) {
ball2.style.backgroundColor = 'Orange';
}
ball2.innerText = ball2Size;
ball2.style.width = ball2Size;
ball2.style.height = ball2Size;
}
function onBall3Click1() {
var ball3 = document.querySelector('.ball3');
console.log("HII0");
if (ball3.innerText == 'OFF') {
ball3.innerText = 'ON';
} else if (ball3.innerText == 'ON') {
ball3.innerText = 'OFF'
}
console.log(ball3.style.backgroundColor)
if (ball3.style.backgroundColor === 'gray') {
console.log("HII1");
ball3.style.backgroundColor = 'Yellow';
} else if (ball3.style.backgroundColor == 'Yellow') {
console.log("HII1");
ball3.style.backgroundColor = 'gray'
}
}
var ball4Size = 100;
function onBall4Click() {
var ball4 = document.querySelector('.ball4');
var user_input = prompt('Write ball size number 4 but do not exaggerate : ')
let user_input_int = parseInt(user_input)
console.log(user_input_int);
if (user_input_int < 1000) {
ball4.style.width = user_input_int;
ball4.style.height = user_input_int;
} else {
alert("Too big!");
}
}
</script>
</body>
</html>
You could merge the two if/elseif chains in the onBall3Click1 function like so:
function onBall3Click1() {
var ball3 = document.querySelector('.ball3');
console.log("HII0");
if (ball3.innerText == 'OFF') {
ball3.innerText = 'ON';
ball3.style.backgroundColor = 'yellow';
} else if (ball3.innerText == 'ON') {
ball3.innerText = 'OFF'
ball3.style.backgroundColor = 'gray'
}
console.log(ball3.style.backgroundColor)
}
Goodday Coders, Im struggling with this puzzle script that I want to use for a website's "meet the team" page.
I would like the puzzle to scramble as the page loads instead of having to press the shuffle button.
If people press the "Wie ben ik" button, the puzzle should solve, like it is doing right now.
Somehow I cant get it to work, it would be great if someone could help me out.
Here's the codepen link:
https://codepen.io/verberne/pen/WNxyprV
// Begin game once DOM loaded
document.addEventListener("DOMContentLoaded", game);
// document.addEventListener("DOMContentLoaded", shuffleTimeouts);
function game() {
// Data structure to hold positions of tiles
var parentX = document.querySelector(".sliding-puzzle").clientHeight;
var baseDistance = 38;
var tileMap = {
1: {
tileNumber: 1,
position: 1,
top: 0,
left: 0
},
2: {
tileNumber: 2,
position: 2,
top: 0,
left: baseDistance * 1
},
3: {
tileNumber: 3,
position: 3,
top: 0,
left: baseDistance * 2
},
4: {
tileNumber: 4,
position: 4,
top: baseDistance,
left: 0
},
5: {
tileNumber: 5,
position: 5,
top: baseDistance,
left: baseDistance
},
6: {
tileNumber: 6,
position: 6,
top: baseDistance,
left: baseDistance * 2
},
7: {
tileNumber: 7,
position: 7,
top: baseDistance * 2,
left: 0
},
8: {
tileNumber: 8,
position: 8,
top: baseDistance * 2,
left: baseDistance
},
empty: {
position: 9,
top: baseDistance * 2,
left: baseDistance * 2
}
}
// Array of tileNumbers in order of last moved
var history = [];
// Movement map
function movementMap(position) {
if (position == 9) return [6, 8];
if (position == 8) return [5, 7, 9];
if (position == 7) return [4, 8];
if (position == 6) return [3, 5, 9];
if (position == 5) return [2, 4, 6, 8];
if (position == 4) return [1, 5, 7];
if (position == 3) return [2, 6];
if (position == 2) return [1, 3, 5];
if (position == 1) return [2, 4];
}
// Board setup according to the tileMap
document.querySelector('#shuffle').addEventListener('click', shuffle, true);
document.querySelector('#solve').addEventListener('click', solve, true);
var tiles = document.querySelectorAll('.tile');
var delay = -50;
for (var i = 0; i < tiles.length; i++) {
tiles[i].addEventListener('click', tileClicked, true);
var tileId = tiles[i].innerHTML;
delay += 50;
setTimeout(setup, delay, tiles[i]);
}
function setup(tile) {
var tileId = tile.innerHTML;
// tile.style.left = tileMap[tileId].left + '%';
// tile.style.top = tileMap[tileId].top + '%';
var xMovement = parentX * (tileMap[tileId].left / 100);
var yMovement = parentX * (tileMap[tileId].top / 100);
var translateString = "translateX(" + xMovement + "px) " + "translateY(" + yMovement + "px)"
tile.style.webkitTransform = translateString;
recolorTile(tile, tileId);
}
function tileClicked(event) {
var tileNumber = event.target.innerHTML;
moveTile(event.target);
if (checkSolution()) {
console.log("You win!");
}
}
// Moves tile to empty spot
// Returns error message if tile cannot be moved
function moveTile(tile, recordHistory = true) {
// Check if Tile can be moved
// (must be touching empty tile)
// (must be directly perpendicular to empty tile)
var tileNumber = tile.innerHTML;
if (!tileMovable(tileNumber)) {
console.log("Tile " + tileNumber + " can't be moved.");
return;
}
// Push to history
if (recordHistory == true) {
if (history.length >= 3) {
if (history[history.length - 1] != history[history.length - 3]) history.push(tileNumber);
} else {
history.push(tileNumber);
}
}
// Swap tile with empty tile
var emptyTop = tileMap.empty.top;
var emptyLeft = tileMap.empty.left;
var emptyPosition = tileMap.empty.position;
tileMap.empty.top = tileMap[tileNumber].top;
tileMap.empty.left = tileMap[tileNumber].left;
tileMap.empty.position = tileMap[tileNumber].position;
// tile.style.top = emptyTop + '%';
// tile.style.left = emptyLeft + '%';
var xMovement = parentX * (emptyLeft / 100);
var yMovement = parentX * (emptyTop / 100);
var translateString = "translateX(" + xMovement + "px) " + "translateY(" + yMovement + "px)"
tile.style.webkitTransform = translateString;
tileMap[tileNumber].top = emptyTop;
tileMap[tileNumber].left = emptyLeft;
tileMap[tileNumber].position = emptyPosition;
recolorTile(tile, tileNumber);
}
// Determines whether a given tile can be moved
function tileMovable(tileNumber) {
var selectedTile = tileMap[tileNumber];
var emptyTile = tileMap.empty;
var movableTiles = movementMap(emptyTile.position);
if (movableTiles.includes(selectedTile.position)) {
return true;
} else {
return false;
}
}
// Returns true/false based on if the puzzle has been solved
function checkSolution() {
if (tileMap.empty.position !== 9) return false;
for (var key in tileMap) {
if ((key != 1) && (key != "empty")) {
if (tileMap[key].position < tileMap[key - 1].position) return false;
}
}
// Clear history if solved
history = [];
return true;
}
// Check if tile is in correct place!
function recolorTile(tile, tileId) {
if (tileId == tileMap[tileId].position) {
tile.classList.remove("error");
} else {
tile.classList.add("error");
}
}
// Shuffles the current tiles
shuffleTimeouts = [];
function shuffle() {
clearTimers(solveTimeouts);
var boardTiles = document.querySelectorAll('.tile');
var shuffleDelay = 200;
shuffleLoop();
var shuffleCounter = 0;
while (shuffleCounter < 20) {
shuffleDelay += 200;
shuffleTimeouts.push(setTimeout(shuffleLoop, shuffleDelay));
shuffleCounter++;
}
}
var lastShuffled;
function shuffleLoop() {
var emptyPosition = tileMap.empty.position;
var shuffleTiles = movementMap(emptyPosition);
var tilePosition = shuffleTiles[Math.floor(Math.floor(Math.random() * shuffleTiles.length))];
var locatedTile;
for (var i = 1; i <= 8; i++) {
if (tileMap[i].position == tilePosition) {
var locatedTileNumber = tileMap[i].tileNumber;
locatedTile = tiles[locatedTileNumber - 1];
}
}
if (lastShuffled != locatedTileNumber) {
moveTile(locatedTile);
lastShuffled = locatedTileNumber;
} else {
shuffleLoop();
}
}
function clearTimers(timeoutArray) {
for (var i = 0; i < timeoutArray.length; i++) {
clearTimeout(timeoutArray[i])
}
}
// Temporary function for solving puzzle.
// To be reimplemented with a more sophisticated algorithm
solveTimeouts = []
function solve() {
clearTimers(shuffleTimeouts);
repeater = history.length;
for (var i = 0; i < repeater; i++) {
console.log("started");
solveTimeouts.push(setTimeout(moveTile, i * 100, tiles[history.pop() - 1], false));
}
}
}
body {
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 24px;
background-color: #ECF0F1;
-webkit-tap-highlight-color: transparent;
khtml-tap-highlight-color: transparent;
}
.sliding-puzzle-figure {
margin: auto;
height: 360px;
width: 360px;
padding-bottom: 50vh;
padding-top: 10vh;
}
.sliding-puzzle-figure a {
cursor: pointer;
}
.sliding-puzzle-figure a#shuffle {
color: #E74C3C;
}
.sliding-puzzle-figure a#solve {
color: #3498DB;
}
.sliding-puzzle-figure .sliding-puzzle {
list-style-type: none;
position: relative;
margin-left: 0;
margin-right: 00;
width: 360px;
height: 360px;
box-sizing: border-box;
background-clip: border-box;
/* Firefox 4, Safari 5, Opera 10, IE 9 */
border: 18px solid #2C3E50;
border-radius: 10px;
background-color: #2C3E50;
}
.sliding-puzzle-figure .sliding-puzzle .tile {
position: absolute;
background: url(https://simonwiddowson.typepad.com/files/countryside360x360.jpg);
border-radius: 2px;
cursor: pointer;
width: 120px;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
font-size: 0px;
left: 0%;
top: 0%;
transition: all 0.5s linear;
transition-timing-function: ease;
box-sizing: border-box;
}
.sliding-puzzle-figure .sliding-puzzle .tile.error {
background-color: #F0867D;
}
#tile1 {
background-position: left top;
}
#tile2 {
background-position: center top;
}
#tile3 {
background-position: right top;
}
#tile4 {
background-position: left center;
}
#tile5 {
background-position: center center;
}
#tile6 {
background-position: right center;
}
#tile7 {
background-position: left bottom;
}
#tile8 {
background-position: center bottom;
}
#media only screen and (max-width: 650px) {
.sliding-puzzle-figure {
width: 90vw;
height: 90vw;
max-height: 100vh;
}
.sliding-puzzle-figure .sliding-puzzle {
border-width: 10px;
border-radius: 14px;
}
.sliding-puzzle-figure .tile {
font-size: 1em;
}
}
/*# sourceMappingURL=style.css.map */
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700" rel="stylesheet">
<figure class="sliding-puzzle-figure">
<div class="sliding-puzzle">
<div class="tile" id="tile1">1</div>
<div class="tile" id="tile2">2</div>
<div class="tile" id="tile3">3</div>
<div class="tile" id="tile4">4</div>
<div class="tile" id="tile5">5</div>
<div class="tile" id="tile6">6</div>
<div class="tile" id="tile7">7</div>
<div class="tile" id="tile8">8</div>
</div>
<figcaption><br><br> Barry Paling | <a id="shuffle">Shuffle</a> | <a id="solve">Wie ben ik</a>
</figcaption>
</figure>
You call game on load, remove the shuffle click and just call shuffle() at the end of game() :
window.addEventListener("load",game);
function game() {
...
shuffle();
}
window.addEventListener("load",game);
function game() {
// Data structure to hold positions of tiles
var parentX = document.querySelector(".sliding-puzzle").clientHeight;
var baseDistance = 38;
var tileMap = {
1: {
tileNumber: 1,
position: 1,
top: 0,
left: 0
},
2: {
tileNumber: 2,
position: 2,
top: 0,
left: baseDistance * 1
},
3: {
tileNumber: 3,
position: 3,
top: 0,
left: baseDistance * 2
},
4: {
tileNumber: 4,
position: 4,
top: baseDistance,
left: 0
},
5: {
tileNumber: 5,
position: 5,
top: baseDistance,
left: baseDistance
},
6: {
tileNumber: 6,
position: 6,
top: baseDistance,
left: baseDistance * 2
},
7: {
tileNumber: 7,
position: 7,
top: baseDistance * 2,
left: 0
},
8: {
tileNumber: 8,
position: 8,
top: baseDistance * 2,
left: baseDistance
},
empty: {
position: 9,
top: baseDistance * 2,
left: baseDistance * 2
}
}
// Array of tileNumbers in order of last moved
var history = [];
// Movement map
function movementMap(position) {
if (position == 9) return [6, 8];
if (position == 8) return [5, 7, 9];
if (position == 7) return [4, 8];
if (position == 6) return [3, 5, 9];
if (position == 5) return [2, 4, 6, 8];
if (position == 4) return [1, 5, 7];
if (position == 3) return [2, 6];
if (position == 2) return [1, 3, 5];
if (position == 1) return [2, 4];
}
// Board setup according to the tileMap
document.querySelector('#solve').addEventListener('click', solve, true);
var tiles = document.querySelectorAll('.tile');
var delay = -50;
for (var i = 0; i < tiles.length; i++) {
tiles[i].addEventListener('click', tileClicked, true);
var tileId = tiles[i].innerHTML;
delay += 50;
setTimeout(setup, delay, tiles[i]);
}
function setup(tile) {
var tileId = tile.innerHTML;
// tile.style.left = tileMap[tileId].left + '%';
// tile.style.top = tileMap[tileId].top + '%';
var xMovement = parentX * (tileMap[tileId].left / 100);
var yMovement = parentX * (tileMap[tileId].top / 100);
var translateString = "translateX(" + xMovement + "px) " + "translateY(" + yMovement + "px)"
tile.style.webkitTransform = translateString;
recolorTile(tile, tileId);
}
function tileClicked(event) {
var tileNumber = event.target.innerHTML;
moveTile(event.target);
if (checkSolution()) {
console.log("You win!");
}
}
// Moves tile to empty spot
// Returns error message if tile cannot be moved
function moveTile(tile, recordHistory = true) {
// Check if Tile can be moved
// (must be touching empty tile)
// (must be directly perpendicular to empty tile)
var tileNumber = tile.innerHTML;
if (!tileMovable(tileNumber)) {
console.log("Tile " + tileNumber + " can't be moved.");
return;
}
// Push to history
if (recordHistory == true) {
if (history.length >= 3) {
if (history[history.length - 1] != history[history.length - 3]) history.push(tileNumber);
} else {
history.push(tileNumber);
}
}
// Swap tile with empty tile
var emptyTop = tileMap.empty.top;
var emptyLeft = tileMap.empty.left;
var emptyPosition = tileMap.empty.position;
tileMap.empty.top = tileMap[tileNumber].top;
tileMap.empty.left = tileMap[tileNumber].left;
tileMap.empty.position = tileMap[tileNumber].position;
// tile.style.top = emptyTop + '%';
// tile.style.left = emptyLeft + '%';
var xMovement = parentX * (emptyLeft / 100);
var yMovement = parentX * (emptyTop / 100);
var translateString = "translateX(" + xMovement + "px) " + "translateY(" + yMovement + "px)"
tile.style.webkitTransform = translateString;
tileMap[tileNumber].top = emptyTop;
tileMap[tileNumber].left = emptyLeft;
tileMap[tileNumber].position = emptyPosition;
recolorTile(tile, tileNumber);
}
// Determines whether a given tile can be moved
function tileMovable(tileNumber) {
var selectedTile = tileMap[tileNumber];
var emptyTile = tileMap.empty;
var movableTiles = movementMap(emptyTile.position);
if (movableTiles.includes(selectedTile.position)) {
return true;
} else {
return false;
}
}
// Returns true/false based on if the puzzle has been solved
function checkSolution() {
if (tileMap.empty.position !== 9) return false;
for (var key in tileMap) {
if ((key != 1) && (key != "empty")) {
if (tileMap[key].position < tileMap[key - 1].position) return false;
}
}
// Clear history if solved
history = [];
return true;
}
// Check if tile is in correct place!
function recolorTile(tile, tileId) {
if (tileId == tileMap[tileId].position) {
tile.classList.remove("error");
} else {
tile.classList.add("error");
}
}
// Shuffles the current tiles
shuffleTimeouts = [];
function shuffle() {
clearTimers(solveTimeouts);
var boardTiles = document.querySelectorAll('.tile');
var shuffleDelay = 200;
shuffleLoop();
var shuffleCounter = 0;
while (shuffleCounter < 20) {
shuffleDelay += 200;
shuffleTimeouts.push(setTimeout(shuffleLoop, shuffleDelay));
shuffleCounter++;
}
}
var lastShuffled;
function shuffleLoop() {
var emptyPosition = tileMap.empty.position;
var shuffleTiles = movementMap(emptyPosition);
var tilePosition = shuffleTiles[Math.floor(Math.floor(Math.random() * shuffleTiles.length))];
var locatedTile;
for (var i = 1; i <= 8; i++) {
if (tileMap[i].position == tilePosition) {
var locatedTileNumber = tileMap[i].tileNumber;
locatedTile = tiles[locatedTileNumber - 1];
}
}
if (lastShuffled != locatedTileNumber) {
moveTile(locatedTile);
lastShuffled = locatedTileNumber;
} else {
shuffleLoop();
}
}
function clearTimers(timeoutArray) {
for (var i = 0; i < timeoutArray.length; i++) {
clearTimeout(timeoutArray[i])
}
}
// Temporary function for solving puzzle.
// To be reimplemented with a more sophisticated algorithm
solveTimeouts = []
function solve() {
clearTimers(shuffleTimeouts);
repeater = history.length;
for (var i = 0; i < repeater; i++) {
solveTimeouts.push(setTimeout(moveTile, i * 100, tiles[history.pop() - 1], false));
}
}
shuffle()
}
body {
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 24px;
background-color: #ECF0F1;
-webkit-tap-highlight-color: transparent;
khtml-tap-highlight-color: transparent;
}
.sliding-puzzle-figure {
margin: auto;
height: 360px;
width: 360px;
padding-bottom: 50vh;
padding-top: 10vh;
}
.sliding-puzzle-figure a {
cursor: pointer;
}
.sliding-puzzle-figure a#shuffle {
color: #E74C3C;
}
.sliding-puzzle-figure a#solve {
color: #3498DB;
}
.sliding-puzzle-figure .sliding-puzzle {
list-style-type: none;
position: relative;
margin-left: 0;
margin-right: 00;
width: 360px;
height: 360px;
box-sizing: border-box;
background-clip: border-box;
/* Firefox 4, Safari 5, Opera 10, IE 9 */
border: 18px solid #2C3E50;
border-radius: 10px;
background-color: #2C3E50;
}
.sliding-puzzle-figure .sliding-puzzle .tile {
position: absolute;
background: url(https://simonwiddowson.typepad.com/files/countryside360x360.jpg);
border-radius: 2px;
cursor: pointer;
width: 120px;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
font-size: 0px;
left: 0%;
top: 0%;
transition: all 0.5s linear;
transition-timing-function: ease;
box-sizing: border-box;
}
.sliding-puzzle-figure .sliding-puzzle .tile.error {
background-color: #F0867D;
}
#tile1 {
background-position: left top;
}
#tile2 {
background-position: center top;
}
#tile3 {
background-position: right top;
}
#tile4 {
background-position: left center;
}
#tile5 {
background-position: center center;
}
#tile6 {
background-position: right center;
}
#tile7 {
background-position: left bottom;
}
#tile8 {
background-position: center bottom;
}
#media only screen and (max-width: 650px) {
.sliding-puzzle-figure {
width: 90vw;
height: 90vw;
max-height: 100vh;
}
.sliding-puzzle-figure .sliding-puzzle {
border-width: 10px;
border-radius: 14px;
}
.sliding-puzzle-figure .tile {
font-size: 1em;
}
}
/*# sourceMappingURL=style.css.map */
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700" rel="stylesheet">
<figure class="sliding-puzzle-figure">
<div class="sliding-puzzle">
<div class="tile" id="tile1">1</div>
<div class="tile" id="tile2">2</div>
<div class="tile" id="tile3">3</div>
<div class="tile" id="tile4">4</div>
<div class="tile" id="tile5">5</div>
<div class="tile" id="tile6">6</div>
<div class="tile" id="tile7">7</div>
<div class="tile" id="tile8">8</div>
</div>
<figcaption><br><br> Barry Paling | <a id="solve">Wie ben ik</a>
</figcaption>
</figure>
I have a yellow box in a grid. When click button 'UP' the yellow box is going one box UP. How can I stop the yellow box when it arrives at the edge? I do not want it to go out of the grid.
let moveCounter = 0;
var grid = document.getElementById("grid-box");
for (var i = 1; i <= 100; i++) {
var square = document.createElement("div");
square.className = 'square';
square.id = 'square' + i;
grid.appendChild(square);
}
var playerTwo = [];
while (playerTwo.length < 1) {
var randomIndex = parseInt(99 * Math.random());
if (playerTwo.indexOf(randomIndex) === -1) {
playerTwo.push(randomIndex);
var drawPtwo = document.getElementById('square' + randomIndex);
$(drawPtwo).addClass("p-1")
}
};
$('#button_up').on('click', function() {
moveCounter += 1;
$pOne = $('.p-1')
var id = $pOne.attr('id')
var idNumber = +id.slice(6);
var idMove = idNumber - 10
var idUpMove = 'square' + idMove;
$pOne.removeClass('p-1');
$('#' + idUpMove).addClass('p-1');
});
#grid-box {
width: 400px;
height: 400px;
margin: 0 auto;
font-size: 0;
position: relative;
}
#grid-box>div.square {
font-size: 1rem;
vertical-align: top;
display: inline-block;
width: 10%;
height: 10%;
box-sizing: border-box;
border: 1px solid #000;
}
.p-1{
background-color: yellow;
}
<div id="grid-box"></div>
<div class="move">
<button id="button_up">UP</button>
<br>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
I am new to Javascript / jQuery. Any help will be much appreciated ! Thank you
let moveCounter = 0;
var grid = document.getElementById("grid-box");
for (var i = 1; i <= 100; i++) {
var square = document.createElement("div");
square.className = 'square';
square.id = 'square' + i;
grid.appendChild(square);
}
var playerTwo = [];
while (playerTwo.length < 1) {
var randomIndex = parseInt(99 * Math.random());
if (playerTwo.indexOf(randomIndex) === -1) {
playerTwo.push(randomIndex);
var drawPtwo = document.getElementById('square' + randomIndex);
$(drawPtwo).addClass("p-1")
}
};
$('#button_up').on('click', function() {
moveCounter += 1;
$pOne = $('.p-1')
var id = $pOne.attr('id')
var idNumber = +id.slice(6);
var idMove = idNumber - 10;
if(idMove < 0){idMove +=10;}
var idUpMove = 'square' + idMove;
$pOne.removeClass('p-1');
$('#' + idUpMove).addClass('p-1');
});
#grid-box {
width: 400px;
height: 400px;
margin: 0 auto;
font-size: 0;
position: relative;
}
#grid-box>div.square {
font-size: 1rem;
vertical-align: top;
display: inline-block;
width: 10%;
height: 10%;
box-sizing: border-box;
border: 1px solid #000;
}
.p-1{
background-color: yellow;
}
<div id="grid-box"></div>
<div class="move">
<button id="button_up">UP</button>
<br>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
Here I have added the condition which restrict box to out of the grid
if(idMove < 0){idMove +=10;}
if movable position is in the minus then it again initialise it existing position.
You can add a check to stop it from moving out of the squares
var idMove = idNumber - 10
if(idMove > 0){
// do all the moving stuffs
}
$('#button_up').on('click', function() {
moveCounter += 1;
$pOne = $('.p-1')
var id = $pOne.attr('id')
var idNumber = +id.slice(6);
var idMove = idNumber - 10;
if(idMove > 0) {
var idUpMove = 'square' + idMove;
$pOne.removeClass('p-1');
$('#' + idUpMove).addClass('p-1');
}
});
You can use an if statement to check idMove > 0) If it is, then you can move your square, if it isn't then you shouldn't move your square. it will be undefined, and so you can run your code only when pOne's id is not undefined.
See example below:
let moveCounter = 0;
var grid = document.getElementById("grid-box");
for (var i = 1; i <= 100; i++) {
var square = document.createElement("div");
square.className = 'square';
square.id = 'square' + i;
grid.appendChild(square);
}
var playerTwo = [];
while (playerTwo.length < 1) {
var randomIndex = parseInt(99 * Math.random());
if (playerTwo.indexOf(randomIndex) === -1) {
playerTwo.push(randomIndex);
var drawPtwo = document.getElementById('square' + randomIndex);
$(drawPtwo).addClass("p-1")
}
};
$('#button_up').on('click', function() {
moveCounter += 1;
$pOne = $('.p-1')
var id = $pOne.attr('id')
var idNumber = +id.slice(6);
var idMove = idNumber - 10
if (idMove > 0) {
var idUpMove = 'square' + idMove;
$pOne.removeClass('p-1');
$('#' + idUpMove).addClass('p-1');
}
});
#grid-box {
width: 400px;
height: 400px;
margin: 0 auto;
font-size: 0;
position: relative;
}
#grid-box>div.square {
font-size: 1rem;
vertical-align: top;
display: inline-block;
width: 10%;
height: 10%;
box-sizing: border-box;
border: 1px solid #000;
}
.p-1 {
background-color: yellow;
}
<div id="grid-box">
</div>
<div class="move">
<button id="button_up">UP</button><br>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
I've created a snake game, and when the snake hit the wall or itself, it still wont stop moving. I figured out if I used the clearTimeout(), it would help. but it didn't.
Is there a way to stop the loop? or it is another issue?
jQuery(document).ready(function($) {
init();
});
var move;
function init() {
board.initBoard();
drawSnake();
food.createFood();
}
function play() {
$('.newGame').css('visibility', 'hidden');
$('.playgame').css('visibility', 'hidden');
moveSnake();
getSnakeDir();
}
function gameover() {
clearTimeout(move);
$('.newGame').css('visibility', 'visible');
}
function playGame() {
$('#gameboard').empty();
$('.newGame').hide();
init();
play();
}
var board = {
DIM: 20,
initBoard: function() {
for (var i = 0; i < board.DIM; i++) {
var row = $('<div class="row-' + i + '"></div>');
for (var j = 0; j < board.DIM; j++) {
var col = ('<div class="col-' + j + '-' + i + '"></div>');
$(row).append(col);
}
$("#gameboard").append(row);
}
}
}
var snake = {
position: ['10-10', '10-11', '10-12'],
direction: 'r',
speed: 200,
};
function drawSnake() {
$('.col-10-10').addClass('snake');
$('.col-11-10').addClass('snake');
}
function getSnakeDir() {
$(document).keydown(function(event) {
//event.preventDefault();
if (event.which == 38) {
snake.direction = 'u';
} else if (event.which == 39) {
snake.direction = 'r';
} else if (event.which == 40) {
snake.direction = 'd';
} else if (event.which == 37) {
snake.direction = 'l';
}
});
}
function moveSnake() {
var tail = snake.position.pop();
$('.col-' + tail).removeClass('snake');
var coords = snake.position[0].split('-');
var x = parseInt(coords[0]);
var y = parseInt(coords[1]);
if (snake.direction == 'r') {
x = x + 1;
} else if (snake.direction == 'd') {
y = y + 1;
} else if (snake.direction == 'l') {
x = x - 1;
} else if (snake.direction == 'u') {
y = y - 1;
}
var currentcoords = x + '-' + y;
snake.position.unshift(currentcoords);
$('.col-' + currentcoords).addClass('snake');
//when snake eats food
if (currentcoords == food.coords) {
console.log('true');
$('.col-' + food.coords).removeClass('food');
snake.position.push(tail);
food.createFood();
}
//game over
if (x < 0 || y < 0 || x > board.DIM || y > board.DIM) {
gameover();
}
//if snake touch itself
if (hitItself(snake.position) == true) {
gameover();
}
move=setTimeout(moveSnake, 200);
}
var food = {
coords: "",
createFood: function() {
var x = Math.floor(Math.random() * (board.DIM-1)) + 1;
var y = Math.floor(Math.random() * (board.DIM-1)) + 1;
var fruitCoords = x + '-' + y;
$('.col-' + fruitCoords).addClass('food');
food.coords = fruitCoords;
},
}
function hitItself(array) {
var valuesSoFar = Object.create(null);
for (var i = 0; i < array.length; ++i) {
var value = array[i];
if (value in valuesSoFar) {
return true;
}
valuesSoFar[value] = true;
}
return false;
}
.buttonnewgame {
position: relative;
}
.newGame {
position: absolute;
top: 45%;
left: 25%;
padding: 15px;
font-size: 1em;
font-family: arial;
visibility: hidden;
}
.gameContainer{
width: 100%;
}
#gameboard {
background-color:#eee;
padding:3px;
}
.playgame {
position: absolute;
top: 45%;
left: 20%;
padding: 15px;
font-size: 1em;
font-family: arial;
}
/* styling the board */
div[class^='row'] {
height: 15px;
text-align: center;
}
div[class*='col']{
display: inline-block;
border: 1px solid grey;
width: 15px;
height: 15px;
}
/*display the snake*/
.snake {
background-color: blue;
z-index: 99;
}
.food {
background: red;
z-index: 99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="game">
<div class="buttonnewgame">
<input type="button" name="new game" value="new game" class="newGame" onclick="playGame()" />
<button class="playgame" onclick="play()">Play Game</button>
<div class="gameContainer">
<div id="gameboard">
<!-- snake game in here -->
</div>
</div>
</div>
</div>
There were a few problems, but here is the 'working version' (there are more bugs).
1) I renamed drawSnake to createSnake. You weren't fully reinitializing the snake when you called init(). The snakes position was not being reset in the previous drawSnake method, so it would seem like the game was not playable.
After that there were 2 more bugs.
2) You have to return after you call gameOver or the game never really ends does it? Once you clear the timeout in gameover, you immediately set another Timeout for on the last line of moveSnake() because you didn't return once the game was over. That lead to weird results that made it seem like the game was unresponsive.
3) You were using a combination of visibility none or visible and $.hide(). $.hide() uses display: none, so when you tried to show it again with the visibility style change, its still display: none so the new game button would stop appearing.
My advice to any game coder is to learn how to separate the code that handles how the game works (logic of the game, how the clock ticks, initialization of game state, etc) , and how it is displayed (the html and css). Modeling the game logic after a cleanly written system is easy to read and debug. The code becomes harder to understand and modify when the display code is mixed in with game logic. In theory, our game should work perfectly without any kind of rendering. Then we could write a renderer that produces an HTML canvas, html DOM, text in the command line, or OpenGL.
Heres an old project I never finished that should illustrate a separation between model and view.
http://tando.us/ganix/ganix.htm
jQuery(document).ready(function($) {
init();
});
var move;
function init() {
board.initBoard();
createSnake();
food.createFood();
}
function play() {
$('.newGame').hide();
$('.playgame').hide();
moveSnake();
getSnakeDir();
}
function gameover() {
clearTimeout(move);
$('.newGame').show();
}
function playGame() {
$('#gameboard').empty();
$('.newGame').hide();
init();
play();
}
var board = {
DIM: 20,
initBoard: function() {
for (var i = 0; i < board.DIM; i++) {
var row = $('<div class="row-' + i + '"></div>');
for (var j = 0; j < board.DIM; j++) {
var col = ('<div class="col-' + j + '-' + i + '"></div>');
$(row).append(col);
}
$("#gameboard").append(row);
}
}
}
var snake = {
position: ['10-10', '10-11', '10-12'],
direction: 'r',
speed: 200,
};
function createSnake() {
$('.col-10-10').addClass('snake');
$('.col-11-10').addClass('snake');
snake.position = ['10-10', '10-11', '10-12'];
}
function getSnakeDir() {
$(document).keydown(function(event) {
//event.preventDefault();
if (event.which == 38) {
snake.direction = 'u';
} else if (event.which == 39) {
snake.direction = 'r';
} else if (event.which == 40) {
snake.direction = 'd';
} else if (event.which == 37) {
snake.direction = 'l';
}
});
}
function moveSnake() {
var tail = snake.position.pop();
$('.col-' + tail).removeClass('snake');
var coords = snake.position[0].split('-');
var x = parseInt(coords[0]);
var y = parseInt(coords[1]);
if (snake.direction == 'r') {
x = x + 1;
} else if (snake.direction == 'd') {
y = y + 1;
} else if (snake.direction == 'l') {
x = x - 1;
} else if (snake.direction == 'u') {
y = y - 1;
}
var currentcoords = x + '-' + y;
snake.position.unshift(currentcoords);
$('.col-' + currentcoords).addClass('snake');
//when snake eats food
if (currentcoords == food.coords) {
console.log('true');
$('.col-' + food.coords).removeClass('food');
snake.position.push(tail);
food.createFood();
}
//game over
if (x < 0 || y < 0 || x > board.DIM || y > board.DIM) {
gameover();
return;
}
//if snake touch itself
if (hitItself(snake.position) == true) {
gameover();
return;
}
move=setTimeout(moveSnake, 200);
}
var food = {
coords: "",
createFood: function() {
var x = Math.floor(Math.random() * (board.DIM-1)) + 1;
var y = Math.floor(Math.random() * (board.DIM-1)) + 1;
var fruitCoords = x + '-' + y;
$('.col-' + fruitCoords).addClass('food');
food.coords = fruitCoords;
},
}
function hitItself(array) {
var valuesSoFar = Object.create(null);
for (var i = 0; i < array.length; ++i) {
var value = array[i];
if (value in valuesSoFar) {
return true;
}
valuesSoFar[value] = true;
}
return false;
}
.buttonnewgame {
position: relative;
}
.newGame {
position: absolute;
top: 45%;
left: 25%;
padding: 15px;
font-size: 1em;
font-family: arial;
}
.gameContainer{
width: 100%;
}
#gameboard {
background-color:#eee;
padding:3px;
}
.playgame {
position: absolute;
top: 45%;
left: 20%;
padding: 15px;
font-size: 1em;
font-family: arial;
}
/* styling the board */
div[class^='row'] {
height: 15px;
text-align: center;
}
div[class*='col']{
display: inline-block;
border: 1px solid grey;
width: 15px;
height: 15px;
}
/*display the snake*/
.snake {
background-color: blue;
z-index: 99;
}
.food {
background: red;
z-index: 99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="game">
<div class="buttonnewgame">
<input type="button" name="new game" value="new game" class="newGame" style="display:none;" onclick="playGame()" />
<button class="playgame" onclick="play()">Play Game</button>
<div class="gameContainer">
<div id="gameboard">
<!-- snake game in here -->
</div>
</div>
</div>
You could try not to initiate a new setTimeout call at the and of the moveSnake function, but instead using.
function play() {
$('.newGame').css('visibility', 'hidden');
$('.playgame').css('visibility', 'hidden');
move = setInterval(moveSnake, 200);
getSnakeDir();
}
and remove the
move = setTimeout(moveSnake, 200)
from the moveSnake function and do
function gameover() {
clearInterval(move);
$('.newGame').css('visibility', 'visible');
}