I have got this code:
koleczko = function rysujKolo(){
ctx.beginPath();
var xc = Math.floor(Math.random() * 280);
var yc = Math.floor(Math.random() * 140);
var ray = 10;
var beginAngle = 0;
var endAngle = Math.PI * 2;
ctx.arc(xc, yc, ray, beginAngle, endAngle);
ctx.fill();
ctx.stroke();
}
koleczko.addEventListener("click", czysc1() );
function czysc1() {
setTimeout(function(){ var c=document.getElementById("pole");
var ctx=c.getContext("2d");
ctx.clearRect(0,0,canvas.width,canvas.height); }, 0);
}
This part of code doesn’t work.koleczko.addEventListener("click", czysc1() );
How to remove this koleczko after mouse click exactly on this koleczko?
Hi there adviziopi,
and a warm welcome to these forums.
Try changing this
koleczko.addEventListener("click", czysc1() );
…to this…
koleczko.addEventListener("click", czysc1, false );
Then use this amendment…
function czysc1() {
koleczko.removeEventListener("click", czysc1, false );
setTimeout(function(){ var c=document.getElementById("pole");
var ctx=c.getContext("2d");
ctx.clearRect(0,0,canvas.width,canvas.height); }, 0);
}
coothead
Thanks coothead, but it doesn’t work still.
Here is full code:
<html>
<head>
<meta charset="UTF-8">
<title>Kliknij w kółko</title>
</head>
<body>
<div style="margin:100px 0px 0px 200px;">
<h1>Znikające kółka</h1>
<h2>Gra na refleks</h2>
<div>Punkty:<div id="punkty"></div></div>
</div>
<canvas style="width:800px;height:500px;background-color:grey;position:absolute;margin:20px 0px 0px 200px;" id="pole">
</canvas>
<script>
var canvas = document.getElementById("pole");
var ctx = canvas.getContext("2d");
koleczko = function rysujKolo(){
ctx.beginPath();
var xc = Math.floor(Math.random() * 280);
var yc = Math.floor(Math.random() * 140);
var ray = 10;
var beginAngle = 0;
var endAngle = Math.PI * 2;
ctx.arc(xc, yc, ray, beginAngle, endAngle);
ctx.fill();
ctx.stroke();
}
function czysc1() {
koleczko.removeEventListener("click", czysc1, false );
setTimeout(function(){ var c=document.getElementById("pole");
var ctx=c.getContext("2d");
ctx.clearRect(0,0,canvas.width,canvas.height); }, 0);
}
function czysc() {
setTimeout(function(){ var c=document.getElementById("pole");
var ctx=c.getContext("2d");
ctx.clearRect(0,0,canvas.width,canvas.height); }, 1500);
}
var myVar = setInterval(wyswietlajKolko, 2000);
function wyswietlajKolko(){
koleczko();
czysc();
koleczko.addEventListener("click", czysc1, false);
}
</script>
</body>
</html>
It should display one circle and after mouse click on this circle this circle will be remove and will displaynext circle.
Off Topic:
@advizio : when you post code on the forums, you need to format it so it will display correctly. (I’ve edited your post above for you.)
You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.
Hi there adviziopi,
I am not entirely sure what your requirements are.
What I have done, though, is tidy up your code and also made
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Kliknij w kółko</title>
<style media="screen">
body {
background-color: #f9f9f9;
font: 100% / 162% verdana, arial, helvetica, sans-serif;
text-align: center;
}
#container {
display: inline-block;
margin: 6.25em auto 1.25em;
}
#pole {
width: 80vw;
height: 49.6vw;
margin-top:1em;
border: 1px solid #000;
background-color: #808080;
box-shadow: 1vw 1vw 1vw rgba( 0, 0, 0, 0.3 );
cursor: pointer;
}
#punkty {
font-style: oblique;
}
</style>
</head>
<body>
<div id="container">
<h1>Znikające kółka</h1>
<h2>Gra na refleks</h2>
<div id="punkty">Punkty:</div>
<canvas id="pole"></canvas>
</div>
<script>
(function( d ) {
'use strict';
var canvas = d.getElementById( 'pole' );
canvas.addEventListener( 'click', czysc1, false);
var ctx = canvas.getContext( '2d' ),
xc, yc, ray, beginAngle, endAngle, myVar, delay = 2000;
function rysujKolo(){
ctx.beginPath();
xc = Math.floor(Math.random() * 280);
yc = Math.floor(Math.random() * 140);
ray = 10;
beginAngle = 0;
endAngle = Math.PI * 2;
ctx.arc( xc, yc, ray, beginAngle, endAngle );
ctx.fill();
ctx.stroke();
}
function czysc1() {
ctx = canvas.getContext( '2d' );
ctx.clearRect( 0, 0, canvas.width,canvas.height );
}
myVar = setInterval( rysujKolo, delay );
}( document ));
</script>
</body>
</html>
coothead
Thanks. But the main problem is, that now when I click on canvas this circle is removed. It should be that I click on circle and the same circle is deleted. And only one circle may be on canvas. When I don’t click on circle then I don’t have 1 point. And when I click on circle then I have added 1 point and it will show next circle. The all game is 10 times display single circle.
Hi there adviziopi,
check out the attachment, it may help.
adviziopi.zip (2.8 KB)
coothead
Thanks coothead. This is exactly what I wanted to do. The game is complete. Thank you very much. You are very good and helpful man. Now I have to analyse this JS code to understand this. Thanks!
Hi there adviziopi,
in my haste, I forgot to keep the circle fully within the bounds of the canvas.
This amendment…
function rysujKolo(){
/* create the circle */
ctx = canvas.getContext( '2d' );
ctx.beginPath();
rad = 10;
xc = Math.floor( Math.random() * ( canvas.width - rad * 2 + 1 ) ) + rad;
yc = Math.floor( Math.random() * ( canvas.height - rad * 2 + 1 ) ) + rad;
beginAngle = 0;
endAngle = Math.PI * 2;
left = xc -rad;
top = yc -rad;
ctx.arc( xc, yc, rad, beginAngle, endAngle );
ctx.fill();
}
…will correct my shortcomings.
system
November 23, 2018, 6:13pm
12
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
