Sidescroller with p5.js
How do I make an sidescroller with p5.js?
What is a sidescroller with p5.js? How do you make a sidescroller with p5.js? This script and codes were developed by Ruslan Marin on 07 December 2022, Wednesday.
Sidescroller with p5.js - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sidescroller with p5.js</title>
</head>
<body> <div id="canvasContainer"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Sidescroller with p5.js - Script Codes JS Codes
var sketchProc = function(p) { var keys = []; var brickImg; var marioStanding; var marioMoving; var Mario = function(x, y) { this.x = x; this.y = y; this.img = marioStanding; this.sticks = 0; this.draw = function() { //p.fill(255, 0, 0); this.x = p.constrain(this.x, 0, p.width - 40); this.y = p.constrain(this.y, 0, p.height-100); p.image(this.img, this.x, this.y, 40, 40); }; this.hop = function() { this.img = marioMoving; this.y -= 5; }; this.fall = function() { this.img = marioStanding; this.y += 5; }; this.moveRight = function() { this.img = marioMoving; this.x += 5; }; this.moveLeft = function() { this.img = marioMoving; this.x -= 5; }; }; var Enemy = function() { }; processInput = function() { if(keys[37]) mario.moveLeft(); if(keys[38]) mario.hop(); else mario.fall(); if(keys[39]) mario.moveRight(); if(keys[40]) mario.fall(); }; var mario = new Mario(30,300); // Заполняем массив смещений кирпичных блоков // Всего 21 блок по 20px (1 блок - запас справа) var brickXs = []; for (var i = 0; i < 21; i++) { brickXs.push(i*20); } p.preload = function() { brickImg = p.loadImage("https://crossorigin.me/http://img4.imagetitan.com/img4/small/15/15_brick.jpg"); marioStanding = p.loadImage("https://crossorigin.me/http://img4.imagetitan.com/img4/small/15/15_mario1.png"); marioMoving = p.loadImage("https://crossorigin.me/http://img4.imagetitan.com/img4/small/15/15_mario2.png"); }; p.setup = function() { p.frameRate(30); p.createCanvas(400,400); }; p.draw = function(){ p.background(227, 254, 255); p.fill(130, 79, 43); p.rect(0, p.height*0.90, p.width, p.height*0.10); for (var i = 0; i < brickXs.length; i++) { // Рисуем кирпичные блоки p.image(brickImg, brickXs[i], p.height*0.85, 20, 20); // Смещаем каждый блок на 1px влево для скроллинга brickXs[i] -= 1; // Если блок ушел за левую границу, задаем смещение, соответствующее правой границе // Т.о. блок при отрисовке уйдет за правую границу, а затем начнет выходить из-за нее if (brickXs[i] <= -20) { brickXs[i] = p.width; } } processInput(); mario.draw(); }; p.keyPressed = function(){ keys[p.keyCode] = true; }; p.keyReleased = function(){ keys[p.keyCode] = false; };
};
new p5(sketchProc, document.getElementById("canvasContainer"));
Developer | Ruslan Marin |
Username | marinru |
Uploaded | December 07, 2022 |
Rating | 3 |
Size | 2,455 Kb |
Views | 24,288 |
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!
Name | Size |
Vue.js User Input | 1,565 Kb |
BnW | 1,489 Kb |
Vue.js Basic Component | 1,566 Kb |
P5.js Clock | 2,414 Kb |
Phone Call Links | 1,217 Kb |
Simple Component Example 2 | 2,099 Kb |
Vue.js Attribute Binding | 1,531 Kb |
Component State | 3,702 Kb |
Socket.io Client Demo | 1,490 Kb |
Typescript Demo | 2,594 Kb |
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!
Name | Username | Size |
Canvas stripes | Adrianparr | 1,948 Kb |
A Pen by Manoz | Manoz | 2,424 Kb |
Myprofile | SoufianeAbid | 2,451 Kb |
Animated bar chart | CreativePunch | 3,124 Kb |
Sticky div | Kaslab | 2,225 Kb |
The CodePen Logo | Kindofone | 4,259 Kb |
Css3 slide | Nakome | 3,190 Kb |
Gradients | Karpovsystems | 2,394 Kb |
Part 19 Bootstrap split button dropdown | Venkatesha | 1,601 Kb |
LAMP PURE CSS with Animation | Dam62500 | 2,911 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!