为了账号安全,请及时绑定邮箱和手机立即绑定

为什么我的果实上浮时是一条直线

5816603400013bc405000355.jpg

5816603600016e8c05000369.jpg

如图,果实果实上浮时是一条直线,而且上浮时离开页面直线就消失了,回到页面又出现,

代码:fruit.js

// JavaScript Document

var fruitObj = function() {

this.alive = [];      //bool

this.x = [];

this.y = [];

this.l = [];            //果实的半径(大小)

this.spd = [];          //每个果实自己的速度 

this.orange = new Image();

this.blue = new Image();

};

fruitObj.prototype.num = 30;

fruitObj.prototype.init = function(){

for(var i = 0;i<this.num;i++){

this.alive[i] = true;

this.x[i] = 0;

this.y[i] = 0;

this.l[i] = 0;

this.born(i);

}

this.orange.src = "./src/fruit.png";

this.blue.src = "./src/blue.png"

}

fruitObj.prototype.draw = function(){

for(var i = 0;i<this.num;i++){

if(this.l[i]<=14){

this.l[i] += 0.01 *deltaTime;

}

else{

this.y[i] -= 0.07 *deltaTime;

}

ctx2.drawImage(this.orange, this.x[i]-this.l[i] / 2, this.y[i]-this.l[i] / 2, this.l[i], this.l[i]);

}

}

fruitObj.prototype.born = function(i){

var aneID = Math.floor(Math.random()*ane.num);

this.x[i] = ane.x[aneID];

this.y[i] = canHeight - ane.len[aneID];

this.l[i] = 0;

}

main.js

// JavaScript Document

var can1,can2,ctx1,ctx2;

var lastTime;

var deltaTime;

var bgPic = new Image();

var canWidth,canHeight;

var ane;

var fruit;

document.body.onload = game;

function game(){

init();

lastTime=Date.now();

deltaTime = 0;

gameloop();

}

function init(){

//获取canvas context 

    can1=document.getElementById("canvas1");//fishes,dust,ui  circle

    ctx1=can1.getContext('2d');  

    can2=document.getElementById("canvas2");  //background,ane,fruits

    ctx2=can2.getContext('2d');

bgPic.src = "./src/background.jpg";

canWidth = can1.width;

canHeight = can1.height;

ane = new aneObj();

ane.init();

fruit = new fruitObj();

fruit.init();

}


function gameloop(){

window.requestAnimFrame(gameloop);

var now = Date.now();

deltaTime = now - lastTime;

lastTime = now;

drawBackground();

ane.draw();

fruit.draw();

}

求解,万分感谢

正在回答

4 回答

代码没有问题,是不是浏览器卡了?  我帮你测试了  在我的上面正常显示

0 回复 有任何疑惑可以回复我~
#1

隼丶 提问者

找到原因了drawBackground()里多加了onload,而且要写在gameloop()里面,谢谢了
2016-11-06 回复 有任何疑惑可以回复我~
#2

隼丶 提问者

非常感谢!
2016-11-06 回复 有任何疑惑可以回复我~

不是采纳我的答案成功的么?

0 回复 有任何疑惑可以回复我~

是的。都是在gameloop绘制图片和操作相关的啊

0 回复 有任何疑惑可以回复我~

ctxtwo.drawImage(bgPic,0,0);在gameloop()方法里面加上这句话就可以了。

0 回复 有任何疑惑可以回复我~
#1

隼丶 提问者

恩,drawBackground()要写在gameloop()里面。
2016-11-06 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么我的果实上浮时是一条直线

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信