The following is already declared in the program:
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
variable oldImgData is all pixel data gotten with ctx.getImageData()
function pixelIsColor(imageData, x, y, color): used to get compare a color of a pixel, x and y is canvas coorindate
function getPixelColor(imageData, x, y) is used to get the color of a pixel, x and y is canvas coorindate
The colors of various pixels are already delcared:
waterColor = '#0077be';
rockColor = '#888888';
dirtColor = '#4a2e00';
The pixelIsColor() and getPixelColor() take an array of the four color components as the color argument. Figure it out.
Declare constants for the colors like this: for e.g. waterColor; const waterColorBytes = [0x00, 0x77, 0xbe] ...
Using the above:
Do collision detection for a sprite that looks a little like a blue lemming with green hair, give it
its own structure with position, velocity, etc. It should move around on a 2d canvas which has
gravity (that is, when there is no ground under it, it should fall down). If it runs in to an
obstacle on the x axis it should turn around and walk the other way. If it falls into something
on the y axis it should stop moving on the Y axis and start walking on the x axis. If it falls
into the water, the sprite should stop moving (the lemming is dead). The animation should be
updated every frame. The lemming is not controlled by keys, it moves by itself and is constrained
by the rules outlined above.