Long polling timer - javascript

I am new to long polling and don't quite grasp it's method. I already have a timer function in javascript that is controlled with buttons on one page [Code Below]. I want the same timer to run simultaneously on multiple pages (that can be on different computers and browsers). Except it will be controlled with buttons only from this page (timerMode.php). How could I do this with long pooling?
Note: I use phpMyAdmin SQL Database. The same svg will be used for every timer
timerMode.php:
var timerMode = function() {
var timergc;
var runningsc = false;
var runninggc = false;
var endedsc = false;
var edndedgc = false;
var startTimer = function(seconds, container, oncomplete, type) {
var startTime, timer, obj, ms = seconds * 1000;
var paused = false;
var display = document.getElementById(container);
obj = {};
obj.resume = function() {
paused = false;
startTime = new Date().getTime();
timer = setInterval(obj.step, 100);
};
obj.pause = function() {
if (!paused) {
paused = true;
ms = obj.step();
clearInterval(timer);
}
};
obj.reset = function(res) {
ms = res * 1000;
m = Math.floor(ms / 60000), s = Math.floor(ms / 1000) % 60;
switch (type) {
case "game":
if (m == 0) {
var mili = String(now % 1000).charAt(0);
display.innerHTML = s + "." + mili;
} else {
s = (s < 10 ? "0" : "") + s;
display.innerHTML = m + ":" + s;
}
break;
case "shot":
if (s <= 4) {
var mili = String(now % 1000).charAt(0);
display.innerHTML = s + "." + mili;
} else display.innerHTML = s;
break;
}
};
obj.modify = function(diff) {
if (diff == 1) {
if (ms < seconds * 1000) {
ms += diff * 1000;
m = Math.floor(ms / 60000), s = Math.floor(ms / 1000) % 60;
if (type == "shot") {
if (s <= 4) {
var mili = String(ms % 1000).charAt(0);
display.innerHTML = s + "." + mili;
} else display.innerHTML = s;
} else {
if (m == 0) {
var mili = String(now % 1000).charAt(0);
display.innerHTML = s + "." + mili;
} else {
s = (s < 10 ? "0" : "") + s;
display.innerHTML = m + ":" + s;
}
}
}
} else {
if (Math.floor(ms / 1000) % 60 > 0) {
ms += diff * 1000;
m = Math.floor(ms / 60000), s = Math.floor(ms / 1000) % 60;
if (type == "shot") {
if (s <= 4) {
var mili = String(ms % 1000).charAt(0);
display.innerHTML = s + "." + mili;
} else display.innerHTML = s;
} else {
if (m == 0) {
var mili = String(now % 1000).charAt(0);
display.innerHTML = s + "." + mili;
} else {
s = (s < 10 ? "0" : "") + s;
display.innerHTML = m + ":" + s;
}
}
}
}
};
obj.step = function() {
var now = Math.max(0, ms - (new Date().getTime() - startTime)),
m = Math.floor(now / 60000),
s = Math.floor(now / 1000) % 60;
switch (type) {
case "game":
if (m == 0) {
var mili = String(now % 1000).charAt(0);
display.innerHTML = s + "." + mili;
} else {
s = (s < 10 ? "0" : "") + s;
display.innerHTML = m + ":" + s;
}
break;
case "shot":
if (s <= 4) {
var mili = String(now % 1000).charAt(0);
display.innerHTML = s + "." + mili;
} else display.innerHTML = s;
break;
}
if (now == 0) {
clearInterval(timer);
if (type == "shot") {
runningsc = false;
runninggc = false;
endedsc = true;
}
if (oncomplete) oncomplete();
}
return now;
};
obj.resume();
return obj;
};
$(document).on("click", "#start", function() {
timergc = startTimer(600, "game_clock", function() {}, "game");
timersc = startTimer(24, "shot_clock", function() {}, "shot");
runningsc = true;
runninggc = true;
$(".gcbtn_main").text("Pause");
$(".gcbtn_main").attr("id", "pausegc");
$(".scbtn_main").text("Pause");
$(".scbtn_main").attr("id", "pausesc");
});
$(document).on("click", "#pausegc", function() {
timergc.pause();
timersc.pause();
runningsc = false;
runninggc = false;
$(".gcbtn_main").text("Resume");
$(".gcbtn_main").attr("id", "resumegc");
$(".scbtn_main").text("Resume");
$(".scbtn_main").attr("id", "resumesc");
});
$(document).on("click", "#resumegc", function() {
timergc.resume();
runninggc = true;
if (!runningsc) {
timersc.resume();
runningsc = true;
}
$(".gcbtn_main").text("Pause");
$(".gcbtn_main").attr("id", "pausegc");
$(".scbtn_main").text("Pause");
$(".scbtn_main").attr("id", "pausesc");
});
$(document).on("click", "#resetgc", function() {
timergc.pause();
timergc.reset(600);
timersc.pause();
timersc.reset(24);
$(".gcbtn_main").text("Start");
$(".gcbtn_main").attr("id", "resumegc");
$(".scbtn_main").text("Pause");
$(".scbtn_main").attr("id", "pausesc");
});
$(document).on("click", "#upgc", function() {
console.log(runninggc);
timergc.pause();
timergc.modify(1);
if (runninggc) {
timergc.resume();
}
});
$(document).on("click", "#downgc", function() {
timergc.pause();
timergc.modify(-1);
if (runninggc) {
timergc.resume();
}
});
$(document).on("click", "#pausesc", function() {
timersc.pause();
runningsc = false;
$(".scbtn_main").text("Resume");
$(".scbtn_main").attr("id", "resumesc");
});
$(document).on("click", "#resumesc", function() {
timersc.resume();
runningsc = true;
$(".scbtn_main").text("Pause");
$(".scbtn_main").attr("id", "pausesc");
});
$(document).on("click", "#reset14", function() {
timersc.pause();
timersc.reset(14);
if (runningsc) {
timersc.resume();
}
if (endedsc) {
$(".scbtn_main").text("Resume");
$(".scbtn_main").attr("id", "resumesc");
}
});
$(document).on("click", "#reset24", function() {
timersc.pause();
timersc.reset(24);
if (runningsc) {
timersc.resume();
}
if (endedsc) {
$(".scbtn_main").text("Resume");
$(".scbtn_main").attr("id", "resumesc");
}
});
$(document).on("click", "#upsc", function() {
timersc.pause();
timersc.modify(1);
endedsc = false;
if (runningsc) {
timersc.resume();
}
});
$(document).on("click", "#downsc", function() {
timersc.pause();
timersc.modify(-1);
endedsc = false;
if (runningsc) {
timersc.resume();
}
});
$(document).on("click", "#upqrt", function() {
console.log("Works");
var quarter = $("#quarter").text();
console.log(quarter);
if (quarter == 4) {
$("#quarter").text("E");
}
if (quarter < 4) {
console.log(quarter);
quarter++;
$("#quarter").text(quarter);
}
});
$(document).on("click", "#downqrt", function() {
var quarter = $("#quarter").text();
if (quarter == "E") {
$("#quarter").text(4);
}
if (quarter > 1) {
quarter--
$("#quarter").text(quarter);
}
});
};
$(document).ready(function() {
timerMode();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" id="page-block">
<div class="row">
<div class="col-xs-6">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 432.7 198" style="enable-background:new 0 0 432.7 198;background:white;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #FFFFFF;
stroke: #000000;
stroke-miterlimit: 10;
}
.st1 {
fill: none;
}
.st2 {
font-family: 'Helvetica';
}
.st3 {
font-size: 58px;
}
.st4 {
fill: none;
stroke: #000000;
stroke-miterlimit: 10;
}
.st5 {
font-size: 42px;
}
.st6 {
font-size: 18px;
}
.st7 {
font-size: 46px;
}
.st8 {
font-size: 50.9768px;
}
.st9 {
stroke: #000000;
stroke-miterlimit: 10;
}
.st10 {
font-size: 23px;
}
.st11 {
fill: none;
stroke: #000000;
}
</style>
<path id="XMLID_12_" class="st0" d="M125.9,114.8H44.1c-2.3,0-4.2-1.9-4.2-4.2V73.4c0-2.3,1.9-4.2,4.2-4.2h81.8c2.3,0,4.2,1.9,4.2,4.2v37.2C130.1,112.9,128.2,114.8,125.9,114.8z" />
<rect id="XMLID_9_" x="39.9" y="69.2" class="st1" width="90.2" height="45.6" />
<text id="XMLID_10_" transform="matrix(1 0 0 1 99.3335 111.792)" class="st2 st3">0</text>
<path id="XMLID_16_" class="st0" d="M387.9,114.8h-81.8c-2.3,0-4.2-1.9-4.2-4.2V73.4c0-2.3,1.9-4.2,4.2-4.2h81.8
c2.3,0,4.2,1.9,4.2,4.2v37.2C392.1,112.9,390.2,114.8,387.9,114.8z" />
<rect id="home_rect" x="7.1" y="6.8" class="st1" width="129.8" height="36.3"></rect>
<text id="home_name" transform="matrix(1 0 0 1 7.0877 38.7791)" class="st2 st5">HOME</text>
<rect id="XMLID_20_" x="42" y="159.5" class="st1" width="60.9" height="16.5" />
<text id="XMLID_19_" transform="matrix(1 0 0 1 42.0301 173.6536)" class="st2 st6">FOULS:</text>
<rect id="XMLID_22_" x="112.5" y="160.5" class="st1" width="10.7" height="16" />
<text id="XMLID_21_" transform="matrix(1 0 0 1 112.4562 174.6557)" class="st2 st6">0</text>
<rect id="XMLID_33_" x="186.7" y="145.9" class="st1" width="59.4" height="36.6" />
<text id="shot_clock" transform="matrix(1 0 0 1 191.8234 179.9915)" class="st2 st7">24</text>
<rect id="away_rect" x="295.1" y="6.8" class="st1" width="129.8" height="36.3" />
<text id="away_name" transform="matrix(1 0 0 1 295.0877 38.7791)" class="st2 st5">AWAY</text>
<rect id="XMLID_5_" x="153.2" y="6.8" class="st1" width="125.6" height="36.3" />
<text id="game_clock" transform="matrix(0.8828 0 0 1 165.1738 43.0225)" class="st2 st8">10:00</text>
<rect id="XMLID_15_" x="301.9" y="69.2" class="st1" width="90.2" height="45.6" />
<text id="XMLID_14_" transform="matrix(1 0 0 1 301.8873 111.792)" class="st2 st3">0</text>
<g id="XMLID_11_">
<text id="quarter" transform="matrix(1 0 0 1 209.3371 99.3377)" class="st9 st2 st10">1</text>
</g>
<path id="XMLID_13_" class="st11" d="M221,103.6h-10.4c-2.3,0-4.2-1.9-4.2-4.2V83.2c0-2.3,1.9-4.2,4.2-4.2H221
c2.3,0,4.2,1.9,4.2,4.2v16.2C225.2,101.7,223.3,103.6,221,103.6z" />
<path id="XMLID_18_" class="st11" d="M123,180.7h-10.4c-2.3,0-4.2-1.9-4.2-4.2v-16.2c0-2.3,1.9-4.2,4.2-4.2H123
c2.3,0,4.2,1.9,4.2,4.2v16.2C127.2,178.9,125.3,180.7,123,180.7z" />
<path id="XMLID_31_" class="st11" d="M245.2,186.3h-57.3c-2.3,0-4.2-1.9-4.2-4.2v-36.7c0-2.3,1.9-4.2,4.2-4.2h57.3
c2.3,0,4.2,1.9,4.2,4.2v36.7C249.4,184.4,247.5,186.3,245.2,186.3z" />
<rect id="XMLID_30_" x="300.7" y="158.7" class="st1" width="60.9" height="16.5" />
<text id="XMLID_29_" transform="matrix(1 0 0 1 300.6767 172.9018)" class="st2 st6">FOULS:</text>
<rect id="XMLID_28_" x="371.1" y="159.7" class="st1" width="10.7" height="16" />
<text id="XMLID_26_" transform="matrix(1 0 0 1 371.1028 173.9038)" class="st2 st6">0</text>
<path id="XMLID_23_" class="st11" d="M381.7,180h-10.4c-2.3,0-4.2-1.9-4.2-4.2v-16.2c0-2.3,1.9-4.2,4.2-4.2h10.4
c2.3,0,4.2,1.9,4.2,4.2v16.2C385.9,178.1,384,180,381.7,180z" />
<circle id="XMLID_17_" cx="155" cy="91.3" r="2.5" />
<circle id="XMLID_35_" cx="165" cy="91.3" r="2.5" />
<circle id="XMLID_36_" cx="175" cy="91.3" r="2.5" />
<circle id="XMLID_39_" cx="257" cy="91.3" r="2.5" />
<circle id="XMLID_38_" cx="267" cy="91.3" r="2.5" />
<circle id="XMLID_37_" cx="277" cy="91.3" r="2.5" />
</svg>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Game Clock</div>
<div class="panel-body">
<div role="toolbar" class="btn-toolbar">
<button id="start" type="button" class="btn btn-default btn-lg gcbtn_main">Start</button>
<button id="resetgc" type="button" class="btn btn-default btn-lg">Reset</button>
<div class="btn-group-vertical" style="margin-left:5px;">
<button id="upgc" type="button" class="btn btn-default"><i class="fa fa-angle-up"></i>
</button>
<button id="downgc" type="button" class="btn btn-default"><i class="fa fa-angle-down"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">:24</div>
<div class="panel-body">
<div role="toolbar" class="btn-toolbar">
<button id="pausesc" type="button" class="btn btn-default btn-lg scbtn_main">Pause</button>
<div class="btn-group" style="margin-left:5px;">
<button id="reset14" type="button" class="btn btn-default btn-lg">:14</button>
<button id="reset24" type="button" class="btn btn-default btn-lg">:24</button>
</div>
<div class="btn-group-vertical" style="margin-left:5px;">
<button id="upsc" type="button" class="btn btn-default"><i class="fa fa-angle-up"></i>
</button>
<button id="downsc" type="button" class="btn btn-default"><i class="fa fa-angle-down"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Quarter</div>
<div class="panel-body">
<div role="toolbar" class="btn-toolbar">
<div class="btn-group-vertical" style="margin-left:5px;">
<button id="upqrt" type="button" class="btn btn-default"><i class="fa fa-angle-up"></i>
</button>
<button id="downqrt" type="button" class="btn btn-default"><i class="fa fa-angle-down"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Related

function to make some divs disappear

i have a 3divs inside of a container and when i click div number 1 i want the others to disappear
but it works only when i click the "rock" div
The parent div is called "choices" in the JS file
i am trying to loop over the child divs to keep the clicked one and hide the others
choices.addEventListener("click", (e) => {
let currentTag = e.target.tagName;
let current;
if (e.target.className !== "choices") {
// to make sure the user click on the choices only
switch (
currentTag // to get the div element even if the user clicked the svg or the path
) {
case "DIV":
current = e.target;
console.log(current);
break;
case "svg":
current = e.target.parentElement;
console.log(current);
break;
case "path":
current = e.target.parentElement.parentElement;
console.log(current);
break;
default:
break;
}
current.setAttribute("chosen", "true");
for (i = 0; i < choicesList.length; i++) {
choicesList[i].hasAttribute("chosen") ?
"" :
choices.removeChild(choicesList[i]);
}
}
});
<div class="choices" vassel="true">
<!-- Scissors -->
<div class="scissors">
<svg class="scissors" xmlns="http://www.w3.org/2000/svg" width="51" height="58">
<path
class="scissors"
fill="#3B4262"
d="M13.971 25.702l6.012-8.415c-2.499-.415-7.088-.507-10.846 3.235C3.212 26.421.812 39.163.312 42.248L15.37 57.24c2.711-.232 14.713-1.827 26.279-13.34.122-.249 2.94-2.321.636-4.614-1.1-1.095-2.919-1.074-4.042.044-.572.57-1.461.577-2.021.02-.56-.557-.552-1.443.02-2.012l4.087-4.069c2.076-2.067.119-5.555-2.78-4.717l-3.345 2.851c-.611.53-1.52.439-2.022-.14-.519-.597-.408-1.503.183-2.013 11.687-10.208 9.98-8.979 17.5-15.995 2.809-2.329-.725-6.447-3.493-4.09L28.182 25.45c-.529.448-1.34.457-1.86-.02-.601-.517-.615-1.262-.222-1.85L38.787 3.944c1.854-2.5-1.795-5.277-3.749-2.757L16.28 27.307c-.452.65-1.364.8-1.985.345a1.377 1.377 0 01-.323-1.95z"
/>
</svg>
</div>
<!-- rock -->
<div class="rock">
<svg class="rock" xmlns="http://www.w3.org/2000/svg" width="48" height="48">
<path
class="rock"
fill="#3B4262"
d="M45.06 12.22c-.642-8.096-9.734-7.269-9.734-7.269-3.837-6.765-9.832-1.865-9.832-1.865-4.606-6.63-10.38-.486-10.38-.486-9.957-1.074-9.571 7.066-9.571 7.066-.234 2.588 1.403 10.593 1.403 10.593-1.477-4.614-4.68-.784-4.68-.784-3.94 6.078-.975 9.405-.975 9.405 5.33 6.246 16.688 13.743 16.688 13.743 4.113 2.356 2.373 4.457 2.373 4.457l24.876-4.11.571-4.718c3.782-11.436-.739-26.032-.739-26.032z"
/>
</svg>
</div>
<!-- Paper -->
<div class="paper">
<svg class="paper" xmlns="http://www.w3.org/2000/svg" width="49" height="59">
<path
class="paper"
fill="#3B4262"
d="M47.125 11.832a2.922 2.922 0 00-1.232-.198c-.57.04-1.029.271-1.302.65-1.604 2.248-2.919 6.493-3.979 9.905-.486 1.577-1.14 3.688-1.612 4.69-.493-2.807.064-13.09.28-17.05l.003-.064c.15-2.751.17-3.234.138-3.446-.238-1.509-.843-2.5-1.799-2.943-.966-.45-2.22-.25-3.572.563-.677.41-.865 1.816-1.446 8.19l-.002.028c-.32 3.502-1.058 11.566-1.965 12.91-1.023-1.88-2.431-12.555-3.039-17.176-.425-3.236-.673-5.094-.84-5.655-.35-1.176-1.83-2.176-3.295-2.232-1.22-.06-2.22.56-2.698 1.638-.894.995-.578 4.292.41 12.102.47 3.718 1.44 11.395.83 12.257-1.219-.133-3.31-4.942-6.215-14.299-.816-2.62-1.068-3.408-1.318-3.753-.494-1.202-2.172-2.129-3.676-2.024a3.183 3.183 0 00-.377.049c-.787.156-2.584.881-2.2 4.226 1.06 4.637 2.213 8.041 3.331 11.346l.023.066c.669 1.98 1.302 3.85 1.89 5.925 1.385 4.9.846 7.94.84 7.975-.046.312-.143.503-.288.57a.556.556 0 01-.195.045c-.44.03-1.098-.26-1.437-.45-.776-1.482-4.636-8.544-8.134-9.524l-.126-.037-.127.012c-1.283.121-2.226.606-2.803 1.441-.914 1.32-.535 3.002-.444 3.34l.052.12c.028.051 2.834 5.165 3.268 7.544.374 2.04 2.311 4.25 3.869 6.026l.064.073c.508.58.946 1.083 1.292 1.548 4.519 4.713 11.665 8.677 11.723 8.71.892.657 1.387 1.293 1.44 1.84a.798.798 0 01-.16.58l-.155.162.988.96 18.853-1.324.804-3.684c2.486-10.402 1.967-19.272 1.958-19.33.01-.327.706-3.483 1.266-6.033l.017-.065c1.117-5.08 2.505-11.4 2.772-13.803.116-1.028-.542-1.972-1.675-2.401z"
/>
</svg>
</div>
</div>
and here is the link for codepen : https://codepen.io/omarmahdy/pen/JjpEMaV

There is a problem with your child selector. My suggestion is to use querySelectorAll() and add a second class to all options. I created a working fork here: https://codepen.io/foorschtbar/pen/OJQWZJJ
const choicesList = document.querySelectorAll(".choice");
<!-- Scissors -->
<div class="scissors choice">
[...]
</div>
<!-- Rock -->
<div class="rock choice">
[...]
</div>
<!-- Paper -->
<div class="paper choice">
[...]
</div>
(i hope i understand your problem right and is now fixed)

IMHO you should apply a CSS-class with classList.add('class-name) to all the child div elements of choices:
document.querySelectorAll('.choices div').forEach(el => el.classList.add('class-name');
Then you remove this class for the clicked element after wards. That CSS-Class only needs to contain: display: none;
var choices = document.querySelector('.choices');
choices.addEventListener('click', e => {
var scissors = document.querySelector('.scissors'),
rock = document.querySelector('.rock'),
paper = document.querySelector('.paper');
document.querySelectorAll('.choices div').forEach(el => el.classList.add('d-none'));
if (e.target.classList.contains('scissors')) {
scissors.classList.remove('d-none');
}
if (e.target.classList.contains('rock')) {
rock.classList.remove('d-none');
}
if (e.target.classList.contains('paper')) {
paper.classList.remove('d-none');
}
});
.d-none {
display: none;
}
<div class="choices" vassel="true">
<!-- Scissors -->
<div class="scissors">
<svg class="scissors" xmlns="http://www.w3.org/2000/svg" width="51" height="58">
<path
class="scissors"
fill="#3B4262"
d="M13.971 25.702l6.012-8.415c-2.499-.415-7.088-.507-10.846 3.235C3.212 26.421.812 39.163.312 42.248L15.37 57.24c2.711-.232 14.713-1.827 26.279-13.34.122-.249 2.94-2.321.636-4.614-1.1-1.095-2.919-1.074-4.042.044-.572.57-1.461.577-2.021.02-.56-.557-.552-1.443.02-2.012l4.087-4.069c2.076-2.067.119-5.555-2.78-4.717l-3.345 2.851c-.611.53-1.52.439-2.022-.14-.519-.597-.408-1.503.183-2.013 11.687-10.208 9.98-8.979 17.5-15.995 2.809-2.329-.725-6.447-3.493-4.09L28.182 25.45c-.529.448-1.34.457-1.86-.02-.601-.517-.615-1.262-.222-1.85L38.787 3.944c1.854-2.5-1.795-5.277-3.749-2.757L16.28 27.307c-.452.65-1.364.8-1.985.345a1.377 1.377 0 01-.323-1.95z"
/>
</svg>
</div>
<!-- rock -->
<div class="rock selection">
<svg class="rock" xmlns="http://www.w3.org/2000/svg" width="48" height="48">
<path
class="rock"
fill="#3B4262"
d="M45.06 12.22c-.642-8.096-9.734-7.269-9.734-7.269-3.837-6.765-9.832-1.865-9.832-1.865-4.606-6.63-10.38-.486-10.38-.486-9.957-1.074-9.571 7.066-9.571 7.066-.234 2.588 1.403 10.593 1.403 10.593-1.477-4.614-4.68-.784-4.68-.784-3.94 6.078-.975 9.405-.975 9.405 5.33 6.246 16.688 13.743 16.688 13.743 4.113 2.356 2.373 4.457 2.373 4.457l24.876-4.11.571-4.718c3.782-11.436-.739-26.032-.739-26.032z"
/>
</svg>
</div>
<!-- Paper -->
<div class="paper selection">
<svg class="paper" xmlns="http://www.w3.org/2000/svg" width="49" height="59">
<path
class="paper"
fill="#3B4262"
d="M47.125 11.832a2.922 2.922 0 00-1.232-.198c-.57.04-1.029.271-1.302.65-1.604 2.248-2.919 6.493-3.979 9.905-.486 1.577-1.14 3.688-1.612 4.69-.493-2.807.064-13.09.28-17.05l.003-.064c.15-2.751.17-3.234.138-3.446-.238-1.509-.843-2.5-1.799-2.943-.966-.45-2.22-.25-3.572.563-.677.41-.865 1.816-1.446 8.19l-.002.028c-.32 3.502-1.058 11.566-1.965 12.91-1.023-1.88-2.431-12.555-3.039-17.176-.425-3.236-.673-5.094-.84-5.655-.35-1.176-1.83-2.176-3.295-2.232-1.22-.06-2.22.56-2.698 1.638-.894.995-.578 4.292.41 12.102.47 3.718 1.44 11.395.83 12.257-1.219-.133-3.31-4.942-6.215-14.299-.816-2.62-1.068-3.408-1.318-3.753-.494-1.202-2.172-2.129-3.676-2.024a3.183 3.183 0 00-.377.049c-.787.156-2.584.881-2.2 4.226 1.06 4.637 2.213 8.041 3.331 11.346l.023.066c.669 1.98 1.302 3.85 1.89 5.925 1.385 4.9.846 7.94.84 7.975-.046.312-.143.503-.288.57a.556.556 0 01-.195.045c-.44.03-1.098-.26-1.437-.45-.776-1.482-4.636-8.544-8.134-9.524l-.126-.037-.127.012c-1.283.121-2.226.606-2.803 1.441-.914 1.32-.535 3.002-.444 3.34l.052.12c.028.051 2.834 5.165 3.268 7.544.374 2.04 2.311 4.25 3.869 6.026l.064.073c.508.58.946 1.083 1.292 1.548 4.519 4.713 11.665 8.677 11.723 8.71.892.657 1.387 1.293 1.44 1.84a.798.798 0 01-.16.58l-.155.162.988.96 18.853-1.324.804-3.684c2.486-10.402 1.967-19.272 1.958-19.33.01-.327.706-3.483 1.266-6.033l.017-.065c1.117-5.08 2.505-11.4 2.772-13.803.116-1.028-.542-1.972-1.675-2.401z"
/>
</svg>
</div>
</div>

You need to manipulate the styling of each div that you needs to be removed. I have written a code to add display:none; property to the div those you need to remove.
const rockDiv = document.querySelectorAll(".rock");
const paperDiv = document.querySelectorAll(".paper");
const scissorsDiv = document.querySelectorAll(".scissors");
for (let i = 0; i < rockDiv.length; i++) {
rockDiv[i].addEventListener("click", ()=>{
paperDiv[i].style.display = "none";
scissorsDiv[i].style.display = "none";
});
}
for (let i = 0; i < paperDiv.length; i++) {
paperDiv[i].addEventListener("click", ()=>{
rockDiv[i].style.display = "none";
scissorsDiv[i].style.display = "none";
});
}
for (let i = 0; i < scissorsDiv.length; i++) {
scissorsDiv[i].addEventListener("click", ()=>{
paperDiv[i].style.display = "none";
rockDiv[i].style.display = "none";
});
}

Details commented in example, refer here for the CSS
// Score counters
let T = 0;
let W = 0;
let L = 0;
// Reference the <form>
const RPS = document.forms.RPS;
// Register <form> to the click event
RPS.onclick = pick;
// Event handler passes Event Object
function pick(e) {
// Reference ALL form controls
const IO = this.elements;
// The tag the user clicked
const clk = e.target;
// If the tag clicked is an <input>..
if (clk.matches('input')) {
// Disable <label>s
IO.choices.disabled = true;
// Add .picked class to <form>
this.classList.add('picked');
// Get a random number 0-2
let r = Math.floor(Math.floor(Math.random() * 6) / 2);
/* Pass:
** All form controls,
** Random number,
** and #id of clicked <label>
** to outcome(IO, r, id)
*/
switch (clk.id) {
case 'R':
console.log('Rock');
outcome(IO, r, 'R');
break;
case 'P':
console.log('Paper');
outcome(IO, r, 'P');
break;
case 'S':
console.log('Scissors', );
outcome(IO, r, 'S');
break;
default:
break;
}
}
}
/*
** Pass all form controls, random
** number, and #id of clicked
*/
function outcome(node, vs, user) {
// 'R'ock, 'P'aper, 'S'cissors
let rpsA = ['R', 'P', 'S'];
// Index of user's pick
const sv = rpsA.indexOf(user);
/*
** Clone the `<label>` that
** corresponds to opponent's index
*//*
** Add .vs class to opponent
*//*
** Add opponent to #choices
*/
const opponent = document.querySelector(`[
for='${rpsA[vs]}'
]`).cloneNode(true);
opponent.classList.add('vs');
node.choices.append(opponent);
/**
** One line nested ternary to
** resolve win, lose, or tie
*/
let result = vs === sv ? 'tied' :
vs === sv + 1 ? 'lost' :
vs === 0 && sv === 2 ? 'lost' : 'win';
// Increment score
switch (result) {
case 'tied':
T++;
break;
case 'win':
W++;
break;
case 'lost':
L++;
break;
default:
break;
}
// Display score
node.w.value = W;
node.l.value = L;
node.t.value = T;
// Array for final outcome
const roshambo = ["Rock", "Paper", "Scissors"];
// Message of outcome
let msg = `You played ${roshambo[sv]},
your opponent played ${roshambo[vs]}, you ${result}!`;
// Display message
node.msg.value = msg;
}
// Register <form> to reset event
RPS.onreset = reset;
// Resets game
function reset(e) {
this.classList.remove('picked');
this.choices.disabled = false;
document.querySelectorAll('label').forEach(tag => {
if (tag.classList.contains('vs')) {
tag.remove();
}
});
}
html {
font: 300 1ch/1.1 'Segoe UI'
}
form {
width: 100%;
min-height: 100vh;
padding: 2rem;
color: white;
}
#choices {
border: 0;
margin: 0 auto;
}
input,
output,
button {
font: inherit;
font-size: 100%;
}
legend,
button {
font-size: 1.25rem;
}
[type='radio'] {
display: none
}
[type='radio']:checked+label {
color: cyan
}
[type='radio']:checked+label * {
fill: cyan
}
label.vs {
color: gold
}
label.vs * {
fill: gold;
}
.picked {
background: #3B4262;
}
output {
display: inline-block;
width: 4rem;
margin-bottom: 0.5rem;
}
output::before {
content: attr(value);
}
#msg {
display: inline-block;
width: 100%;
}
[type='reset'] {
position: relative;
top: 14vh;
}
.as-console-row::after {
width: 0;
font-size: 0;
}
.as-console-row-code {
width: 100%;
word-break: break-word;
}
.as-console-wrapper {
max-height: 15% !important;
max-width: 50%;
margin-left: 50%;
}
<form id='RPS'>
<fieldset id='choices'>
<legend>
<label>Wins:
<output id='w'></output>
</label>
<label>Lost:
<output id='l'></output>
</label>
<label>Tied:
<output id='t'></output>
</label><br>
<output id='msg'></output>
</legend>
<!-- rock -->
<input id='R' name='rps' type='radio'>
<label for='R' class="rock">
<svg class="rock svg" xmlns="http://www.w3.org/2000/svg" width="48" height="48">
<path class="rock"
fill="#3B4262"
d="M45.06 12.22c-.642-8.096-9.734-7.269-9.734-7.269-3.837-6.765-9.832-1.865-9.832-1.865-4.606-6.63-10.38-.486-10.38-.486-9.957-1.074-9.571 7.066-9.571 7.066-.234 2.588 1.403 10.593 1.403 10.593-1.477-4.614-4.68-.784-4.68-.784-3.94 6.078-.975 9.405-.975 9.405 5.33 6.246 16.688 13.743 16.688 13.743 4.113 2.356 2.373 4.457 2.373 4.457l24.876-4.11.571-4.718c3.782-11.436-.739-26.032-.739-26.032z"/></svg></label>
<!-- Paper -->
<input id='P' name='rps' type='radio'>
<label for='P' class="paper">
<svg class="paper svg" xmlns="http://www.w3.org/2000/svg" width="49" height="59">
<path class="paper"
fill="#3B4262"
d="M47.125 11.832a2.922 2.922 0 00-1.232-.198c-.57.04-1.029.271-1.302.65-1.604 2.248-2.919 6.493-3.979 9.905-.486 1.577-1.14 3.688-1.612 4.69-.493-2.807.064-13.09.28-17.05l.003-.064c.15-2.751.17-3.234.138-3.446-.238-1.509-.843-2.5-1.799-2.943-.966-.45-2.22-.25-3.572.563-.677.41-.865 1.816-1.446 8.19l-.002.028c-.32 3.502-1.058 11.566-1.965 12.91-1.023-1.88-2.431-12.555-3.039-17.176-.425-3.236-.673-5.094-.84-5.655-.35-1.176-1.83-2.176-3.295-2.232-1.22-.06-2.22.56-2.698 1.638-.894.995-.578 4.292.41 12.102.47 3.718 1.44 11.395.83 12.257-1.219-.133-3.31-4.942-6.215-14.299-.816-2.62-1.068-3.408-1.318-3.753-.494-1.202-2.172-2.129-3.676-2.024a3.183 3.183 0 00-.377.049c-.787.156-2.584.881-2.2 4.226 1.06 4.637 2.213 8.041 3.331 11.346l.023.066c.669 1.98 1.302 3.85 1.89 5.925 1.385 4.9.846 7.94.84 7.975-.046.312-.143.503-.288.57a.556.556 0 01-.195.045c-.44.03-1.098-.26-1.437-.45-.776-1.482-4.636-8.544-8.134-9.524l-.126-.037-.127.012c-1.283.121-2.226.606-2.803 1.441-.914 1.32-.535 3.002-.444 3.34l.052.12c.028.051 2.834 5.165 3.268 7.544.374 2.04 2.311 4.25 3.869 6.026l.064.073c.508.58.946 1.083 1.292 1.548 4.519 4.713 11.665 8.677 11.723 8.71.892.657 1.387 1.293 1.44 1.84a.798.798 0 01-.16.58l-.155.162.988.96 18.853-1.324.804-3.684c2.486-10.402 1.967-19.272 1.958-19.33.01-.327.706-3.483 1.266-6.033l.017-.065c1.117-5.08 2.505-11.4 2.772-13.803.116-1.028-.542-1.972-1.675-2.401z"/></svg></label>
<!-- Scissors -->
<input id='S' name='rps' type='radio'>
<label for='S' class="scissors">
<svg class="scissors svg" xmlns="http://www.w3.org/2000/svg" width="51" height="58">
<path class="scissors"
fill="#3B4262"
d="M13.971 25.702l6.012-8.415c-2.499-.415-7.088-.507-10.846 3.235C3.212 26.421.812 39.163.312 42.248L15.37 57.24c2.711-.232 14.713-1.827 26.279-13.34.122-.249 2.94-2.321.636-4.614-1.1-1.095-2.919-1.074-4.042.044-.572.57-1.461.577-2.021.02-.56-.557-.552-1.443.02-2.012l4.087-4.069c2.076-2.067.119-5.555-2.78-4.717l-3.345 2.851c-.611.53-1.52.439-2.022-.14-.519-.597-.408-1.503.183-2.013 11.687-10.208 9.98-8.979 17.5-15.995 2.809-2.329-.725-6.447-3.493-4.09L28.182 25.45c-.529.448-1.34.457-1.86-.02-.601-.517-.615-1.262-.222-1.85L38.787 3.944c1.854-2.5-1.795-5.277-3.749-2.757L16.28 27.307c-.452.65-1.364.8-1.985.345a1.377 1.377 0 01-.323-1.95z"/></svg></label>
</fieldset>
<button type='reset'>Reset</button>
</form>

Changing rec location and width programatically

I've the below code, which is drawing a rec in a svg element:
.container
{
display: flex;
align-items: center;
height: 1.3em;
}
<div class="container">
<label for="from">From:</label>
<input type="number" name="from">
<label for="to">To:</label>
<input type="number" name="to">
<svg margin="0" width="200" height="1.3em">
<rect x="10" y="0" width="30" height="1.3em" stroke="black" fill="green" />
</svg>
I want to be able "prpgramatically" to:
Shift the location of the rec by changing the value of the from field
Chang the width of the rec by changing the value of the to field

const svgRect = document.querySelector('svg rect')
function xStart(XS){
svgRect.setAttribute('x',XS)
}
function rWidth(RW){
svgRect.setAttribute('width',RW)
}
.container
{
display: flex;
align-items: center;
height: 1.3em;
}
<div class="container">
<label for="from">From:</label>
<input onchange="xStart(this.value)" type="number" name="from">
<label for="to">To:</label>
<input onchange="rWidth(this.value)" type="number" name="to">
<svg margin="0" width="200" height="1.3em">
<rect x="10" y="0" width="30" height="1.3em" stroke="black" fill="green" />
</svg>
For changing width, you can add even listeners to mouse position and situations, below sample code:
let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("class", "octicon octicon-star");
// svg.setAttribute("viewBox", "0 0 14 16");
svg.setAttribute("version", "1.1");
svg.setAttribute("width", 240);
svg.setAttribute("height", 160);
svg.setAttribute("aria-hidden", "true");
let barThickness = 20
let orders = [100, 152];
//orders.forEach((element, index, array) => console.log('a[' + index + '] = ' + element) )
orders.forEach(function(element, index, array) {
console.log('a[' + index + '] = ' + element)
let r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
r.setAttribute("x", 0);
r.setAttribute("y",(barThickness+10)*index+0);
r.setAttribute("width", element);
r.setAttribute("height", barThickness);
r.setAttribute("fill","black");
let isDrawing = false;
let x = element
let mousePosition = 0
r.addEventListener('mouseenter', e => {
e.path[0].setAttribute("fill","red")
});
r.addEventListener('mouseleave', e => {
e.path[0].setAttribute("fill","black")
if (isDrawing === true) {
isDrawing = false;
}
});
r.addEventListener('mousedown', e => {
isDrawing = true;
});
r.addEventListener('mousemove', e => {
if (isDrawing === true) {
console.log(e.offsetX)
if(e.offsetX>mousePosition) {
x++
} else if(e.offsetX < mousePosition){
x--
}
mousePosition = e.offsetX
r.setAttribute("width", x)
}
});
r.addEventListener('mouseup', e => {
if (isDrawing === true) {
isDrawing = false;
}
});
svg.appendChild(r);
document.body.appendChild(svg)
} )

var startX = 100;
var startY = 100;
function init() {
Snap("#rect").drag(dragMove, dragStart, dragEnd);
}
function dragStart(x, y, evt) {
// figure out where the circle currently is
startX = parseInt(Snap("#rect").attr("x"), 10);
startY = parseInt(Snap("#rect").attr("y"), 0);
}
function dragMove(dx, dy, x, y, evt) {
Snap("#rect").attr({
x: (startX + dx),
y: (startY + dy)
});
}
function dragEnd(evt) {
// no action required
}
.container {
display: flex;
align-items: center;
height: 1.3em;
position:relative;
}
svg {
position: absolute;
top: 0;
left:420px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<body onload="init()">
<div class="container">
<label for="from">From:</label>
<input type="number" name="from">
<label for="to">To:</label>
<input type="number" name="to">
<svg margin="0" width="400" height="400">
<rect draggable="true" id='rect' x="10" y="0" width="30" height="1.3em" stroke="black" fill="green" />
</svg>
</div>
</body>

Tweak SVG viewBox behaviour via javascript

I am using vanilla javascript to navigate the pages of a comic book. However, I need to setup a condition that checks if the points in the current polygon intersects with the points in the next polygon. If true, I want the viewBox to animate from the current points to the next points, if false let nothing happen (use the default fade transition).
Here is a section of my code
var DELAY = 400;
function nextArea() {
if (isFirstPage() || areaIndex >= areas.length - 1) {
changePage(true);
changeArea();
} else {
fade();
areaIndex++;
setTimeout(changeArea, DELAY);
}
}
function prevArea() {
if (isLastPage() || areaIndex <= 0) {
changePage(false);
changeArea();
} else {
fade();
areaIndex--;
setTimeout(changeArea, DELAY);
}
}
function changeArea() {
if (isFirstPage() || isLastPage()) {
return;
}
var activeArea = areas[areaIndex];
var points = activeArea.getAttribute('points').split(' ');
var xy1 = points[0].split(',');
var xy2 = points[1].split(',');
var xy3 = points[2].split(',');
var box = [xy1[0], xy1[1], xy2[0] - xy1[0], xy3[1] - xy2[1]];
activePage.classList.remove('fade');
activePage.setAttribute('viewBox', box.join(' '));
activeRect = rects[pageIndex - 1];
activeRect.setAttribute('x', xy1[0]);
activeRect.setAttribute('y', xy1[1]);
}
My code repository is here: https://github.com/cnario/svg-carousel
Here is what I have thus far: https://cnario.github.io/svg-carousel/
Here is how I expect it to act: https://read.marvel.com/#book/41323

I suppose this is what you may need: a way to transition the viewBox from one value to another so that every time you have only one part of the svg in the viewBox.
let BB = {};
BB.tomato = tomato.getBBox();
BB.skyblue = skyblue.getBBox();
BB.gold = gold.getBBox();
let radios = document.querySelectorAll("#controls input");
radios.forEach(r =>{
let color = r.dataset.color;
let bb = BB[color];
r.addEventListener("change",()=>{
svg.setAttributeNS(null,"viewBox", `${bb.x} ${bb.y} ${bb.width} ${bb.height}`)
svg.style.height = `${bb.height * 300 / bb.width}px`;
})
})
svg {
width: 300px;
border: 1px solid;
height: 600px;
transition: height 1s;
}
<p id="controls">
<label>tomato: <input type="radio" name="selector" data-color="tomato" /></label>
<label>skyblue: <input type="radio" name="selector" data-color="skyblue" /></label>
<label>gold: <input type="radio" name="selector" data-color="gold" /></label>
</p>
<svg id="svg" viewBox="0 0 100 200">
<g id="tomato">
<circle cx="35" cy="70" r="25" fill="tomato" />
</g>
<g id="skyblue">
<ellipse cx="75" cy="160" rx="15" ry="35" fill="skyblue" />
</g>
<g id="gold">
<polygon fill="gold" points="75,15 60,30 90,30" />
</g>
</svg>

How do I keep the elements inside the container filling the parent container as I scale

When I change the scale of the elements inside the scrollarea, how do the elements inside the scrollarea stay close to the top, bottom, left, and right sides of the parent container
enter image description here
function changeScale (f) {
let cc = document.getElementById("cc")
let n = cc.style.transform.length > 0 ? Number(cc.style.transform.substring(6,cc.style.transform.length-1)) : 1
if (f === 'zoomIn') {
n += 0.05
} else if (f === 'zoomOut') {
n -= 0.05
} else if (f === 'restore') {
n = 1
} else {
n = f
}
cc.style.transform = "scale(" + n + ")"
}
<div style="position: absolute;left: 50px;top: 50px;">
<button onclick="changeScale('zoomIn')" style="float:left;">zoomIn</button>
<button onclick="changeScale('zoomOut')" style="float:left;">zoomOut</button>
<button onclick="changeScale('restore')" style="float:left;">restore</button>
</div>
<div id=app>
<div id="el" style="width: 400px;height:400px;margin: 200px auto;border:1px solid blue;overflow:auto;">
<div id="cc" style="width:800px;height:800px;border:2px solid red;z-index:10">
</div>
</div>
</div>
enter link description here

You can change the transform-origin value to: top left. Here is a working example:
function changeScale (f) {
let cc = document.getElementById("cc")
let n = cc.style.transform.length > 0 ? Number(cc.style.transform.substring(6,cc.style.transform.length-1)) : 1
if (f === 'zoomIn') {
n += 0.05
} else if (f === 'zoomOut') {
n -= 0.05
} else if (f === 'restore') {
n = 1
} else {
n = f
}
cc.style.transform = "scale(" + n + ")"
}
<div style="position: absolute;left: 50px;top: 50px;">
<button onclick="changeScale('zoomIn')" style="float:left;">zoomIn</button>
<button onclick="changeScale('zoomOut')" style="float:left;">zoomOut</button>
<button onclick="changeScale('restore')" style="float:left;">restore</button>
</div>
<div id=app>
<div id="el" style="width: 400px;height:400px;margin: 200px auto;border:1px solid blue;overflow:auto;">
<div id="cc" style="width:800px;height:800px;border:2px solid red;z-index:10;transform-origin: left top;">
</div>
</div>
</div>

Movement Not Being Stopped

I am trying to prevent a character from crossing objects w/ a blue border. I have included some debugging comments so I can track how the code is being executed, and it seems to be fine logically. However, they way I am trying to prevent movement is not working. And I'm wondering why. Here is my code:
//My HTML Code
<div id="title">
<link rel="stylesheet" type="text/css" href="PM-style.css" media="screen" />
<script src="Pac-Man.js">
</script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="Pac-Man.js">
</script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="Grid.js">
</script>
<title> Pac-Man Game </title>
</div>
<body>
<div class="mazeboard">
<hl> WELCOME!!!</hl>
</div>
<p id="buttons">
<script src="Pac-Man.js">
</script>
<button onclick="myMove()" id="beginButton"> Begin Game </button>
<button onclick="increment()" id="pause"> &nbsp Pause &nbsp </button>
<button onclick="reset()" id="reset"> &nbsp Start Over &nbsp </button>
<button onclick="nextStage1()"> &nbsp Next &nbsp </button>
</p>
<div class='status-window'>
<h2> SCORE: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp <span> TIME: </span> <span id="output"> </span> </h2>
<script>
</script>
</div>
</div>
<div class="realm">
<canvas width="800" height="450" style="border: 2px solid blue; background-color: black; border-radius: 20px; margin: 0 auto; position: relative; align-content: center;" id="myCanvas"> </canvas>
<!-- Comment This is where the walls go! -->
<div id='game-window'>
<div id="outerwall" class="game-window" data-index="1"> </div>
<div id="left-wall" class="game-window" data-index="2"></div>
<div id="left-wallTop" class="game-window" data-index="3"></div>
<div id="left-wallMiddle" class="game-window" data-index="4"></div>
<div id="left-wallBottom1" class="game-window" data-index="5"></div>
<div id="left-wallBottom2" class="game-window" data-index="6"></div>
<div id="top-wall" class="game-window" data-index="7"></div>
<div id="middle-wall1" class="game-window" data-index="8"></div>
<div id="middle-wall2" class="game-window" data-index="9"></div>
<div id="right-wall" class="game-window" data-index="10"></div>
<div id="center-block" class="game-window" data-index="11"> </div>
<div id="bottom-block1" class="game-window" data-index="12"></div>
<div id="bottom-block2" class="game-window" data-index="13"></div>
<div id="bottom-block3" class="game-window" data-index="14"></div>
<div id="bottom-block4" class="game-window" data-index="15"></div>
<div id="right-bottom1" class="game-window" data-index="16"></div>
<div id="right-bottom2" class="game-window" data-index="17"></div>
<div id="right-bottom" class="game-window" data-index="18"></div>
<div id="center2" class="game-window" data-index="19"></div>
<div id="opencenter" class="game-window" data-index="20"></div>
<div id="center3" class="game-window" data-index="21"></div>
<div id="hole1" class="game-window" data-index="22"></div>
<div id="hole2" class="game-window" data-index="23"></div>
<div id="hole3" class="game-window" data-index="24"></div>
<div id="hole4" class="game-window" data-index="25"></div>
<div></div>
</div>
<script type="text/javascript" src="Pac-man.js"></script>
<script type="text/javascript" src="Ghost.js"></script>
<script type="text/javascript" src="Grid.js"></script>
<script type="text/javascript" src="Game.js"></script>
<script>
window.onload = function() {
var canvas = document.getElementById('myCanvas');
var c = canvas.getContext('2d');
}
</script>
<div id='pacman' class='realm'> <img src="https://cdn.pixabay.com/photo/2012/04/14/17/12/pacman-34643_960_720.png" id="pacman"> </div>
<div id='ghost' class='realm'> <img src="https://cdn.pixabay.com/photo/2013/07/12/12/31/pacman-145852_960_720.png" id="ghost"> </div>
</div>
</body>
<footer>
</footer>
</html>
//Moving the Pacman Character (JAVASCRIPT)
$(document).ready(function() {
console.log('jQuery has loaded!');
console.log("Ready!");
$pacman = $(document.getElementById('pacman'));
pacman = $pacman;
STEP_SIZE = 15;
var keys = {};
document.getElementById("beginButton").onclick = function() {
gameStart()
};
function gameStart() {
start();
pacManPositions = {
'left': parseInt(pacman.css('left')),
'right': parseInt(pacman.css('left')) + pacman.width(),
'top': parseInt(pacman.css('top')),
'bottom': parseInt(pacman.css('top')) + pacman.height()
};
//Setting up conditions to determine movement or not
collision2 = false;
collisions = true;
function collision() {
$(".game-window").each(function() {
var walls = document.getElementsByTagName("div");
walls = $(this);
for (var i = 0; i < walls.length; i++) {
var name = walls[i].getAttribute('id');
var border = $(this).css('border-color');
var position = $(this).position();
if (border == 'rgb(0, 0, 255)') {
wallPositions = {
'left': position.left,
'right': position.left + $(this).width(),
'top': position.top,
'bottom': position.top + pacman.height()
};
pacManPositions = {
'left': parseInt(pacman.css('left')),
'right': parseInt(pacman.css('left')) +
pacman.width(),
'top': parseInt(pacman.css('top')),
'bottom': parseInt(pacman.css('top')) +
pacman.height()
};
if ((pacManPositions.left <= wallPositions.left && pacManPositions.right >= wallPositions.left) ||
(pacManPositions.left <= wallPositions.right && pacManPositions.right >= wallPositions.right) ||
(pacManPositions.left <= wallPositions.right && pacManPositions.right >= wallPositions.left)) {
if ((pacManPositions.top >= wallPositions.top && pacManPositions.top <= wallPositions.bottom) ||
(pacManPositions.top <= wallPositions.top && pacManPositions.top >= wallPositions.bottom - 33) ||
(pacManPositions.top >= wallPositions.top && pacManPositions.bottom <= wallPositions.bottom)) {
collisions = false;
return true;
collision2 = true;
}
}
}
}
});
}
//Moving Pac Man w/ Keys
$(document).on('keydown', movePacman);
function movePacman(event) {
console.log(event.which);
switch (event.which) {
//moving right
case 39:
console.log('right');
// pacman.css("left", (pacman.position().left + 10) + "px");
// var leftVal = pacman.css("left", (pacman.position().left + 10) + "px");
var leftVal = parseInt(pacman.css('left')) + STEP_SIZE;
if (leftVal > ($('#outerwall').width() - pacman.width())) {
leftVal = ($('#outerwall').width() - pacman.width()) - 0;
}
collision();
if (collision() == true) {
var leftVal = 0;
$('#pacman').css('left', leftVal);
} else {
$('#pacman').css('left', leftVal);
break;
}
break;
//moving down
case 40:
console.log('down');
var downVal = parseInt(pacman.css('top')) + STEP_SIZE;
if (downVal > ($('#outerwall').height() + pacman.height()) - 70) {
downVal = ($('#outerwall').height()) - pacman.height() + 1;
}
collision();
if (collision() == true) {
} else {
$('#pacman').css('top', downVal);
break;
}
break;
//moving left
case 37:
console.log('left');
var leftVal = parseInt(pacman.css('left')) - STEP_SIZE;
if (leftVal < 0) {
leftVal = ($('#outerwall').width()) - 780;
//parseInt(pacman.css('left'));
}
collision();
if (collision() == true) {
} else {
$('#pacman').css('left', leftVal);
break;
}
// break;
//moving up
case 38:
console.log('up');
var topVal = parseInt(pacman.css('top')) - STEP_SIZE;
if (topVal < 0) {
topVal = ($('#outerwall').height()) - 430;
}
collision();
if (collision() == true) {
} else {
$('#pacman').css('top', topVal);
break;
}
break;
// break;
//breaking
case 32:
console.log('break');
break;
}
}
}
})

Categories

Resources