Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

added loading screen with playgame button

  • Loading branch information...
commit 7404c4a3a80f9957fe04a522f1d0f2fd721845ae 1 parent b9fb881
@BlackScorp authored
View
62 assets/css/style.css
@@ -5,7 +5,7 @@
#cr-stage{
position: absolute;
left:50%;
- margin-left:-320px;
+ margin-left:-300px;
}
.info{
text-align: center;
@@ -13,29 +13,30 @@
.clear{
clear:both;
}
-#interface{
+#interface,#loading{
+ display:none;
position: absolute;
width: 100%;
height: 100%;
z-index:3;
}
-#interface .bars{
+.bars{
position: absolute;
padding:5px;
height:auto;
}
-#interface div.text{
+div.text{
position: absolute;
line-height: 24px;
font-size: 12px;
color:#ffffff;
padding:5px;
}
-#interface div.text.center{
+div.text.center{
width:100%;
text-align: center;
}
-#interface .bars span.text{
+.bars span.text{
position: absolute;
width: 100%;
display:block;
@@ -70,7 +71,7 @@
height:100%;
background:url(../img/bars.png) -0px -54px no-repeat;
}
-#interface .panel{
+.panel{
height: 35px;
position: absolute;
width:100%;
@@ -86,7 +87,7 @@
-khtml-opacity: 0.5;
opacity: 0.5;
}
-#interface .alert{
+.alert{
font-size: 30px;
color:red;
width:100%;
@@ -94,3 +95,48 @@
display:none;
text-align: center;
}
+#loading .ui-progressbar{
+ margin:5px 15px;
+ height:30px;
+ -moz-border-radius: 5px; /* Firefox */
+ -webkit-border-radius: 5px; /* Safari, Chrome */
+ border-radius: 5px; /* CSS3 */
+ border:2px ridge #AAAAAA;
+ background: #333333;
+}
+.button{
+ cursor:pointer;
+ display:none;
+ width: 200px;
+ left:50%;
+ margin-left:-100px;
+ position: absolute;
+ height:30px;
+ -moz-border-radius: 5px; /* Firefox */
+ -webkit-border-radius: 5px; /* Safari, Chrome */
+ border-radius: 5px; /* CSS3 */
+ border:2px ridge #AAAAAA;
+ background: #990000;
+ color:#ffffff;
+ text-align: center;
+ line-height: 30px;
+ bottom:20px;
+}
+#loading .bars{
+ width:100%;
+ padding:0px;
+ margin:0px;
+}
+#loading .text{
+ color:#ffffff;
+ line-height: 30px;
+}
+#loading .ui-progressbar-value{
+ -moz-border-radius: 5px; /* Firefox */
+ -webkit-border-radius: 5px; /* Safari, Chrome */
+ border-radius: 5px; /* CSS3 */
+ background: #990000;
+ height: 30px;
+ width:100%;
+
+}
View
BIN  assets/img/loading.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
22 assets/js/game.js
@@ -1,26 +1,14 @@
+/**
+ * This is the Main JS File
+ */
$(function(){
//Init Crafty
Crafty.init(600,500);
//Add Canvas Element
Crafty.canvas.init();
- //Define Sprites
-
+ //Set canvas under interface
Crafty.canvas._canvas.style.zIndex = '1';
- var bars = {
- hp:$('#hp'),
- heat:$('#heat'),
- shield:$('#shield')
- }
- bars.hp.progressbar({
- value: 0
- });
- bars.heat.progressbar({
- value: 0
- });
- bars.shield.progressbar({
- value: 0
- });
- $('#interface').hide();
+ //play the loading scene
Crafty.scene("Loading");
});
View
57 assets/js/levels.js
@@ -1,6 +1,10 @@
+/**
+ * This file describe different scenes
+ */
//Loading Scene
Crafty.scene("Loading",function(){
+ //Define resources to load
var toLoad = [
//Images
game_path + "assets/img/bg.png",
@@ -29,39 +33,56 @@ Crafty.scene("Loading",function(){
game_path + "media/music/spaceship.ogg",
];
- Crafty.background("black");
- Crafty.e("2D","DOM","Text").css({
- "color":"#ffffff"
- }).text("Loading..");
- var loaded = Crafty.e("2D","DOM","Text").attr({
- x:100
- }).css({
- "color":"#ffffff"
+ //Setup background image
+ Crafty.background("url("+game_path+"assets/img/loading.jpg) black");
+
+ //Select DOM elements
+ var loading = $('#loading');
+ var bar = $('#load');
+ var button = $('.button');
+ var text = bar.find('.text');
+
+ //Display loading interface
+ loading.show();
+ //Setup progressbar
+ bar.progressbar({
+ value:0
+ });
+ //Bind click event on button
+ button.live('click',function(){
+ //Hide loading interface
+ loading.hide();
+ //Start scene level 1
+ Crafty.scene("Level1");
});
Crafty.load(toLoad,
function() {
-
- //when loaded
- $('#interface').show();
- Crafty.scene("Level1"); //go to Level1 scene
+ //Everything is loaded
+ bar.fadeOut(2000,function(){
+ button.show();
+ });
},
function(e) {
-
- loaded.text(Math.round(e.percent)+" %");
- //progress
+ //update progress
+ text.text("Loading... "+~~e.percent+"%");
+ bar.progressbar({
+ value:~~e.percent
+ });
+
},
function(e) {
+ //uh oh, error loading
console.log("Error on loading: "+e.src);
-
- //uh oh, error loading
}
);
});
//Level 1 Scene
Crafty.scene("Level1",function(){
+ //Display interface
+ $('#interface').show();
//Setup background of level
Crafty.background("url(" + game_path + "/assets/img/bg.png)");
@@ -70,7 +91,7 @@ Crafty.scene("Level1",function(){
var spotEnemys = function(frame){
//Spot each 50th Fram one Asteroid
- if(frame % 50 == 0 && Crafty("Asteroid").length < 1){
+ if(frame % 50 == 0 && Crafty("Asteroid").length < 1 && Crafty("SmallAsteroid").length < 1){
Crafty.e("Asteroid");
}
if(frame % 70 == 0 && Crafty("Kamikaze").length < 1){
View
8 index.html
@@ -41,9 +41,15 @@
<div class="bars bottom right" >
<div id="heat" ><span class="text"></span></div>
</div>
-
<div class="alert"></div>
</div>
+ <div id="loading">
+ <div class="button" >Play Game</div>
+
+ <div class="bars bottom">
+ <div id="load" ><span class="text"></span></div>
+ </div>
+ </div>
</div>
</body>
Please sign in to comment.
Something went wrong with that request. Please try again.