1			//pt1
2
3			//if you don't have a canvas, this adds it
4            if(document.getElementsByTagName('canvas').length == 0) {
5                var canvas = "<canvas id='canvas' width='800' height='500'></canvas>"
6                document.body.innerHTML += canvas;
7            }
8            
9            //variable declaration
10            var keys = [];
11            var ctx = document.getElementById('canvas').getContext('2d');
12            var level = [];
13            
14            //events
15            document.body.addEventListener("keydown", function(e) {
16                keys[e.keyCode] = true;
17            });
18            document.body.addEventListener("keyup", function(e) {
19                keys[e.keyCode] = false;
20            });
21            
22            //make the level and player
23            var player = {
24                x: 0,
25                y: 0,
26                yv: 0,
27                xv: 0,
28                slope: 0,
29                width: 25,
30                height: 25,
31                color: '#FCA738'
32            };
33            
34            var ground = {
35                x: 0,
36                y: 470,
37                width: 800,
38                height: 30,
39                color: '#155261'
40            };
41            
42            var ceiling = {
43                x: 0,
44                y: 0,
45                width: 800,
46                height: 30,
47                color: '#155261'
48            };
49            
50            
51            var leftWall = {
52                x: 0,
53                y: 0,
54                width: 30,
55                height: 600,
56                color: '#155261'
57            };
58            
59            var rightWall = {
60                x: 770,
61                y: 0,
62                width: 30,
63                height: 600,
64                color: '#155261'
65            };
66            
67            var ceilingBlock = {
68                x: 100,
69                y: 400,
70                width: 50,
71                height: 20,
72                color: '#155261'
73            }
74            
75            //this pushes all of the static objects into the level
76            level.push(ground, leftWall, rightWall, ceilingBlock, ceiling);
77            
78            //start the engine
79            window.onload = start;
80            
81            //this function is called at the start
82            function start() {
83                player.x = 50;
84                player.y = 400;
85                update();
86            }
87            
88            //this function is called every frame
89            function update() {
90                requestAnimationFrame(update);
91                drawPlayer();
92                drawLvl();
93                //this function takes in the following:
94                //the player | the level | the player speed | the player gravity //the player friction | the player jump height
95                physics(player, level, 1.5, 0.7, 0.9, 9);
96            }
97            
98            //this function draws the player
99            function drawPlayer() {
100                ctx.clearRect(0, 0, 800, 500);
101                ctx.fillStyle = player.color;
102                ctx.fillRect(player.x, player.y, player.width, player.height);
103            }
104            
105            //this function draws the level
106            function drawLvl() {
107                for (var i = 0; i < level.length; i++) {
108                    ctx.fillStyle = level[i].color;
109                    ctx.fillRect(level[i].x, level[i].y, level[i].width, level[i].height);
110                }
111            }
112
113            //this function handles the platformer physics
114            function physics(p1, lvl, speed, gravity, friction, jumpheight) {
115                //gravity
116                p1.yv += gravity;
117                p1.y += p1.yv;
118                
119                //y collision
120                for(var i = 0; i < lvl.length; i++) {
121                    if(collisionBetween(p1, lvl[i])) {
122                        p1.y += -p1.yv;
123                        if(keys[38]) {
124                            p1.yv = -jumpheight;
125                        } else {
126                           p1.yv = 0; 
127                        }
128                    }
129                }
130                
131                

1				//pt2
2
3				//x movement
4                if(keys[39]) {
5                    p1.xv -= speed;
6                }
7                if(keys[37]) {
8                    p1.xv += speed;
9                }
10                p1.xv *= friction;
11                p1.x += -p1.xv;
12                
13                //slopes
14                p1.slope = 0;
15                for(var i = 0; i < lvl.length; i++) {
16                    if(collisionBetween(p1, lvl[i])) {
17                        if(p1.slope != -8) {
18                            p1.y -= 1;
19                            p1.slope += 1;
20                        }
21                    }
22                }
23                
24                //x collision
25                for(var i = 0; i < lvl.length; i++) {
26                    if(collisionBetween(p1, lvl[i])) {
27                        p1.y += p1.slope;
28                        p1.x -= -p1.xv;
29                        
30                        //wall jumping
31                        if(keys[38]) {
32                            p1.yv = -jumpheight + 1;
33                            if(p1.xv > 0) {
34                                p1.xv = -10;
35                            } else {
36                                p1.xv = 10;
37                            }
38                        } else {
39                            p1.xv = 0;
40                        }  
41                    }
42                }
43            }
44            
45            //this function detects the collision between the two given objects
46            function collisionBetween(p1, lvl) {
47                if (lvl.x < p1.x + p1.width &&
48                    lvl.x + lvl.width > p1.x &&
49                    lvl.y < p1.y + p1.height &&
50                    lvl.y + lvl.height > p1.y) {
51                    return true;
52                } else {
53                    return false;
54                } 
55            }

1Platformer Physics with Download: platformerphysics.netlify.app