接着我们开始写teacher类和Student类，代码如下：

function teacher(target) {
role.call(this, target);
var that = this;
this.model;
this.first = {};
this.imgs = {
front: [],
trunback: [],
back: [],
strun: [],
trunfront: [],
catchup:[]
};
this.init = function (point, callback) {
this.model = role_config.teacher;
this.load(this.model.front.imgs, this.imgs.front, point, this.model.front.imgs.length, callback);
};
this.loadtrunback = function (point, callback) {
this.load(this.model.trunback.imgs, this.imgs.trunback, point, this.model.trunback.imgs.length, callback);
};
this.loadback = function (point, callback) {
this.load(this.model.back.imgs, this.imgs.back, point, this.model.back.imgs.length, callback);
};
this.loadstrun = function (point, callback) {
this.load(this.model.strun.imgs, this.imgs.strun, point, this.model.strun.imgs.length, callback);
};
this.loadtrunfront = function (point, callback) {
this.load(this.model.trunfront.imgs, this.imgs.trunfront, point, this.model.trunfront.imgs.length, callback);
};
this.loadcatchup = function (point, callback) {
this.load(this.model.catchup.imgs, this.imgs.catchup, point, this.model.catchup.imgs.length, callback);
};
this.front = function (callback) {
this.animate(this.imgs.front, this.model.front, callback);
};
this.trunback = function (callback) {
this.animate(this.imgs.trunback, this.model.trunback, callback);
};
this.back = function (callback) {
this.animate(this.imgs.back, this.model.back, callback);
};
this.strun = function (callback) {
this.animate(this.imgs.strun, this.model.strun, callback);
};
this.trunfront = function (callback) {
this.animate(this.imgs.trunfront, this.model.trunfront, callback);
};
this.catchup = function (callback) {
this.animate(this.imgs.catchup, this.model.catchup, callback);
};
}
function studentLeft(target) {
role.call(this, target);
var that = this;
this.model;
this.first = {};
this.imgs = {
bow: [],
up: []
};
this.init = function (point, callback) {
this.model = role_config.studentLeft;
this.load(this.model.up.imgs, this.imgs.up, point, this.model.bow.imgs.length);
this.load(this.model.bow.imgs, this.imgs.bow, point, this.model.bow.imgs.length, callback);
};
this.bow = function (callback) {
this.animate(this.imgs.bow, this.model.bow, callback);
};
this.up = function (callback) {
this.animate(this.imgs.up, this.model.up, callback);
};
}
function studentRight(target) {
role.call(this, target);
var that = this;
this.model;
this.imgs = {
bow: [],
up: []
};
this.init = function (point, callback) {
this.model = role_config.studentRight;
this.load(this.model.up.imgs, this.imgs.up, point, this.model.bow.imgs.length);
this.load(this.model.bow.imgs, this.imgs.bow, point, this.model.bow.imgs.length, callback);
};
this.bow = function (callback) {
this.animate(this.imgs.bow, this.model.bow, callback);
};
this.up = function (callback) {
this.animate(this.imgs.up, this.model.up, callback);
};
}
View Code

分别继承于role，然后有一些自己的动作。

4、然后就是拼接了，根据游戏逻辑来拼接各个动作，于是我们最初的game类，就有了充实，代码如下：

function game() {
var that = this;
this.teacher;
this.studentLeft;
this.studentRight;
this.isOver = false;
this.isStart = false;
this.isFlag = true;
this.index = 0;
this.success = false;
this.username = '';
this.percent = 0;
this.number = 0;
this.overHandler;
this.left = {};
this.right = {};
this.time = 0;
this.score = 0;
this.number = 0;
this.status = 0;
this.interval = 0;
this.sInterval = 0;
this.level = [3, 2, 1];
this.difficulty = 0;
this.gameTime = 1000;
this.ticket = '';
this.totalScore = 0;
this.totalRankingCount = 0;
this.init = function () {
this.left = {
scoreContainer: ".game-score-left",
name: "left",
isPress: false,
handler: null,
score: 0,
step: 5,
time: 0
};
this.right = {
scoreContainer: ".game-score-right",
name: "right",
isPress: false,
handler: null,
score: 0,
step: 5,
time: 0
};
var teacher_board = document.getElementById("gameteacher");
var studentLeft_board = document.getElementById("gamestudentleft");
var studentRight_board = document.getElementById("gamestudentright");
this.teacher = new teacher(teacher_board.getContext("2d"));
this.studentLeft = new studentLeft(studentLeft_board.getContext("2d"));
this.studentRight = new studentRight(studentRight_board.getContext("2d"));
this.teacher.init({ x: 0, y: 0, w: teacher_board.width, h: teacher_board.height }, function () {
that.loading(10);
});
this.teacher.loadtrunback({ x: 0, y: 0, w: teacher_board.width, h: teacher_board.height }, function () {
that.loading(10);
});
this.teacher.loadback({ x: 0, y: 0, w: teacher_board.width, h: teacher_board.height }, function () {
that.loading(10);
});
this.teacher.loadstrun({ x: 0, y: 0, w: teacher_board.width, h: teacher_board.height }, function () {
that.loading(10);
});
this.teacher.loadtrunfront({ x: 0, y: 0, w: teacher_board.width, h: teacher_board.height }, function () {
that.loading(10);
});
this.teacher.loadcatchup({ x: 0, y: 0, w: teacher_board.width, h: teacher_board.height }, function () {
that.loading(10);
});
this.studentLeft.init({ x: 0, y: 0, w: studentLeft_board.width, h: studentLeft_board.height }, function () {
that.loading(20);
});
this.studentRight.init({ x: 0, y: 0, w: studentRight_board.width, h: studentRight_board.height }, function () {
that.loading(20);
});
};
this.loading = function (percent) {
this.percent = this.percent + percent;
$("#progressbarbj").css("width", this.percent + "%");
$(".game-percent").text(this.percent);
if (this.percent == 100) {
$(".game-loading").animate({ top: "-100%" }, 500, function () {
that.isStart = true;
that.start();
that.event();
});
}
};
this.start = function () {
this.isFlag = false;
that.studentLeft.up();
that.studentRight.up();
$(".game-time-text").text((this.gameTime - this.time).toFixed(1));
this.teacher.front(function () {
that.teacher.trunback(function () {
that.status = status_config.back;
that.isFlag = true;
that.teacher.back();
});
});
this.listen();
};
this.listen = function () {
this.overHandler = setInterval(function () {
if (that.isStart && !that.isOver) {
that.isCatch();
that.startCount();
if (that.isFlag) {
if (that.status == status_config.back) {
that.front(that.level[that.difficulty]);
} else {
that.back();
}
}
}
}, 100);
};
this.gameOver = function () {
this.teacher.catchup(function () {
$(".game-catch-up").show();
});
};
this.timeEnd = function () {
$(".game-over").show();
};
this.gameEnd = function () {
this.isOver = true;
if (this.overHandler) {
clearInterval(this.overHandler);
}
};
this.front = function (intervel) {
var r = Math.random();
if (this.time - this.interval >= intervel) {
if (r < 0.6) {
this.isFlag = false;
this.teacher.trunfront(function () {
that.interval = that.time;
that.status = status_config.front;
that.isFlag = true;
that.teacher.front();
});
}
} else if (this.time - this.sInterval >= 1) {
if (r < 0.1) {
this.isFlag = false;
that.sInterval = that.time;
this.teacher.strun(function () {
that.isFlag = true;
that.teacher.back();
});
}
}
};
this.back = function () {
var r = Math.random();
if (this.time - this.interval >= 1) {
if (r < 0.8) {
this.isFlag = false;
that.status = status_config.back;
this.teacher.trunback(function () {
that.interval = that.time;
that.isFlag = true;
that.teacher.back();
});
}
}
};
this.isCatch = function () {
if (!this.isOver) {
if (this.status == status_config.front) {
if (this.left.isPress || this.right.isPress) {
this.catchUp();
return true;
}
}
}
return false;
};
this.catchUp = function () {
this.gameEnd(that.gameOver());
};
this.startCount = function () {
this.time = this.time + 0.1;
this.difficulty = parseInt(this.time / 10);
this.difficulty = this.difficulty >= this.level.length ? this.level.length - 1 : this.difficulty;
this.score = this.left.score + this.right.score;
$(".game-score-text").text(this.score);
if (this.time >= this.gameTime) {
this.timeEnd(that.gameEnd());
}
};
this.pressDown = function (model) {
if (model.handler) {
clearInterval(model.handler);
}
if (this.isStart && !this.isOver) {
model.score = model.score + model.step;
model.isPress = true;
this.scoreAction(model.step, model.scoreContainer);
model.handler = setInterval(function () {
if (model.isPress) {
model.time = model.time + 0.2;
if (model.time >= 0.6) {
model.step = 10;
}
if (model.time >= 1.2) {
model.step = 50;
}
if (model.time >= 1.8) {
model.step = 100;
}
model.score = model.score + model.step;
that.scoreAction(model.step, model.scoreContainer);
}
}, 200);
}
};
this.scoreAction = function (score, container) {
var img = $('<img src="img/' + score + '.png" />');
$(container).append(img);
img.animate({ "top": "-60" }, 500, function () {
setTimeout(function () {
img.fadeOut(1000, function () {
img.remove();
});
}, 1000);
});
};
this.pressUp = function (model) {
clearInterval(model.handler);
model.isPress = false;
model.time = 0;
model.step = 5;
};
this.event = function () {
$(".game-student-left").bind({
"mousedown": function () {
that.studentLeft.bow();
that.pressDown(that.left);
return false;
},
"mouseup": function () {
that.studentLeft.up();
that.pressUp(that.left);
return false;
},
"touchstart": function () {
that.studentLeft.bow();
that.pressDown(that.left);
return false;
},
"touchend": function () {
that.studentLeft.up();
that.pressUp(that.left);
return false;
}
});
$(".game-student-right").bind({
"mousedown": function () {
that.studentRight.bow();
that.pressDown(that.right);
return false;
},
"mouseup": function () {
that.studentRight.up();
that.pressUp(that.right);
return false;
},
"touchstart": function () {
that.studentRight.bow();
that.pressDown(that.right);
return false;
},
"touchend": function () {
that.studentRight.up();
that.pressUp(that.right);
return false;
}
});
};
};
var status_config = {
front: 0,
back: 1
}
View Code

代码到这里就结束了，是不是很简单，欢迎各位大神指正，小弟刚学js，只因C#博文都没人赞，所以试试js看看。