How to make objects disappear when poining mouse over them in javascript?

问题

So I have this game where a worm eats his food, food randomly spawns on load but I want it to disappear onmouseover and spawn again in another spot but I have no idea what to do :c Didn't find any info on the internet either, tho not quitet sure what to search for.

p.s. made this question again because last time people hated it because they thought that I don't have anything done. Thanx

<!doctype html>
<html>
    <head>
        <title>Ussi l6una</title>
        <script>
            var kohad=new Array();
            var pikkus=1, d=6, kogus=300;

            var ballx=0, step=100;
            var bally=0, step=100;
            var monsterx=(step*parseInt(8*Math.random())), step=100;
            var monstery=(step*parseInt(8*Math.random()));

            function toit(){
                var c=document.getElementById("tahvel");
                var ctx=c.getContext("2d");
                ctx.beginPath();
                ctx.fillStyle = 'darkblue';
                ctx.arc(monsterx+30, monstery+30, 25, 0, 2 * Math.PI, false);
                ctx.fill();
                ctx.lineWidth = 0;
                ctx.strokeStyle = '#000000';
            }
            function devouring(){
                if(toitx==mousex && toity==mousey){
                    toitx=step*parseInt(5*Math.random());
                    toity=step*parseInt(5*Math.random());
                    toit();
                }
            }
            function looKohad(){
                for(var i=0; i<kogus; i++){
                    kohad[i]=new Array(pikkus*i, 1200);
                }
            }

            function arvutaUusTagumine(eesmine, tagumine){
                var kaugus=new Array();
                kaugus[0]=eesmine[0]-tagumine[0];
                kaugus[1]=eesmine[1]-tagumine[1];
                var kogukaugus=Math.sqrt(kaugus[0]*kaugus[0]+kaugus[1]*kaugus[1]);
                var nihe=kogukaugus-pikkus;
                var dx=kaugus[0]*nihe/kogukaugus;
                var dy=kaugus[1]*nihe/kogukaugus;
                return new Array(tagumine[0]+dx, tagumine[1]+dy);
            }
            function arvutaUuedKohad(){
                console.log(kohad);
                for(var i=1; i<kogus; i++){
                    kohad[i]=arvutaUusTagumine(kohad[i-1], kohad[i]);
                }
            }

            function joonistaKohad(g){
                for(var i=0; i<kogus; i++){
                    joonistaKoht(g, kohad[i])
                }
            }

            function joonistaKoht(g, koht){
                g.beginPath();
                g.arc(koht[0], koht[1], d, 0, 2*Math.PI, true);
                g.stroke();
            }

            function hiirLiigub(e){
                var t=document.getElementById("tahvel");
                var g=t.getContext("2d");
                var tahvlikoht=t.getBoundingClientRect();
                kohad[0][0]=e.clientX-tahvlikoht.left;
                kohad[0][1]=e.clientY-tahvlikoht.top;
                arvutaUuedKohad();
                g.strokeStyle="#CC9966";
                g.fillStyle="#CC9966";
                g.clearRect(0, 0, t.width, t.height);
                joonistaKohad(g);
                toit();
            }
            looKohad();
        </script>
    </head>
    <body onLoad="toit();">
        <canvas id="tahvel" width="800" height="800" style="background-color:white" onmousemove="hiirLiigub(event)" onmouseover="this.style.backgroundImage = 'url(./dirt.png)'"></canvas><br />
    </body>
</html>

来源：https://stackoverflow.com/questions/20273057/how-to-make-objects-disappear-when-poining-mouse-over-them-in-javascript

标签

javascript

object