是不是main.js文件里用来存放图片的数组babyBody没有定义,或者定义错了?
全局变量换成局部变量吧,便于后期代码管理和重用。 嗯,我只能想到这么多。。
//分值计算
var dataObj = function ()
{
this.fruitNum = 0;
this.double = 1;
this.score = 0;
this.gameOver = false;
this.alpha = 0;
}
dataObj.prototype.draw = function()
{
var w = can1.width;
var h = can1.height;
ctx1.save();
ctx1.shadoBlur = 10;
ctx1.shadowColor = "white";
ctx1.fillStyle = "white";
ctx1.fillText("分数 " + this.score, w * 0.5, h - 20);
if(this.gameOver)
{
this.alpha += deltaTime * 0.0005;
if(this.alpha > 1)
this.alpha = 1;
ctx1.fillStyle = "rgba(255,255,255," + this.alpha +")";
ctx1.fillText("游戏结束", w * 0.5, h * 0.5);
}
ctx1.restore();
}
dataObj.prototype.addScore = function()
{
this.score += this.fruitNum * 10 * this.double;
this.fruitNum = 0;
this.double = 1;
}
是不是在忘写这个了,导致小鱼变白后出现undefined
重新打开,我也遇到这个问题,网页重新打开就好了
大鱼尾巴初始化有问题,查一下资源里面有没有bigTail图片。
划线一行最后的参数 应该是 -momTail[momTailCount].height * 0.5。
注意查看下你代码中的大括号。
这个问题解决了,但海葵消失了
momBabyCollision 查看下该方法下面应该有语句错误。每个标点符号都很重哟啊。
请查看下console
应该是大括号有问题,请注意下mom和baby.js中的大括号是否使用正确。
在dataObj()中定义 this.score
我也出现了这个错,然后发现是因为我的interval初始化为0了。。所以this.babyEyeTimer %= this.babyEyeInterval会出现NaN的情况。。
console.log(this.babyTailTimer);
console.log(deltaTime);没相加之前这样是正常的
但是加上这句this.babyTailTimer += deltaTime,
console.log(this.babyTailTimer)打印出来是NaN
谢谢大哥
if(this.r[i] > 60){ this.alive[i] = false; break; }
到底是大鱼还是小鱼???怎么还会有乱码的出现??这代码哪里来的???
不摆动代表代码没有调用成功,反复看一下视频看你的代码有什么没有添加或者写错了
有可能是你删除了定义的body,eye或者tail但是没有替换新定义的变量
你这里是不是少了个后括号
可以的,恩~实际上不是sublime3提供的功能,他是起编写功能,事实上,是浏览器在执行这些操作
同问,代码相同,主函数调用,HTML已添加,控制台不报错但是就是不显示数值
main.js
var can1;
var can2;
var ctx1;
var ctx2;
var lastTime;
var deltaTime;
var canWidth;
var canHeight;
var bgPic = new Image();
var ane;
var fruit;
var mom;
var mx;
var my;
var baby;
var babyTail = [];
var babyEye = [];
var babyBody = [];
var momTail=[];
var momEye=[];
var momBodyOrange=[];
var momBodyBlue=[];
var data;
document.body.onload = game;
function game() {
init();
lastTime = Date.now();
deltaTime = 0;
gameloop();
}
function init() {
//获得canvas内容
can1 = document.getElementById("canvas1");
ctx1 = can1.getContext('2d');
can2 = document.getElementById("canvas2");
ctx2 = can2.getContext('2d');
can1.addEventListener('mousemove', onmouseMove, false);
bgPic.src = "img/background.jpg";
canWidth = can1.width;
canHeight = can1.height;
ane = new aneObj();
ane.init();
fruit = new fruitObj();
fruit.init();
mom = new momObj();
mom.init();
baby = new babyObj();
baby.init();
mx = canWidth * 0.5;
my = canHeight * 0.5;
for (var i = 0; i < 8; i++) {
babyTail[i] = new Image();
babyTail[i].src = "./img/babyTail" + i + ".png";
}
for (var i = 0; i < 2; i++) {
babyEye[i] = new Image();
babyEye[i].src = "./img/babyEye" + i + ".png";
}
for (var i = 0; i < 20; i++) {
babyBody[i] = new Image();
babyBody[i].src = "./img/babyFade" + i + ".png";
}
for (var i = 0; i < 8; i++) {
momTail[i] = new Image();
momTail[i].src = "./img/bigTail" + i + ".png";
}
for (var i = 0; i < 2; i++) {
momEye[i] = new Image();
momEye[i].src = "./img/bigEye" + i + ".png";
}
data=new dataObj();
for (var i = 0; i < 8; i++) {
momBodyOrange[i] = new Image();
momBodyOrange[i].src = "./img/bigSwim" + i + ".png";
momBodyBlue[i] = new Image();
momBodyBlue[i].src = "./img/bigSwimBlue" + i + ".png";
}
}
function gameloop() {
requestAnimationFrame(gameloop); //比起setInterval,setTimeout更加科学,但是有动态时间间隔
var now = Date.now();
deltaTime = now - lastTime;
lastTime = now;
if (deltaTime > 40) deltaTime = 40;
drawBackground();
ane.draw();
fruitMonitor();
fruit.draw();
ctx1.clearRect(0, 0, canWidth, canHeight);
mom.draw();
baby.draw();
momFruitsCollision();
momBabyCollision();
data.draw();
}
function onmouseMove(event) {
if (event.offsetX || event.layerX) {
mx = event.offsetX == undefined ? event.layerX : event.offsetX;
my = event.offsetY == undefined ? event.layerY : event.offsetY;
}
}
data.js
var dataObj = function() {
this.fruitNum = 0;
this.double = 1;
}
dataObj.prototype.reset=function() {
this.fruitNum = 0;
this.double = 1;
}
dataObj.prototype.draw = function() {
var w = can1.width;
var h = can1.height;
ctx1.fillStyle = "white";
ctx1.fillText = ("num" + this.fruitNum, w * 0.5, h - 50);
ctx1.fillText = ("double " + this.double, w * 0.5, h - 80);
}
collision.js
//judge the distance between mom fish and fruit
function momFruitsCollision() {
for (var i = 0; i < fruit.num; i++) {
if (fruit.alive[i]) {
//calculate length
var l = calLength2(fruit.x[i], fruit.y[i], mom.x, mom.y);
if (l < 900) {
//fruit eaten
fruit.dead(i);
data.fruitNum++;
mom.momBodyCount++;
if(mom.momBodyCount>7){
mom.momBodyCount=7;
}
if (fruit.fruitType[i]=="blue") {
data.double = 2;
} //blue fruit
}
}
}
}
//mom baby collision
function momBabyCollision() {
var l = calLength2(mom.x, mom.y, baby.x, baby.y);
if (l < 900) {
//baby recover
baby.babyBodyCount = 0;
//data==>0
data.reset();
mom.momBodyCount=0;
}
}