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

来源:2-5 果实绘制(果实上浮)

隼丶

2016-10-31 05:07

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

  • 欢乐多2
    2016-11-01 15:20:11
    已采纳

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

    隼丶

    非常感谢!

    2016-11-06 15:52:57

    共 2 条回复 >

  • Feair
    2016-11-12 07:42:03

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

  • Feair
    2016-11-06 16:13:30

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

  • Feair
    2016-11-06 13:11:16

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

    隼丶

    恩,drawBackground()要写在gameloop()里面。

    2016-11-06 15:52:41

    共 1 条回复 >

HTML5小游戏---爱心鱼(上)

学做HTML5游戏,轻轻松松带你上手,适合刚入手游戏开发的同学

92353 学习 · 550 问题

查看课程

相似问题