How to create touch element to move a character left/right in JavaScript?

Question

I am creating an HTML5 race game with help of CSS & JS. But not sure how to make it fit for all devices, browser size and touch responsive.

Any suggestions?

You can help me with reference to below game codes I made. Even these doesn't work with touch and resize.

https://code.sololearn.com/WhYa2gArx7QH/?ref=app

https://code.sololearn.com/WnyefEs3F4JJ/?ref=app

Answer 1

add button or img
onclick or addEventListener click
target = getElementById
target.translateX / Y = +/-

Answer 2

for fitting the screen
use vw instead of px or %
(mitali taught me this)

Answer 3

in your html
you better
div id=playarea
div id=theobject
so you can
var obj = getElementById(theobject);
to assign animation to it

Answer 4

Welcome
There is a game coding challenge just posted
deadline is before 22nd,
let's compete together~

Answer 5

Wow, the platform games sound very fun, the kind of very very very addicting RPG game.
For the car racing game, i think you will an accelerate / decelerate function
so the transform should eat variable instead of constant,
when button pressed, acc++ up to a max, put into accelerate() and the transform (translate?) will be faster and faster, for decelerate, it's starts when buttonclick ends and keep calling itself until velocity is zero

Answer 6

thanks

Answer 7

Gordon Chan It worked!! Thank you so much for the help. Now I will be able to complete the game for my nephew.

🙏

Answer 8

Is it on Sololearn?

Answer 9

yes
https://www.sololearn.com/learn/13433/?ref=app

Answer 10

Yep I just saw. Is there any way we connect?

Answer 11

connect?
you mean follow?

Answer 12

Nope. I mean talk and share the project. Once it's done, we can post it here.

Answer 13

Hmm🤔 we can each write on our own~😆

Answer 14

Gordon Chan Sounds good to me. Lol

Answer 15

I am working on two 2d games though. 1. Car racing game
2. Platform game.

but stuck as I am not a Pro coder. Still, gonna try finishing them before 22nd. hope that works.

Answer 16

What's a platform game?

Answer 17

Which stage / which mechanics are you stuck at?

Answer 18

Well in car racing game touch was the only issue. Though the code you provided only give me option to move the car left/right on each tap. though my track canvas is big and it works fine if I use arrow keys for left/right/up& down.

Answer 19

And I only reached 1st half of the platform game. it's a huge one. Trying to make it endless with multiple characters. I have sprite and everything ready. Just need to code. Touch will work as player only jumps.

Answer 20

Yes platform game idea is something like that.

But whatever you said about accelerate and all, it all went over my head. Told you, not a Pro.