Skip to content

Commit fe335e9

Browse files
LakshayNLakshayN
committed
space game
1 parent 22dda1e commit fe335e9

File tree

1 file changed

+162
-150
lines changed

1 file changed

+162
-150
lines changed

‎155 - Space Game/script.js

+162-150
Original file line numberDiff line numberDiff line change
@@ -1,151 +1,163 @@
1-
let ctx = document.getElementById("canvas").getContext("2d");
2-
3-
// Background of Space
4-
const space = {
5-
image: new Image()
6-
};
7-
8-
// An Alien
9-
const alien = {
10-
image: new Image(),
11-
x: Math.random() * (canvas.width - 64),
12-
y: Math.random() * (canvas.width - 64),
13-
aliensCaught: 0,
14-
width: 60,
15-
height: 50
16-
};
17-
18-
// A Robot
19-
const robot = {
20-
image: new Image(),
21-
x: 32,
22-
y: 232,
23-
speed: 10,
24-
width: 160,
25-
height: 150
26-
};
27-
28-
// A Small Planet with animation
29-
const smallPlanet = {
30-
image: new Image(),
31-
x: 0
32-
};
33-
34-
// A Red Planet with animation
35-
const redPlanet = {
36-
image: new Image(),
37-
i: 0,
38-
width: 80,
39-
height: 50
40-
};
41-
42-
// A Red Planet with animation
43-
const blueAsteroid = {
44-
image: new Image()
45-
};
46-
47-
let sound = document.getElementById("sound");
48-
// Reset the alien here
49-
let reset = function() {
50-
alien.x = Math.random() * (canvas.width - 32);
51-
alien.y = Math.random() * (canvas.height - 32);
52-
};
53-
54-
window.onload = function() {
55-
space.image.src =
56-
"https://res.cloudinary.com/dv3lue3qa/image/upload/v1564469725/space-bg-01.png";
57-
smallPlanet.image.src =
58-
"https://res.cloudinary.com/dv3lue3qa/image/upload/v1554025844/planet2_-_Copy.png";
59-
redPlanet.image.src =
60-
"https://res.cloudinary.com/dv3lue3qa/image/upload/v1554025844/planet_-_Copy.png";
61-
robot.image.src =
62-
"https://res.cloudinary.com/dv3lue3qa/image/upload/v1554183485/space-man.png";
63-
alien.image.src =
64-
"https://res.cloudinary.com/dv3lue3qa/image/upload/v1554025845/alien.png";
65-
blueAsteroid.image.src =
66-
"https://res.cloudinary.com/dv3lue3qa/image/upload/v1554025844/rock-2_-_Copy.png";
67-
68-
render();
69-
calc();
70-
reset();
71-
};
72-
73-
// Small Planet Animation
74-
function animateSmallPlanet() {
75-
let currentPosition = 0;
76-
77-
//Looping the small planet
78-
if (Math.abs(smallPlanet.x) >= 650) {
79-
smallPlanet.x = -100;
80-
}
81-
smallPlanet.x += 1.51;
1+
const canvas = document.getElementById("canvas")
2+
const ctx = canvas.getContext("2d");
3+
4+
// Background of Space
5+
const space = {
6+
image: new Image(),
7+
};
8+
9+
// An Alien
10+
const alien = {
11+
image: new Image(),
12+
x: Math.random() * (canvas.width - 64),
13+
y: Math.random() * (canvas.width - 64),
14+
aliensCaught: 0,
15+
width: 60,
16+
height: 50,
17+
};
18+
19+
// A Robot
20+
const robot = {
21+
image: new Image(),
22+
x: 32,
23+
y: 232,
24+
speed: 10,
25+
width: 160,
26+
height: 150,
27+
};
28+
29+
// A Small Planet with animation
30+
const smallPlanet = {
31+
image: new Image(),
32+
x: 0,
33+
};
34+
35+
// A Red Planet with animation
36+
const redPlanet = {
37+
image: new Image(),
38+
i: 0,
39+
width: 80,
40+
height: 50,
41+
};
42+
43+
// A Red Planet with animation
44+
const blueAsteroid = {
45+
image: new Image(),
46+
};
47+
48+
let sound = document.getElementById("sound");
49+
// Reset the alien here
50+
let reset = function () {
51+
alien.x = Math.random() * (canvas.width - 32);
52+
alien.y = Math.random() * (canvas.height - 32);
53+
};
54+
55+
window.onload = function () {
56+
space.image.src =
57+
"https://res.cloudinary.com/dv3lue3qa/image/upload/v1564469725/space-bg-01.png";
58+
smallPlanet.image.src =
59+
"https://res.cloudinary.com/dv3lue3qa/image/upload/v1554025844/planet2_-_Copy.png";
60+
redPlanet.image.src =
61+
"https://res.cloudinary.com/dv3lue3qa/image/upload/v1554025844/planet_-_Copy.png";
62+
robot.image.src =
63+
"https://res.cloudinary.com/dv3lue3qa/image/upload/v1554183485/space-man.png";
64+
alien.image.src =
65+
"https://res.cloudinary.com/dv3lue3qa/image/upload/v1554025845/alien.png";
66+
blueAsteroid.image.src =
67+
"https://res.cloudinary.com/dv3lue3qa/image/upload/v1554025844/rock-2_-_Copy.png";
68+
69+
render();
70+
calc();
71+
reset();
72+
};
73+
74+
// Small Planet Animation
75+
function animateSmallPlanet() {
76+
let currentPosition = 0;
77+
78+
//Looping the small planet
79+
if (Math.abs(smallPlanet.x) >= 650) {
80+
smallPlanet.x = -100;
81+
}
82+
smallPlanet.x += 1.51;
83+
}
84+
85+
// Blue Asteroid
86+
function rotateBlueAsteroid() {
87+
let time = new Date();
88+
ctx.save();
89+
ctx.rotate(
90+
((2 * Math.PI) / 9) * time.getSeconds() +
91+
((2 * Math.PI) / 900) * time.getMilliseconds()
92+
);
93+
ctx.translate(0, 90.5);
94+
ctx.drawImage(blueAsteroid.image, 0.5, 0.5, 100, 70);
95+
ctx.restore();
96+
}
97+
98+
function calc() {
99+
let soundEffect = true;
100+
window.addEventListener("keydown", (event) => {
101+
if (event.keyCode === 40) {
102+
robot.y += 9;
103+
} else if (event.keyCode === 38) {
104+
robot.y -= 9;
105+
} else if (event.keyCode === 37) {
106+
robot.x -= 9;
107+
} else if (event.keyCode === 39) {
108+
robot.x += 9;
109+
}
110+
111+
robot.x = Math.max(robot.x, 0);
112+
robot.y = Math.max(robot.y, 0);
113+
114+
if (robot.x + robot.width > canvas.width) {
115+
robot.x = canvas.width - robot.width;
116+
}
117+
if (robot.y + robot.height > canvas.height) {
118+
robot.y = canvas.height - robot.height;
119+
}
120+
121+
// If they are touching, let the alien appear randomly
122+
if (
123+
// Right edge of the alien is greater than or equal to the left edge of the robot
124+
alien.x + alien.width >= robot.x &&
125+
// Left edge of the alien is less than or is equal to right edge of the robot
126+
alien.x <= robot.x + robot.width &&
127+
// Bottom edge of the alien is greater than or equal to the robot
128+
alien.y + alien.height >= robot.y &&
129+
// Top edge of the alien is less than or equal to bottom edge of the robot
130+
alien.y <= robot.y + robot.height
131+
) {
132+
++alien.aliensCaught;
133+
// Play Sound
134+
if (soundEffect) {
135+
sound.pause();
136+
sound.currentTime = 0;
137+
sound.play();
82138
}
83-
84-
// Blue Asteroid
85-
function rotateBlueAsteroid() {
86-
let time = new Date();
87-
ctx.save();
88-
ctx.rotate(
89-
((2 * Math.PI) / 9) * time.getSeconds() +
90-
((2 * Math.PI) / 900) * time.getMilliseconds()
91-
);
92-
ctx.translate(0, 90.5);
93-
ctx.drawImage(blueAsteroid.image, 0.5, 0.5, 100, 70);
94-
ctx.restore();
95-
}
96-
97-
function calc() {
98-
let soundEffect = true;
99-
window.addEventListener("keydown", event => {
100-
if (event.keyCode === 40) {
101-
robot.y += 9;
102-
} else if (event.keyCode === 38) {
103-
robot.y -= 9;
104-
} else if (event.keyCode === 37) {
105-
robot.x -= 9;
106-
} else if (event.keyCode === 39) {
107-
robot.x += 9;
108-
}
109-
110-
// If they are touching, let the alien appear randomly
111-
if (
112-
// Right edge of the alien is greater than or equal to the left edge of the robot
113-
alien.x + alien.width >= robot.x &&
114-
// Left edge of the alien is less than or is equal to right edge of the robot
115-
alien.x <= robot.x + robot.width &&
116-
// Bottom edge of the alien is greater than or equal to the robot
117-
alien.y + alien.height >= robot.y &&
118-
// Top edge of the alien is less than or equal to bottom edge of the robot
119-
alien.y <= robot.y + robot.height
120-
) {
121-
++alien.aliensCaught;
122-
// Play Sound
123-
if (soundEffect) {
124-
sound.pause();
125-
sound.currentTime = 0;
126-
sound.play();
127-
}
128-
reset();
129-
}
130-
});
131-
}
132-
133-
// Render Everything
134-
function render() {
135-
requestAnimationFrame(render);
136-
// Drawing images
137-
ctx.drawImage(space.image, 0, 0, 700, 550);
138-
ctx.drawImage(smallPlanet.image, smallPlanet.x, 110, 50, 70);
139-
ctx.drawImage(redPlanet.image, 530, 280, redPlanet.width, redPlanet.height);
140-
ctx.drawImage(alien.image, alien.x, alien.y, alien.width, alien.height);
141-
ctx.drawImage(robot.image, robot.x, robot.y, robot.width, robot.height);
142-
143-
//Drawing Score
144-
ctx.fillStyle = "#fff";
145-
ctx.textAlign = "left";
146-
ctx.textBaseline = "top";
147-
ctx.font = "24px Ariel";
148-
ctx.fillText("Aliens Caught: " + alien.aliensCaught, 260, 24);
149-
animateSmallPlanet();
150-
rotateBlueAsteroid();
151-
}
139+
reset();
140+
}
141+
});
142+
}
143+
144+
// Render Everything
145+
function render() {
146+
requestAnimationFrame(render);
147+
// Drawing images
148+
149+
ctx.drawImage(space.image, 0, 0, 700, 550);
150+
ctx.drawImage(smallPlanet.image, smallPlanet.x, 110, 50, 70);
151+
ctx.drawImage(redPlanet.image, 530, 280, redPlanet.width, redPlanet.height);
152+
ctx.drawImage(alien.image, alien.x, alien.y, alien.width, alien.height);
153+
ctx.drawImage(robot.image, robot.x, robot.y, robot.width, robot.height);
154+
155+
//Drawing Score
156+
ctx.fillStyle = "#fff";
157+
ctx.textAlign = "left";
158+
ctx.textBaseline = "top";
159+
ctx.font = "24px Ariel";
160+
ctx.fillText("Aliens Caught: " + alien.aliensCaught, 260, 24);
161+
animateSmallPlanet();
162+
rotateBlueAsteroid();
163+
}

0 commit comments

Comments
 (0)