How to implement angled surface?

I'm trying to implement 2D platformer game inspired by N game.
But the problem is I have no idea how to implement something like this:

I have two ideas of how this could be implemented, but I don't know if they are somewhere near truth:

1. Pick two nearby pixels of the surface, draw a line between them and then rotate player so his height was perpendicular to that line.
2. Check if the bottom-left pixel is touching surface and bottom right is not, rotate player so bottom-right pixel would touch the surface too.

i did something similar a while back, it's not that hard, one very easy and understandable way is :
1- rotate everything! means every line every object, so everything is simply flat!
2- calculate velocity, gravity, friction and ... anything you like ! just the way you always do in a flat and without rotation world
3- rotate everything back the way it was !
there is also using physic libraries which is a bit complicated since you need to study the samples and learn how to use the library !
if this is your first attempt on making a game with motions and ... i suggest you take a look at :
1 - http://www.amazon.com/Foundation-Actionscript-3-0-Animation-Making/dp/1590597915
i found a source code that i wrote a long time ago
it uses the 3 step i mentioned above

package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Rectangle;

public class AngleBounce extends Sprite
{
private var ball: Ball;
private var line: Sprite;
private var gravity: Number = .3;
private var bounce: Number = -.6;

public function AngleBounce()
{
init();
}

private function init():void
{
ball = new Ball();
ball.x = 100;
ball.y = 100;
line = new Sprite();
line.graphics.lineStyle(1);
line.graphics.lineTo(300, 0);
line.x = 50;
line.y = 200;
line.rotation = 30;

}

private function onMouseDown(event:Event):void
{
ball.startDrag();
removeEventListener(Event.ENTER_FRAME, onEnterFrame);
}

private function onMouseUp(event:Event):void
{
ball.stopDrag();
ball.vx = 0;
ball.vy = 0;
}

private function onEnterFrame(event:Event):void
{
line.rotation = (stage.stageWidth/ 2 - mouseX) * .1;
ball.vy += gravity;
ball.x += ball.vx;
ball.y += ball.vy;

if (ball.x < 0 + ball.width / 2 || ball.x > stage.stageWidth - ball.width / 2)
{
ball.vx *= -1;
}

if (ball.y < 0 + ball.height / 2 || ball.y > stage.stageHeight - ball.height / 2)
{
ball.vy *= -1;
}

var bounds:Rectangle = line.getBounds(this);
if(ball.x > bounds.left && ball.x < bounds.right)
{
var angle: Number = line.rotation * Math.PI / 180;
var sin: Number = Math.sin(angle);
var cos: Number = Math.cos(angle);

var x1: Number = ball.x - line.x;
var y1: Number = ball.y - line.y;
var vy1: Number = cos * ball.vy - sin * ball.vx;
var y2: Number = cos * y1 - sin * x1;

if (y2 > -ball.height / 2 && y2 < vy1)
{
y2 = -ball.height / 2;

var x2: Number = cos * x1 + sin * y1;
var vx1: Number = cos * ball.vx + sin * ball.vy;

vy1 *= bounce;

x1 = cos * x2 - sin * y2;
y1 = cos * y2 + sin * x2;
ball.vx = cos * vx1 - sin * vy1;
ball.vy = cos * vy1 + sin * vx1;
ball.x = line.x + x1;
ball.y = line.y + y1;
}
}
}

}

}
• "onEnterFrame" is where the magic and the 3 steps happens, if you can not understand the code or have any question, please let me know Aug 16 '15 at 17:29