
Innehållsförteckning:
2025 Författare: John Day | [email protected]. Senast ändrad: 2025-01-23 15:11

Detta är ett spel helt och hållet gjort på HTML och JavaScript med biblioteket P5js. Det finns 2 filer som heter index.html och sketch.js. Jag är väldigt nybörjare i kod så jag är ledsen om det är oklart.
Du kan spela spelet med den här länken
Du styr en vit boll med piltangenterna och du måste undvika den röda bollen (för närvarande finns det bara en).
Jag skapade 2 variabler: posX = 200 och posY = 200
På sketch.js skapade jag en canva i funktionsinställningen med 640x på 480y med en grå bakgrund i funktionsritningen, sedan skapade jag en vit cirkel med position på posX, posY, 75, 75.
Steg 1: Flytta cirkeln

Som jag sa tidigare kan du använda piltangenterna för att flytta cirkeln.
För att göra det skapade jag en funktion updatePositionEllipse ().
Jag använde detta villkor för att få det att fungera: if (keyIsDown (DOWN_ARROW)) {
posY += 5;
}
När du trycker på nedåtknappen flyttas cirkeln nedåt.
Jag använde den på alla andra tangenter så att du kan flytta åt vänster, höger, upp och ner.
Steg 2: Skapa gränsgränser

För att få den vita bollen att stanna i slutet av kanven använde jag funktionen testOutOfScreen.
Inuti den använde jag villkoret om (posX> 600) {
posX = 600; strokeWeight (6); stroke ('blå'); linje (637, 0, 637, 480); }
om positionen x är över 600: den blockerar bollen och den drar en blå linje med en kant 6 placerad på höger sida av kanven.
Jag gör detta för alla gränser.
Rekommenderad:
Arduino Car Reverse Parking Alert System - Steg för steg: 4 steg

Arduino Car Reverse Parking Alert System | Steg för steg: I det här projektet kommer jag att utforma en enkel Arduino Car Reverse Parking Sensor Circuit med Arduino UNO och HC-SR04 Ultrasonic Sensor. Detta Arduino -baserade bilomvändningsvarningssystem kan användas för autonom navigering, robotavstånd och andra
Steg för steg PC -byggnad: 9 steg

Steg för steg PC -byggnad: Tillbehör: Hårdvara: ModerkortCPU & CPU -kylarePSU (strömförsörjningsenhet) Lagring (HDD/SSD) RAMGPU (krävs inte) CaseTools: Skruvmejsel ESD -armband/mathermisk pasta med applikator
Tre högtalarkretsar -- Steg-för-steg handledning: 3 steg

Tre högtalarkretsar || Steg-för-steg-handledning: Högtalarkretsen förstärker ljudsignalerna som tas emot från miljön till MIC och skickar den till högtalaren varifrån förstärkt ljud produceras. Här visar jag dig tre olika sätt att göra denna högtalarkrets med:
Steg-för-steg-utbildning i robotik med ett kit: 6 steg

Steg-för-steg-utbildning i robotik med ett kit: Efter ganska många månader av att bygga min egen robot (se alla dessa), och efter att två gånger ha misslyckats med delar, bestämde jag mig för att ta ett steg tillbaka och tänka om min strategi och riktning. De flera månaders erfarenhet var ibland mycket givande och
Akustisk levitation med Arduino Uno Steg-för-steg (8-steg): 8 steg

Akustisk levitation med Arduino Uno Steg-för-steg (8-steg): ultraljudsgivare L298N Dc kvinnlig adapter strömförsörjning med en manlig DC-pin Arduino UNOBreadboardHur det fungerar: Först laddar du upp kod till Arduino Uno (det är en mikrokontroller utrustad med digital och analoga portar för att konvertera kod (C ++)