文章/答案/技术大牛

发布

社区首页 >问答首页 >苹果捕手游戏

问苹果捕手游戏
EN

Stack Overflow用户

提问于 2018-01-23 16:19:35

回答 2查看 115关注 0票数 3

所以我正在尝试创建一个苹果捕手游戏。但是到目前为止，我得到的代码真的是错误的。首先，积分计数器不匹配所捕获的苹果。计算机点也是一样。苹果和“篮子”也会相互碰撞，你会在演示中看到。我该如何解决这个问题呢？如有任何帮助，我们将非常感谢:)

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

如果链接不起作用，请告诉我^^ :)

$(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();






});

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

<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>

javascript

jquery

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-01-23 16:56:51

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

这里有一个可以使用箭头键的，尝试一下，想怎么编辑就怎么编辑吧！

(当然，如果您有问题，我会在这里，但我认为我的代码非常清楚)

代码还没有完成，我认为允许一些错误可以帮助你提高自己，所以如果可以的话，试着找到它们;)

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>

票数 2

Stack Overflow用户

发布于 2018-01-23 16:33:12

在做运动帧的时候你会递增(框内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();






});

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48397038

复制

相似问题

问苹果捕手游戏
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问苹果捕手游戏EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问苹果捕手游戏
EN