>>> Prompt:
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 lemming is dead. Animations should be updated every frame. There will eventually
be many lemmings, so do note that they are not controlled by keys, it moves by itself and is
constrained by the rules outlined above.