JavaScript
(function() {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
})();
const canvas = document.getElementById("screen");
const ctx = canvas.getContext("2d");
ctx.scale(3, 3);
var mario = {
spawnX:20,
spawnY:80,
velX:0,
velY:0,
speed:3,
jumping:false,
grounded:true
}
var keys = [];
var gravity = 0.01;
var friction = 0.9;
var yOffset = 200;
var xOffset = -20;
var boxes = [];
var blockBlockMatrix = [
[1, 2, 1, 1, 1, 1, 2, 1],
[2, 1, 1, 1, 1, 2, 1, 1],
[1, 1, 1, 1, 2, 1, 1, 1],
[1, 1, 1, 2, 1, 1, 1, 1],
[1, 1, 2, 1, 1, 1, 1, 1],
[1, 2, 1, 1, 1, 1, 1, 2],
[2, 1, 1, 1, 1, 1, 2, 1],
[1, 1, 1, 1, 1, 2, 1, 1],
];
for(var x = 0; x < 23; x++){
blockBlockMatrix.forEach((row, y) => {
row.forEach((value, x) => {
if(value === 1){
ctx.fillStyle = "brown"
ctx.fillRect(x + xOffset, y + 92, 1, 1)
}else if(value === 2){
ctx.fillStyle = "tan";
ctx.fillRect(x + xOffset, y + 92, 1, 1);
xOffset+= 0.8;
}
});
})
}
function update(){
ctx.fillStyle = "red";
ctx.fillRect(mario.spawnX, mario.spawnY, 4, 4);
if(keys[39]){
if(mario.velX < mario.speed){
mario.velX++;
}
}
boxes.push({
x:10,
y:120,
width:600,
height:100
})
var colBlock = colCheck(mario, blockBlockMatrix);
if(mario.grounded === true){
mario.velY === 0;
}
mario.spawnX += mario.velX;
mario.spawnY += mario.velY;
mario.velX *= friction;
mario.velY += gravity;
ctx.beginPath();
ctx.fillStyle = "black";
for (var i = 0; i < boxes.length; i++) {
ctx.rect(boxes[i].x, boxes[i].y, boxes[i].width, boxes[i].height);
}
var blockDir = colCheck(mario, boxes[i]);
if(blockDir === 'b'){
mario.grounded = true;
}
requestAnimationFrame(update);
}
function colCheck(shapeA, shapeB) {
// get the vectors to check against
var vX = (shapeA.x + (shapeA.width / 2)) - (shapeB.x + (shapeB.width / 2)),
vY = (shapeA.y + (shapeA.height / 2)) - (shapeB.y +...