Here is my code. https://www.jsfiddle.net/tpov743w/
I'm trying to accomplish multiple circular progress bars. The idea is to have them work dynamically, by adding additional progressCircle_# objects with different percentage values whenever needed. As you can see the progress bars load the data and executes the animation, but when I inspect the element in the browser I notice countless "ReferenceError: start is not defined". I need help in overcoming this problem. Thanks for any suggestions.
var progressCircle_1 = {
procent: 89,
startFrom: 0,
incrementBy: 1,
canvasId: 'canvas',
procentId: 'procent',
funct: function() {
var start = setInterval(function() {
draw.call(progressCircle_1)
}, 50);
}
}
var progressCircle_2 = {
procent: 59,
startFrom: 0,
incrementBy: 1,
canvasId: 'canvas1',
procentId: 'procent1',
funct: function() {
var start = setInterval(function() {
draw.call(progressCircle_2)
}, 50);
}
}
progressCircle_1.funct();
progressCircle_2.funct();
function draw() {
(this.startFrom < this.procent) ? this.startFrom++: clearInterval(start);
var getCanvas = document.getElementById(this.canvasId).getContext('2d');
var getNumber = document.getElementById(this.procentId).innerHTML = this.incrementBy++;
getCanvas.beginPath();
getCanvas.arc(250, 250, 100, 0, 0.06283185307179587 * this.startFrom);
getCanvas.lineWidth = '15';
getCanvas.strokeStyle = "white";
getCanvas.lineCap = "round";
getCanvas.stroke();
};
#canvas {
border: 1px solid red;
transform: rotate(0deg);
}
#procent {
font-size: 65px;
color: white;
position: absolute;
top: 160px;
left: 200px;
}
#procent::after {
content: '%';
}
.container {
background-color: lightblue;
height: 500px;
width: 500px;
}
#canvas1 {
border: 1px solid red;
transform: rotate(0deg);
}
#procent1 {
font-size: 65px;
color: black;
position: absolute;
top: 660px;
left: 200px;
}
#procent1::after {
content: '%';
}
.container1 {
background-color: lightgrey;
height: 500px;
width: 500px;
}
#canvasProgressBar {
position: relative;
top: 100px;
left: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="Interaktywny poradnik szybkiego startu dla Brackets.">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<canvas id="canvas" width="500" height="500">
</div>
<p id="procent"></p>
<div class="container1">
<canvas id="canvas1" width="500" height="500">
</div>
<p id="procent1"></p>
<script src="main.js"></script>
</body>
</html>
Just add var start at the top instead of inside the funct function
Complete JS Code:
var start
var progressCircle_1 = {
procent:89,
startFrom:0,
incrementBy:1,
canvasId:'canvas',
procentId:'procent',
funct: function(){
start = setInterval(function(){draw.call(progressCircle_1)},50);
}
}
var progressCircle_2 = {
procent:59,
startFrom:0,
incrementBy:1,
canvasId:'canvas1',
procentId:'procent1',
funct: function(){
start = setInterval(function(){draw.call(progressCircle_2)},50);
}
}
progressCircle_1.funct();
progressCircle_2.funct();
function draw(){
(this.startFrom<this.procent)?this.startFrom++:clearInterval(start);
var getCanvas = document.getElementById(this.canvasId).getContext('2d');
var getNumber = document.getElementById(this.procentId).innerHTML=this.incrementBy++;
getCanvas.beginPath();
getCanvas.arc(250,250,100,0,0.06283185307179587*this.startFrom);
getCanvas.lineWidth='15';
getCanvas.strokeStyle="white";
getCanvas.lineCap="round";
getCanvas.stroke();
};
You need to store the interval id as well: https://jsfiddle.net/x8Lypm2j/
var progressCircle_1 = {
procent:89,
startFrom:0,
incrementBy:1,
canvasId:'canvas',
procentId:'procent',
intervalId: 0,
funct: function(){
this.intervalId = setInterval(function(){draw.call(progressCircle_1)},50);
}
}
var progressCircle_2 = {
procent:59,
startFrom:0,
incrementBy:1,
canvasId:'canvas1',
procentId:'procent1',
intervalId: 0,
funct: function(){
this.intervalId = setInterval(function(){draw.call(progressCircle_2)},50);
}
}
progressCircle_1.funct();
progressCircle_2.funct();
function draw(){
(this.startFrom<this.procent)?this.startFrom++:clearInterval(this.intervalId);
var getCanvas = document.getElementById(this.canvasId).getContext('2d');
var getNumber = document.getElementById(this.procentId).innerHTML=this.incrementBy++;
getCanvas.beginPath();
getCanvas.arc(250,250,100,0,0.06283185307179587*this.startFrom);
getCanvas.lineWidth='15';
getCanvas.strokeStyle="white";
getCanvas.lineCap="round";
getCanvas.stroke();
};
Pass start to the calling function, you specify that the function's this is progressCircle_1 but it doesn't have a start attribute, so you need to pass the timeoutId(start) to the calling function.
var progressCircle_1 = {
procent:89,
startFrom:0,
incrementBy:1,
canvasId:'canvas',
procentId:'procent',
funct: function(){
var start = setInterval(function(){draw.call(progressCircle_1,start)},50);
}
}
var progressCircle_2 = {
procent:59,
startFrom:0,
incrementBy:1,
canvasId:'canvas1',
procentId:'procent1',
funct: function(){
var start = setInterval(function(){draw.call(progressCircle_2,start)},50);
}
}
progressCircle_1.funct();
progressCircle_2.funct();
function draw(start){
(this.startFrom<this.procent)?this.startFrom++:clearInterval(start);
var getCanvas = document.getElementById(this.canvasId).getContext('2d');
var getNumber = document.getElementById(this.procentId).innerHTML=this.incrementBy++;
getCanvas.beginPath();
getCanvas.arc(250,250,100,0,0.06283185307179587*this.startFrom);
getCanvas.lineWidth='15';
getCanvas.strokeStyle="white";
getCanvas.lineCap="round";
getCanvas.stroke();
};
Related
I'm trying to figure out how to make a dialogue system that shows the text and after you click it removes all the text in the box and new text appears in its place. (I want to be able to do this multiple times)
var container = document.querySelector(".text");
var speeds = {
pause: 400,
slow: 120,
normal: 50,
fast: 20,
superFast: 10
};
var textLines = [{
speed: speeds.slow,
string: "this is a test"
},
{
speed: speeds.pause,
string: "",
pause: true
},
{
speed: speeds.normal,
string: "pls help me"
},
{
speed: speeds.fast,
string: "idk what im doing",
classes: ["red"]
},
{
speed: speeds.normal,
string: ":("
}
];
var characters = [];
textLines.forEach((line, index) => {
if (index < textLines.length - 1) {
line.string += " ";
}
line.string.split("").forEach((character) => {
var span = document.createElement("span");
span.textContent = character;
container.appendChild(span);
characters.push({
span: span,
isSpace: character === " " && !line.pause,
delayAfter: line.speed,
classes: line.classes || []
});
});
});
function revealOneCharacter(list) {
var next = list.splice(0, 1)[0];
next.span.classList.add("revealed");
next.classes.forEach((c) => {
next.span.classList.add(c);
});
var delay = next.isSpace && !next.pause ? 0 : next.delayAfter;
if (list.length > 0) {
setTimeout(function() {
revealOneCharacter(list);
}, delay);
}
}
setTimeout(() => {
revealOneCharacter(characters);
}, 600)
const btn = document.getElementById('btn');
html,
body {
height: 100%;
width: 100%;
}
.text span {
opacity: 0;
}
.text span.revealed {
opacity: 1;
}
.text span.green {
color: #27ae60;
}
.text span.red {
color: #ff0000;
}
body {
background: #3498db;
padding: 3em;
font-family: 'Sora', monospace;
}
.text {
font-size: 6vw;
word-spacing: 0.2em;
margin: 0 auto;
background: #fff;
padding: 1em;
border-bottom: 1vw solid #0e6dad;
position: relative;
line-height: 1.2em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="text">
</div>
<button id="textchanger"> continue </button>
<script src="script.js">
}
</script>
<script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script>
</body>
</html>
so far all I'm able to make from this is a single phrase appear on the screen and that's about it. to change it, I have to go in manually.
I make (almost) all the js from scratch because it would have been really hard to refactor your code in order to achieve what you want, what I've done seems to work, it is pretty straightforward :
const container = document.querySelector(".text");
const btn = document.querySelector("#textchanger");
// rename speeds in delays which is more coherant
const delays = {
slow: 120,
normal: 50,
fast: 20,
superFast: 10
};
const textLines = [
{
delay: delays.slow,
string: "this is a test"
},
{
delay: delays.normal,
string: "pls help me"
},
{
delay: delays.fast,
string: "idk what im doing",
classes: ["red"]
},
{
delay: delays.normal,
string: ":("
}
];
const revealLine = (lineIndex = 0) => {
const line = textLines[lineIndex]
let charIndex = 0
const nextChar = () => {
const char = line.string[charIndex]
const span = document.createElement('span')
span.textContent = char
span.classList.add(...(line.classes ?? []))
container.appendChild(span)
charIndex++
if (charIndex < line.string.length)
setTimeout(nextChar, line.delay);
else if (lineIndex + 1 < textLines.length) {
const cb = () => {
// remove this listener to display the next one
btn.removeEventListener('click', cb)
// clear the container
Array.from(container.children).forEach(el => el.remove())
// reveal the next line
revealLine(lineIndex + 1)
}
btn.addEventListener('click', cb)
}
}
nextChar()
}
revealLine()
html,
body {
height: 100%;
width: 100%;
}
.text span.green {
color: #27ae60;
}
.text span.red {
color: #ff0000;
}
body {
background: #3498db;
padding: 3em;
font-family: 'Sora', monospace;
}
.text {
font-size: 6vw;
word-spacing: 0.2em;
margin: 0 auto;
background: #fff;
padding: 1em;
border-bottom: 1vw solid #0e6dad;
position: relative;
line-height: 1.2em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="text">
</div>
<button id="textchanger"> continue </button>
</body>
</html>
I'm attempting to make these balls move along the border of this parent div. The parent div is a pill/discorectangle. I'm sure there must be a way to do this using some trig or equation of a circle. So the straight sides are 200px long and the radius of each semi circle is 100px. So from 0-100px and 300-400px the top style needs to be calculated for each ball. Has anyone done anything similar or have any advice?
HTML:
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<button id="start_stop">Orbit</button>
<div id="oval">
<div id="ball0" class="ball"></div>
<div id="ball1" class="ball"></div>
<div id="ball2" class="ball"></div>
<div id="ball3" class="ball"></div>
</div>
<script src="orbit.js"></script>
</html>
CSS:
#oval {
position: absolute;
margin-top: 200px;
height: 200px;
width: 400px;
border: 3px solid black;
border-radius: 400px/400px;
right: 50%;
transform: translate(50%, -50%);
}
.ball {
height: 30px;
width: 30px;
border-radius: 30px;
position: absolute;
}
#ball0 {
left:270px;
top:185px;
/*right: 100px;
bottom: -15;*/
background-color: blue;
}
#ball1 {
left:100px;
/* bottom:-15px; */
top: 185px;
background-color: green;
}
#ball2 {
top:-15px;
/* right: 100px; */
left: 270px;
background-color: yellow;
}
#ball3 {
top:-15px;
left: 100px;
background-color: red;
}
JS:
var oval = document.getElementById('oval');
var balls = document.getElementsByClassName('ball');
var run_animation = false;
var req;
document.getElementById("start_stop").addEventListener("click", toggle);
function toggle() {
run_animation = !run_animation
if(run_animation) {
req = window.requestAnimationFrame(orbit);
}
}
console.log(balls.length);
var max_x = oval.clientWidth; // - 100;
var min_x = 0;
var step = 0;
var map = {
"ball0": {"top": 185, "left": 270, forward: true},
"ball1": {"top": 185, "left": 100, forward: true},
"ball2": {"top": -15, "left": 270, forward: false},
"ball3": {"top": -15, "left": 100, forward: false}
}
function get_y(x){
//some math here?
// return 100 * Math.sin(x);
// return Math.sqrt(100**2 + x**2);
}
function orbit() {
if (run_animation){
for(var i=0; i<balls.length; i++){
var curr_left = map["ball"+i].left;
if (curr_left >= max_x) map["ball"+i].forward = false;
if (curr_left <= min_x ) map["ball"+i].forward = true;
if(map["ball"+i].forward){
map["ball"+i].left += 3;
}
else {
forward = false
map["ball"+i].left -= 3;
}
//left edge - curve around semicircle
if(map["ball"+i].left <= 100) {
// map["ball"+i].top = -1 * get_y(map["ball"+i].left);
}
//right edge - curve around semicircle
if(map["ball"+i].left >= 300) {
// map["ball"+i].top = -1 * get_y(map["ball"+i].left);
}
balls[i].style.left = map["ball"+i].left + 'px';
balls[i].style.top = map["ball"+i].top + 'px';
}
req = window.requestAnimationFrame(orbit);
}
else {
console.log("cancel");
window.cancelAnimationFrame(req);
}
}
/* orbit(); */
req = window.requestAnimationFrame(orbit);
https://jsfiddle.net/gzjfxtbu/2/
Well I did it. Not sure if this is the best way to do this or not. I'd still like to figure out any other methods to accomplish this. Eventually I was going to turn the balls into actual divs containing info and images. So I'm not sure if the SVG route is the best?
Hopefully this can help someone.
JS:
var oval = document.getElementById('oval');
var balls = document.getElementsByClassName('ball');
var run_animation = false;
var req;
document.getElementById("start_stop").addEventListener("click", toggle);
function toggle() {
run_animation = !run_animation
if(run_animation) {
req = window.requestAnimationFrame(orbit);
}
}
console.log(balls.length);
var max_x = oval.clientWidth;
var min_x = 0;
var step = 0;
var map = {
"ball0": {"top": 185, "left": 270, forward: false},
"ball1": {"top": 185, "left": 100, forward: false},
"ball2": {"top": -15, "left": 270, forward: true},
"ball3": {"top": -15, "left": 100, forward: true}
}
function get_y(x){
//some math here?
// return 100 * Math.sin(x);
return 1 * (Math.sqrt(100**2 - (100-x)**2));
}
function get_y2(x) {
return 1 * (Math.sqrt(100**2 - (300-x)**2));
}
function orbit() {
if (run_animation){
for(var i=0; i<balls.length; i++){
var curr_left = map["ball"+i].left;
if (curr_left >= max_x) map["ball"+i].forward = false;
if (curr_left <= min_x ) map["ball"+i].forward = true;
if(map["ball"+i].forward){
map["ball"+i].left += 3;
}
else {
map["ball"+i].left -= 3;
}
//left edge - curve around semicircle
if(map["ball"+i].left <= 85 && !map["ball"+i].forward ) {
map["ball"+i].top = 1*get_y(map["ball"+i].left) + 85;
}
else if(map["ball"+i].left <= 85 && map["ball"+i].forward ) {
map["ball"+i].top = -1*get_y(map["ball"+i].left) + 85;
}
//right edge - curve around semicircle
if(map["ball"+i].left >= 315 && map["ball"+i].forward) {
map["ball"+i].top = -1*get_y2(map["ball"+i].left) + 85;
}
else if(map["ball"+i].left >= 315 && !map["ball"+i].forward) {
map["ball"+i].top = get_y2(map["ball"+i].left) + 85;
}
balls[i].style.left = map["ball"+i].left + 'px';
balls[i].style.top = map["ball"+i].top + 'px';
}
req = window.requestAnimationFrame(orbit);
}
else {
console.log("cancel");
window.cancelAnimationFrame(req);
}
}
/* orbit(); */
req = window.requestAnimationFrame(orbit);
HTML:
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<button id="start_stop">Orbit</button>
<div id="oval">
<div id="ball0" class="ball">0</div>
<div id="ball1" class="ball">1</div>
<div id="ball2" class="ball">2</div>
<div id="ball3" class="ball">3</div>
</div>
<script src="orbit.js"></script>
</html>
CSS:
#oval {
position: absolute;
margin-top: 100px;
height: 200px;
width: 400px;
border: 3px solid black;
border-radius: 400px/400px;
right: 50%;
transform: translate(50%, -50%);
}
.ball {
height: 30px;
width: 30px;
border-radius: 30px;
position: absolute;
}
#ball0 {
left:270px;
top:185px;
/*right: 100px;
bottom: -15;*/
background-color: blue;
}
#ball1 {
left:100px;
/* bottom:-15px; */
top: 185px;
background-color: green;
}
#ball2 {
top:-15px;
/* right: 100px; */
left: 270px;
background-color: yellow;
}
#ball3 {
top:-15px;
left: 100px;
background-color: red;
}
https://jsfiddle.net/nwm3r4he/3/
I was hoping a kind soul might be able to assist.
I have a slideshow which auto-plays, my intention is to have the next button act as a visual aid, highlighting the when the next frame is coming in.
sync with the autoPlay interval.
Right now, the update func concludes too early, which is the best I have managed to do. Typically I have the clearInterval and setInterval conflicting creating shuddering animations.
What am I doing wrong?
<!doctype html>
<html lang="en">
<head>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
.carousel_wrapper {
height: 50vh;
width: 100%;
position: relative;
}
.carousel_frame {
width: 100%; height: 100%;
}
.carousel_controls {
position: absolute;
bottom: 0;
left: 0;
}
.prev, .next {
height: 50px;
width: 100px;
background: aqua;
display: inline-block;
}
.next {
background: linear-gradient(to right, white 0%, aqua);
}
.carousel_frame:nth-child(1) {
background: red;
}
.carousel_frame:nth-child(2) {
background: blue;
}
.carousel_frame:nth-child(3) {
background: green;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', () => {
const homepage_carousel = new carousel();
});
function carousel() {
const carousel = document.getElementsByClassName('.carousel_wrapper')[0];
const frames = [...document.getElementsByClassName('carousel_frame')];
const prev_button = document.getElementsByClassName('prev')[0];
const next_button = document.getElementsByClassName('next')[0];
this.frameIndex = 1;
prev_button.addEventListener('click', () => {
this.resetPlay();
this.move(-1);
})
next_button.addEventListener('click', () => {
this.resetPlay();
this.move(+1);
})
this.hideAll = () => {
frames.forEach((f) => {
f.style.display = 'none';
});
}
this.show = () => {
this.hideAll();
frames[this.frameIndex - 1].style.display = 'block';
this.update_bg();
}
this.move = (amount) => {
this.frameIndex += amount;
this.frameIndex = (this.frameIndex > frames.length ? 1 : (this.frameIndex < 1) ? frame.lengh : this.frameIndex);
this.show();
}
this.update_bg = () => {
let w = 1;
let test = setInterval(adjust, 10);
function adjust() {
if (w >= 100) {
clearInterval(test);
w = 0;
} else {
w++;
next_button.style.backgroundImage = `linear-gradient(to right, white ${w}%, aqua)`
}
}
setInterval(adjust, 3000);
}
this.autoPlay = () => {
this.move(+1)
this.update_bg();
}
this.resetPlay = () => {
// clearInterval(timer);
// timer = setInterval(this.autoPlay(), 4000);
}
this.show();
const timer = setInterval(this.autoPlay, 3000);
}
</script>
</head>
<body>
<div class='carousel_wrapper'>
<div class='carousel_frame'>
<span>Headline</span>
<span>Description</span>
<span>CTA</span>
</div>
<div class='carousel_frame'>
<span>Headline</span>
<span>Description</span>
<span>CTA</span>
</div>
<div class='carousel_frame'>
<span>Headline</span>
<span>Description</span>
<span>CTA</span>
</div>
<div class='carousel_controls'>
<span class='prev'>Previous</span>
<span class='next'>
Next
</span>
</div>
</div>
</body>
</html>
Below this text is my code - I am trying to create the chrome dino game, and so far everything is going well, but I have one problem - after the red block jumps, the dino doesn't stop falling down - while it should. I don't understand where my problem is, as I wrote about the same code yesterday and everything worked just fine. The gravity function can be found in the JavaScript under // Gravity.
Notice how it's code is very similar to the jump function, but it doesn't work as good as the jump function. Any help would be appreciated!!!!!
// HTML Elements + Other Variables
const floor1 = document.getElementById("floor1");
const floor2 = document.getElementById("floor2");
const floor3 = document.getElementById("floor3");
const floor4 = document.getElementById("floor4");
const floor5 = document.getElementById("floor5");
const floor6 = document.getElementById("floor6");
const floor7 = document.getElementById("floor7");
const dino = document.getElementById("dino");
const highBird = document.getElementById("highBird");
const lowBird = document.getElementById("lowBird");
const wideCactus = document.getElementById("wideCactus");
const thinCactus = document.getElementById("thinCactus");
let jump = 0;
// Floor Function
setTimeout(function () {
floor1.classList.add("floor1Animation");
}, 0);
setTimeout(function () {
floor2.classList.add("floor2Animation");
}, 1000);
setTimeout(function () {
floor3.classList.add("floor3Animation");
}, 2000);
setTimeout(function () {
floor4.classList.add("floor4Animation");
}, 3000);
setTimeout(function () {
floor5.classList.add("floor5Animation");
}, 4000);
setTimeout(function () {
floor6.classList.add("floor6Animation");
}, 5000);
setTimeout(function () {
floor7.classList.add("floor7Animation");
}, 6000);
// Jump
document.onkeydown = function (event) {
let key = event.key;
if (key == "ArrowUp") {
let jumpCount = 0;
if (dino.offsetTop == 95) {
let jumpInterval = setInterval(function () {
dino.style.top = (dino.offsetTop - 5) + "px";
jumpCount += 1;
jump = true;
if (jumpCount == 20) {
clearInterval(jumpInterval);
jump = false;
jumpCount = 0;
}
}, 10);
}
}
}
// Gravity
setInterval(function () {
if (jump == false) {
let jumpGravity = setInterval(function () {
dino.style.top = (dino.offsetTop + 5) + "px";
}, 10);
if (dino.offsetTop == 95) {
clearInterval(jumpGravity);
}
}
}, 10);
body {
margin: 0;
padding: 0;
justify-content: center;
align-items: center;
display: flex;
width: 100vw;
height: 100vh;
}
#gameBoard {
width: 1000px;
height: 150px;
border: 2px solid black;
overflow: hidden;
margin: auto;
position: relative;
background-color: white;
}
#dino {
width: 30px;
height: 50px;
background-color: red;
left: 10px;
top: 95px;
position: absolute;
}
.floorBackground {
position: relative;
height: 10px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.floor {
position: absolute;
top: 140px;
height: 10px;
width: 200px;
}
#floor1 {
right: -200px;
background-color: red;
}
.floor1Animation {
animation: floorAnimation 6s infinite linear;
}
#floor2 {
right: -200px;
background-color: blue;
}
.floor2Animation {
animation: floorAnimation 6s infinite linear;
}
#floor3 {
right: -200px;
background-color: green;
}
.floor3Animation {
animation: floorAnimation 6s infinite linear;
}
#floor4 {
right: -200px;
background-color: purple;
}
.floor4Animation {
animation: floorAnimation 6s infinite linear;
}
#floor5 {
right: -200px;
background-color: brown;
}
.floor5Animation {
animation: floorAnimation 6s infinite linear;
}
#floor6 {
right: -200px;
background-color: orange;
}
.floor6Animation {
animation: floorAnimation 6s infinite linear;
}
#floor7 {
right: -200px;
background-color: yellow;
}
.floor7Animation {
animation: floorAnimation 6s infinite linear;
}
#keyframes floorAnimation {
from {
right: -200px;
}
to {
right: 1000px;
}
}
#keyframes jumping {
}
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>
Dino Game
</title>
<link rel = "stylesheet" type = "text/css" href = "DinoCSS.css">
</head>
<body>
<div id = "gameBoard">
<div id = "floor1" class = "floor">
<img src = "Pictures/dinoBackground.PNG" class = "floorBackground">
</div>
<div id = "floor2" class = "floor">
<img src = "Pictures/dinoBackground.PNG" class = "floorBackground">
</div>
<div id = "floor3" class = "floor">
<img src = "Pictures/dinoBackground.PNG" class = "floorBackground">
</div>
<div id = "floor4" class = "floor">
<img src = "Pictures/dinoBackground.PNG" class = "floorBackground">
</div>
<div id = "floor5" class = "floor">
<img src = "Pictures/dinoBackground.PNG" class = "floorBackground">
</div>
<div id = "floor6" class = "floor">
<img src = "Pictures/dinoBackground.PNG" class = "floorBackground">
</div>
<div id = "floor7" class = "floor">
<img src = "Pictures/dinoBackground.PNG" class = "floorBackground">
</div>
<div id = "dino"></div>
<div id = "highBird"></div>
<div id = "lowBird"></div>
<div id = "wideCactus"></div>
<div id = "thinCactus"></div>
</div>
<script type = "text/javascript" src = "DinoJS.js"></script>
</body>
</html>
You should try simplifying your code, it may make the issue easier to find or it may even remove it entirely.
I'd suggest using a velocity system, where every frame you adjust the dino's offsetTop by the dino's current velocity, and then subtract the gravity amount from the dino's current velocity.
This causes the velocity to decrease at a constant rate, but the dino's offsetTop position to decrease at an exponential pace, mimicking real gravity.
Then, to make collision work, just test if the dino is at or above the correct "offsetTop" value before subtracting the gravity. If you find that the dino is below the ground, just set the offsetTop to the ground level and clear the velocity.
I'd also suggest moving your game over to the HTML5 Canvas API, since then you just have to deal with properties of objects rather than DOM element style attributes.
Velocity example with canvas:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var x = 10;
var y = 10;
var VelocityX = 0;
var VelocityY = 0;
const gravity = 0.75;
// width and height of the square
var width = 10;
var height = 10;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
x += VelocityX;
if( x > 500) {
x = 0;
}
if ( y >= 450 ) {
y = 450
VelocityY = 0
} else {
y += VelocityY;
VelocityY += gravity; // Higher values = lower position on canvas
}
ctx.fillRect(x, y, width, height);
}
setInterval(animate, 1000 / 60); // 60 FPS
#canvas {
border: 1px solid black;
}
<canvas id="canvas" width="500" height="500"></canvas>
JSFiddle
I'm trying to create a flow digram using data from the server, I am able to draw the states and connection correctly, states are draggable but same is not working with the connectors.
please see the sample code below.
<html>
<head>
<script src="../../lib/jquery-1.9.0.js"></script>
<script src="../../lib/jquery-ui-1.9.2-min.js"></script>
<script src="../../lib/jquery.jsPlumb-1.4.1-all.js"></script>
<script>
$(document).ready(function() {
var i = 0;
var top = 50;
var left = 500;
for (var j = 0; j <= 5; j++) {
top += 150;
var newState = $('<div>').attr('id', 'state' + j).addClass('item');
var title = $('<div>').addClass('title').text('State ' + j);
newState.css({
'top': top,
'left': left
});
newState.append(title);
$('#container').append(newState);
if (j > 0) {
var firstInstance = jsPlumb.getInstance();
firstInstance.importDefaults({
Connector: ["Flowchart", {curviness: 150}],
Anchors: ["BottomCenter", "TopCenter"]
});
firstInstance.connect({
endpoint: "Rectangle",
source: "state" + (j-1),
target: "state" + (j),
paintStyle: {lineWidth: 3, strokeStyle: 'black'},
overlays: [
"Arrow",
["Label", {location: 0.25, id: "myLabel"}]
]
});
}
jsPlumb.draggable(newState, {
containment: 'parent'
});
}
});
</script>
<style type="text/css">
.item {
border: 1px solid black;
background-color: #ddddff;
}
#container {
border: 1px solid gray;
width: 1500px;
height: 1500px;
}
.title {
padding: 10px;
cursor: move;
}
.item {
position: absolute;
border: 1px solid black;
background-color: #ddddff;
}
</style>
<title>Getting started with jsPlumb</title>
</head>
<body>
<div id="container"></div>
</body>
I need to make the connectors drag-able, any help is apprenticed.
issue is solved
used jsPlumb.connect() instesd of firstInstance.connect().