Paano Mag-code ng isang Simple Random Virtual Dice: 6 Mga Hakbang
Paano Mag-code ng isang Simple Random Virtual Dice: 6 Mga Hakbang

Talaan ng mga Nilalaman:

Anonim
Paano Mag-code ng isang Simple Random Virtual Dice
Paano Mag-code ng isang Simple Random Virtual Dice

Kumusta kayong lahat !!!!! Ito ang aking unang itinuturo at tuturuan kita kung paano mag-code ng isang virtual dice sa iyong PC o smartphone. Gumagamit ako ng HTML, JavaScript at CSS, sana ay magugustuhan mong lahat ito at huwag kalimutang bumoto para sa akin sa konteksto sa ibaba.

Mga gamit

1. Isang mahusay na editor ng teksto sa iyong smart phone o PC

Hakbang 1: Kunin ang Iyong Text Editor

Narito ginagamit ko ang aking smartphone bilang isang text editor dito (AnWriter). Maaari mo ring gamitin ang notepad ng iyong PC, o makakuha ng isang mahusay na editor ng teksto sa online

Hakbang 2: I-download ang Mga Mukha ng Die

I-download ang Mga Mukha ng Die
I-download ang Mga Mukha ng Die
I-download ang Mga Mukha ng Die
I-download ang Mga Mukha ng Die
I-download ang Mga Mukha ng Die
I-download ang Mga Mukha ng Die

Nag-download ako ng ilang mga namamatay na mukha mula 1 hanggang 6 na ikinakabit ko sa hakbang na ito. Kaya, maaari mong i-download ang iyong ginustong isa o gamitin ang minahan (libre ka).

Pinangalanan ko ang akin ayon sa mga namamatay. Yan ay:

Die_face_1.png, Die_face_2.png….at iba pa hanggang 6 para sa mas mahusay na pagkilala

Hakbang 3: Simulan ang Coding

I-save ang code bilang.html file

Magsimula sa pamamagitan ng pagpapakilala sa default na mukha ng die na gusto mo sa pamamagitan ng paggamit ng img src

Hakbang 4:

Susunod kakailanganin namin ang isang pindutan upang i-roll ang dice na ginagawa namin ito sa pamamagitan ng pagdaragdag ng isang pag-andar ng pindutan

ITAPON ANG DAYS

Hakbang 5: Gamitin ang Pag-andar ng Var at Math

Gamitin ang Pag-andar ng Var at Math
Gamitin ang Pag-andar ng Var at Math

SHAKE DICE

pagpapaandar 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];

}

Ito ang buong code, pag-aralan ito at subukan ito at tiyaking nakukuha mo ang larawan upang makuha ang epekto

At kung kailangan mo ng tulong ko sa code na ito banggitin ito sa seksyon ng komento

Maaari mong baguhin ang disenyo kung hindi mo gusto ito ngunit mas gusto ko ito para sa hangaring gusto kong gamitin ito

Hakbang 6: Patakbuhin

patakbuhin ang code sa iyong browser upang ito ay gumana