我创造了与硬币收藏家游戏非常相似的东西:https://codepen.io/basilfamer/pen/FJejn
一个区别是我将使用png文件而不是用画布绘制的黄色硬币。 问题是当我在画布中渲染图像时,图像保持静态。我做错了什么?
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);
},
答案 0 :(得分:0)
试试这个:
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库。