Question

我创造了与硬币收藏家游戏非常相似的东西：https://codepen.io/basilfamer/pen/FJejn

一个区别是我将使用png文件而不是用画布绘制的黄色硬币。问题是当我在画布中渲染图像时，图像保持静态。我做错了什么？

＆＃13;

var mousex = 160,
    mousey = 120;

var finished = false;

var score = 0,
    coinslost = 0;
var ctx = canvas.getContext("2d");



var keydown = [];

for(var i=0; i<128; i++)
{
  keydown[i] = false;
}

setInterval(function(){
  update();
  draw();
}, 1000/60);

setInterval(function(){
  if(Math.random()>0.7)
  {
  addCoin();
  }
}, 1000/30);

var player = {
  x: 32,
  y: 120,
  width: 32,
  height: 32,
  yspeed: 0
};

var gravity = .5;

function draw()
{
  if (finished==false)
  {
  ctx.clearRect(0,0,320,240);
  
  coins.forEach(function(coin){
    if (coin.active)
    {
    coin.draw();
    }
  });
  
  ctx.fillStyle = "red";
  ctx.fillRect(player.x-(player.width/2), player.y-(player.height/2), player.width, player.height);
  
  ctx.fillStyle = "black";
  ctx.fillText("Score: " + score, 2, 10);
  ctx.fillText("Coins Lost: " + coinslost, 2, 22);
  }
  else
  {
    ctx.clearRect(0,0,320,240);
    ctx.fillText("You won with " + finishedcoins + " coins lost!", 80, 120);
  }
  
}

var finishedcoins;

function update()
{
  if (finished)
  {
    exit;
  }
  if (score>=100)
  {
    finished = true;
    finishedcoins = coinslost;
  }
  gravity+=.5;
  player.y += gravity;
  player.y -= player.yspeed;
  
  if (player.y>240-16)
  {
    gravity = 0;
    player.yspeed = 0;
    player.y=240-16;
  }
  
  coins.forEach(function(coin){
    if(coin.active)
    {
    coin.update();
    }
  });
  
  if (keydown[32])
  {
    if (gravity==0)
    {
      player.yspeed = 10;
    }
  }
  
}

var coins = [];

function addCoin()
{
  var coin = {
    active: true,
    x: Math.random()*320,
    y: -16,
    width: 8,
    height: 16,
    gravity: 0.5,
    draw: function(){
     
      ctx.fillStyle = "yellow";
      ctx.fillRect(this.x, this.y, this.width, this.height);
      
      var image = document.getElementById("imgsource");
      ctx.drawImage(image, 200, 0, 32, 32);
      
    },
    
    update: function(){
     
      this.gravity+=.5;
      this.y+=this.gravity;
      
      if (this.gravity>3)
      {
        this.gravity = 3;
      }
      
      if(collides(this,player))
      {
        score++;
        this.active = false;
      }
      
      if(this.y>240)
      {
        this.active = false;
        coinslost++;
      }
      
    }
  };
  
  coins.push(coin);
  
}

$(document).keypress(function(event){
  keydown[event.which] = true;
});

$(document).keyup(function(event){
  keydown[event.which] = false;
});

function collides(a, b) {
  
  if(b==player)
  {
    b = {

      x: player.x-16,
      y: player.y-16,
      width: player.width,
      height: player.height
    }
  }
  
  return a.x < b.x + b.width &&
         a.x + a.width > b.x &&
         a.y < b.y + b.height &&
         a.y + a.height > b.y;
}

$('#canvas').mousedown(function(e){
  if (gravity==0)
    {
      player.yspeed = 12;
    }
  
  addCoin();
});

$("#canvas").mousemove(function(e){

  mousex = e.pageX-this.offsetLeft;  
  mousey = e.pageY-this.offsetTop;
  
  player.x = e.pageX-this.offsetLeft;
  
});

＆＃13;

canvas
{
  border: 1px solid black;
  cursor: none;
}

＆＃13;

<canvas id='canvas'>
</canvas>
<div style="display:none;">  
<img id="imgsource" src="http://lorempixel.com/10/10/sports/"
               width="32" height="32"/>
        </div>

＆＃13;

在绘制功能中，为什么这不起作用？

draw: function(){
      ctx.fillStyle = "yellow";
      ctx.fillRect(this.x, this.y, this.width, this.height);

      var image = document.getElementById("imgsource");
      ctx.drawImage(image, 0, 0, 32, 32);

    },

Answer 1

试试这个：

var image = document.getElementById("imgsource");
function addCoin()

    {
      var coin = {
        ...
        draw: function(){

          // ctx.fillStyle = "yellow";
          // ctx.fillRect(this.x, this.y, this.width, this.height);
          ctx.drawImage(image, this.x, this.y);
        },

       ...

有一个错误，因为你必须添加jQuery库。

检查一下：https://jsfiddle.net/Lbx8xh1a/2/

画布：使用图像（png）而不是矩形不符合要求

1 个答案: