Question

所以我试图创建一个苹果捕手游戏...但到目前为止我得到的代码真的很多。首先，点数计数器与捕获的苹果不匹配。与计算机点相同。苹果和＆＃34;篮子＆＃34;也会互相故障，你会在演示中看到它。我怎样才能解决这个问题？任何帮助表示赞赏：）

演示链接＃1：https://files.itslearning.com/data/134/17123/k4.html

如果链接不起作用，请告诉我^^：）

＆＃13;

$(document).ready(function() {

  var spillerPoeng = 0;
  var pcPoeng = 0;


  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");



  var Kloss = function(xPos, yPos) {
    this.xPos = xPos;
    this.yPos = yPos;
  }

  Kloss.prototype.tegnKloss = function() {

    ctx.fillStyle = "red";
    ctx.fillRect(this.xPos, this.yPos, 100, 50);

  }

  Kloss.prototype.flyttVenstre = function() {
    ctx.fillStyle = "red";

    ctx.clearRect(this.xPos, this.yPos, 150, 80);

    this.xPos = this.xPos - 20;

    ctx.fillRect(this.xPos, this.yPos, 100, 50);
  }

  Kloss.prototype.flyttHoyre = function() {
    ctx.fillStyle = "red";

    ctx.clearRect(this.xPos, this.yPos, 150, 80);

    this.xPos = this.xPos + 20;

    ctx.fillRect(this.xPos, this.yPos, 100, 50);
  }


  var Kule = function(xPos, yPos, radie) {
    this.xPos = xPos;
    this.yPos = yPos;
    this.radie = radie;
    this.farge = getRandomColor();

  }



  Kule.prototype.tegn = function() {


    ctx.beginPath();
    ctx.arc(this.xPos, this.yPos, this.radie, 0, 2 * Math.PI);
    ctx.fillStyle = this.farge;
    ctx.stroke();
    ctx.fill();

  };

  Kule.prototype.fjernKule = function() {

    ctx.clearRect(this.xPos - 11, this.yPos - 11, this.radie * 2 + 4,
      this.radie * 2 + 4);


  }


  $("#venstre").click(function() {

    kloss1.flyttVenstre();
    kloss1.tegnKloss();
  });

  $("#hoyre").click(function() {
    kloss1.flyttHoyre();
    kloss1.tegnKloss();
  });



  function loop(objekt) {

    setTimeout(function() {
      if (objekt.yPos < 480) {

        objekt.fjernKule();

        objekt.yPos = objekt.yPos + 10;

        var sjekk = sjekkTreff(kloss1, objekt);
        if (sjekk == 1) {
          spillerPoeng++;
          document.getElementById("spillerPoeng").innerHTML =
            spillerPoeng;
        } else if (sjekk == 2) {
          pcPoeng++
          document.getElementById("pcPoeng").innerHTML = pcPoeng;
        }

        objekt.tegn();



        loop(objekt);
      }

    }, 300)


  }


  function randX(min, max) {

    return Math.floor(Math.random() * (max - min + 1)) + min;

  }

  function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    color += "00";
    for (var i = 0; i < 2; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    color += "00";
    return color;
  }





  var kuleListe = [];

  var maxKuler = 0;

  function settKuleListe() {

    setTimeout(function() {


      kuleListe[maxKuler] = new Kule(randX(10, 480), 0, 10);

      loop(kuleListe[maxKuler]);
      maxKuler++

      settKuleListe();

    }, 2000);

  }



  function sjekkTreff(obj1, obj2) {
    if (obj1.xPos < obj2.xPos && obj1.xPos + 300 > obj2.xPos && obj2.yPos > 450) {

      return (1);
    } else if (obj2.yPos > 450) {

      return (2);
    } else {


      return (3);

    }




  }


  var kloss1 = new Kloss(50, 450);
  kloss1.tegnKloss();



  settKuleListe();






});

＆＃13;

div {
  border: 1px solid black;
  padding: 20px;
  margin-bottom: 10px;
  margin-left: 80px;
  background-color: lightblue;
  float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>




<div>
  <canvas id="myCanvas" width="400" height="500" style="border:1px solid #000000;">
        </canvas>
</div>
<div>spiller poeng:
  <p id="spillerPoeng"></p>
</div>
<div>PC poeng
  <p id="pcPoeng"></p>
</div>

<br>
<div>
  <button id="venstre"> << </button>
  <button id="hoyre"> >> </button>
</div>

＆＃13;

Answer 1

这看起来很有趣，所以我试图“改进”你的代码。

这是一个使用箭头键的方法，尝试并根据需要进行编辑！

（当然，如果你有疑问，我就在这里，但我认为我的代码很清楚）

代码尚未完成，我认为让一些错误可以帮助你提高自己，所以如果可以的话，尽量找到它们;）

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

const basketSpeed = 5;
const gravity = 2;

const basket = new Basket();
const apples = [];

const score = document.querySelector('#counter span');
let counter = 0;

setInterval(() => apples.push(new Apple()), 500);

let pressingLeft = pressingRight = false;

draw = function() {
  basket.draw();
  for (let apple of apples) { apple.draw(); }
}

animate = function() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  draw();
  requestAnimationFrame(animate);
}

animate();

function Basket() {

  this.width = 50;
  this.height = 10;
  
  this.x = (canvas.width / 2) - this.width / 2;
  this.y = canvas.height - this.height - 10;
  
  this.dx = 0;
  
  this.draw = function() {
    ctx.beginPath();
    ctx.rect(this.x, this.y, this.width, this.height);
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.closePath();
    this.update();
  }
  
  this.update = function() {
    if(pressingLeft) { this.dx = -basketSpeed; }
    else if (pressingRight) { this.dx = basketSpeed; }
    else { this.dx = 0; }
    
    if (this.x + this.width + this.dx < canvas.width && this.x + this.dx > 0) { this.x += this.dx; }
  }
}

function Apple() {
  this.x = Math.random() * canvas.width;
  this.y = 0;
  
  this.radius = 10;
  
  this.dy = gravity;
  
  this.allowDraw = true;
  
  this.draw = function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = 'blue';
    ctx.fill();
    ctx.closePath();
    this.update();
  }
  
  this.update = function() {
    this.y += this.dy;
    if (this.x > basket.x && this.x < basket.x + basket.width &&
      this.y + this.radius >= basket.y
    ) {
      updateScore();
      apples.splice(apples.indexOf(this), 1);
    }
  }
}

updateScore = function() {
  counter++;
  score.innerText = counter;
}

document.addEventListener('keydown', (ev) => {
  pressingLeft = ev.keyCode === 37;
  pressingRight = ev.keyCode === 39;
});

document.addEventListener('keyup', (ev) => {
  if (ev.keyCode === 37) { pressingLeft = false; }
  if (ev.keyCode === 39) { pressingRight = false; }
});

canvas { background: #ddd; position: relative; left: 50%; transform: translateX(-50%); }
#counter { display: inline-block; margin: auto; position: relative; top: 50px; }

<canvas id="canvas" width="500" height="300"></canvas>
<div id="counter">Score : <span>0</span></div>

Answer 2

在做动作帧时增加（在盒子内3次）。我使用一个用于计算或不增加的标志来修复计数器。你应该考虑增强你的游戏，因为不仅苹果必须在篮子范围内，而且还要通过篮子的开口。

$(document).ready(function() {

  var spillerPoeng = 0;
  var pcPoeng = 0;


  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");



  var Kloss = function(xPos, yPos) {
    this.xPos = xPos;
    this.yPos = yPos;
  }

  Kloss.prototype.tegnKloss = function() {

    ctx.fillStyle = "red";
    ctx.fillRect(this.xPos, this.yPos, 100, 50);

  }

  Kloss.prototype.flyttVenstre = function() {
    ctx.fillStyle = "red";

    ctx.clearRect(this.xPos, this.yPos, 150, 80);

    this.xPos = this.xPos - 20;

    ctx.fillRect(this.xPos, this.yPos, 100, 50);
  }

  Kloss.prototype.flyttHoyre = function() {
    ctx.fillStyle = "red";

    ctx.clearRect(this.xPos, this.yPos, 150, 80);

    this.xPos = this.xPos + 20;

    ctx.fillRect(this.xPos, this.yPos, 100, 50);
  }


  var Kule = function(xPos, yPos, radie) {
    this.xPos = xPos;
    this.yPos = yPos;
    this.radie = radie;
    this.counted = false;
    this.farge = getRandomColor();

  }



  Kule.prototype.tegn = function() {


    ctx.beginPath();
    ctx.arc(this.xPos, this.yPos, this.radie, 0, 2 * Math.PI);
    ctx.fillStyle = this.farge;
    ctx.stroke();
    ctx.fill();

  };

  Kule.prototype.fjernKule = function() {

    ctx.clearRect(this.xPos - 11, this.yPos - 11, this.radie * 2 + 4,
      this.radie * 2 + 4);


  }


  $("#venstre").click(function() {

    kloss1.flyttVenstre();
    kloss1.tegnKloss();
  });

  $("#hoyre").click(function() {
    kloss1.flyttHoyre();
    kloss1.tegnKloss();
  });



  function loop(objekt) {

    setTimeout(function() {
      if (objekt.yPos < 480) {

        objekt.fjernKule();

        objekt.yPos = objekt.yPos + 10;

        var sjekk = sjekkTreff(kloss1, objekt);
        if (sjekk == 1 && !objekt.counted) {
          spillerPoeng++;
          objekt.counted=true;
          document.getElementById("spillerPoeng").innerHTML =
            spillerPoeng;
        } else if (sjekk == 2 && !objekt.counted) {
          pcPoeng++
          objekt.counted=true;
          document.getElementById("pcPoeng").innerHTML = pcPoeng;
        }

        objekt.tegn();



        loop(objekt);
      }

    }, 300)


  }


  function randX(min, max) {

    return Math.floor(Math.random() * (max - min + 1)) + min;

  }

  function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    color += "00";
    for (var i = 0; i < 2; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    color += "00";
    return color;
  }





  var kuleListe = [];

  var maxKuler = 0;

  function settKuleListe() {

    setTimeout(function() {


      kuleListe[maxKuler] = new Kule(randX(10, 480), 0, 10);

      loop(kuleListe[maxKuler]);
      maxKuler++

      settKuleListe();

    }, 2000);

  }



  function sjekkTreff(obj1, obj2) {
    if (obj1.xPos < obj2.xPos && obj1.xPos + 300 > obj2.xPos && obj2.yPos > 450) {

      return (1);
    } else if (obj2.yPos > 450) {

      return (2);
    } else {


      return (3);

    }




  }


  var kloss1 = new Kloss(50, 450);
  kloss1.tegnKloss();



  settKuleListe();






});

Apple Catcher游戏

2 个答案: