Question

我一直在Javascript / HTML5课程中做一个一直困扰我的项目。我应该让图像在屏幕上反弹，无论何时点击它，你的分数都会上升一个。如果您未能点击图片，您将失去五条生命中的一条。这是一段视频：

https://www.youtube.com/watch?v=QS-vxrZrEK4&feature=youtu.be

我遇到问题的是点击检测。我该如何检测到它？

这是我的代码：

<!DOCTYPE HTML>
    <html>
        <head>
            <style>
                body{cursor: none; overflow: hidden;}       
            </style>    
        </head>

        <body onload="startBall()" oncontextmenu="return false;" onclick="loseLife()">
            <audio src="portal.mp3" autoplay="autoplay" loop="loop"></audio>
            <div id="div" style="width: 1600px; height: 745px; border: 2px solid #000000; background-color: grey;">
                <canvas id="myCanvas" width="1600" height="745"></canvas>
                <br>
                <img draggable="false"id="image1" style="position: absolute; display: none;" width="50" height="50" src="http://vignette1.wikia.nocookie.net/evil/images/5/59/The_Death_Star.png/revision/latest?cb=20150810042957"/>
                <img draggable="false"id="image" style="position: absolute;" width="50" height="50"src="http://www.clker.com/cliparts/b/a/b/0/1207156679935151925noxin_crosshairs.svg.hi.png"/>
            </div>

            <script>
                var width = 50;
                var height = 50;
                var dx = 3;
                var dy = 3;
                var x = 600;
                var y = 300;
                var z = 0;
                var lives = 5;
                var c=document.getElementById("myCanvas");
                var ctx=c.getContext("2d");
                var interval;
                var img=document.getElementById("image1");

                function startBall(){
                    interval = setInterval(launchBall, 20);
                }

                function launchBall(){
                    ctx.clearRect(0, 0, 1600, 745);
                    var image = ctx.drawImage(img, x, y, width, height);
                    if(x<0 || x>1470) dx=-dx;
                    if(y<0 || y>700) dy=-dy;
                    x = x + dx;
                    y = y + dy;

                    ctx.font = "30px Arial";
                    ctx.fillText("Score: " + z,10,50);

                    ctx.font = "30px Arial";
                    ctx.fillText("Lives: " + lives,10,100); 

                    image.onclick = function() {fire()};
                }

                document.getElementById("div").onmousemove = function(e) {
                    document.getElementById("image").style.top = e.pageY -25 + "px";
                    document.getElementById("image").style.left = e.pageX -25 +"px";
                }

                function addScore(){
                    z = z + 1;
                    ctx.font = "30px Arial";
                    ctx.fillText("Score: " + z,10,50);
                }

                function loseLife(){
                    lives = lives - 1;
                    if (lives == 0){
                        stop();
                        ctx.font = "100px Arial";
                        ctx.fillText("Game Over",500,400);  
                    }else{
                        ctx.font = "30px Arial";
                        ctx.fillText("Lives: " + lives,10,100);
                    }           
                }

                function stop(){
                    clearInterval(interval);
                    ctx.clearRect(0, 0, 1600, 745);
                }

                function fire(){
                    score = score + 1;
                }
            </script>
        </body>
    </html>

编程任务：＆＃34; Blaster Master＆＃34;

0 个答案: