CODEWITHSUNDEEP
javascripthtmlcsshtml5-canvas
Test123
Test123

Reputation: 368

making a ball to bounce when a button is clicked

I wrote a program to move a ball when a button is clicked. It is a part of experiment for a bigegr project:
Here is the screen shot:
website
And here is the code: 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Random Bouncing Ball</title>
<style type="text/css">
<!--
body { background-color:#ededed; font:normal 12px/18px Arial, Helvetica, sans-serif; }
h1 { display:block; width:600px; margin:20px auto; padding-bottom:20px; font:normal 24px/30px Georgia, "Times New Roman", Times, serif; color:#333; text-shadow: 1px 2px 3px #ccc; border-bottom:1px solid #cbcbcb; }

#myCanvas { background:#fff; border:1px solid #cbcbcb; }
#nav { display:block; width:100%; text-align:center; }
#nav li { display:block; font-weight:bold; line-height:21px; text-shadow:1px 1px 1px #fff; width:100px; height:21px; padding:5px; margin:0 10px; background:#e0e0e0; border:1px solid #ccc; -moz-border-radius:4px;-webkit-border-radius:4px; border-radius:4px; float:left; }
#nav li a { color:#000; display:block; text-decoration:none; width:100%; height:100%; }
-->
</style>
<script type="text/javascript">
function myFunction () {
    if(document.getElementById('button').clicked == true)
    {
        var context;
        var dx= 4;  
        var dy=4;
        var y=150;
        var x=10;
        function draw(){
            context= myCanvas.getContext('2d');
            context.clearRect(0,0,400,400);
            context.beginPath();
            context.fillStyle="#000000";
            context.arc(x,y,10,0,Math.PI*2,true);
            context.closePath();
            context.fill();
            if( x<0 || x>400)
            dx=-dx;
            if( y<0 || y>300)
            dy=-dy;
            x+=dx;
            y+=dy;
        }
        setInterval(draw,10); 
    }
}
</script>

</head>
<body>

<div id="container">

    <canvas id="myCanvas" width="400" height="300"></canvas>



</div>
<input id="button" type="submit" name="button" value="enter" onclick="myFunction();"/>

</body>
</html>

The problem is: When I click that button, the ball won't be animated or moved. Where am I wrong?

Upvotes: 3

Views: 3968

Answers (2)

Rovak
Rovak

Reputation: 778

The code on line 19 returns undefined

document.getElementById('button').clicked == true

remove that if statement and it works

I made a jsbin: http://jsbin.com/sozicuruja/1/

function myFunction () {

        var context;
        var dx= 4;  
        var dy=4;
        var y=150;
        var x=10;
        function draw(){
            context= myCanvas.getContext('2d');
            context.clearRect(0,0,400,400);
            context.beginPath();
            context.fillStyle="#000000";
            context.arc(x,y,10,0,Math.PI*2,true);
            context.closePath();
            context.fill();
            if( x<0 || x>400)
            dx=-dx;
            if( y<0 || y>300)
            dy=-dy;
            x+=dx;
            y+=dy;
        }
        setInterval(draw,10); 
}
body { background-color:#ededed; font:normal 12px/18px Arial, Helvetica, sans-serif; }
h1 { display:block; width:600px; margin:20px auto; padding-bottom:20px; font:normal 24px/30px Georgia, "Times New Roman", Times, serif; color:#333; text-shadow: 1px 2px 3px #ccc; border-bottom:1px solid #cbcbcb; }

#myCanvas { background:#fff; border:1px solid #cbcbcb; }
#nav { display:block; width:100%; text-align:center; }
#nav li { display:block; font-weight:bold; line-height:21px; text-shadow:1px 1px 1px #fff; width:100px; height:21px; padding:5px; margin:0 10px; background:#e0e0e0; border:1px solid #ccc; -moz-border-radius:4px;-webkit-border-radius:4px; border-radius:4px; float:left; }
#nav li a { color:#000; display:block; text-decoration:none; width:100%; height:100%; }
<div id="container">

    <canvas id="myCanvas" width="400" height="300"></canvas>



</div>
<input id="button" type="submit" name="button" value="enter" onclick="myFunction();"/>

Upvotes: 6

Hangarter
Hangarter

Reputation: 632

Does this attribute exist? If you want only test, you can do this:

object.onclick=function(){myScript};

What means:

document.getElementById('button').onclick = function () {
    draw();
};
   var context;
   var dx= 4;  
   var dy=4;
   var y=150;
   var x=10;

    function draw(){

        context= myCanvas.getContext('2d');
        context.clearRect(0,0,400,400);
        context.beginPath();
        context.fillStyle="#000000";
        context.arc(x,y,10,0,Math.PI*2,true);
        context.closePath();
        context.fill();
        if( x<0 || x>400)
        dx=-dx;
        if( y<0 || y>300)
        dy=-dy;
        x+=dx;
        y+=dy;
        setInterval(draw,10);
    }

Just be careful with that setInterval: it's gonna run forever. You want to create some condition to make it stop in the future. ;)

Note: I know this onclick attribute is old fashion but it works in all mayor browsers. Consider using jquery to attach functions to your onclick event.

Upvotes: 2

Related Questions