欢迎来到程序小院
超级马里奥
玩法：点击鼠标左键进行马里奥跳跃，带着马里奥跳跃不同的障碍物，统计分数，快去玩变态超级玛丽吧^^。
开始游戏
https://www.ormcc.com/play/gameStart/193
html
<canvas id="gamescene"></canvas>
css
#game_div.horizontal{width:680px; height:480px;}
.horizontal #start{background:transparent; width:680px; height:460px;}
.horizontal #start .title{margin:15px auto 15px;}
.horizontal #play{background:transparent; width:680px; height:300px;}
.horizontal #end{width:680px; height:400px;}
.horizontal #footer{bottom:0;}
js
var P = function(canvas, size, procedure) {
var self = this;
self.debug = true;
self.width = size.width;
self.height = size.height;
self.director = new P.Director;
self.loader = new P.Loader;
self.root = new P.Group(this);
self.ctx = document.getElementById(canvas).getContext('2d');
self.camera = new P.Camera(this);
self.pe = new P.Physics(this);
self.other = {};
self.other = {};
procedure.preload && procedure.preload(this);
self.loader.waitForComplete(P.Util.proxy(function() {
procedure.init && procedure.init(this);
procedure.start && procedure.start(this);
self.render(self.ctx);
}, this));
}
P.prototype.render = function(ctx) {
var self = this;
P.Util.setIntervalWithTimeout(function() {
ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height);
self.camera.update();
self.renderTree(self.root, ctx);
}, 1000/60);
}
P.prototype.renderTree = function(node, ctx) {
if (node.img) {
if (node.stype == "normal") {
var x = node.x - (this.camera.x);
var y = node.y - (this.camera.y);
ctx.drawImage(node.img, 0+node.width*node.frame, 0,
node.width, node.height, x, y, node.width, node.height);
} else if (node.stype == "repeat-x") {
var x = node.x;
var y = node.y - (this.camera.y);
var startX = (this.camera.x>node.x)
? ((node.x-this.camera.x) % node.width)
: (-(node.width+(this.camera.x-node.x)%node.width));
var number = Math.ceil((this.width-startX)/node.width);
for (var i = 0; i < number; i++) {
ctx.drawImage(node.img, startX+i*node.width, y);
}
} else if (node.stype == "repeat-x-rect") {
var pattern = ctx.createPattern(node.img, "repeat-x");
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, this.width, this.height);
} else if (node.stype == "group") {
}
}
for (var x in node.children) {
this.renderTree(node.children[x], ctx);
}
}
// P.Camera
P.Camera = function(game) {
this.x = 0;
this.y = 0;
this.padding = {
top: 0
,right: 0
,bottom: 0
,left: 0
};
this.player = null;
this.game = game;
}
P.Camera.prototype.follow = function(player, playerPosition, stype, options) {
this.player = player;
this.playerPosition = playerPosition;
this.stype = stype;
if (stype == "padding") {
this.padding = options;
var width = this.game.width - options.left - options.right;
var height = this.game.height - options.top - options.bottom;
this.x = player.x-(width*playerPosition.x+options.left);
this.y = player.y-(height*playerPosition.y+options.top);
} else if (stype == "viewport") {
this.viewport = options;
this.x = player.x-(options.width*playerPosition.x+options.x);
this.y = player.y-(options.height*playerPosition.y+options.y);
}
}
P.Camera.prototype.update = function() {
if (this.player) {
if (this.stype == "padding") {
if (this.player.x < this.x+this.padding.left) {
this.x += this.player.x - (this.x+this.padding.left);
} else if (this.player.x > this.x+this.game.width-this.padding.right) {
this.x += this.player.x - (this.x+this.game.width-this.padding.right);
}
if (this.player.y < this.y+this.padding.top) {
this.y += this.player.y - (this.y+this.padding.top);
} else if (this.player.y > this.y+this.game.height-this.padding.bottom) {
this.y += this.player.y - (this.camera.y+this.game.height-this.padding.bottom);
}
} else if (this.stype == "viewport") {
if (this.player.x < this.x+this.viewport.x) {
this.x += this.player.x - (this.x+this.viewport.x);
} else if (this.player.x > this.x+this.game.width-
(this.game.width-this.viewport.x-this.viewport.width)) {
this.x += this.player.x - (this.x+this.game.width-
(this.game.width-this.viewport.x-this.viewport.width));
}
if (this.player.y < this.y+this.viewport.y) {
this.y += this.player.y - (this.y+this.viewport.y);
} else if (this.player.y > this.y+this.game.height-
(this.game.height-this.viewport.y-this.viewport.height)) {
this.y += this.player.y - (this.camera.y+this.game.height-
(this.game.height-this.viewport.y-this.viewport.height));
}
}
}
}
P.Physics = function(game) {
this.game = game;
this.loop = null;
this.gravity = 0;
this.children = {};
this.isRunning = false;
}
P.Physics.prototype.start = function() {
var self = this;
self.isRunning = true;
self.loop = P.Util.setIntervalWithTimeout(function() {
self.update();
}, 1000/60);
}
P.Physics.prototype.stop = function() {
P.Util.clearIntervalWithTimeout(this.loop);
this.loop = null;
this.isRunning = false;
}
源码https://www.ormcc.com/
需要源码请关注添加好友哦^ ^
转载：欢迎来到本站，转载请注明文章出处
https://ormcc.com/
