mirror of
https://github.com/Cola-Echo/memory-manager-concurrent.git
synced 2026-06-06 07:45:53 +00:00
Update memory-manager-concurrent
This commit is contained in:
Cola-Echo
BIN
games/mario/gui/arcade.ttf
Normal file
BIN
games/mario/gui/arcade.ttf
Normal file
Binary file not shown.
BIN
games/mario/gui/arcade.woff
Normal file
BIN
games/mario/gui/arcade.woff
Normal file
Binary file not shown.
89
games/mario/gui/elements.js
Normal file
89
games/mario/gui/elements.js
Normal file
@@ -0,0 +1,89 @@
|
||||
(function() {
|
||||
|
||||
Backbone.LabelButton = Backbone.Button.extend({
|
||||
defaults: _.extend({}, Backbone.Button.prototype.defaults, {
|
||||
x: 400,
|
||||
y: 400,
|
||||
width: 160,
|
||||
height: 100,
|
||||
backgroundColor: "transparent",
|
||||
text: "",
|
||||
textPadding: 12,
|
||||
textContextAttributes: {
|
||||
fillStyle: "#FFC221",
|
||||
font: "40px arcade",
|
||||
textBaseline: "middle",
|
||||
fontWeight: "normal",
|
||||
textAlign: "center"
|
||||
},
|
||||
easing: "easeInCubic",
|
||||
easingTime: 400
|
||||
})
|
||||
});
|
||||
|
||||
Backbone.Scene = Backbone.Element.extend({
|
||||
defaults: _.extend({}, Backbone.Element.prototype.defaults, {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 960,
|
||||
height: 700,
|
||||
backgroundColor: "#000",
|
||||
opacity: 0,
|
||||
text: "",
|
||||
easing: "easeInCubic",
|
||||
easingTime: 400
|
||||
}),
|
||||
initialize: function(attributes, options) {
|
||||
Backbone.Element.prototype.initialize.apply(this, arguments);
|
||||
options || (options = {});
|
||||
this.saved = options.saved;
|
||||
this.world = options.world;
|
||||
this.levels = options.levels;
|
||||
this.pauseButton = options.pauseButton;
|
||||
this.input = options.input;
|
||||
_.bindAll(this, "enter", "exit");
|
||||
},
|
||||
enter: function() {
|
||||
this.set("opacity", 0);
|
||||
this.fadeIn();
|
||||
return this;
|
||||
},
|
||||
exit: function() {
|
||||
this.set("opacity", 1);
|
||||
this.fadeOut();
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
Backbone.Panel = Backbone.Element.extend({
|
||||
defaults: _.extend({}, Backbone.Element.prototype.defaults, {
|
||||
x: 160,
|
||||
y: 720,
|
||||
width: 640,
|
||||
height: 140,
|
||||
backgroundColor: "transparent",
|
||||
img: "#gui", imgX: 0, imgY: 473, imgWidth: 640, imgHeight: 480, imgMargin: 0,
|
||||
text: "",
|
||||
textPadding: 24,
|
||||
textContextAttributes: {
|
||||
fillStyle: "#FFC221",
|
||||
font: "40px arcade",
|
||||
textBaseline: "middle",
|
||||
fontWeight: "normal",
|
||||
textAlign: "center"
|
||||
},
|
||||
easing: "easeOutCubic",
|
||||
easingTime: 600
|
||||
}),
|
||||
initialize: function(attributes, options) {
|
||||
Backbone.Element.prototype.initialize.apply(this, arguments);
|
||||
_.bindAll(this, "show");
|
||||
this.set("y", Backbone.HEIGHT);
|
||||
},
|
||||
show: function() {
|
||||
this.moveTo(this.get("x"), 100);
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
}).call(this);
|
||||
BIN
games/mario/gui/gui.png
Normal file
BIN
games/mario/gui/gui.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
61
games/mario/gui/index.html
Normal file
61
games/mario/gui/index.html
Normal file
@@ -0,0 +1,61 @@
|
||||
<!doctype html>
|
||||
<html style="touch-action: none;">
|
||||
<head>
|
||||
<title>GUI - Backbone Game Engine</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link href="../favicon.ico" rel="shortcut icon" type="image/x-icon" />
|
||||
<link href="../apple_touch_icon.png" rel="apple-touch-icon" />
|
||||
|
||||
<meta name="viewport" content="width=960, user-scalable=no"/>
|
||||
<meta name="mobileoptimized" content="0" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
|
||||
|
||||
<script src="../3rd/underscore.js" type="text/javascript"></script>
|
||||
<script src="../3rd/backbone.native.js" type="text/javascript"></script>
|
||||
<script src="../3rd/backbone.js" type="text/javascript"></script>
|
||||
<script src="../3rd/qtree.js" type="text/javascript"></script>
|
||||
|
||||
<script src="../src/adjust-viewport.js" type="text/javascript"></script>
|
||||
<script src="../src/shapes.js" type="text/javascript"></script>
|
||||
<script src="../src/core.js" type="text/javascript"></script>
|
||||
|
||||
<script src="elements.js" type="text/javascript"></script>
|
||||
<script src="title-screen.js" type="text/javascript"></script>
|
||||
<script src="main.js" type="text/javascript"></script>
|
||||
|
||||
<style>
|
||||
@-ms-viewport {
|
||||
width: 960px;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'arcade';
|
||||
src: url('arcade.ttf'), url('arcade.woff');
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: #000;
|
||||
font-family: "arcade";
|
||||
line-height: 1.2em;
|
||||
}
|
||||
canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<img id="title-screen" src="title-screen.jpg" style="display:none;" />
|
||||
<img id="gui" src="gui.png" style="display:none;" />
|
||||
|
||||
<canvas id="foreground" width="960" height="720" screencanvas="true">
|
||||
Your browser does not support canvas element.
|
||||
</canvas>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
99
games/mario/gui/main.js
Normal file
99
games/mario/gui/main.js
Normal file
@@ -0,0 +1,99 @@
|
||||
$(window).on("load", function() {
|
||||
|
||||
var NATIVE = navigator.isCocoonJS,
|
||||
MOBILE = "onorientationchange" in window ||
|
||||
window.navigator.msMaxTouchPoints ||
|
||||
window.navigator.isCocoonJS;
|
||||
|
||||
var canvas = document.getElementById("foreground"),
|
||||
context = canvas.getContext("2d");
|
||||
|
||||
if (MOBILE) {
|
||||
canvas.height = Math.round(Math.min(canvas.height, canvas.width * Math.min(window.innerHeight, window.innerWidth) / Math.max(window.innerHeight, window.innerWidth) ));
|
||||
} else {
|
||||
canvas.height = Math.round(Math.min(canvas.height, window.innerHeight));
|
||||
adjustViewport(canvas, canvas.width, canvas.height);
|
||||
}
|
||||
console.log("canvas.width=" + canvas.width + " canvas.height=" + canvas.height);
|
||||
|
||||
_.extend(Backbone, {
|
||||
NATIVE: NATIVE,
|
||||
MOBILE: MOBILE,
|
||||
HEIGHT: canvas.height,
|
||||
WIDTH: canvas.width
|
||||
});
|
||||
|
||||
Backbone.Controller = Backbone.Model.extend({
|
||||
initialize: function(attributes, options) {
|
||||
options || (options = {});
|
||||
var controller = this;
|
||||
|
||||
this.debugPanel = new Backbone.DebugPanel({}, {color: "#fff"});
|
||||
|
||||
this.titleScreenGui = new Backbone.TitleScreenGui({
|
||||
id: "titleScreenGui",
|
||||
}, {
|
||||
saved: {
|
||||
level: 1,
|
||||
coins: 10,
|
||||
time: 1000000
|
||||
}
|
||||
});
|
||||
|
||||
// The game engine
|
||||
this.engine = new Backbone.Engine({}, {
|
||||
canvas: canvas,
|
||||
debugPanel: this.debugPanel
|
||||
});
|
||||
|
||||
// Controls
|
||||
$(document).on("keypress.Controller", function(e) {
|
||||
if (e.keyCode == 66 || e.keyCode == 98)
|
||||
controller.engine.toggle(); // b to break the animation
|
||||
});
|
||||
|
||||
this.listenTo(this.engine, "play", this.play);
|
||||
this.listenTo(this.engine, "nextLevel", this.nextLevel);
|
||||
|
||||
this.showTitleScreen();
|
||||
},
|
||||
showTitleScreen: function() {
|
||||
this.engine.stop();
|
||||
this.engine.reset();
|
||||
if (this.debugPanel) this.debugPanel.clear();
|
||||
|
||||
// Start everything
|
||||
this.engine.set("clearOnDraw", true);
|
||||
|
||||
this.engine.add([
|
||||
this.titleScreenGui,
|
||||
this.debugPanel
|
||||
]);
|
||||
this.engine.start();
|
||||
},
|
||||
play: function() {
|
||||
this.engine.stop();
|
||||
this.engine.reset();
|
||||
if (this.debugPanel) this.debugPanel.clear();
|
||||
|
||||
// TO DO: start a new game. Set the state and add world, input, etc to engine
|
||||
},
|
||||
nextLevel: function() {
|
||||
this.engine.stop();
|
||||
this.engine.reset();
|
||||
if (this.debugPanel) this.debugPanel.clear();
|
||||
|
||||
// TO DO: continue an existing game. Reset the state and add world, input, etc to engine
|
||||
}
|
||||
});
|
||||
|
||||
var controller = new Backbone.Controller();
|
||||
|
||||
// Expose things as globals - easier to debug
|
||||
_.extend(window, {
|
||||
canvas: canvas,
|
||||
context: context,
|
||||
controller: controller,
|
||||
});
|
||||
|
||||
});
|
||||
BIN
games/mario/gui/title-screen.jpg
Normal file
BIN
games/mario/gui/title-screen.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 253 KiB |
258
games/mario/gui/title-screen.js
Normal file
258
games/mario/gui/title-screen.js
Normal file
@@ -0,0 +1,258 @@
|
||||
(function() {
|
||||
|
||||
Backbone.PullOutButton = Backbone.Button.extend({
|
||||
defaults: _.extend({}, Backbone.Button.prototype.defaults, {
|
||||
x: -372,
|
||||
width: 372,
|
||||
height: 76,
|
||||
backgroundColor: "transparent",
|
||||
img: "#gui", imgX: 0, imgY: 0, imgWidth: 372, imgHeight: 80, imgMargin: 0,
|
||||
textPadding: 12,
|
||||
textContextAttributes: {
|
||||
fillStyle: "#FFC221",
|
||||
font: "34px arcade",
|
||||
textBaseline: "middle",
|
||||
fontWeight: "normal",
|
||||
textAlign: "right"
|
||||
},
|
||||
easing: "easeOutCubic",
|
||||
easingTime: 600
|
||||
})
|
||||
});
|
||||
|
||||
Backbone.SavedGame = Backbone.Element.extend({
|
||||
defaults: _.extend({}, Backbone.Element.prototype.defaults, {
|
||||
x: 960,
|
||||
y: 280,
|
||||
width: 333,
|
||||
height: 80,
|
||||
backgroundColor: "transparent",
|
||||
img: "#gui", imgX: 0, imgY: 225, imgWidth: 333, imgHeight: 247, imgMargin: 0,
|
||||
text: "High Score",
|
||||
textPadding: 24,
|
||||
textContextAttributes: {
|
||||
fillStyle: "#FFC221",
|
||||
font: "34px arcade",
|
||||
textBaseline: "middle",
|
||||
fontWeight: "normal",
|
||||
textAlign: "left"
|
||||
},
|
||||
easing: "easeOutCubic",
|
||||
easingTime: 600
|
||||
}),
|
||||
initialize: function(attributes, options) {
|
||||
Backbone.Element.prototype.initialize.apply(this, arguments);
|
||||
this.saved = options.saved;
|
||||
},
|
||||
onAttach: function() {
|
||||
Backbone.Element.prototype.onAttach.apply(this, arguments);
|
||||
this.set("text", "Level " + (this.saved ? this.saved.level : "?"));
|
||||
},
|
||||
onDraw: function(context) {
|
||||
var x = this.get("x"),
|
||||
y = this.get("y"),
|
||||
coins = this.saved ? this.saved.coins : "?",
|
||||
time = this.saved ? _.ms2time(this.saved.time) : "?";
|
||||
context.font = "30px arcade";
|
||||
context.fillStyle = "#FFF";
|
||||
context.textBaseline = this.attributes.textContextAttributes.textBaseline;
|
||||
context.fontWeight = this.attributes.textContextAttributes.fontWeight;
|
||||
context.textAlign = this.attributes.textContextAttributes.textAlign;
|
||||
context.fillText(coins, x+80, y+105);
|
||||
context.fillText(time, x+80, y+170);
|
||||
}
|
||||
});
|
||||
|
||||
Backbone.Credits = Backbone.Panel.extend({
|
||||
defaults: _.extend({}, Backbone.Panel.prototype.defaults, {
|
||||
text: "",
|
||||
textContextAttributes: {
|
||||
fillStyle: "#FFC221",
|
||||
font: "40px arcade",
|
||||
textBaseline: "middle",
|
||||
fontWeight: "normal",
|
||||
textAlign: "center"
|
||||
}
|
||||
}),
|
||||
onDraw: function(context, options) {
|
||||
var b = this.toJSON(),
|
||||
y = b.y;
|
||||
|
||||
// Titles
|
||||
b.textContextAttributes.font = "30px arcade";
|
||||
b.textContextAttributes.fillStyle = "#FFC221";
|
||||
|
||||
b.text = "Graphics";
|
||||
b.y = y;
|
||||
this.drawText(b, context, options);
|
||||
|
||||
b.text = "Testing";
|
||||
b.y = y + 130;
|
||||
this.drawText(b, context, options);
|
||||
|
||||
b.text = "Story & Coding";
|
||||
b.y = y + 230;
|
||||
this.drawText(b, context, options);
|
||||
|
||||
// Content
|
||||
b.textContextAttributes.font = "24px arcade";
|
||||
b.textContextAttributes.fillStyle = "#FFF";
|
||||
|
||||
b.text = "???";
|
||||
b.y = y + 40;
|
||||
this.drawText(b, context, options);
|
||||
|
||||
b.text = "???";
|
||||
b.y = y + 170;
|
||||
this.drawText(b, context, options);
|
||||
|
||||
b.text = "???";
|
||||
b.y = y + 270;
|
||||
this.drawText(b, context, options);
|
||||
|
||||
b.textContextAttributes.fillStyle = "#DDD";
|
||||
b.text = "Built with Backbone Game Engine";
|
||||
b.y = y + 340;
|
||||
this.drawText(b, context, options);
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
Backbone.TitleScreenGui = Backbone.Scene.extend({
|
||||
defaults: _.extend({}, Backbone.Scene.prototype.defaults, {
|
||||
img: "#title-screen",
|
||||
imgWidth: 960,
|
||||
imgHeight: 700
|
||||
}),
|
||||
initialize: function(attributes, options) {
|
||||
Backbone.Scene.prototype.initialize.apply(this, arguments);
|
||||
|
||||
this.banner = new Backbone.Button({
|
||||
x: 0, y: 240,
|
||||
width: 960, height: 145,
|
||||
backgroundColor: "transparent",
|
||||
img: "#gui", imgX: 0, imgY: 80, imgWidth: 960, imgHeight: 144, imgMargin: 5,
|
||||
easing: "easeInOutQuad",
|
||||
easingTime: 400
|
||||
});
|
||||
|
||||
this.touchStart = new Backbone.LabelButton({
|
||||
text: "Touch to start",
|
||||
opacity: 0
|
||||
});
|
||||
|
||||
this.loading = new Backbone.LabelButton({
|
||||
y: Backbone.HEIGHT,
|
||||
text: "Loading...",
|
||||
easingTime: 300
|
||||
});
|
||||
|
||||
this.play = new Backbone.PullOutButton({
|
||||
y: Backbone.HEIGHT - 300,
|
||||
text: "New Game "
|
||||
});
|
||||
this.play.on("tap", _.partial(this.action, "play"), this);
|
||||
|
||||
this.showCredits = new Backbone.PullOutButton({
|
||||
y: Backbone.HEIGHT - 100,
|
||||
text: "Credits "
|
||||
});
|
||||
|
||||
this.savedGame = new Backbone.SavedGame({
|
||||
y: Backbone.HEIGHT - 300
|
||||
}, {
|
||||
saved: this.saved
|
||||
});
|
||||
|
||||
|
||||
this.credits = new Backbone.Credits();
|
||||
this.showCredits.on("tap", _.partial(this.showPanel, this.credits), this);
|
||||
},
|
||||
postInitialize: function() {
|
||||
this.listenTo(this.engine, "tap", this.onTouchStart);
|
||||
|
||||
// Hack to avoid FOUT
|
||||
this.touchStart.set("opacity", 1);
|
||||
this.play.textMetrics = undefined;
|
||||
this.showCredits.textMetrics = undefined;
|
||||
},
|
||||
onAttach: function() {
|
||||
Backbone.Scene.prototype.onAttach.apply(this, arguments);
|
||||
this.stopListening(this.engine);
|
||||
this.set("opacity", 1);
|
||||
this.loading.set("x", Backbone.HEIGHT);
|
||||
|
||||
this.play.set("text", this.saved ? "Continue " : "New Game ");
|
||||
|
||||
this.engine.add([this.banner, this.touchStart, this.loading, this.play, this.showCredits, this.credits, this.savedGame]);
|
||||
|
||||
if (!this.ready)
|
||||
setTimeout(this.postInitialize.bind(this), 200);
|
||||
else
|
||||
setTimeout(this.showButtons.bind(this), 100);
|
||||
},
|
||||
onDetach: function() {
|
||||
Backbone.Scene.prototype.onDetach.apply(this, arguments);
|
||||
this.engine.remove([this.banner, this.touchStart, this.loading, this.play, this.showCredits, this.credits, this.savedGame]);
|
||||
},
|
||||
onTouchStart: function(e) {
|
||||
// Animate some stuff
|
||||
this.banner.moveTo(this.banner.get("x"), 50);
|
||||
this.touchStart.moveTo(this.touchStart.get("x"), Backbone.HEIGHT);
|
||||
this.stopListening(this.engine);
|
||||
this.ready = true;
|
||||
this.showButtons();
|
||||
},
|
||||
showButtons: function() {
|
||||
this.play.moveTo(-this.play.get("width") + this.play.textMetrics.width + this.play.get("textPadding")*2, this.play.get("y"));
|
||||
this.showCredits.moveTo(-this.showCredits.get("width") + this.showCredits.textMetrics.width + this.showCredits.get("textPadding")*2, this.showCredits.get("y"));
|
||||
if (this.saved)
|
||||
this.savedGame.moveTo(720, this.savedGame.get("y"));
|
||||
},
|
||||
hideButtons: function() {
|
||||
this.play.moveTo(-this.play.get("width"), this.play.get("y"));
|
||||
this.showCredits.moveTo(-this.showCredits.get("width"), this.showCredits.get("y"));
|
||||
this.savedGame.moveTo(960, this.savedGame.get("y"));
|
||||
},
|
||||
showPanel: function(panel) {
|
||||
this.panel = panel;
|
||||
this.panel.moveTo(this.panel.get("x"), 50);
|
||||
this.hideButtons();
|
||||
this.listenTo(this.engine, "tap", this.hidePanel);
|
||||
},
|
||||
hidePanel: function() {
|
||||
this.stopListening(this.engine);
|
||||
this.panel.moveTo(this.panel.get("x"), Backbone.HEIGHT);
|
||||
this.panel = undefined;
|
||||
this.showButtons();
|
||||
},
|
||||
update: function(dt) {
|
||||
if (!Backbone.Scene.prototype.update.apply(this, arguments)) return false;
|
||||
|
||||
var attrs = {opacity: this.get("opacity")},
|
||||
options = {silent: true};
|
||||
|
||||
this.banner.set(attrs, options);
|
||||
this.touchStart.set(attrs, options);
|
||||
this.loading.set(attrs, options);
|
||||
this.play.set(attrs, options);
|
||||
this.showCredits.set(attrs, options);
|
||||
this.credits.set(attrs, options);
|
||||
this.savedGame.set(attrs, options);
|
||||
|
||||
return true;
|
||||
},
|
||||
action: function(event) {
|
||||
if (event == "play") this.loading.set("x", 400);
|
||||
|
||||
var gui = this;
|
||||
this.hideButtons();
|
||||
setTimeout(function() {
|
||||
gui.fadeOut(function() {
|
||||
gui.engine.trigger(event);
|
||||
});
|
||||
}, 400);
|
||||
}
|
||||
});
|
||||
|
||||
}).call(this);
|
||||
Reference in New Issue
Block a user