craftyjs-game/game.html at master · hacksu/craftyjs-game · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<html>
<head>
	<title>CraftyJS Game</title>
	<script src="https://cdn.rawgit.com/craftyjs/Crafty/testing/dist/crafty-min.js"></script>
</head>
<body>

	<script type="text/javascript">
		//Create some constants for good programming practice
		var BULLET_SIZE = 3;
		var TILE_SIZE = 16; //16x16 pixels for each tile since our player and enemies are all the same size.

		//Create an object which contains all of our images.
		var assetsObj = {
		    "sprites": {
		        "http://imgur.com/iE28ahR.png": { // The url of the sprite sheet
		            // The width of each image in pixels
            		tile: TILE_SIZE,
            		// The height of each image
           			tileh: TILE_SIZE,
		            map: {
		                ship: [0, 0],//indices of each image [column, row]
		                yellow_bug: [0, 4],
		                red_bug: [0, 3],
		                yellow_queen: [0,1],
		                purple_queen: [0,2]
		            }
		        }
		    }
		};

		/*	An array representing the formation of enemies in a stage.
			Key:
			0 - Empty Space
			1 - Yellow Bug
			2 - Red Bug
			3 - Yellow Queen
		*/
		var enemyArray = [[0,0,0,3,3,3,3,0,0,0],
						  [0,2,2,2,2,2,2,2,2,0],
						  [0,2,2,2,2,2,2,2,2,0],
						  [1,1,1,1,1,1,1,1,1,1],
						  [1,1,1,1,1,1,1,1,1,1]];

		window.onload = function() {
			Crafty.init(250, 322);//set the size of our game window
			Crafty.background('black');//Set the background to black, because Space, ya know?
			Crafty.load(assetsObj, go);//Load our assets and then call the go() function when finished
		};

		function go() {
			// score
			Crafty.e("score, Canvas, 2D, Text")
	    		.attr({ x: 5, y: 0, w: 100, h: 15, score: 0 })
	    		.text("0 kabillion points");

			//Define a bullet component
			Crafty.c("Bullet", {
			    bullet: function(direction) {
			        this.bind("EnterFrame", function() {
			            this.move(direction, 5);//Bullet speed
			            if(this.y > Crafty.viewport.height || this.y < 0)
			                this.destroy();
			        });
			        return this;
			    }
			});

			//Initialize Player
			var player = Crafty.e('2D, Canvas, ship, Twoway')
				.attr({x: Crafty.viewport.width/2 - 16, y: Crafty.viewport.height - 32, w: 16, h: 16})
				.twoway(60);//Move speed, JumpSpeed

			player.canShoot = true;
			// Create function for shooting
			player.bind('KeyDown', function(e) {
    			if(e.key == Crafty.keys.SPACE) {
		            if(this.canShoot) {
		                this.canShoot = false;
		                setTimeout(function(){ player.canShoot = true }, 175);

		                Crafty.e("2D, Canvas, Color, Bullet")
		                	.attr({x: this.x + this.w/2 - BULLET_SIZE/2, y: this.y + 2, w: BULLET_SIZE, h: BULLET_SIZE})
		                	.color("rgb(255,255,255)").bullet("n");
		            }
				}
		  	});

			//Create Enemies
			initEnemies(enemyArray);
		}

		//This function takes in a 2d Array and creates Crafty entities in the game
		function initEnemies(array) {
			var paddingh = (Crafty.viewport.width - array[0].length*TILE_SIZE)/2.0; //Find padding (in pixels) so our enemies are centered
			var paddingv = 32;

			Crafty.c("BackAndForth", {
			    init: function(){
			        this.requires("2D");
			        this.v = 0.5;  // 1 pixels per frame
			        this.t = 0;
			        this.bind("EnterFrame", this.doMotion);
			    },

			    doMotion: function(frameData){
			         this.x += Math.cos(frameData.frame);
			    }
			});

			for (var i = 0; i < array.length; i++) {
				for (var j = 0; j < array[i].length; j++) {
					if (array[i][j] == 1) {

						var yellow_bug = Crafty.e('2D, Canvas, yellow_bug, SpriteAnimation, BackAndForth')
							.attr({x: paddingh + j * TILE_SIZE, y: paddingv + i*TILE_SIZE, w: TILE_SIZE, h: TILE_SIZE })
							.reel("sprite_loop", 1500, [ //The name of our reel and total animation time
								[0, 4], [1, 4] //List each frame we want to show
							])
							.animate("sprite_loop", -1);//Animate. -1 Loops forever
							// .onHit("Bullet", function(entities) {
						 //        for (var i in entities) {
					  //               entities[i].obj.destroy();
					  //               Crafty("score").each(function () {
					  //                   this.text(++this.score + " kabillion points");
					  //               });
						 //        }
						 //    });

					} else if (array[i][j] == 2) {

						var red_bug = Crafty.e('2D, Canvas, red_bug, SpriteAnimation')
							.attr({x: paddingh + j * TILE_SIZE, y: paddingv + i*TILE_SIZE, w: TILE_SIZE, h: TILE_SIZE })
							.reel("sprite_loop", 1500, [ //The name of our reel and total animation time
								[0, 3], [1, 3] //List each frame we want to show
							])
							.animate("sprite_loop", -1); //Animate. -1 Loops forever

					} else if (array[i][j] == 3) {

						var queen = Crafty.e('2D, Canvas, yellow_queen, SpriteAnimation')
							.attr({x: paddingh + j * TILE_SIZE, y: paddingv+ i*TILE_SIZE, w: TILE_SIZE, h: TILE_SIZE })
							.reel("sprite_loop", 1500, [ //The name of our reel and total animation time
								[0, 1], [1, 1] //List each frame we want to show
							])
							.animate("sprite_loop", -1); //Animate. -1 Loops forever

					}
				};
			};
		}

	</script>
</body>
</html>