We Keep Coding

Collision detection not working as intended (Arrays, Javascript)

Ill start off by saying im not the best at explaining.
I have attached 2 images to help explain with my problem.
The problem is that the 'player' is colliding with the 'square 2' X position, when it is clearly not in range of the Y position. The green line shows where the player is colliding and stopping, (stopping as in if you hit a wall, you would stop). In image 2, below the black line, is the expected outcome, how do I achieve this? (Scroll for code)
Just in case you need to know, the enemy/player is 50x50px, the rectangle is 70x150px
My Code (JS):
blockX.forEach(blockX => { // left and right collision
blockY.forEach(blockY => {
if (enemy.y + enemy.h >= blockY && enemy.y <= blockY + rect.h) {
if (enemy.x + enemy.w >= blockX) {
if (enemy.x <= blockX + enemy.w) {
enemy.x = blockX - enemy.w
}
}
if (enemy.x <= blockX + rect.w + 13) {
if (enemy.x + enemy.w >= blockX) {
enemy.x = blockX + rect.w + 13
}
}
}
})
})

First of all, you can simplify the code by resetting collision.cr at the beginning of the function, and then all you have to do is set it to true once if met condition, no need for any else
Second, you should have a single condition, that checks both x and y coordinates, not two separates (which by the way, in your code the second condition WILL overwrite previous condition's result, because of the else)
const elPlayer = document.getElementById("player");
const enemies = [
{
x: 100,
y: 34,
w: 100,
h: 150
},
{
x: 300,
y: 34,
w: 100,
h: 150
},
{
x: 140,
y: 54,
w: 100,
h: 50
}
];
window.addEventListener("mousemove", e =>
{
const player = {
x: e.x,
y: e.y,
w: 20,
h: 20
}
//colistion detection
for(let i = 0; i < enemies.length; i++)
{
const enemy = enemies[i];
const collide = (enemy.x < player.x + player.w &&
enemy.x + enemy.w > player.x &&
enemy.y < player.y + player.h &&
enemy.y + enemy.h > player.y)
elPlayer.classList.toggle("collide", collide);
if (collide)
break;
}
elPlayer.style.top = player.y + "px";
elPlayer.style.left = player.x + "px";
});
[...document.querySelectorAll(".enemy")].forEach((enemy, i) =>
{
enemy.style.left = enemies[i].x + "px";
enemy.style.top = enemies[i].y + "px";
enemy.style.width = enemies[i].w + "px";
enemy.style.height = enemies[i].h + "px";
});
.enemy
{
position: absolute;
background-color: pink;
border: 1px solid black;
}
#player
{
position: absolute;
width: 20px;
height: 20px;
background-color: green;
border: 1px solid black;
}
#player.collide
{
background-color: red;
}
<div class="enemy"></div>
<div class="enemy"></div>
<div class="enemy"></div>
<div id="player"></div>

jQuery code works on desktop, not in Android

My code moves a picture inside the div using the mouse. It works in a web browser on Windows. How can I change it so that it works in Android?
$(document).ready(function() {
var $bg = $('.bg-img'),
//data = $('#data')[0],
elbounds = {
w: parseInt($bg.width()),
h: parseInt($bg.height())
},
bounds = {
w: 1920 - elbounds.w,
h: 1080 - elbounds.h
},
origin = {
x: 0,
y: 0
},
start = {
x: 0,
y: 0
},
movecontinue = false;
function move(e) {
var inbounds = {
x: false,
y: false
},
offset = {
x: start.x - (origin.x - e.clientX),
y: start.y - (origin.y - e.clientY)
};
//data.value = 'X: ' + offset.x + ', Y: ' + offset.y;
inbounds.x = offset.x < 0 && (offset.x * -1) < bounds.w;
inbounds.y = offset.y < 0 && (offset.y * -1) < bounds.h;
if (movecontinue && inbounds.x && inbounds.y) {
start.x = offset.x;
start.y = offset.y;
$(this).css('background-position', start.x + 'px ' + start.y + 'px');
}
origin.x = e.clientX;
origin.y = e.clientY;
e.stopPropagation();
return false;
}
function handle(e) {
movecontinue = false;
$bg.unbind('mousemove', move);
if (e.type == 'mousedown') {
origin.x = e.clientX;
origin.y = e.clientY;
movecontinue = true;
$bg.bind('mousemove', move);
} else {
$(document.body).focus();
}
e.stopPropagation();
return false;
}
function reset() {
start = {
x: 0,
y: 0
};
$(this).css('backgroundPosition', '0 0');
}
$bg.bind('mousedown mouseup mouseleave', handle);
$bg.bind('dblclick', reset);
});
div.bg-img {
background-image: url(https://wallpapershome.com/images/pages/pic_h/23843.jpeg);
background-position: 0 0;
background-repeat: no-repeat;
background-color: blue;
border: 1px solid #aaa;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: auto;
}
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="bg-img"></div>

Collision between two elements with rotating

var keys = new Array();
var direction;
var direction;
var iNr = 0;
$(document).ready(function(){
looper();
$("#demo1").css("margin-top", 400 + "px");
$("#demo2").css("margin-left", 380 + "px");
myFunction();
});
function myFunction()
{
iNr = iNr + 0.5;
$("#main").css("transition","all 0.1s");
$("#main").css("transform","rotate(" + iNr + "deg)");
setTimeout(function()
{
myFunction();
}, 50);
}
function looper()
{
var p =$("#circle");
var offset = p.offset();
var t =$(".red");
var roffset = t.offset();
var rect1 = {x: offset.left, y: offset.top, width: p.width(), height: p.height()}
var rect2 = {x: roffset.left, y: roffset.top, width: t.width(), height: t.height()}
if (rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.height + rect1.y > rect2.y) {
console.log("now");
}
if(direction == "left")
{
if(offset.left - 50 > 0)
{
$("#circle").css("left", ($("#circle").position().left - 2) + "px");
}
}
if(direction == "up")
{
if(offset.top - 50 > 0)
{
$("#circle").css("top", ($("#circle").position().top - 2) + "px");
}
}
if(direction == "right")
{
if((offset.left + 50) < $(window).width())
{
$("#circle").css("left", ($("#circle").position().left + 2) + "px");
}
}
if(direction == "down")
{
if((offset.top + 50) < $(window).height())
{
$("#circle").css("top", ($("#circle").position().top + 2) + "px");
}
}
ID=window.setTimeout("looper();", 1);
}
$(document).keyup(function(event) {
if (event.keyCode == 37)
{
var index = keys.indexOf("37");
keys.splice(index, 1);
direction = "";
}
if (event.keyCode == 38)
{
var index = keys.indexOf("38");
keys.splice(index, 1);
direction = "";
}
if (event.keyCode == 39)
{
var index = keys.indexOf("39");
keys.splice(index, 1);
direction = "";
}
if (event.keyCode == 40)
{
var index = keys.indexOf("40");
keys.splice(index, 1);
direction = "";
}
});
$(document).keydown(function(event) {
if (event.keyCode == 37)
{
keys.push("37");
direction = "left";
}
if (event.keyCode == 38)
{
keys.push("38");
direction = "up";
}
if (event.keyCode == 39)
{
keys.push("39");
direction = "right";
}
if (event.keyCode == 40)
{
keys.push("40");
direction = "down";
}
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body style="background-color:black; overflow-y:scroll;">
<div style="width:400px; margin-left:500px; height:400px;" id="main">
<div id="demo1" style="width:400px; height:20px; background-color:red; position:absolute;" class="red test all"></div>
<div id="demo2" style="width:20px; height:400px; background-color:yellow; position:absolute;" class="test all"></div>
<div id="demo3" style="width:400px; height:20px; background-color:blue; position:absolute;" class="test all"></div>
<div id="demo4" style="width:20px; height:400px; background-color:green; position:absolute;" class="test all"></div>
</div>
<div style="width:25px; height:25px; background-color:white; position:absolute; border-radius:50%;" id="circle"></div>
</body>
</html>
I have programmed a game.
In this game my function checks, whether there is a collision between div1 and div2.
Or if they are overlapping or so... how you want to spell it.
Without a rotation everything is ok.
But now i have a problem.
I want to rotate div2 with transform:rotate(Xdeg);
but if I do this my calculation for the collision dosen't work.
I use this:
var rect1 = {x: 5, y: 5, width: 50, height: 50}
var rect2 = {x: 20, y: 10, width: 10, height: 10}
if (rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.height + rect1.y > rect2.y) {
// collision detected!
}
do you have any ideas to solve this problem?
Thanks for helping :-)

There are several ways to do this. This example just guides you of how it could be done with rectangles.
These are the steps that are done here:
You have to calculate the position of all rotated corners of all rectangles that you want to check whether they are being collided. To get these rotated corners, you can use several methods. In this example 2d-vectors and a 2d-rotation-matrix are used:
a vector that has its origin in the center of a rectangle and directs to the top-left-corner(x,y) of a rectangle:
var center = {
x: x + width / 2,
y: y + height / 2
};
var vector = {
x: (x - center.x),
y: (y - center.y)
};
multiply this vector with a rotation-matrix to rotate this vector:
// modified sin function to calulcate sin in the unit degrees instead of radians
function sin(x) {
return Math.sin(x / 180 * Math.PI);
}
// modified cos function
function cos(x) {
return Math.cos(x / 180 * Math.PI);
}
var rotationMatrix = [[cos(angle), -sin(angle)],[sin(angle), cos(angle)]];
var rotatedVector = {
x: vector.x * rotationMatrix[0][0] + vector.y * rotationMatrix[0][1],
y: vector.x * rotationMatrix[1][0] + vector.y * rotationMatrix[1][1]
};
And finally get the rotated top-left-corner, you can start from the center of a rectangle and go to where the rotated vector points to. This is where top-left-corner is located after rotation:
{
x: (center.x + rotatedVector.x),
y: (center.y + rotatedVector.y)
}
All the steps described above are done by getRotatedTopLeftCornerOfRect and must be done with all other corners as well. Before the location of the next
corner (right-top) can be calculated next vector must be calulcated that points to this corner. To get the next vector that points to the top-right-corner the angle between the first vector (left-top) and the second vector (right-top) is calculated. The third vector points to the right-bottom-corner when its angle is incremended by the first angle and the second angle and the fourth vector is rotated by an angle that is summed up the first, second and third angle. All of this is done in the setCorners-method and this image shows this process partly:
To detect a collision there are tons of algorithms. In this example the Point in polygon algorithm is used to check each rotated corner of a rectangle whether a corner is with the border or within another rectangle, if so, then the method isCollided returns true. The Point in polygon algorithm is used in pointInPoly and can also be found here.
Combining all of the steps described above was tricky, but it works with all rectangles of all sizes and the best of all you can test it right here without a library by clicking on "Run code snippet".
(tested browsers: FF 50.1.0, IE:10-EDGE, Chrome:55.0.2883.87 m):
var Rectangle = (function () {
function sin(x) {
return Math.sin(x / 180 * Math.PI);
}
function cos(x) {
return Math.cos(x / 180 * Math.PI);
}
function getVectorLength(x, y, width, height){
var center = {
x: x + width / 2,
y: y + height / 2
};
//console.log('center: ',center);
var vector = {
x: (x - center.x),
y: (y - center.y)
};
return Math.sqrt(vector.x*vector.x+vector.y*vector.y);
}
function getRotatedTopLeftCornerOfRect(x, y, width, height, angle) {
var center = {
x: x + width / 2,
y: y + height / 2
};
//console.log('center: ',center);
var vector = {
x: (x - center.x),
y: (y - center.y)
};
//console.log('vector: ',vector);
var rotationMatrix = [[cos(angle), -sin(angle)],[sin(angle), cos(angle)]];
//console.log('rotationMatrix: ',rotationMatrix);
var rotatedVector = {
x: vector.x * rotationMatrix[0][0] + vector.y * rotationMatrix[0][1],
y: vector.x * rotationMatrix[1][0] + vector.y * rotationMatrix[1][1]
};
//console.log('rotatedVector: ',rotatedVector);
return {
x: (center.x + rotatedVector.x),
y: (center.y + rotatedVector.y)
};
}
function getOffset(el) {
var _x = 0;
var _y = 0;
while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
_x += el.offsetLeft - el.scrollLeft;
_y += el.offsetTop - el.scrollTop;
el = el.offsetParent;
}
return {
top: _y,
left: _x
};
}
function pointInPoly(verties, testx, testy) {
var i,
j,
c = 0
nvert = verties.length;
for (i = 0, j = nvert - 1; i < nvert; j = i++) {
if (((verties[i].y > testy) != (verties[j].y > testy)) && (testx < (verties[j].x - verties[i].x) * (testy - verties[i].y) / (verties[j].y - verties[i].y) + verties[i].x))
c = !c;
}
return c;
}
function Rectangle(htmlElement, width, height, angle) {
this.htmlElement = htmlElement;
this.width = width;
this.height = height;
this.setCorners(angle);
}
function testCollision(rectangle) {
var collision = false;
this.getCorners().forEach(function (corner) {
var isCollided = pointInPoly(rectangle.getCorners(), corner.x, corner.y);
if (isCollided) collision = true;
});
return collision;
}
function checkRectangleCollision(rect, rect2) {
if (testCollision.call(rect, rect2)) return true;
else if (testCollision.call(rect2, rect)) return true;
return false;
}
function getAngleForNextCorner(anc,vectorLength) {
var alpha = Math.acos(anc/vectorLength)*(180 / Math.PI);
return 180 - alpha*2;
}
Rectangle.prototype.setCorners = function (angle) {
this.originalPos = getOffset(this.htmlElement);
this.leftTopCorner = getRotatedTopLeftCornerOfRect(this.originalPos.left, this.originalPos.top, this.width, this.height, angle);
var vecLength = getVectorLength(this.originalPos.left, this.originalPos.top, this.width, this.height);
//console.log('vecLength: ',vecLength);
angle = angle+getAngleForNextCorner(this.width/2, vecLength);
//console.log('angle: ',angle);
this.rightTopCorner = getRotatedTopLeftCornerOfRect(this.originalPos.left, this.originalPos.top, this.width, this.height, angle);
angle = angle+getAngleForNextCorner(this.height/2, vecLength);
//console.log('angle: ',angle);
this.rightBottomCorner = getRotatedTopLeftCornerOfRect(this.originalPos.left, this.originalPos.top, this.width, this.height, angle);
angle = angle+getAngleForNextCorner(this.width/2, vecLength);
//console.log('angle: ',angle);
this.leftBottomCorner = getRotatedTopLeftCornerOfRect(this.originalPos.left, this.originalPos.top, this.width, this.height, angle);
//console.log(this);
};
Rectangle.prototype.getCorners = function () {
return [this.leftTopCorner,
this.rightTopCorner,
this.rightBottomCorner,
this.leftBottomCorner];
};
Rectangle.prototype.isCollided = function (rectangle) {
return checkRectangleCollision(this, rectangle);
};
return Rectangle;
}) ();
var rotA = 16;
var widthA = 150;
var heightA = 75;
var htmlRectA = document.getElementById('rectA');
var rotB = 28.9;
var widthB = 50;
var heightB = 130;
var htmlRectB = document.getElementById('rectB');
var msgDiv = document.getElementById('msg');
var rectA = new Rectangle(htmlRectA, widthA, heightA, rotA);
var rectB = new Rectangle(htmlRectB, widthB, heightB, rotB);
window.requestAnimFrame = function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame;
}();
function draw(){
rotA+=1.2;
htmlRectA.setAttribute('style','-ms-transform: rotate('+rotA+'deg);-webkit-transform: rotate('+rotA+'deg);transform: rotate('+rotA+'deg)');
rotB+=5.5;
htmlRectB.setAttribute('style','-ms-transform: rotate('+rotB+'deg);-webkit-transform: rotate('+rotB+'deg);transform: rotate('+rotB+'deg)');
rectA.setCorners(rotA);
rectB.setCorners(rotB);
if(rectA.isCollided(rectB)){
msgDiv.innerHTML = 'Collision detected!';
msgDiv.setAttribute('style','color: #FF0000');
}
else {
msgDiv.innerHTML = 'No Collision!';
msgDiv.setAttribute('style','color: #000000');
}
setTimeout(function(){
window.requestAnimFrame(draw);
},50);
}
window.requestAnimFrame(draw);
#rectA{
background-color: #0000FF;
width:150px;
height:75px;
position:absolute;
top:60px;
left:180px;
-ms-transform: rotate(16deg);
-webkit-transform: rotate(16deg);
transform: rotate(16deg);
}
#rectB{
background-color: #FF0000;
width:50px;
height:130px;
position:absolute;
top:140px;
left:250px;
-ms-transform: rotate(28.9deg);
-webkit-transform: rotate(28.9deg);
transform: rotate(28.9deg);
}
<div id="rectA">A</div>
<div id="rectB">B</div>
<div id="msg"></div>

Drawing a scalloped rectangle

I am trying to draw a scalloped rectangle with mouse like in below image
I am able to draw rectangle with code below
function Rectangle(start, end) {
var w = (end.x - start.x);
var h = (end.y - start.y);
return ["M", start.x, start.y, "L", (start.x + w), start.y, "L", start.x + w, start.y + h, "L", start.x, start.y + h, "L", start.x, start.y].join(' ');
}
var point;
document.addEventListener('mousedown', function(event) {
point = {
x: event.clientX,
y: event.clientY
}
});
document.addEventListener('mousemove', function(event) {
var target = {
x: event.clientX,
y: event.clientY
}
if(point) {
var str = Rectangle(point, target);
document.getElementById('test').setAttribute('d', str);
}
});
document.addEventListener('mouseup', function(event) {
point = null;
});
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0
}
svg {
height:100%;
width: 100%
}
<svg>
<path id="test" style="stroke-width: 4; stroke: RGBA(212, 50, 105, 1.00); fill: none" />
</svg>
But when I try to convert into scalloped rectangle I am seeing different patterns exactly matching Infinite Monkey Theorm
The approach I tried is, draw a rectangular path on a virtual element. Take each point at length multiplied by 15 till total length. Then drawing arcs between those points. It is not working. Also, I want to avoid using getPointAtLength because it's mobile support is not great.
var pathEle = document.createElementNS('http://www.w3.org/2000/svg', 'path');
pathEle.setAttribute('d', rectangle(point, target));
window.pathEle = pathEle;
var points = [];
for (var i = 0; i < pathEle.getTotalLength(); i += 15) {
points.push(pathEle.getPointAtLength(i));
}
document.getElementById('test1').setAttribute('d', toSVGPath(points));

Something like this?
I'm using arcs to make the scallops. You may want to tweak how the scallops are calculated to get better corners. But I'll leave that to you.
var scallopSize = 30;
function Rectangle(start, end) {
var minX = Math.min(start.x, end.x);
var minY = Math.min(start.y, end.y);
var w = Math.abs(end.x - start.x);
var h = Math.abs(end.y - start.y);
// Calculate scallop sizes
var numW = Math.round(w / scallopSize);
if (numW === 0) numW = 1;
var numH = Math.round(h / scallopSize);
if (numH === 0) numH = 1;
var stepW = w / numW;
var stepH = h / numH;
// top
var p = minX + stepW/2; // start each size at half a scallop along
var path = ["M", p, minY];
for (var i=1; i < numW; i++) { // numW-1 scallops per side
p += stepW;
path.push('A');
path.push(stepW/2 + 1); // Add 1 to the radius to ensure it's
path.push(stepW/2 + 1); // big enough to span the stepW
path.push("0 0 1");
path.push(p);
path.push(minY);
}
// top right
var p = minY + stepH/2;
path.push('A');
path.push(stepH/2.8); // 2 * sqrt(2)
path.push(stepH/2.8); // corners are a little smaller than the scallops
path.push("0 0 1");
path.push(minX + w);
path.push(p);
// right
for (var i=1; i < numH; i++) {
p += stepH;
path.push('A');
path.push(stepH/2 + 1);
path.push(stepH/2 + 1);
path.push("0 0 1");
path.push(minX + w);
path.push(p);
}
// bottom right
var p = minX + w - stepW/2;
path.push('A');
path.push(stepH/2.8);
path.push(stepH/2.8);
path.push("0 0 1");
path.push(p);
path.push(minY + h);
// bottom
for (var i=1; i < numW; i++) {
p -= stepW;
path.push('A');
path.push(stepW/2 + 1);
path.push(stepW/2 + 1);
path.push("0 0 1");
path.push(p);
path.push(minY + h);
}
// bottom left
var p = minY + h - stepH/2;
path.push('A');
path.push(stepH/2.8);
path.push(stepH/2.8);
path.push("0 0 1");
path.push(minX);
path.push(p);
// left
for (var i=1; i < numH; i++) {
p -= stepH;
path.push('A');
path.push(stepH/2 + 1);
path.push(stepH/2 + 1);
path.push("0 0 1");
path.push(minX);
path.push(p);
}
// top left
path.push('A');
path.push(stepH/2.8);
path.push(stepH/2.8);
path.push("0 0 1");
path.push(minX + stepW/2);
path.push(minY);
path.push('Z');
return path.join(' ');
}
var point;
document.addEventListener('mousedown', function(event) {
point = {
x: event.clientX,
y: event.clientY
}
});
document.addEventListener('mousemove', function(event) {
var target = {
x: event.clientX,
y: event.clientY
}
if(point) {
var str = Rectangle(point, target);
document.getElementById('test').setAttribute('d', str);
}
});
document.addEventListener('mouseup', function(event) {
point = null;
});
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0
}
svg {
height:100%;
width: 100%
}
<svg>
<path id="test" style="stroke-width: 4; stroke: RGBA(212, 50, 105, 1.00); fill: none" />
</svg>

HTML5 detect a click on a moving circle element

Right now I have a circle that goes from the bottom to the top of a canvas.
I attached a click event to the canvas and it console logs the coordinates of the click.
The ball also console logs the coordinates of where it is.
How can I add a circle element to 'elements' and how do I compare the canvas click event to the circle diameters coordinates.
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/6;
var y = canvas.height-30;
var dx = 0;
var dy = -2;
canvas.addEventListener('click', function(event) {
var x = event.pageX - elemLeft;
var y = event.pageY - elemTop;
console.log("CLICKED: (x,y) ", x, y);
elements.forEach(function(element) {
if (y > canvas.y && y < canvas.y + canvas.ballRadius && x > canvas.x && x < canvas.x + canvas.ballRadius) {
alert('clicked an element');
}
});
}, false);
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
console.log("Ball moving: (x,y) ", x, ", ", y)
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
dx = -dx;
}
if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
dy = -dy;
}
x += dx;
y += dy;
}
setInterval(draw, 100);
https://jsfiddle.net/aL9amevj/

You can use css to render a circle, .animate() to animate element, check if animation animation.currentTime is less than half of animation.effect.computedTiming.duration / 2 .finished to reset element to original state.
.circle {
position: relative;
border-radius: 50%;
width: 50px;
height: 50px;
background: blue;
left: calc(100vw - 100px);
top: calc(100vh - 100px);
}
<button>click</button>
<div class="circle" style="animation-fill-mode:forwards"></div>
<script>
var score = 0;
var button = document.querySelector("button");
var circle = document.querySelector(".circle");
button.addEventListener("click", function() {
this.setAttribute("disabled", "disabled");
var curr = circle.animate([{
left: "0px",
top: "0px"
}], {
duration: 10000,
iterations: 1
});
circle.onclick = (e) => {
console.log(e.pageX, e.pageY);
var t = curr.currentTime <
curr.effect.computedTiming.duration / 2;
if (t) {
score += 1;
}
curr.cancel();
circle.style.display = "none";
circle.onclick = null;
alert((t ? "added 1 " : "did not add 1 ")
+ "to score: " + score);
}
curr.finished.then(() => {
circle.onclick = null;
setTimeout(function() {
button.removeAttribute("disabled");
}, 10)
}).catch(e => {
console.log(e);
button.removeAttribute("disabled");
circle.style.display = "block";
})
});
</script>