JavaScript
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var tileW = 64;
var tileH = 64;
var dirX = 0;
var dirY = 0;
var spd = 8;
//man and baddie
var mImg;
var man;
var bImg;
var baddie;
//starting x and y tiles
var manStartX = 1 * tileW;
var manStartY = 4 * tileH;
var baddieStartX = 5 * tileW;
var baddieStartY = 2 * tileH;
//center of the game board
var centerX = 250 - 16;
var centerY = 250 - 16;
//control jumping and falling
var gravity = .4;
var jumpstart = -12;
//change if you make a zelda style
var overhead = false;
var frame;
//change to your images vvvv
var manImage = "https://imgur.com/4Yl98Mw.png";
var baddieImage = "https://i.postimg.cc/QN6TtnqM/tile-sprite-sheet.png";
var tileImage = "https://imgur.com/4Yl98Mw.png";
var thread;
/****************
change for your own map
****************/
var map = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1],
[1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 1],
[1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];
//tile colors
var colors = ["white", "black"];
/*******
Man object
*******/
function Man(x, y, color, img) {
this.x = x;
this.y = y;
this.width = 32;
this.height = 32;
this.color = color;
this.img = img;
this.upleft = 0;
this.upright = 0;
this.downleft = 0;
this.downright = 0;
this.jumping = false;
this.jumpspeed = 0;
this.gravity = gravity;
this.falling = false;
this.dirX = 0;
this.dirY = 0;
this.frame = 0;
this.yClip = 0;
this.xClip = 0;
}
////////////////
////////////////
Man.prototype.getTile = function () {
var tileX = Math.round(this.x / tileW - 0.5);
var tileY = Math.round(this.y / tileH - 0.5);
var text = "tile " + tileY + "_" + tileX;
return text;
};
/**
get the bottom tile
**/
Man.prototype.getBottomTile = function () {
var tileY = Math.round((this.y) / tileH - 0.5) +...