Skip to content
Sign upLog in
← Back to Community

rocket game

Profile icon
DuncDuncan

How do I get my rocket image to rotate accordingly as the left, right arrows turn its direction??

Voters
Profile icon
KalkinKedarnath
Profile icon
DuncDuncan
Comments
hotnewtop
Profile icon
DuncDuncan

ctx.rotate is not pivoting on the center of the rocket

Profile icon
tussiez

@DuncDuncan
I also encountered this issue. I used this:

ctx.rect(-this.width / 2, -this.height / 2, this.width, this.height);
Profile icon
Coder100

use ctx.rotate()
https://www.javascripttutorial.net/web-apis/javascript-rotate

do know that it is in radians.

Use Math.PI / 180 to convert to radians, for example:

60 * Math.PI / 180
Profile icon
tussiez

@Coder100
This is the correct answer. However, this is expensive to do in a loop, and will slow down your app by a lot. The best method, whilst a bit more complex, is to use ctx.translate.

Profile icon
Coder100

what is slowing it down?


@tussiez

Profile icon
Coder100

and i don't believe translate is used to rotate anything
are you meaning:

translate(x, y); rotate(t); shape(0, 0);

@tussiez

Profile icon
xxpertHacker

@tussiez
I'd also recommened, to anyone using radians:

const TAU = Math.PI * 2.0; const radians = TAU / 360;

much easier to read+understand.

As for performance, I'd be more worried about memory allocations, and that myGameArea.keys[e.keyCode] is pretty scary.

Profile icon
Coder100

oh dw, everyone uses that allocation, and people only realistically press 4 keys

@xxpertHacker

Profile icon
tussiez

@Coder100
Oh, woops! My mistake.
ctx.setTransform

Profile icon
tussiez

@Coder100
ctx.save/restore seems to slow down apps when you call it too much.

Profile icon
xxpertHacker

@Coder100
It's not memory allocations, it's allocations in intervals, loops, and such.

Also, even if they only use 4 keys, the code will forcefully make the object into a slow dictionary.

Seeing as that object is used multiple times in an interval (updateGameArea is called in an interval), every iteration may get slower over time, and slower with more key presses.

Oh, and as a bonus, every new key press results in 2 new allocations, furthering my first point.

This is the type of code that will struggle to stay on JiT's fast path, edging on the pathologically slow path.

Profile icon
tussiez

@xxpertHacker

?!
I use keys all the time.. what am I doing wrong?

let keys = []; document.body.addEventListener('keydown',(e) => {keys[e.key] = true}); document.body.addEventListener('keyup',(e) => {keys[e.key] = false});
Profile icon
Coder100

yeah, that's completely fine

@tussiez

Profile icon
Coder100

xxperthacker is probably worrying too much about the fact that it is an array and that would be a lot of reads and writes but he forgot that an array is actually just an object/hashmap and the writes is actually much less

@tussiez

Profile icon
xxpertHacker

@tussiez
You're setting string properties to an array, does anything sound wrong with that?

const index = 0; const array = []; array[index] = true; // okay
const index = "h"; const array = []; array[index] = true; // what are you doing with your life?
Profile icon
tussiez

@xxpertHacker
TBH yes but I’m too lazy to remember keycodes

Profile icon
xxpertHacker

@tussiez
No, no, not at all!

Just use a map:

const keys = new Map; keys.set(e.key, true); ... keys.set(e.key, false);

actually, better yet, a Set:

const keys = new Set; keys.add(e.key); ... if ( key.has("UpArrow") ) { ... } else if ( key.has('e') ) { ... }
Profile icon
Coder100

reee why tho

@xxpertHacker

Profile icon
Coder100

how dare you just reject what us web programmers have been using perfectly with NO lag or loss of memory WHATSOEVER for this solution in the hopes that it will store 'less memory'

it even has less browser support smh

@xxpertHacker

Profile icon
xxpertHacker

@Coder100

a) Easier to read
b) Crazily optimized by VMs

Map#get, Set#add are AoT compiled, and will always execute with great performance.

[] access can be very slow.

Profile icon
tussiez

@xxpertHacker
Ooo
You will see this in SortaCraft very soon :)

Btw, a lot of tutorials teach my method - you should do a tutorial on the correct way here

Profile icon
xxpertHacker

@tussiez
Oh, that is bad, I'll probably get around that that in the 4th or 5th iteration of the ES-Tutorial series I have on Repl, lol.

Profile icon
tussiez

@xxpertHacker
Lol
Yeah, learning that this was actually bad practice..

Profile icon
xxpertHacker

@Coder100
Execution speed > memory consuption.

Creating an empty object creates a hidden class for that object, using a Map or Set uses an already existing class; therefore, that's one less class to store.
https://richardartoul.github.io/jekyll/update/2015/04/26/hidden-classes.html
https://blog.appsignal.com/2020/07/01/a-deep-dive-into-v8.html
http://wingolog.org/archives/2018/10/11/heap-object-representation-in-spidermonkey
(JSC, V8, and SpiderMonkey all do this)

Changing the object structure impacts performance.

JS is always laggy, wdym!?

As for browser support, it has the exact same browser support that let, const, destructuring, and for of loops do.

IE has supported these since... 2013:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map#browser_compatibility
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#browser_compatibility

Therefore, every single browser still in existence supports these.