javascript - 点击圆圈游戏Javascript

Question

我正在尝试制作一个简单的互动游戏，其中有不同颜色的圆圈在 Canvas 中移动，当用户点击蓝色圆圈时，它会记录屏幕上的点击次数。单击任何其他颜色的圆圈时，动画停止。

我是 javascript 的新手，但这是我目前所拥有的。我已经制作了一个带有随机彩色圆圈的函数和一个带有蓝色圆圈移动的函数，但是我完全不知道如何在单击带有随机彩色圆圈的函数并记录蓝色圆圈上的点击量时停止动画。如果有人能以任何方式帮助我推进它(不必是完整的东西)，那就太棒了，谢谢。

JS

var canvas;
var ctx;
var w = 1000;
var h = 600;
var colours = ["red", "blue"];
var allCircles = []; 


for(var i=0; i<1; i++){
    setTimeout(function(){console.log(i)},1000);
    }
    
document.querySelector("#myCanvas").onclick = click;
createData(2);
createDataTwo(20);
setUpCanvas();
animationLoop();

function animationLoop(){
    clear();
    for(var i = 0; i<allCircles.length; i++){
    circle(allCircles[i]);
    forward(allCircles[i], 5)  
    turn(allCircles[i], randn(30));
    collisionTestArray(allCircles[i],allCircles)
    bounce(allCircles[i]);
}

    requestAnimationFrame(animationLoop);
}


function collisionTestArray(o, a){
    for(var i=0; i<a.length; i++){
        if(o !=a[i]){
            collision(o,a[i]);
        }
        
    }
}




function collision(o1,o2){
    if(o1 && o2){
    var differencex = Math.abs(o1.x-o2.x);
    var differencey = Math.abs(o1.y-o2.y);
    var hdif = Math.sqrt(differencex*differencex+differencey*differencey);
    if(hdif<o1.r+o2.r){
        if(differencex < differencey){
            turn(o1, 180-2*o1.angle);
            turn(o2, 180-2*o2.angle);
        }else{
            turn(o1, 360-2*o1.angle);
            turn(o2, 360-2*o2.angle);
        }
        turn(o1, 180);
        turn(o2, 180);
        console.log("collision");
    };
    }
}


function click(event){
  clear()
}




function bounce (o){
    if(o.x > w || o.x < 0){
        turn(o, 180-2*o.angle);
    };
    if(o.y > h || o.y < 0){
        turn(o, 360-2*o.angle);
    }
}
function clear(){
    ctx.clearRect(0,0,w,h);
}
function stop (){
    o1.changex = 0;
    o1.changey = 0;
    o2.changex = 0;
    o2.changey = 0;
}

function circle (o){
    var x = o.x; 
    var y = o.y;
    var a = o.angle;
    var d = o.d;
    ctx.beginPath();
    ctx.arc(o.x,o.y,o.r,0,2*Math.PI);
    ctx.fillStyle = "hsla("+o.c+",100%,50%, "+o.a+")";
    ctx.fill();


    o.x = x;
    o.y = y;
    o.angle = a;
    o.d = d;
}


function  createData(num){
    for(var i=0; i<num; i++){
        allCircles.push({

                    "x": rand(w),
                    "changex": rand(10),
                    "y":rand(h),
                     "changex": rand(10),
                     "w": randn(w),
                    "h": randn(h),
                    "d": 1, 
                     "a": 1,
                     "angle": 0,
                     "changle":15,
                     "c":216,
                     "r": 50
         }
        )
    }
}

function  createDataTwo(num){
    for(var i=0; i<num; i++){
        allCircles.push({

                    "x": rand(w),
                    "changex": rand(10),
                    "y":rand(h),
                     "changex": rand(10),
                     "w": randn(w),
                    "h": randn(h),
                    "d": 1, 
                     "a": 1,
                     "angle": 0,
                     "changle":15,
                     "c":rand(90),
                     "r": 50
         }
        )
    }
}

function turn(o,angle){
    if(angle != undefined){ 
        o.changle=angle; 
    };
        o.angle+=o.changle;
    }


function forward(o,d){ 
    var changeX;
    var changeY;
    var oneDegree = Math.PI/180; 
    if(d != undefined){
        o.d = d;
    };
        changeX= o.d*Math.cos(o.angle*oneDegree);
        changeY = o.d*Math.sin(o.angle*oneDegree);
        o.x+=changeX; 
        o.y+=changeY;
}


function randn(r){
    var result = Math.random()*r - r/2
    return result
}

function randi(r) {
    var result = Math.floor(Math.random()*r); 
    return result
}


function rand(r){
    return Math.random()*r
}




function setUpCanvas(){
    canvas = document.querySelector("#myCanvas");
    ctx = canvas.getContext("2d");
    canvas.width = w;
    canvas.height = h;
    canvas.style.border = "5px solid orange"
    ctx.fillStyle = "blue";
    ctx.fillRect(0, 0, w, h);
}

console.log("assi4")

HTML

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="../modules.css">
    </head>
    <body>
        <div id="container">
            <h1>Click the Blue Circles Only</h1>
            <canvas id = "myCanvas"></canvas>
        </div>
        <script src="assi5.js"></script>
    </body>
</html>

CSS

#container {
    margin: auto;
    width: 75%;
    text-align: center;
}

Answer 1

您可以使用 cancelAnimationFrame单击非蓝色圆圈时停止动画

您需要将对从 requestAnimationFrame 返回的帧 ID 的引用传递给它让它工作。

为了判断圆圈是否被点击，您需要根据点击的坐标检查每个圆圈的坐标。

我在下面举了一个例子，如果你的蓝色圆圈在数组“blue”中，其他圆圈在数组“other”中，requestAnimationFrame 返回的 ID 为“frame”。

检查函数返回命中的蓝色圆圈数(得分)，如果命中任何其他圆圈，它会停止动画。

getCoords 从 click 事件返回 Canvas 上点击的坐标。

canvas.addEventListener('click', event=>{
    points += check(getCoords(event), blue, other, frame);
    document.getElementById('points').textContent = points;
})

function check({x, y}, blue, other, frame) {
    other.filter(circle=>circle.isWithin(x, y))
        .length && cancelAnimationFrame(frame); // This is where animation stops
    return blue.filter(circle=>circle.isWithin(x, y)).length;
}

function getCoords(event) {
    const canvas = event.target;
    const rect = canvas.getBoundingClientRect()
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    return { x, y };
}

我有一个在下面工作的示例，我将圆圈更改为函数的结果而不是内联对象，并将您在它们上使用的函数移动到它们自己的类中。您不必这样做，但我发现它更容易理解。

function main() {
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext("2d");
  const clear = () => context.clearRect(0, 0, canvas.width, canvas.height);
  const blue = new Array(2).fill().map(() => new Circle(context, 216));
  const other = new Array(10).fill().map(() => new Circle(context));
  let circles = [...blue, ...other];
  let frame = 0;
  let points = 0;

  // Move the circle a bit and check if it needs to bounce
  function update(circle) {
    circle.forward(1)
    circle.turn(30, true)
    circle.collisionTestArray(circles)
    circle.bounce();
  }

  // Main game loop, clear canvas, update circle positions, draw circles
  function loop() {
    clear();
    circles.filter(circle => circle.free).forEach(update);
    circles.forEach(circle => circle.draw());
    frame = requestAnimationFrame(loop);
  }
  loop();

  canvas.addEventListener('click', event => {
    points += check(getCoords(event), blue, other, frame, circles);
    document.getElementById('points').textContent = points;
  })
}

function check({ x, y }, blue, other, frame) {
  other.filter(circle => circle.isWithin(x, y))
    // .map(circle=>circle.toggle())
    .length && cancelAnimationFrame(frame); // This is where animation stops
  return blue.filter(circle => circle.isWithin(x, y)).length;
}

function getCoords(event) {
  const canvas = event.target;
  const rect = canvas.getBoundingClientRect()
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  return { x, y };
}

main();

function Circle(context, c) {
  const randn = r => rand(r) - r / 2;
  const randi = r => Math.floor(randi(r));
  const rand = r => Math.random() * r;

  // These are for easily stopping and starting a circle;
  this.free = true;
  this.stop = () => this.free = false;
  this.release = () => this.free = true;
  this.toggle = () => this.free = !this.free;

  const {
    width,
    height
  } = context.canvas;

  // These are the same properties you were using in your code
  this.x = rand(width);
  this.changex = rand(10);
  this.y = rand(height);
  this.changey = rand(10);
  this.w = randn(width);
  this.h = randn(height);
  this.d = 1;
  this.a = 1;
  this.angle = 0;
  this.changle = 15;
  this.c = c || rand(90); // This is the only difference between blue and other circles
  this.r = 50;

  // These next functions you had in your code, I just moved them into the circle definition
  this.draw = () => {
    const { x, y, r, c } = this;
    context.beginPath();
    context.arc(x, y, r, 0, 2 * Math.PI);
    context.fillStyle = "hsla(" + c + ",100%,50%, 1)";
    context.fill();
  }
  this.bounce = () => {
    const { x, y, angle } = this;
    if (x > width || x < 0) {
      this.turn(180 - 2 * angle);
    }
    if (y > height || y < 0) {
      this.turn(360 - 2 * angle);
    }
  }
  this.turn = (angle, random = false) => {
    this.changle = random ? randn(angle) : angle;
    this.angle += this.changle;
  }
  this.forward = d => {
    this.d = d;
    this.x += this.d * Math.cos(this.angle * Math.PI / 180);
    this.y += this.d * Math.sin(this.angle * Math.PI / 180);
  }
  this.collisionTestArray = a => a
    .filter(circle => circle != this)
    .forEach(circle => this.collision(circle));
  this.collision = circle => {
    var differencex = Math.abs(this.x - circle.x);
    var differencey = Math.abs(this.y - circle.y);
    var hdif = Math.sqrt(differencex ** 2 + differencey ** 2);
    if (hdif < this.r + circle.r) {
      if (differencex < differencey) {
        this.turn(180 - 2 * this.angle);
        circle.turn(180 - 2 * circle.angle);
      } else {
        this.turn(360 - 2 * this.angle);
        circle.turn(360 - 2 * circle.angle);
      }
      this.turn(180);
      circle.turn(180);
    }
  }

  // These 2 functions I added to check if the circle was clicked
  this.distanceFrom = (x, y) => Math.sqrt((this.x - x) ** 2 + (this.y - y) ** 2);
  this.isWithin = (x, y) => this.r > this.distanceFrom(x, y);
}

#canvas {
  border: 5px solid orange;
}

#container {
  margin: auto;
  width: 75%;
  text-align: center;
}

<div id="container">
  <h1>Click the Blue Circles Only</h1>
  <canvas id="canvas" width="1000" height="600"></canvas>
  <p>
    Points: <span id="points">0</span>
  </p>
</div>