How to side scroll a game ?

Question

I have made a game with JavaScript canvas.I have done everything like creating animation with Spritesheet on key press and movement.

I want to know how can I side scroll a game.
I know absolutely nothing at all how it is done so pls try to explain deeply.

Answer 1

I have made by using this..here fuel_1 and 'a' are variables..loop is a function which is recursive..

//To detect mobile device is simple in javascript instead of using jquery.

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
var a = /MobI/.test(navigator.userAgent);
}

fuel_1.addEventListener("touchstart", right);

//Controls in mobile devices

if(!a) fuel_1.addEventListener("mousedown",left)
window.addEventListener("touchmove", up);

//-If you want to play this in pc

if(!a) window.addEventListener("mousemove", mouseMove);
window.addEventListener("touchend", touchEnd);

//Controls in pc--If you want to play this in pc remove the commented lines.

requestAnimationFrame(loop);
}

Here is my application..

See from line 28..
https://code.sololearn.com/W2sPu6gTz4nx/?ref=app

P.S.-I think I have confused you instead of making you understand 😅 you can try out these ideas and post your creation!

Answer 2

I know I have confused you.. sorry for that..you can see the answer given by Martin sir.. it's to the point.. you can also refer these tutorials

https://code.sololearn.com/WFej2EK3Rtid/?ref=app
https://code.sololearn.com/Wd5bUy8xF0IY/?ref=app
https://code.sololearn.com/WJ4IKwithWc3/?ref=app
https://code.sololearn.com/WsDWpg1d6iQD/?ref=app

Answer 3

Thanks alot EnCoDeR and Martin Taylor

Answer 4

Everything that you both told went off my head.
First of all I want my game on pc so the code of EnCoDeR was confusion.I mean it is nice but I can't understand.

I got some of the things like making a tile map with array but how do I side scroll .
And actually upscroll as well.
Like if a platform is above and player goes up then it scrolls up like in doodle jump.And if you go right or left then background scrolls horizontally.
Please help