var count = 24000,
running = true,
secondsNode = document.getElementById("seconds"),
millisecondsNode = document.getElementById("milliseconds"),
mOld,
mNew;
function draw() {
if (count > 0 && running) {
requestAnimationFrame(draw);
mNew = new Date().getTime();
count = count - mNew + mOld;
count = count >= 0 ? count : 0;
mOld = mNew;
secondsNode.innerHTML = Math.floor(count / 1000);
millisecondsNode.innerHTML = count % 1000;
}
}
mOld = new Date().getTime();
draw();
window.addEventListener("keydown", function(e) {
switch (e.keyCode) {
case 32: // PLAY
if (running) {
running = false;
} else {
running = true;
mOld = new Date().getTime();
draw();
}
break;
case 82: // RESET
count = 24000;
secondsNode.innerHTML = 24;
millisecondsNode.innerHTML = 0;
running = false;
}
});
<p><span id="seconds">4</span> secs and <span id="milliseconds">000</span> milliseconds</p>
This is the code for timer. Here what is happening is the timer starting from 24 seconds and ending in 0. But what I need is I need to start this timer from 0 to 4 seconds. Can we do that? If that so please help. Thanks:)
In order to achieve this, you need to change the time decrementer to an incrementer by using:
count = count + mNew - mOld;
Also, you need to ensure that your conditions and checks stop when you reach 4000 instead of 0.
See working example below:
var count = 0,
running = false,
secondsNode = document.getElementById("seconds"),
millisecondsNode = document.getElementById("milliseconds"),
mOld,
mNew;
function isElementInViewport(el) { // run function to check if the element is in the viewport
var rect = el.getBoundingClientRect();
return rect.bottom > 0 && rect.right > 0 && rect.left < (window.innerWidth || document.documentElement.clientWidth) && rect.top < (window.innerHeight || document.documentElement.clientHeight);
}
window.addEventListener('scroll', function() { // everytime we scroll
if(isElementInViewport(secondsNode)) { // check if the p element is on the screen - if it is then:
running = true; // start the timer (unpause it)
mOld = new Date().getTime();
draw();
} else { // if the element is off the screen then
running = false; // pause the timer
}
});
function draw() {
if (count < 4000 && running) { // change to check count < 4000 to keep running
requestAnimationFrame(draw);
mNew = new Date().getTime();
count = count + mNew - mOld; // change to increment the count
count = count >= 4000 ? 4000 : count; // change stop the clock from incrementing
mOld = mNew;
secondsNode.innerHTML = Math.floor(count / 1000);
millisecondsNode.innerHTML = count % 1000;
}
}
window.addEventListener("keydown", function(e) {
switch (e.keyCode) {
case 32: // PLAY (space)
if (running) {
running = false;
} else {
running = true;
mOld = new Date().getTime();
draw();
}
break;
case 82: // RESET (r)
count = 0;
secondsNode.innerHTML = 0;
millisecondsNode.innerHTML = 0;
running = true;
}
});
.other {
padding-bottom: 100vh;
}
<div class="other"></div>
<p><span id="seconds">4</span> secs and <span id="milliseconds">000</span> milliseconds</p>
<div class="other"></div>
Related
I am using a basic html canvas to create a simple game using javascript, but I am having an issue while trying to redraw my window. I have created a redraw_window function that I call whenever i want a new frame to show on the screen, but when I try to call the redraw_window function from this location on line 151, it does not work. The screen does not update. Any ideas why?
const c = canvas.getContext("2d")
canvas.width = innerWidth
canvas.height = innerHeight
const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
class Light {
constructor(pos,vel){
this.pos = pos
this.vel = vel
}
move(){
if (this.pos == 0){
this.vel = 1
}
if(this.pos == 9){
this.vel = -1
}
this.pos += this.vel
}
}
function is_not_in(val,list){
for (var i = 0; i < list.length; i++){
if (list[i] == val){
return false
}
}
return true
}
function clear_window(){
c.clearRect(0,0,canvas.width,canvas.height)
}
function sleep(milliseconds) {
const date = Date.now();
let currentDate = null;
do {
currentDate = Date.now();
} while (currentDate - date < milliseconds);
}
function redraw_window(pos){
c.font = "80px serif"
//let board = [1,1,1,1,1,1,1,1,1,1]
positions = [canvas.width/2-450,canvas.width/2-350,canvas.width/2-250,canvas.width/2-150,canvas.width/2-50,canvas.width/2+50,canvas.width/2+150,canvas.width/2+250,canvas.width/2+350,canvas.width/2+450,]
//board[light.pos] = 0
clear_window()
c.fillStyle = "black"
//c.fillText(board.toString(),canvas.width/2-c.measureText(board.toString()).width/2,canvas.height/2)
//c.fillText("Troy likes big hairy black balls",canvas.width/2-c.measureText("Troy likes big hairy black balls").width/2,canvas.height/2+80)
for (var i = 0; i < positions.length; i++) {
let radius = 20
if (pos != i){
c.beginPath()
c.arc(positions[i],canvas.height/2,radius,0,Math.PI * 2,false)
c.fillStyle = "black"
c.fill()
}
if (pos == i){
c.beginPath()
c.arc(positions[i],canvas.height/2,radius,0,Math.PI * 2,false)
c.fillStyle = "green"
c.fill()
}
}
}
function choose(choices) {
var index = Math.floor(Math.random() * choices.length);
return choices[index];
}
function win_animation(){
redraw_window(null)
sleep(300)
redraw_window(light.pos)
sleep(300)
redraw_window(null)
sleep(300)
redraw_window(light.pos)
}
var light = new Light(random(0,9),choose([-1,1]))
function main(){
var FPS = 60
var SPEED = 0.5
var COOLDOWN = FPS * 0.25
var SCORE_TO_WIN = 5
var right_player_points = 0
var left_player_points = 0
var frame = 0
var right_player_cooldown = 0
var left_player_cooldown = 0
var keys_pressed = []
var right_player_key = "ShiftRight"
var left_player_key = "ShiftLeft"
var right_player_cooldown = 0
var left_player_cooldown = 0
var playing = true
//handles cooldown and keys pressed list
window.addEventListener("keydown",(event)=>{
if (event.code == right_player_key && is_not_in(right_player_key,keys_pressed)){
if (right_player_cooldown == 0){
right_player_cooldown = COOLDOWN
keys_pressed.push(event.code)
}
}
if (event.code == left_player_key && is_not_in(left_player_key,keys_pressed)){
if (left_player_cooldown == 0){
left_player_cooldown = COOLDOWN
keys_pressed.push(event.code)
}
}
})
//runs fps times per second
var run = setInterval(run,1000 / FPS)
function run(){
frame += 1
if (left_player_cooldown > 0){
left_player_cooldown -= 1
}
if (right_player_cooldown > 0){
right_player_cooldown -= 1
}
//runs SPEED times per second
if (frame >= FPS * SPEED){
frame = 0
if (!is_not_in(right_player_key,keys_pressed) && light.pos == 9){
right_player_points += 1
**VVV THIS IS WHERE I AM HAVING MY ISSUE VVV**
redraw_window(null);
alert("right player:" + right_player_points.toString())
if (right_player_points >= SCORE_TO_WIN){
alert("right player Wins")
right_player_points = 0
left_player_points = 0
light = new Light(random(0,9),choose([-1,1]))
}
}
if (!is_not_in(left_player_key,keys_pressed) && light.pos == 0){
left_player_points += 1
light = new Light(random(0,9),choose([-1,1]))
alert("left player:" + left_player_points.toString())
if (left_player_points >= SCORE_TO_WIN){
alert("left player wins")
left_player_points = 0
right_player_points = 0
}
}
light.move()
redraw_window(light.pos)
keys_pressed = []
}
}
}
main() ```
The main issue I can see here is that you have a variable and a function both named run. The setInterval call is being overwritten with the function definition. I recommend you rename the variable run to runInterval.
Change
var run = setInterval(run, 1000 / FPS)
to
var runInterval = setInterval(run, 1000 / FPS)
See if that helps.
So I have write a script for my portfolio website to scroll to section by index. It works on every tested browser and smartphone but on a mac device it does not work probably instead to scroll to the next sections it is going automatically to the second next section.
Hopefully someone can help me.
var anchorPoints = [];
var anchorLocation = [];
var anchorIndex = 0;
var waiting = false;
var canScroll = true;
var offset = 0
window.onload = function () {
anchorPoints = document.getElementsByClassName("js-anchor");
for (i = 0; i < anchorPoints.length; i++) {
getLocation = anchorPoints[i].getBoundingClientRect();
getLocation = getLocation.top - offset;
anchorLocation.push(parseInt(getLocation));
}
}
$(document).on('mousewheel DOMMouseScroll', function (e) {
if (detectMobile() == true) {
return;
}
if ((waiting || canScroll == false)) {
return;
}
e.preventDefault();//prevent the default mousewheel scrolling
var active = $('section.active');
var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;
waiting = true;
if (delta < 0) {
anchorIndex += 1;
if (anchorIndex > (anchorPoints.length - 1)) {
anchorIndex = 0;
}
scrollTo({
top: anchorLocation[anchorIndex],
left: 0,
behavior: 'smooth'
});
console.log(anchorIndex);
console.log('scrolling down');
} else {
anchorIndex -= 1;
if (anchorIndex < 0) {
anchorIndex = anchorPoints.length - 1;
}
scrollTo({
top: anchorLocation[anchorIndex],
left: 0,
behavior: 'smooth'
});
console.log(anchorIndex);
console.log('scrolling up');
}
setTimeout(function () {
waiting = false;
}, 1000);
});
My goal is, if a page contains the specified button, click it, and increase the amt_clicked by 1. When amt_clicked is greater than 15, wait for 60 seconds and reset amt_clicked. I have no idea how do this if statement. Example:
var amt_clicked = 0;
while (1) {
while (amt_clicked < 15) {
if (button found) { // this is where I am lost
iimPlay("TAG POS={{amt_clicked}} TYPE=BUTTON ATTR=TXT:Get");
amt_clicked++;
}
}
iimPlay("WAIT SECONDS=60");
amt_clicked = 0;
}
This will run 20 times per second, using the window.setInterval() function:
var amt_clicked = 0;
var amt_cooldown = 1200;
setInterval(function(){
if (amt_cooldown === 0)
amt_cooldown = 1200;
else if (amt_cooldown < 1200)
amt_cooldown -= 1;
else if (amt_clicked > 15) {
amt_clicked = 1;
amt_cooldown -= 1;
} else {
amt_clicked -= 1;
//Click
}, 50);
You can use combination of setInterval and setTimeout.
I have added comments to code for you to understand.
var amt_clicked = 0;
var setTimeoutInProcess = false;
//processing the interval click function
setInterval(() => {
checkButtonAgain();
}, 200);
function checkButtonAgain() {
var element = document.getElementById('iNeedtoBeClicked');
//if clicked 15 times then need to wait for 60 seconds
if (amt_clicked === 15) {
if (!setTimeoutInProcess) {
setTimeoutInProcess = true;
setTimeout(function() {
//resetting the amt-clicked
amt_clicked = 0;
setTimeoutInProcess = false;
}, 60000);
} else {
console.log('waiting');
}
} else if (typeof(element) != 'undefined' && element != null) {
//triggering click and increasing the amt_clicked
element.click();
amt_clicked++;
}
console.log(amt_clicked);
}
<button id="iNeedtoBeClicked">Click ME Button</button>
While using the mobile mode in Chrome dev tools, everything works fine. However, as soon as I upload my code to the server and try it on my iPhone, it is unresponsive.
Here is the a link to the unresponsive app and below is the code for my event listeners..
Link: Running App
Code:
// touch timer to stop and start
time.addEventListener('touchstart', (e) => {
if (running === false){
running = true;
timer = setInterval(startTimer, 100);
}
else {
running = false;
clearInterval(timer);
}
});
// touch '+' to increase speed by 0.5 mph
up.addEventListener('touchstart', (e) => {
mph += 0.5;
speed.innerHTML = `${mph.toFixed(1)} mph`
});
// touch '-' to decrease speed by 0.5 mph
down.addEventListener('touchstart', (e) => {
if (mph >= 0.5){
mph -= 0.5;
speed.innerHTML = `${mph.toFixed(1)} mph`
}
});
//Gathers start position for finger swipe
speedRow.addEventListener('touchstart', (e) => {
xStart = e.changedTouches[0].pageX;
});
// Swipe finger to change speed
speedRow.addEventListener('touchmove', (e) => {
e.preventDefault();
xEnd = e.changedTouches[0].pageX;
if (xStart < xEnd){
mph += (Math.abs(xEnd - xStart)/1500)
}
else if (xStart > xEnd && mph > 0) {
mph -= (Math.abs(xEnd - xStart)/1500)
}
speed.innerHTML = `${mph.toFixed(1)} mph`
});
Not sure if this answers your question, but mac desktop safari is throwing an error when your JS loads because "speed" is already a property on window that it doesn't want overwritten. It's likely that iOS safari is throwing the same error. EDIT: And that error may be stopping code execution.
You should either namespace all those constants in an object. Or wrap all of your code in an iffy to prevent that. You can't be sure what properties will already exist in the global context.
Update:
Also, on the live site you're not passing 'e' in the 'touchstart' listener for speedRow, that could also be stopping execution on iOS safari.
UPDATE WITH THE ACTUAL ANSWER
Just tested the live site on my iPhone. iOS safari is erroring and stopping execution because you're trying to overwrite the global time variable. Looks like it's working in chrome because Chrome doesn't have a global time variable. If you wrap your code in a iffy like this it will work:
(function () {var mili = 0;
var sec = 0;
var min = 0;
var running = false;
var timer;
var mph = 0;
var distanceTraveled = 0;
var xStart;
var xEnd;
const navbar = document.getElementById('navbar');
const time = document.getElementById('time');
const elapsedTime = document.getElementById('time');
const up = document.getElementById('increase');
const down = document.getElementById('decrease');
const runSpeed = document.getElementById('speed');
const distance = document.getElementById('distance');
const speedRow = document.getElementById('speedRow');
function startTimer(){
mili += 100;
if (mili > 999){
mili = 0;
sec +=1;
distanceTraveled += (1/3600) * mph;
if (sec > 59){
sec = 0;
min += 1;
}
}
if (sec < 10){
var strSec = `0${sec}`;
}
else{
strSec =`${sec}`;
}
if (min < 10){
var strMin = `0${min}`;
}
else{
strMin =`${min}`;
}
if(mili < 100){
if(mili === 0){
strMili = '00'
}
else{
var strMili = `${mili}`;
strMili = strMili.slice(0, -1);
strMili = `0${strMili}`;
}
}
else{
strMili = `${mili}`;
strMili = strMili.slice(0, -1);
}
elapsedTime.innerHTML = `${strMin}:${strSec}:${strMili}`;
distance.innerHTML = `${distanceTraveled.toFixed(2)} miles`;
}
time.addEventListener('touchstart', () => {
if (running === false){
running = true;
timer = setInterval(startTimer, 100);
}
else {
running = false;
clearInterval(timer);
}
});
up.addEventListener('touchstart', () => {
mph += 0.5;
runSpeed.innerHTML = `${mph.toFixed(1)} mph`
});
down.addEventListener('touchstart', () => {
if (mph >= 0.5){
mph -= 0.5;
runSpeed.innerHTML = `${mph.toFixed(1)} mph`
}
});
speedRow.addEventListener('touchstart', (e) => {
xStart = e.changedTouches[0].pageX;
});
speedRow.addEventListener('touchmove', (e) => {
e.preventDefault();
xEnd = e.changedTouches[0].pageX;
if (xStart < xEnd){
mph += (Math.abs(xEnd - xStart)/1500)
}
else if (xStart > xEnd && mph > 0) {
mph -= (Math.abs(xEnd - xStart)/1500)
}
runSpeed.innerHTML = `${mph.toFixed(1)} mph`
});
})()
If you have a mac you can use desktop Safari's inspector to debug mobile safari.
This script searches for and grabs the closest element in a collection and scrolls to it depending on what key you press. It is set to scroll to the next and previous post_block elements on IP.Board forums. It also jumps through page with other keys.
It works exactly as expected in Chrome, but the scrolling doesn't work in Firefox. The page jumping does. It does not throw any errors, it just doesn't work.
Relevant code:
// Questionable functions
function getPosition(element) {
var xPosition = 0,
yPosition = 0;
while (element) {
xPosition += (element.offsetLeft
+ element.clientLeft);
yPosition += (element.offsetTop
+ element.clientTop);
element = element.offsetParent;
}
return {x: xPosition, y: yPosition};
}
Math.easeInOutQuad = function (time, start, change, duration) {
time /= duration / 2;
if (time < 1) {
return change / 2 * time * time + start;
}
time--;
return -change / 2 * (time * (time - 2) - 1) + start;
};
function scrollTo(element, to, duration) {
var start = element.scrollTop,
change = to - start,
currentTime = 0,
increment = 1;
var animateScroll = function() {
var val = Math.easeInOutQuad(currentTime, start, change, duration);
element.scrollTop = val;
currentTime += increment;
if (currentTime <= duration) {
setTimeout(animateScroll, increment);
}
};
animateScroll();
}
function scrollToNext(context, collection, dir) {
var item,
i = 0;
switch (dir) {
case 'up':
for (i = collection.length - 1; i >= 0; i--) {
item = collection[i];
if (getPosition(item).y < context.scrollTop - 2) {
scrollTo(context, getPosition(item).y, 30);
break;
}
}
break;
case 'down':
default:
for (i = 0; i < collection.length; i++) {
item = collection[i];
if (getPosition(item).y > context.scrollTop + 2) {
scrollTo(context, getPosition(item).y, 30);
break;
}
}
break;
}
}
// Trigger in keydown handler
if (event.keyCode === shortcuts['next_post'] && checkModifiers('next_post', event, shortcuts)) {
event.preventDefault();
scrollToNext(document.body, document.getElementsByClassName('post_block'), 'down');
} else if (event.keyCode === shortcuts['previous_post'] && checkModifiers('previous_post', event, shortcuts)) {
event.preventDefault();
scrollToNext(document.body, document.getElementsByClassName('post_block'), 'up');
}
Any ideas on what's wrong?
Found it. Firefox uses document.documentElement for its scrolling while Chrome uses document.body.
I had to use both to get it to work in all browsers.