Skip to content

Commit e7cafb6

Browse files
bit101bit101
committed
app 2 files
1 parent 1128a26 commit e7cafb6

File tree

5 files changed

+268
-0
lines changed

5 files changed

+268
-0
lines changed

‎application2/index.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title></title>
5+
<script type="text/javascript" src="vector.js"></script>
6+
<script type="text/javascript" src="particle.js"></script>
7+
<script type="text/javascript" src="utils.js"></script>
8+
<script type="text/javascript" src="main2.js"></script>
9+
<style type="text/css">
10+
html, body {
11+
margin: 0px;
12+
}
13+
14+
canvas {
15+
display: block;
16+
}
17+
18+
</style>
19+
</head>
20+
<body>
21+
<canvas id="canvas"></canvas>
22+
</body>
23+
</html>

‎application2/main.js

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
window.onload = function() {
2+
var canvas = document.getElementById("canvas"),
3+
context = canvas.getContext("2d"),
4+
width = canvas.width = window.innerWidth,
5+
height = canvas.height = window.innerHeight,
6+
gun = {
7+
x: 100,
8+
y: height,
9+
angle: -Math.PI / 4
10+
},
11+
cannonball = particle.create(gun.x, gun.y, 15, gun.angle, 0.2),
12+
canShoot = true;
13+
14+
cannonball.radius = 7;
15+
16+
draw();
17+
18+
document.body.addEventListener("mousedown", onMouseDown);
19+
20+
document.body.addEventListener("keyup", function(event) {
21+
switch(event.keyCode) {
22+
case 32: // space
23+
if(canShoot) {
24+
shoot();
25+
}
26+
break;
27+
28+
default:
29+
break;
30+
}
31+
});
32+
33+
function shoot() {
34+
cannonball.position.setX(gun.x + Math.cos(gun.angle) * 40);
35+
cannonball.position.setY(gun.y + Math.sin(gun.angle) * 40);
36+
cannonball.velocity.setLength(15);
37+
cannonball.velocity.setAngle(gun.angle);
38+
39+
canShoot = false;
40+
update();
41+
}
42+
43+
function update() {
44+
cannonball.update();
45+
draw();
46+
47+
if(cannonball.position.getY() > height) {
48+
canShoot = true;
49+
}
50+
else {
51+
requestAnimationFrame(update);
52+
}
53+
}
54+
55+
function onMouseDown(event) {
56+
document.body.addEventListener("mousemove", onMouseMove);
57+
document.body.addEventListener("mouseup", onMouseUp);
58+
aimGun(event.clientX, event.clientY);
59+
}
60+
61+
function onMouseMove(event) {
62+
aimGun(event.clientX, event.clientY);
63+
}
64+
65+
function onMouseUp(event) {
66+
document.body.removeEventListener("mousemove", onMouseMove);
67+
document.body.removeEventListener("mouseup", onMouseUp);
68+
aimGun(event.clientX, event.clientY);
69+
}
70+
71+
function aimGun(mouseX, mouseY) {
72+
gun.angle = utils.clamp(Math.atan2(mouseY - gun.y, mouseX - gun.x), -Math.PI / 2, -0.3);
73+
draw();
74+
}
75+
76+
function draw() {
77+
context.clearRect(0, 0, width, height);
78+
79+
context.beginPath();
80+
context.arc(gun.x, gun.y, 24, 0, Math.PI * 2, false);
81+
context.fill();
82+
83+
context.save();
84+
context.translate(gun.x, gun.y);
85+
context.rotate(gun.angle);
86+
context.fillRect(0, -8, 40, 16);
87+
context.restore();
88+
89+
context.beginPath();
90+
context.arc(cannonball.position.getX(),
91+
cannonball.position.getY(),
92+
cannonball.radius,
93+
0, Math.PI * 2, false);
94+
context.fill();
95+
}
96+
97+
};

‎application2/particle.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
var particle = {
2+
position: null,
3+
velocity: null,
4+
mass: 1,
5+
radius: 0,
6+
bounce: -1,
7+
friction: 1,
8+
9+
create: function(x, y, speed, direction, grav) {
10+
var obj = Object.create(this);
11+
obj.position = vector.create(x, y);
12+
obj.velocity = vector.create(0, 0);
13+
obj.velocity.setLength(speed);
14+
obj.velocity.setAngle(direction);
15+
obj.gravity = vector.create(0, grav || 0);
16+
return obj;
17+
},
18+
19+
accelerate: function(accel) {
20+
this.velocity.addTo(accel);
21+
},
22+
23+
update: function() {
24+
this.velocity.multiplyBy(this.friction);
25+
this.velocity.addTo(this.gravity);
26+
this.position.addTo(this.velocity);
27+
},
28+
29+
angleTo: function(p2) {
30+
return Math.atan2(p2.position.getY() - this.position.getY(), p2.position.getX() - this.position.getX());
31+
},
32+
33+
distanceTo: function(p2) {
34+
var dx = p2.position.getX() - this.position.getX(),
35+
dy = p2.position.getY() - this.position.getY();
36+
37+
return Math.sqrt(dx * dx + dy * dy);
38+
},
39+
40+
gravitateTo: function(p2) {
41+
var grav = vector.create(0, 0),
42+
dist = this.distanceTo(p2);
43+
44+
grav.setLength(p2.mass / (dist * dist));
45+
grav.setAngle(this.angleTo(p2));
46+
this.velocity.addTo(grav);
47+
}
48+
};

‎application2/utils.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
var utils = {
2+
norm: function(value, min, max) {
3+
return (value - min) / (max - min);
4+
},
5+
6+
lerp: function(norm, min, max) {
7+
return (max - min) * norm + min;
8+
},
9+
10+
map: function(value, sourceMin, sourceMax, destMin, destMax) {
11+
return utils.lerp(utils.norm(value, sourceMin, sourceMax), destMin, destMax);
12+
},
13+
14+
clamp: function(value, min, max) {
15+
return Math.min(Math.max(value, min), max);
16+
}
17+
}

‎application2/vector.js

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
var vector = {
2+
_x: 1,
3+
_y: 0,
4+
5+
create: function(x, y) {
6+
var obj = Object.create(this);
7+
obj.setX(x);
8+
obj.setY(y);
9+
return obj;
10+
},
11+
12+
setX: function(value) {
13+
this._x = value;
14+
},
15+
16+
getX: function() {
17+
return this._x;
18+
},
19+
20+
setY: function(value) {
21+
this._y = value;
22+
},
23+
24+
getY: function() {
25+
return this._y;
26+
},
27+
28+
setAngle: function(angle) {
29+
var length = this.getLength();
30+
this._x = Math.cos(angle) * length;
31+
this._y = Math.sin(angle) * length;
32+
},
33+
34+
getAngle: function() {
35+
return Math.atan2(this._y, this._x);
36+
},
37+
38+
setLength: function(length) {
39+
var angle = this.getAngle();
40+
this._x = Math.cos(angle) * length;
41+
this._y = Math.sin(angle) * length;
42+
},
43+
44+
getLength: function() {
45+
return Math.sqrt(this._x * this._x + this._y * this._y);
46+
},
47+
48+
add: function(v2) {
49+
return vector.create(this._x + v2.getX(), this._y + v2.getY());
50+
},
51+
52+
subtract: function(v2) {
53+
return vector.create(this._x - v2.getX(), this._y - v2.getY());
54+
},
55+
56+
multiply: function(val) {
57+
return vector.create(this._x * val, this._y * val);
58+
},
59+
60+
divide: function(val) {
61+
return vector.create(this._x / val, this._y / val);
62+
},
63+
64+
addTo: function(v2) {
65+
this._x += v2.getX();
66+
this._y += v2.getY();
67+
},
68+
69+
subtractFrom: function(v2) {
70+
this._x -= v2.getX();
71+
this._y -= v2.getY();
72+
},
73+
74+
multiplyBy: function(val) {
75+
this._x *= val;
76+
this._y *= val;
77+
},
78+
79+
divideBy: function(val) {
80+
this._x /= val;
81+
this._y /= val;
82+
}
83+
};

0 commit comments

Comments
 (0)