Simple Canvas Movement 2
HTML
<canvas id="canvas"></canvas>
CSS
canvas{
background-color: white;
border-bottom: 3px solid mediumseagreen;
}
JavaScript
dvar b = document.body;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var pressed = {up: false, right: false, down: false, left: false}
var c = {up: 38, right: 39, down: 40, left: 37};
var cellDim = 15;
var canWidth = 20;
var canHeight = 10;
//document.body.addEventListener('keydown', player.move);
var p = {
x: 0,
y: 0,
volY: 0,
falling: true,
width: 15,
height: 15
};
var solids = [];
function draw(){
move();
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawSolids();
drawPlayer();
requestAnimationFrame(draw);
}
requestAnimationFrame(draw);
function drawSolids(){
for(var i = 0; i < solids.length; i++){
ctx.beginPath();
ctx.fillStyle = "mediumseagreen";
ctx.fillRect(solids[i].x, solids[i].y, solids[i].w, solids[i].h);
ctx.fill();
}
}
function collision(x, y){
for(var i = 0; i < solids.length; i++){
var s = solids[i];
var leftInside = p.x > s.x && p.x < (s.x + s.w);
var rightInside = (p.x + p.width) > s.x && (p.x + p.width) < (s.x + s.w);
var bottomInside = (p.y + p.height) > s.y && (p.y + p.height) < s.y + s.h;
var topInside = p.y > s.y && p.y < s.y + s.h;
if((leftInside || rightInside) && (bottomInside || topInside)){
return s.y;
}
}
}
function drawPlayer(){
ctx.beginPath();
ctx.fillStyle = "#000";
ctx.fillRect(p.x, p.y, p.width, p.height);
ctx.fill();
}
function keychange(e, s){
var state = (s == 'down') ? true : false;
switch(e.keyCode){
case c.up:
pressed.up = state;
break;
case c.right:
pressed.right = state;
break;
//case c.down:
//pressed.down = state;
//break;
case c.left:
pressed.left = state;
break;
}
}
var toggle = s => !s;
function addSolid(x, y, w, h){
solids.push({x: x, y: y, w: w, h: h});
}
addSolid(0, canvas.height/1.5, 50, 15);
addSolid(60, canvas.height - 30, 50, 30);
addSolid(60, canvas.height - 90, 50, 15);
addSolid(0, canvas.height, canvas.width, 15);
function move(){
var movementRate = 3;
var gravety =...