Part 2 platformer tutorial

Developer
Loktar
Size
2,911 Kb
Views
28,336
  1. Part 2 platformer tutorial Previews
  2. Part 2 platformer tutorial HTML Codes
  3. Part 2 platformer tutorial CSS Codes
  4. Part 2 platformer tutorial JS Codes

How do I make an part 2 platformer tutorial?

Part 2 of my platformer tutorial which explains how to add collisions! http://www.somethinghitme.com/2013/04/16/creating-a-canvas-platformer-tutorial-part-tw/. What is a part 2 platformer tutorial? How do you make a part 2 platformer tutorial? This script and codes were developed by Loktar on 20 August 2022, Saturday.

Part 2 platformer tutorial Previews
IQ Test

Part 2 platformer tutorial - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Part 2 platformer tutorial</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE HTML>
<head> <title>Something fancy</title>
</head>
<body> <h3>A, D or Arrow keys to move, W or space to jump</h3> <canvas id="canvas"></canvas>
</body> <script src="js/index.js"></script>
</body>
</html>

Part 2 platformer tutorial - Script Codes CSS Codes

canvas{border:1px solid black;}

Part 2 platformer tutorial - Script Codes JS Codes

(function () { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; window.requestAnimationFrame = requestAnimationFrame;
})();
var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"), width = 500, height = 200, player = { x: width / 2, y: height - 15, width: 5, height: 5, speed: 3, velX: 0, velY: 0, jumping: false, grounded: false }, keys = [], friction = 0.8, gravity = 0.3;
var boxes = [];
// dimensions
boxes.push({ x: 0, y: 0, width: 10, height: height
});
boxes.push({ x: 0, y: height - 2, width: width, height: 50
});
boxes.push({ x: width - 10, y: 0, width: 50, height: height
});
boxes.push({ x: 120, y: 10, width: 80, height: 80
});
boxes.push({ x: 170, y: 50, width: 80, height: 80
});
boxes.push({ x: 220, y: 100, width: 80, height: 80
});
boxes.push({ x: 270, y: 150, width: 40, height: 40
});
canvas.width = width;
canvas.height = height;
function update() { // check keys if (keys[38] || keys[32] || keys[87]) { // up arrow or space if (!player.jumping && player.grounded) { player.jumping = true; player.grounded = false; player.velY = -player.speed * 2; } } if (keys[39] || keys[68]) { // right arrow if (player.velX < player.speed) { player.velX++; } } if (keys[37] || keys[65]) { // left arrow if (player.velX > -player.speed) { player.velX--; } } player.velX *= friction; player.velY += gravity; ctx.clearRect(0, 0, width, height); ctx.fillStyle = "black"; ctx.beginPath(); player.grounded = false; for (var i = 0; i < boxes.length; i++) { ctx.rect(boxes[i].x, boxes[i].y, boxes[i].width, boxes[i].height); var dir = colCheck(player, boxes[i]); if (dir === "l" || dir === "r") { player.velX = 0; player.jumping = false; } else if (dir === "b") { player.grounded = true; player.jumping = false; } else if (dir === "t") { player.velY *= -1; } } if(player.grounded){ player.velY = 0; } player.x += player.velX; player.y += player.velY; ctx.fill(); ctx.fillStyle = "red"; ctx.fillRect(player.x, player.y, player.width, player.height); 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 + (shapeB.height / 2)), // add the half widths and half heights of the objects hWidths = (shapeA.width / 2) + (shapeB.width / 2), hHeights = (shapeA.height / 2) + (shapeB.height / 2), colDir = null; // if the x and y vector are less than the half width or half height, they we must be inside the object, causing a collision if (Math.abs(vX) < hWidths && Math.abs(vY) < hHeights) { // figures out on which side we are colliding (top, bottom, left, or right) var oX = hWidths - Math.abs(vX), oY = hHeights - Math.abs(vY); if (oX >= oY) { if (vY > 0) { colDir = "t"; shapeA.y += oY; } else { colDir = "b"; shapeA.y -= oY; } } else { if (vX > 0) { colDir = "l"; shapeA.x += oX; } else { colDir = "r"; shapeA.x -= oX; } } } return colDir;
}
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();
});
Part 2 platformer tutorial - Script Codes
Part 2 platformer tutorial - Script Codes
Home Page Home
Developer Loktar
Username loktar00
Uploaded August 20, 2022
Rating 3.5
Size 2,911 Kb
Views 28,336
Do you need developer help for Part 2 platformer tutorial?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Loktar (loktar00) Script Codes
Name
Smoke Particles
Meteor Shower
Bezier curve art
Rough Seas re-creation for compo
Tetris background
Tunnel of Doom
Circuit board pattern
Doom screen wipe effect
Colorful Cloth Ribbons
CSS animated waves
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!