Een eenvoudige willekeurige virtuele dobbelsteen coderen - Ajarnpa

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:15

Hallo iedereen!!!!! Dit is mijn eerste instructable en ik zal je leren hoe je een virtuele dobbelsteen codeert op je pc of smartphone. Ik gebruik HTML, JavaScript en CSS, ik hoop dat jullie het allemaal leuk vinden en vergeet niet op mij te stemmen in de onderstaande context.

Benodigdheden

1. Een goede tekstverwerker op je smartphone of pc

Stap 1: Download uw teksteditor

Hier gebruik ik mijn smartphone als teksteditor hier (AnWriter). U kunt ook het notitieblok van uw pc gebruiken of een goede teksteditor online downloaden

Stap 2: Download Die Faces

Ik heb een aantal die-gezichten van 1 tot 6 gedownload die ik aan deze stap hecht. U kunt dus uw favoriete downloaden of de mijne gebruiken (u bent gratis).

Ik noemde de mijne volgens de matrijsgezichten. Dat is:

Die_face_1.png, Die_face_2-p.webp

Stap 3: Begin met coderen

Bewaar de code als.html-bestand

Begin met het introduceren van de standaard dobbelsteen die je wilt met behulp van de img src

Stap 4:

Vervolgens hebben we een knop nodig om de dobbelstenen te gooien. Dit doen we door een knopfunctie toe te voegen

ROL DICE

Stap 5: Gebruik de functie Var en Math

SCHUD DOBBELSTENEN

functie getRand(){

var vu=Math.floor(Math.random()*6)+1;

var vu2=Math.floor(Math.random()*6)+1;

var di =["die_face_1.png", "die_face_2.png", "die_face_3.png", "die_face_4.png", "die_face_5.png", "die_face_6.png"];

document.getElementById("dice").src= di[vu-1];

document.getElementById("dicl").src= di[vu2-1];

}

Dit is de volledige code, bestudeer het en test het en zorg ervoor dat je de foto krijgt om het effect te krijgen

En als je mijn hulp bij deze code nodig hebt, vermeld het dan in het commentaargedeelte

Je kunt het ontwerp veranderen als je het niet leuk vindt, maar ik geef er de voorkeur aan voor het doel waarvoor ik het wil gebruiken

Stap 6: Uitvoeren

voer de code uit in uw browser om het werkend te krijgen