Search the Community

Hello friends, This is my very first post and I have a question that I have been pulling my hair out over for a good couple of days now. Before I introduce the problem, I think it should be obvious that by this post I intend on making a game. I want to write it from scratch I do not wish to use a prexisting engine that someone has created as I feel that takes a way the fun of programming games in general (although it would be a hell of a lot easier). I also hope that I have posted this in the correct section and that I haven't broken any rules. Now I don't want you to write my game for me, but some examples and some logic/explanation would help me oh so much! The Problem! The problem I am running into at the moment with what I currently have written is the fact that I am using a multidemensional array to draw map map (x && y co-ordinates) and each "tile" in the array has dimensions of 50x50 pixels. I am trying to move my player by pixel based movement taking into account things like gravity for example. What I run into and keep running into is issues with creating "platforms" in the tile map and trying to logically write some "Collision Detection" code for this to actually work. The only way that my brain can comprehend it at the moment is you need to find your "next" tile (mapData[x + 1][y] for example if you're going right) and divide it where ever you're Player.X location happens to be by 50 (rounding of course) and somehow implement it that way. This is difficult and not working for me My current code, keep in mind this is very rough. Please help.. before I have no more hair. Haha. // FUNCTION USED FOR REFRESHING SCREEN / RENDERING; (function () { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; window.requestAnimationFrame = requestAnimationFrame; }) (); // MAP 1; var mapOne = [ ['W','W','W','W','W','W','W','W','W','W','W','W','W','W','W','W'], ['W',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ','W'], ['W',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ','W'], ['W',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ','W'], ['W',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ','W'], ['W',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ','W'], ['W',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ','W'], ['W',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ','W'], ['W',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ','W'], ['W',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ','W'], ['W',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ',' ','W'], ['W','W','W','W','W','W','W','W','W','W','W','W','W','W','W','W'], ]; // VARIABLES FOR CANVAS; var canvas = document.getElementById("canvas"); var g = canvas.getContext("2d"); width = 800; height = 600; // PLAYER VARIABLES; var player = new Object(50,50,50,100); player = { x: 50, y: 100, width: 50, height: 100, speed: 6, velX: 0, velY: 0, jumping: false, grounded: false }; // MORE VARIABLES, YAY; keys = []; friction = 0.8; gravity = 0.4; canvas.width = width; canvas.height = height; // FUNCTION TO MAKE A MAP; function mkMap() { var i,j, tile; var tilesX = width / 50; var tilesY = height / 50; for (i = 0; i < tilesX; i++) { for (j = 0; j < tilesY; j++) { tile = (mapOne[j] && mapOne[j][i]) ? mapOne[j][i] : 'W'; mkTile(i * 50,j * 50, tile); } } }; // FUNCTION TO MAKE TILES; function mkTile(x,y,img) { switch (img) { case ' ': g.fillStyle = "black"; g.fillRect(x,y,50,50); break; case 'W': var wall = new Object(x,y,50,50); // NOT WORKING; g.fillStyle = "pink"; g.fillRect(x,y,50,50); break; } }; // IGNORE THIS, NOT WORKING; function Object(x,y,width,height) { this.X = x; this.Y = y; this.Width = width; this.Height = height; }; function playerInput() { // SPACE BAR & 'W' TO JUMP; if (keys[38] || keys[32]) { if(!player.jumping) { player.jumping = true; player.velY = -player.speed*2; } } // LEFT KEY; if (keys[37]) { if (player.velX > -player.speed) { player.velX--; } } // RIGHT KEY; if (keys[39]) { if (player.velX < player.speed) { player.velX++; } } }; function update() { g.clearRect(0,0,width,height); mkMap(); g.fillStyle = "red"; g.fillRect(player.x,player.y,player.width,player.height); playerInput(); player.velX *= friction; player.velY += gravity; player.x += player.velX; player.y += player.velY; /**if (player.x >= width-player.width) { player.x = width-player.width; } else if (player.x <= 0) { player.x = 0; }**/ if (player.y >= height-player.height) { player.y = height - player.height; player.jumping = false; } requestAnimationFrame(update); }; document.body.addEventListener("keydown", function(e) { keys[e.keyCode] = true; }); document.body.addEventListener("keyup", function(e) { keys[e.keyCode] = false; }); window.addEventListener("load", function() { update(); });