Skip to content

Commit ffe8fec

Browse files
peteramapeterama
committed
Load Game Screen.
1 parent 0b1167c commit ffe8fec

23 files changed

+121
-62
lines changed

‎assets/images/crafty-sprite.png

-2.62 KB
Binary file not shown.

‎assets/images/doorwaySprite.png

-1.46 KB
Binary file not shown.

‎assets/images/loadGameScreen/backToMain.png

4.24 KB
Loading

‎assets/images/loadGameScreen/backToMainSelect.png

3.96 KB
Loading

‎assets/images/loadGameScreen/scroll.png

530 KB
Loading

‎assets/images/loadGameScreen/slot1.png

6.03 KB
Loading

‎assets/images/loadGameScreen/slot1select.png

5.49 KB
Loading

‎assets/images/loadGameScreen/slot2.png

6.33 KB
Loading

‎assets/images/loadGameScreen/slot2select.png

5.73 KB
Loading

‎assets/images/sprites/crafty-sprite.png

2.46 KB
Loading

‎assets/images/sprites/doorwaySprite.png

9.73 KB
Loading

‎assets/images/sprites/grassField.png

561 KB
Loading

‎assets/images/titleScreen.png renamed to ‎assets/images/titleScreen/background.png

File renamed without changes.

‎assets/images/loadGame.png renamed to ‎assets/images/titleScreen/loadGame.png

File renamed without changes.

‎assets/images/loadGameHover.png renamed to ‎assets/images/titleScreen/loadGameHover.png

File renamed without changes.

‎assets/images/newGame.png renamed to ‎assets/images/titleScreen/newGame.png

File renamed without changes.

‎assets/images/newGameHover.png renamed to ‎assets/images/titleScreen/newGameHover.png

File renamed without changes.

‎assets/images/title.png renamed to ‎assets/images/titleScreen/title.png

File renamed without changes.

‎assets/sounds/background.wav

-8.93 MB
Binary file not shown.

‎assets/sounds/doorSound.wav

-214 KB
Binary file not shown.

‎index.html

-5
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,6 @@
33
<head>
44
<link rel="shortcut icon" href="assets/images/knife.ico">
55
<script type="text/javascript" src="src/crafty 0.5.4.js"></script>
6-
<!--
7-
<script type="text/javascript" src="src/model.js"></script>
8-
<script type="text/javascript" src="src/view.js"></script>
9-
<script type="text/javascript" src="src/controller.js"></script>
10-
-->
116
<script type="text/javascript" src="src/main.js"></script>
127
<script>
138
window.addEventListener('load', Game.start);

‎src/crafty 0.5.4.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -8857,12 +8857,12 @@ Crafty.extend({
88578857
* Crafty.audio.play("explosion",1,0.5); //play sound once with volume of 50%
88588858
* ~~~
88598859
*/
8860-
play : function(id, repeat, volume) {
8860+
play : function(id, repeat, volume, restart) {
88618861
if (repeat == 0 || !Crafty.support.audio || !this.sounds[id])
88628862
return;
88638863
var s = this.sounds[id];
88648864
s.volume = s.obj.volume = volume || Crafty.audio.volume;
8865-
if (s.obj.currentTime)
8865+
if (s.obj.currentTime && restart == true)
88668866
s.obj.currentTime = 0;
88678867
if (this.muted)
88688868
s.obj.volume = 0;

‎src/main.js

+119-55
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,48 @@
1-
var canvasWidth = 900;
2-
var canvasHeight = 600;
3-
var tileWidth = 60;
4-
var tileHeight = 60;
5-
var numHorizontalTiles = canvasWidth/tileWidth;
6-
var numVerticalTiles = canvasHeight/tileHeight;
7-
var exitLoc = {x: -1, y: -1};
1+
var canvasWidth = 1024
2+
var canvasHeight = 768
3+
var tileWidth = 64
4+
var tileHeight = 64
5+
var numHorizontalTiles = canvasWidth/tileWidth
6+
var numVerticalTiles = canvasHeight/tileHeight
7+
var exitLoc = {x: 5, y: 5}
8+
var player
89

910
Game = {
1011
start: function() {
11-
1212
Crafty.init(canvasWidth, canvasHeight);
1313

14+
//scene transition function
15+
function load_scene(scene, duration) {
16+
Crafty.e("2D, DOM, Tween, Color")
17+
.attr({alpha:0.0, x:0, y:0, z: 5, w:canvasWidth, h:canvasHeight})
18+
.color("#000")
19+
.tween({alpha: 1.0}, duration)
20+
.bind("TweenEnd", function() {
21+
Crafty.scene(scene);
22+
Crafty.e("2D, DOM, Tween, Color")
23+
.attr({alpha:1.0, x:0, y:0, z: 5, w:canvasWidth, h:canvasHeight})
24+
.color("#000")
25+
.tween({alpha: 0.0}, duration*2);
26+
});
27+
}
28+
1429
//loading scene
1530
Crafty.scene("loading", function() {
1631

17-
Crafty.load(["assets/images/crafty-sprite.png",
18-
"assets/images/titleScreen.png",
32+
Crafty.load(["assets/images/titleScreen.png",
33+
"assets/images/title.png",
1934
"assets/images/newGame.png",
2035
"assets/images/newGameHover.png",
2136
"assets/images/loadGame.png",
2237
"assets/images/loadGameHover.png",
38+
"assets/images/crafty-sprite.png",
39+
"assets/images/doorwaySprite.png",
2340
"assets/sounds/doorSound.mp3",
24-
"assets/sounds/doorSound.wav",
2541
"assets/sounds/doorSound.ogg",
2642
"assets/sounds/background.mp3",
27-
"assets/sounds/background.wav",
2843
"assets/sounds/background.ogg"],
2944
function() {
30-
Crafty.sprite(60, "assets/images/crafty-sprite.png", {
45+
Crafty.sprite(tileWidth, "assets/images/sprites/crafty-sprite.png", {
3146
grass1: [0,0],
3247
grass2: [1,0],
3348
grass3: [2,0],
@@ -37,65 +52,112 @@ Game = {
3752
bush2: [1,2],
3853
player: [0,3]
3954
});
40-
Crafty.sprite(60, "assets/images/doorwaySprite.png", {
55+
Crafty.sprite(tileWidth, "assets/images/sprites/doorwaySprite.png", {
4156
doorway: [0,0]
4257
});
4358
Crafty.audio.add({
4459
background: ["assets/sounds/background.mp3",
45-
"assets/sounds/background.wav",
4660
"assets/sounds/background.ogg"],
4761
doorSound: ["assets/sounds/doorSound.mp3",
48-
"assets/sounds/doorSound.wav",
4962
"assets/sounds/doorSound.ogg"]
5063
});
51-
Crafty.audio.play("background", -1);
52-
Crafty.scene("titleScreen");
64+
Crafty.audio.play("background", -1)
65+
load_scene("titleScreen", 40)
5366
});
5467

5568
Crafty.background("#000");
5669
Crafty.e("2D, DOM, Text")
57-
.attr({w: 100, h: 20, x: 350, y: 290}) //x=(canvasWidth-this._w)/2, y=(canvasHeight-this._h)/2
70+
.attr({w: 100, h: 20, x: 400, y: 290}) //x=(canvasWidth-this._w)/2, y=(canvasHeight-this._h)/2
5871
.text("Loading")
5972
.css({"text-align": "center"});
6073
});
6174

6275
// titleScreen scene
6376
Crafty.scene("titleScreen", function(){
64-
Crafty.e("2D, DOM, Image").image("assets/images/titleScreen.png")
77+
Crafty.background("url('assets/images/titleScreen/background.png')")
6578

66-
var title = Crafty.e("2D, DOM, Image, Tween")
67-
.image("assets/images/title.png")
68-
.attr({alpha: 0.0, x: 108, y: 50}) //x=(canvasWidth-this._w)/2
69-
.tween({alpha: 1.0}, 100);
79+
var title = Crafty.e("2D, DOM, Image")
80+
.image("assets/images/titleScreen/title.png")
81+
.attr({x: 180, y: 150}) //x=(canvasWidth-this._w)/2
7082

71-
var newGame = Crafty.e("2D, DOM, Mouse, Image, Tween")
72-
.image("assets/images/newGame.png")
73-
.attr({alpha: 0.0, x: 277, y: 400}) // x=(canvasWidth-this._w)/2
74-
.tween({alpha: 1.0}, 100)
83+
var newGame = Crafty.e("2D, DOM, Mouse, Image")
84+
.image("assets/images/titleScreen/newGame.png")
85+
.attr({x: 350, y: 500}) // x=(canvasWidth-this._w)/2
7586
.bind("MouseOver", function(){
76-
newGame.image("assets/images/newGameHover.png");
87+
newGame.image("assets/images/titleScreen/newGameHover.png");
7788
})
7889
.bind("MouseOut", function(){
79-
newGame.image("assets/images/newGame.png");
90+
newGame.image("assets/images/titleScreen/newGame.png");
8091
})
8192
.bind("Click", function(){
82-
Crafty.scene("main");
93+
load_scene("main", 40);
8394
})
8495

85-
var loadGame = Crafty.e("2D, DOM, Mouse, Image, Tween")
86-
.image("assets/images/loadGame.png")
87-
.attr({alpha: 0.0, x: 277, y: 500}) // x=(canvasWidth-this._w)/2
88-
.tween({alpha: 1.0}, 100)
96+
var loadGame = Crafty.e("2D, DOM, Mouse, Image")
97+
.image("assets/images/titleScreen/loadGame.png")
98+
.attr({x: 350, y: 600}) // x=(canvasWidth-this._w)/2
8999
.bind("MouseOver", function(){
90-
loadGame.image("assets/images/loadGameHover.png");
100+
loadGame.image("assets/images/titleScreen/loadGameHover.png");
91101
})
92102
.bind("MouseOut", function(){
93-
loadGame.image("assets/images/loadGame.png");
103+
loadGame.image("assets/images/titleScreen/loadGame.png");
94104
})
95105
.bind("Click", function(){
96-
alert("load game scene");
106+
load_scene('loadGameScreen', 40)
97107
})
98108
});
109+
110+
Crafty.scene("loadGameScreen", function (){
111+
// Load game window image
112+
Crafty.e("2D, DOM, Image").image("assets/images/loadGameScreen/scroll.png")
113+
.attr({x: 250, y: 25, w: 20, h: 20})
114+
// text on load window game
115+
Crafty.e("2D, DOM, Text")
116+
.attr({x: 410, y: 200, w: 500})
117+
.text("Load Game")
118+
.textFont({size: "45px", weight: "bold"})
119+
.textColor("#7B4A12", 0.9)
120+
.unselectable()
121+
// Memory Slot 1
122+
var slot1 = Crafty.e("2D, DOM, Image, Mouse, Tween")
123+
.image("assets/images/loadGameScreen/slot1.png")
124+
.attr({x: 355, y: 350})
125+
.bind("MouseOver", function(){
126+
slot1.image("assets/images/loadGameScreen/slot1select.png")
127+
})
128+
.bind("MouseOut", function(){
129+
slot1.image("assets/images/loadGameScreen/slot1.png")
130+
})
131+
.bind("Click", function(){
132+
Crafty.storage.load("slot1")
133+
})
134+
// Memory Slot 2
135+
var slot2 = Crafty.e("2D, DOM, Image, Mouse")
136+
.image("assets/images/loadGameScreen/slot2.png")
137+
.attr({x: 355, y: 450})
138+
.bind("MouseOver", function(){
139+
slot2.image("assets/images/loadGameScreen/slot2select.png")
140+
})
141+
.bind("MouseOut", function(){
142+
slot2.image("assets/images/loadGameScreen/slot2.png")
143+
})
144+
.bind("Click", function(){
145+
Crafty.storage.load("slot1")
146+
})
147+
// Back to Main Menu Button
148+
var backToMain = Crafty.e("2D, DOM, Image, Mouse")
149+
.image("assets/images/loadGameScreen/backToMain.png")
150+
.attr({x: 10, y: 10})
151+
.bind("MouseOver", function(){
152+
backToMain.image("assets/images/loadGameScreen/backToMainSelect.png")
153+
})
154+
.bind("MouseOut", function(){
155+
backToMain.image("assets/images/loadGameScreen/backToMain.png")
156+
})
157+
.bind("Click", function(){
158+
load_scene("titleScreen", 40)
159+
})
160+
});
99161

100162
Crafty.c('Grid', {
101163
init: function() {
@@ -135,6 +197,7 @@ Game = {
135197
},
136198
setID: function(ID) {
137199
this.ID = ID;
200+
return this;
138201
}
139202
});
140203

@@ -147,10 +210,11 @@ Game = {
147210

148211
Crafty.c('PlayerCharacter', {
149212
init: function() {
150-
this.requires('Actor, Fourway, player, SpriteAnimation, Collision')
213+
this.requires('Actor, Fourway, player, SpriteAnimation, Collision, Persist')
151214
.fourway(3)
152215
.stopOnSolids()
153216
.exitOnDoors()
217+
.attr({z: 3})
154218
.animate('PlayerMovingUp', 3, 3, 5)
155219
.animate('PlayerMovingRight', 9, 3, 11)
156220
.animate('PlayerMovingDown', 0, 3, 2)
@@ -178,10 +242,8 @@ Game = {
178242

179243
stopMovement: function(ent) {
180244
if (this._movement){
181-
182245
for (var i=0; i<ent.length; i++){
183246
var obj = ent[i].obj;
184-
185247
var up = (!obj.contains(this._x, this._y, 2, 0)) && (!obj.contains(this._x+this._w-2, this._y, 2, 0));
186248
var down = (!obj.contains(this._x, this._y+this._h, 2, 0)) && (!obj.contains(this._x+this._w-2, this._y+this._h, 2, 0));
187249
var left = (!obj.contains(this._x, this._y, 0, 2)) && (!obj.contains(this._x, this._y+this._h-2, 0, 2));
@@ -197,15 +259,15 @@ Game = {
197259
},
198260

199261
exitOnDoors: function(){
200-
this.onHit('Door', this.exit);
262+
this.onHit('Door', function(ent){
263+
var door = ent[0].obj;
264+
if (door.contains(this._x+(this._w/2)-5, this._y+(this._h/2)-5, 10, 10)){
265+
Crafty.audio.play("doorSound");
266+
exitLoc = door.at();
267+
load_scene(door.ID, 40);
268+
}
269+
});
201270
return this;
202-
},
203-
204-
exit: function(ent) {
205-
Crafty.audio.play("doorSound");
206-
var door = ent[0].obj;
207-
doorLoc = door.at();
208-
Crafty.scene(door.ID);
209271
}
210272
});
211273

@@ -220,12 +282,11 @@ Game = {
220282
}
221283
Change: OCCUPIED
222284
*/
223-
//generate the grass along the x-axis
285+
Crafty.background("url('assets/images/sprites/grassField.png')")
286+
224287
for(var i = 0; i < numHorizontalTiles; i++) {
225288
for(var j = 0; j < numVerticalTiles; j++) {
226-
Crafty.e("Actor, grass"+Crafty.math.randomInt(1, 4)).at(i, j)
227-
228-
if(i > 0 && i < (numHorizontalTiles-1) && j > 0 && j < (numVerticalTiles-1) && Crafty.math.randomInt(0, 50) > 49) {
289+
if(i > 0 && i < (numHorizontalTiles-1) && j > 0 && j < (numVerticalTiles-1) && Crafty.math.randomInt(0, 50) > 49) {
229290
Crafty.e("Flower").at(i, j);
230291
}
231292
}
@@ -253,14 +314,17 @@ Game = {
253314
//main scene
254315
Crafty.scene("main" , function(){
255316
generateWorld(); //this.occupied = generateWorld(); Change: OCCUPIED
256-
Crafty.e("PlayerCharacter").at(5,5)
317+
if (!player)
318+
player = Crafty.e("PlayerCharacter").at(5, 5);
319+
else
320+
player.at(exitLoc.x, exitLoc.y);
257321
Crafty.e("Door").at(7, 2).setID("nextRoom");
258322
Crafty.e("Door").at(2, 8).setID("nextRoom");
259323
});
260324

261325
Crafty.scene("nextRoom", function(){
262326
generateWorld(); //this.occupied = generateWorld(); Change: OCCUPIED
263-
Crafty.e("PlayerCharacter").at(doorLoc.x, doorLoc.y);
327+
player.at(exitLoc.x, exitLoc.y);
264328
Crafty.e("Door").at(5, 5).setID("main");
265329
Crafty.e("Door").at(3, 2).setID("main");
266330
});

0 commit comments

Comments
 (0)