Skip to content

Commit 169c9a1

Browse files
iLikeGrapeiLikeGrape
committed
new collision engine
1 parent 54b4fa3 commit 169c9a1

File tree

3 files changed

+182
-35
lines changed

3 files changed

+182
-35
lines changed

‎platformer.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Platformer</title>
77
<link rel="stylesheet" href="platformer.css">
8-
<script src="platformer.js"></script>
8+
<script src="platformerTest.js"></script>
99
</head>
1010
<body>
1111
<h1>Platformer Thingy</h1>

‎platformer.js‎

Lines changed: 1 addition & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -117,20 +117,7 @@ function update() {
117117
for (let i = 0; i < platformArray.length; i++) { //drawing platforms
118118
let platform = platformArray[i];
119119
context.fillRect(platform.x, platform.y, platform.width, platform.height);
120-
121-
if (xCollision(player, platform)&& yCollision(player, platform) ) { //stoping player going up if hitting platforms
122-
playerVelY = 0;
123-
if (checkSideRight){
124-
if(playerVelX < 0){
125-
playerVelX = 0
126-
};
127-
};
128-
if (checkSideLeft){
129-
if(playerVelX > 0){
130-
playerVelX = 0
131-
};
132-
};
133-
};
120+
134121
};
135122

136123
//player x movement
@@ -146,30 +133,10 @@ function update() {
146133

147134
};
148135

149-
function xCollision(a, b) { // checks is the left or right sides are touching
150-
return a.x <= b.x + b.width && //a's left side is to the left of b's right side
151-
a.x + a.width >= b.x; //a's right side is to the right b's left side
152-
};
153-
function yCollision(a, b) {
154-
return a.y <= b.y + b.height && //a's top side is above b's bottom side
155-
a.y + a.height >= b.y; //a's bottom side is under b's top side
156-
};
157136
function createPlatforms() {
158137
platform.height = 25;
159138
platform.width = 150;
160139
platform.x = 50;
161140
platform.y = 200;
162141
platformArray.push(platform);
163142
};
164-
function checkSideLeft(a, b) {
165-
if(a.x <= b.x && a.x + a.width >= b.x){ //if a left side to the left of b left side and a right side to the right of b left side, its the right side of a touching b
166-
if (a.x + a.width - b.x <= 10 && a.x + a.width - b.x >= 0)
167-
return true;
168-
};
169-
};
170-
function checkSideRight(a, b) {
171-
if(a.x <= b.x + b.width && a.x + a.width >= b.x + b.width){ //if a left side to the left of b left side and a right side to the right of b left side, its the right side of a touching b
172-
if (a.x + a.width - b.x - b.width <= 10 && a.x + a.width - b.x - b.width >= 0)
173-
return true ;
174-
};
175-
};

‎platformerTest.js‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
let board;
2+
let boardWidth = 800;
3+
let boardHeight = 500;
4+
let context;
5+
6+
// Player properties
7+
let playerX = 400;
8+
let playerY = 400;
9+
let playerWidth = 50;
10+
let playerHeight = 50;
11+
12+
// Player physics
13+
let playerVelY = 0;
14+
let playerVelX = 0;
15+
let onGround = true;
16+
let gravity = 0.4;
17+
let groundHeight = 400;
18+
let moveLeft = false;
19+
let moveRight = false;
20+
21+
let player = {
22+
x: playerX,
23+
y: playerY,
24+
width: playerWidth,
25+
height: playerHeight,
26+
};
27+
28+
let platform = {
29+
x: null,
30+
y: null,
31+
width: null,
32+
height: null,
33+
};
34+
35+
let platformArray = []
36+
37+
window.onload = function () { //when game starts
38+
board = document.getElementById("board");
39+
board.height = boardHeight;
40+
board.width = boardWidth;
41+
42+
context = board.getContext("2d"); //used for drawing on the board
43+
44+
// Create platforms
45+
createPlatforms();
46+
47+
document.addEventListener("keydown", function (e) {
48+
switch (e.key) {
49+
case "ArrowLeft":
50+
moveLeft = true
51+
break;
52+
case "a":
53+
moveLeft = true
54+
break;
55+
case "ArrowRight":
56+
moveRight = true
57+
break;
58+
case "d":
59+
moveRight = true
60+
break;
61+
case " ":
62+
e.preventDefault()
63+
playerVelY = -10;
64+
break;
65+
case "w":
66+
playerVelY = -10;
67+
break;
68+
case "ArrowUp":
69+
playerVelY = -10;
70+
break;
71+
72+
}
73+
}, false);
74+
window.addEventListener("keyup", function (e) {
75+
switch (e.key) {
76+
case "ArrowLeft":
77+
moveLeft = false
78+
break;
79+
case "a":
80+
moveLeft = false
81+
break;
82+
case "ArrowRight":
83+
moveRight = false
84+
break;
85+
case "d":
86+
moveRight = false
87+
break;
88+
}
89+
}, false);
90+
requestAnimationFrame(update);
91+
92+
}
93+
94+
function update() {
95+
requestAnimationFrame(update);
96+
console.log("update")
97+
context.clearRect(0, 0, board.width, board.height);
98+
// Preparing for next frame
99+
100+
// Determining movement
101+
if (moveLeft &&!moveRight) {
102+
playerVelX = -5
103+
}
104+
if (moveRight &&!moveLeft) {
105+
playerVelX = 5
106+
}
107+
if (!moveLeft &&!moveRight) {
108+
playerVelX = 0
109+
}
110+
// Calculating gravity
111+
playerVelY += gravity;
112+
113+
// Player x movement
114+
player.x += playerVelX;
115+
116+
// Collision detection with platforms
117+
for (let i = 0; i < platformArray.length; i++) {
118+
let platform = platformArray[i];
119+
if (player.x + player.width > platform.x && player.x < platform.x + platform.width) {
120+
if (player.y + player.height > platform.y && player.y < platform.y + platform.height) {
121+
// If player is moving downwards and touches the platform
122+
if (playerVelY > 0) {
123+
player.y = platform.y - player.height;
124+
playerVelY = 0;
125+
}
126+
// If player is moving upwards and touches the platform
127+
else if (playerVelY < 0) {
128+
player.y = platform.y + platform.height;
129+
playerVelY = 0;
130+
}
131+
}
132+
}
133+
}
134+
135+
// Collision detection with ground
136+
if (player.y + player.height > groundHeight) {
137+
player.y = groundHeight - player.height;
138+
playerVelY = 0;
139+
}
140+
141+
player.y += playerVelY;
142+
143+
// Drawing platforms
144+
for (let i = 0; i < platformArray.length; i++) {
145+
let platform = platformArray[i];
146+
context.fillRect(platform.x, platform.y, platform.width, platform.height);
147+
};
148+
149+
// Drawing player
150+
context.fillStyle = "green";
151+
context.fillRect(player.x, player.y, player.width, player.height);
152+
context.fillText(moveLeft, 40, 20)
153+
context.fillText(moveRight, 40, 50)
154+
context.fillText(playerVelX, 5, 20)
155+
context.fillText(playerVelY, 5, 50)
156+
};
157+
158+
function createPlatforms() {
159+
let platform1 = {
160+
x: 50,
161+
y: 200,
162+
width: 150,
163+
height: 25,
164+
};
165+
let platform2 = {
166+
x: 300,
167+
y: 350,
168+
width: 200,
169+
height: 25,
170+
};
171+
let platform3 = {
172+
x: 600,
173+
y: 150,
174+
width: 100,
175+
height: 25,
176+
};
177+
platformArray.push(platform1);
178+
platformArray.push(platform2);
179+
platformArray.push(platform3);
180+
};

0 commit comments

Comments
 (0)