Question

我需要添加点击我的星星才能将其变为绿色。该变量称为＆＃34; colorchoice＆＃34;我无法弄清楚。它是一个改进的乒乓球游戏，我不得不为一个项目做，我只是无法找出形状的onclick，它需要可以在星星移动的任何地方可用。

<!doctype html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Mayo's Pong Game</title>
</head>

<body bgcolor="grey">

    <section>
        <div>
            <canvas id="canvas" width="500" height="500">
                This text is displayed if your browser
                does not support HTML5 Canvas.
            </canvas>
        </div>

        <script type="text/javascript">
           var canvas = document.getElementById('canvas');
           // var context = canvas.getContext('2d');
          canvas.addEventListener('mousemove', function(evt) {
            var mousePos = getMousePos(canvas, evt);
            message = 'LEVEL '+level+' Score= '+score+' Lives= '+lives;
                                    //writeMessage(canvas, message);

            paddley=mousePos.y -(rpheight/2);

            if (paddley+60 > 500) {
                paddley = 440;
            }

            paddley2=mousePos.y -(lpheight/2);

            if (paddley2+60 > 500) {
                paddley2 = 440;
            }
        }, false);

            // var canvas;
            var ctx;
            var x = 250;
            var y = 50;
            var WIDTH = 520;
            var HEIGHT = 520;
            var message;
            var level=1;
            var score = 0;
            var lives = 20;
            var colorchoice;
            function drawStar(cx, cy, spikes, outerRadius, innerRadius) {

var rot = Math.PI / 2 * 3;
var x = cx;
var y = cy;
var step = Math.PI / spikes;

ctx.strokeSyle = "#000";
ctx.beginPath();
ctx.moveTo(cx, cy - outerRadius)

for (i = 0; i < spikes; i++) {
    x = cx + Math.cos(rot) * outerRadius;
    y = cy + Math.sin(rot) * outerRadius;
    ctx.lineTo(x, y)
    rot += step
    x = cx + Math.cos(rot) * innerRadius;
    y = cy + Math.sin(rot) * innerRadius;
    ctx.lineTo(x, y)
    rot += step
}

ctx.lineTo(cx, cy - outerRadius)
ctx.closePath();
ctx.lineWidth=3;
ctx.strokeStyle=colorchoice;    
ctx.stroke();
ctx.fillStyle=colorchoice;
ctx.fill();
}


            function circle(x,y,r) {
                ctx.beginPath();
                ctx.arc(x, y, r, 0, Math.PI*2, true);
                ctx.fill();
            }

            function rect(x,y,w,h) {
                ctx.beginPath();
                ctx.rect(x,y,w,h);
                ctx.closePath();
                ctx.fill();
            }

            function clear() {
                ctx.clearRect(0, 0, WIDTH, HEIGHT);
            }


            function init() {
                canvas = document.getElementById("canvas");
                ctx = canvas.getContext("2d");
                return setInterval(draw, 15);
            }

            function draw() {
                clear();
                ctx.fillStyle = 'grey';
                rect(0,0,WIDTH,HEIGHT);
                ctx.fillStyle = 'black';
                drawStar(x, y,5,20,10);                  
                writeMessage(canvas,message);  
            }


          function writeMessage(canvas, message) {
                var context = canvas.getContext('2d');
                //context.clearRect(0, 0, canvas.width, canvas.height);
                context.font = '18pt Calibri';
                context.fillStyle = 'black';
                context.fillText(message, 20, 20); 
          }


          init();

          function getMousePos(canvas, evt) {
                var rect = canvas.getBoundingClientRect();
                return {
                    x: evt.clientX,
                    y: evt.clientY
                };
            }

    </script>
    </section>
  <p>AUSTIN MAYO'S PONG GAME<p>
  Pick a color for your paddles and balls, then click start.<br>
  Warning: If you click the start button more than once, difficulty will increase!!!<p>
 <button type="button" onclick="alert('PAUSED')">PAUSE</button>
 <button type="button" onclick="location.reload();">RESTART</button>
 <button type="button" onclick="init(canvas);">START</button>
 <br>
 <p>GAME MUSIC<BR>
 <audio controls>
 <source src="SOUNDTRACK.mp3" type="audio/mpeg">
 Your browser does not support the audio element.
 </audio>
 </body>
 </html>

Onclick功能为我的形状

0 个答案: