Kirjainpeli HTML & JavaScript.
Tietenkin voin auttaa sinua luomaan kirjainpelin HTML:llä ja JavaScriptillä. Tässä on yksinkertainen runko, jossa on määritelty tarvittavat muuttujat ja funktiot pelin toiminnallisuuden toteuttamiseksi:
HTML:
html<!DOCTYPE html>
<html>
<head>
<title>Kirjainpeli</title>
<style>
#game-area {
width: 400px;
height: 400px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
font-size: 36px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="game-area"></div>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js):
javascriptvar gameArea = document.getElementById('game-area');
var score = 0;
var appearanceInterval = 2000; // Ilmestymisen aikaväli millisekunteina
var disappearanceInterval = 1000; // Katoamisen aikaväli millisekunteina
var timer;
// Käynnistetään peli
function startGame() {
score = 0;
gameArea.innerHTML = '';
clearInterval(timer);
timer = setInterval(appearLetter, appearanceInterval);
}
// Luo satunnaisen kirjaimen ja lisää sen pelialueelle
function appearLetter() {
var letter = document.createElement('div');
letter.textContent = getRandomLetter();
gameArea.appendChild(letter);
setTimeout(function() {
letter.remove();
}, disappearanceInterval);
}
// Palauttaa satunnaisen aakkoskirjaimen
function getRandomLetter() {
var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var randomIndex = Math.floor(Math.random() * letters.length);
return letters.charAt(randomIndex);
}
// Päivittää pistemäärän ja poistaa klikatun kirjaimen
function handleClick(event) {
var clickedLetter = event.target;
score++;
clickedLetter.remove();
}
// Kuunnellaan kirjainten klikkauksia
gameArea.addEventListener('click', handleClick);
// Käynnistetään peli
startGame();
Tämä koodi luo pelialueen HTML-dokumenttiin ja sisältää tarvittavat JavaScript-funktiot pelin toiminnan toteuttamiseksi. Pelin voi käynnistää kutsumalla startGame() -funktiota.
Peli alkaa luomalla pelialueen div-elementin, ja startGame()-funktiossa nollataan pistemäärä ja tyhjennetään pelialue. setInterval-funktiolla määritetään aikaväli, jolla kirjaimet ilmestyvät pelialueelle appearLetter()-funktion avulla. setTimeout-funktiolla määritetään aikaväli, jonka jälkeen kirjain katoaa pelialueelta.
Kirjain luodaan appearLetter()-funktion avulla div-elementtinä, ja siihen asetetaan satunnainen kirjain käyttäen getRandomLetter()-funktiota. Kirjain poistetaan setTimeout-funktion avulla disappearanceInterval-muuttujan mukaisen aikavälin jälkeen.
Kun pelaaja klikkaa kirjainta pelialueella, handleClick()-funktio suoritetaan. Siinä päivitetään pistemäärä ja poistetaan klikattu kirjain pelialueelta.
Toivottavasti tämä antaa sinulle hyvän lähtökohdan kirjainpelin luomiseen HTML:llä ja JavaScriptillä. Voit muokata peliä lisäämällä ominaisuuksia, kuten pisteenlaskun ja pelin vaikeustason säätämisen, tarpeidesi mukaan.
Tietysti! Voit lisätä seuraavan koodin script.js-tiedostoon toteuttaaksesi näppäimistötunnistuksen:
javascript// Käsittelijä näppäimistön painalluksille
function handleKeyDown(event) {
var pressedKey = event.key.toUpperCase();
var letters = gameArea.getElementsByTagName('div');
for (var i = 0; i < letters.length; i++) {
if (letters[i].textContent === pressedKey) {
letters[i].remove();
score++;
break;
}
}
}
// Kuunnellaan näppäimistön painalluksia
document.addEventListener('keydown', handleKeyDown);
Tämä koodi lisää handleKeyDown()-funktion, joka käsittelee keydown-tapahtumia dokumentissa. Funktio saa painetun näppäimen tiedon event.key -ominaisuudesta ja muuttaa sen isoksi kirjaimeksi toUpperCase()-funktion avulla. Tämän jälkeen funktio käy läpi kaikki pelialueen kirjaimet getElementsByTagName()-funktion avulla ja tarkistaa, onko niiden tekstisisältö sama kuin painettu näppäin. Jos vastaava kirjain löytyy, se poistetaan pelialueelta, pistemäärä päivitetään ja looppaus keskeytetään break-lauseella.
Lisäksi lisätään tapahtumankuuntelija document.addEventListener('keydown', handleKeyDown);, joka reagoi näppäimistön painalluksiin ja kutsuu handleKeyDown()-funktiota.
Nyt peli reagoi sekä kirjainten klikkauksiin että näppäimistön painalluksiin oikeiden kirjainten poistamiseksi ja pisteiden laskemiseksi.
Toivottavasti tämä täydentää peliäsi tarvitsemallasi näppäimistötunnistuksella!
Voit asettaa kirjaimen sijainnin pystysuunnassa prosentteina käyttämällä CSS:n top -ominaisuutta. Voit generoida satunnaisen pystysuuntaisen sijainnin kirjaimelle seuraavalla tavalla:
javascriptfunction getRandomVerticalPosition() {
var randomPercentage = Math.random() * 100; // Satunnainen luku välillä 0-100
return randomPercentage + '%';
}
Tämä funktio palauttaa satunnaisen prosenttimäärän väliltä 0% - 100%, joka voi edustaa kirjaimen pystysuuntaista sijaintia.
Sitten voit lisätä tämän arvotun sijainnin kirjaimen luomisen yhteydessä:
javascript// Luo satunnaisen kirjaimen ja lisää sen pelialueelle
function appearLetter() {
var letter = document.createElement('div');
letter.textContent = getRandomLetter();
letter.style.top = getRandomVerticalPosition(); // Aseta pystysuuntainen sijainti
gameArea.appendChild(letter);
setTimeout(function() {
letter.remove();
}, disappearanceInterval);
}
Nyt kirjain saa satunnaisen pystysuuntaisen sijainnin prosentteina luonnin yhteydessä.
Seuraavaksi voit luoda CSS-animaation, jossa kirjain liikkuu vasemmalta oikealle ajan kuluessa. Tämä voidaan tehdä käyttämällä CSS-transitionia padding-left -ominaisuuden avulla. Voit lisätä seuraavan CSS-säännön:
cssdiv {
transition: padding-left 5s linear; /* 5s tarkoittaa ajan T kestoa */
}
Tässä esimerkissä olemme määrittäneet siirtymän (transition) padding-left -ominaisuudelle, joka kestää 5 sekuntia (tai minkä tahansa ajan, jonka haluat). Voit muuttaa aikaa tarpeidesi mukaan. Sileä (linear) siirtymä on määritetty, joten kirjain liikkuu tasaisesti ilman kiihdytyksiä tai hidastuksia.
Kun kirjain luodaan, voit lisätä sen luokan, joka käynnistää siirtymän, esimerkiksi:
javascriptfunction appearLetter() {
var letter = document.createElement('div');
letter.textContent = getRandomLetter();
letter.style.top = getRandomVerticalPosition();
letter.classList.add('move-animation'); // Lisää luokka, joka käynnistää siirtymän
gameArea.appendChild(letter);
setTimeout(function() {
letter.remove();
}, disappearanceInterval);
}
Nyt, kun kirjain luodaan, sille annetaan luokka move-animation, joka käynnistää siirtymän.
Lisäämällä yllä olevat koodipätkät saat satunnaisen pystysuuntaisen sijainnin kirjaimelle prosentteina ja CSS-animaation, jossa kirjain liikkuu vasemmalta oikealle ajan T kuluessa.
Toivottavasti tämä auttaa sinua kehittämään kirjainpeliäsi edelleen!
Kyllä, voit muuttaa suoraan kirjainelementin attribuutteja CSS-luokan sijaan animoidaksesi sen liikettä. Voit käyttää CSS Keyframe Animationia ja lisätä animaatioon tarvitsemasi ominaisuudet, kuten left-arvon ja animaation keston.
Tässä on päivitetty koodipätkä, joka toteuttaa animaation left-arvolle ja lisää pienen viiveen ennen animaation aloitusta:
javascriptfunction appearLetter() {
var letter = document.createElement('div');
letter.textContent = getRandomLetter();
letter.style.top = getRandomVerticalPosition();
gameArea.appendChild(letter);
setTimeout(function() {
letter.style.animation = `move-animation ${disappearanceInterval / 1000}s linear`;
letter.style.left = '-1em';
setTimeout(function() {
letter.remove();
}, disappearanceInterval);
}, animationExtraTime);
}
Tässä koodissa olemme määrittäneet animaation move-animation nimeksi, jota käytämme animaation määrittelyssä CSS:ssä. Asetamme myös left-arvoksi -1em, joka on animaation lähtökohta.
Voit määrittää animaation keston muuttujan disappearanceInterval avulla. Ja lisäsimme animationExtraTime-muuttujan, joka edustaa pientä viivettä ennen animaation aloitusta. Voit säätää tätä arvoa tarpeen mukaan.
Sitten sinun tarvitsee lisätä CSS-tiedostoon seuraava CSS-sääntö määrittelemään itse animaatio:
css@keyframes move-animation {
0% {
left: -1em;
}
100% {
left: 100%;
}
}
Tässä määritellään avainkehykset (@keyframes) animaatiolle move-animation. Ensimmäisessä avainkehyksessä (0%) asetetaan left-arvoksi -1em, joka edustaa animaation lähtökohtaa. Viimeisessä avainkehyksessä (100%) asetetaan left-arvoksi 100%, joka tarkoittaa animaation päätepistettä.
Tämän avulla kirjain liikkuu vasemmalta oikealle animoidusti animaation keston mukaisesti.
Toivottavasti tämä vastaa tarpeitasi ja auttaa sinua kehittämään kirjainpeliäsi edelleen!
Voit lisätä seuraavat CSS-tyylit, jotta div-elementit ovat suhteellisia elementtiin #game-area ja ylimenevät osat piilotetaan:
css#game-area {
position: relative;
overflow: hidden;
}
div {
position: absolute;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Ensinnäkin, aseta #game-area-elementin position-ominaisuudeksi relative, jotta div-elementit asettuvat sen sisällä.
Toiseksi, aseta div-elementtien position-ominaisuudeksi absolute, jotta voit määrittää niiden tarkan sijainnin suhteessa #game-area-elementtiin.
Lisäksi, määritä white-space-ominaisuudeksi nowrap, jotta div-elementit eivät rivittyisi vaakasuunnassa, vaan pysyisivät yhdellä rivillä.
Voit myös käyttää overflow: hidden -ominaisuutta piilottaaksesi ylimenevät osat div-elementeistä. Lisäksi voit käyttää text-overflow: ellipsis -ominaisuutta, joka asettaa "..."-pisteet näkyviin, jos teksti ylittää div-elementin leveyden.
Näiden CSS-tyylien avulla div-elementit asettuvat suhteellisesti #game-area-elementtiin ja ylimenevät osat piilotetaan.
Muokkaa CSS-tyylejä tarpeidesi mukaan, esimerkiksi voit määrittää tarkemmat koot, taustavärit tai muita visuaalisia ominaisuuksia div-elementeille.
Toivottavasti tämä auttaa sinua edistämään kirjainpelin kehitystä!
Voit käyttää seuraavia CSS-tyylejä body-elementille, jotta #game-area sijoittuu keskelle:
cssbody {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
Nämä tyylit hyödyntävät Flexboxia asettaakseen #game-area keskelle näyttöä. Tässä selitykset käytetyille tyyliominaisuuksille:
display: flex;- asettaa body-elementin flex-containeriksi.justify-content: center;- keskittelee elementit vaakasuunnassa flex-containerin keskelle.align-items: center;- keskittelee elementit pystysuunnassa flex-containerin keskelle.height: 100vh;- asettaa bodyn korkeuden näyttökorkeuden kokoiseksi, jotta #game-area sijoittuu keskelle näyttöä riippumatta sisällön määrästä.margin: 0;- poistaa oletusmarginaalin, jotta #game-areaa ei siirretä sivun reunasta.
Näiden tyylien avulla #game-area sijoittuu keskelle näyttöä vaakasuunnassa ja pystysuunnassa.
Voit muokata näitä tyylejä tarpeidesi mukaan, esimerkiksi muuttamalla taustaväriä, leveyttä tai korkeutta bodylle.
Toivottavasti tämä auttaa sinua asettamaan #game-area keskelle sivua!
Voit käyttää CSS-ominaisuutta flex-direction määrittääksesi flex-elementin sisällön pystysuuntaan. Voit asettaa sen arvoksi column. Esimerkiksi:
css#game-area {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
Tällä tavalla #game-area sisältö sijoittuu pystysuunnassa flex-containeriin. flex-direction: column määrittää, että sisältö asetetaan sarakkeiksi.
Voit myös harkita muita flex-ominaisuuksia, kuten align-content tai flex-wrap, tarpeiden mukaan. Näillä voit määrittää sisällön sijoittumista ja asettelua tarkemmin.
Toivottavasti tämä auttaa sinua asettamaan flex-elementin sisällön pystysuuntaan!
Voit tarkistaa, ovatko kirjaimet pelialueen alareunan ulkopuolella, käyttämällä JavaScriptin getBoundingClientRect() -metodia. Tämä metodi palauttaa elementin sijainnin ja koon suhteessa näyttöön.
Voit lisätä seuraavan tarkistuksen appearLetter()-funktioon:
javascriptfunction appearLetter() {
var letter = document.createElement('div');
letter.textContent = getRandomLetter();
letter.style.top = getRandomVerticalPosition();
gameArea.appendChild(letter);
setTimeout(function() {
var rect = letter.getBoundingClientRect();
if (rect.bottom > window.innerHeight) {
letter.remove();
// Kirjain on pelialueen alareunan ulkopuolella, tee tarvittavat toimenpiteet
}
}, disappearanceInterval);
}
Tässä koodissa käytämme getBoundingClientRect()-metodia kirjaindivin sijainnin ja koon saamiseksi. Sen jälkeen tarkistamme, onko kirjaimen alareuna (rect.bottom) suurempi kuin ikkunan korkeus (window.innerHeight). Jos näin on, se tarkoittaa, että kirjain on pelialueen alareunan ulkopuolella. Voit suorittaa tässä vaiheessa tarvittavat toimenpiteet, kuten kirjaimen poistamisen tai pisteen vähentämisen.
Voit muokata tätä tarkistusta tarpeidesi mukaan. Esimerkiksi voit käyttää pelialueen sijaintia suhteessa muihin elementteihin sen sijaan, että käyttäisit window.innerHeight -arvoa.
Toivottavasti tämä auttaa sinua tunnistamaan kirjaimet, jotka ovat pelialueen alareunan ulkopuolella!
Voit lisätä kirjaimen yhteyteen tiedon luomisajankohdasta tallentamalla sen tietoon kirjain-elementissä. Voimme käyttää data-attribuuttia tähän tarkoitukseen.
Päivitetty koodi appearLetter()-funktioon:
javascriptfunction appearLetter() {
var letter = document.createElement('div');
letter.textContent = getRandomLetter();
letter.style.top = getRandomVerticalPosition();
// Lisätään data-attribuutti luomisajankohdalle
var currentTime = new Date().getTime();
letter.setAttribute('data-creation-time', currentTime);
gameArea.appendChild(letter);
setTimeout(function() {
var rect = letter.getBoundingClientRect();
if (rect.bottom > window.innerHeight) {
letter.remove();
// Kirjain on pelialueen alareunan ulkopuolella, tee tarvittavat toimenpiteet
} else {
success(letter);
}
}, disappearanceInterval);
}
Tässä koodissa tallennamme kirjain-elementtiin luomisajankohdan data-creation-time-attribuuttina appearLetter()-funktion sisällä. Käytämme new Date().getTime() saadaksemme aikaleiman millisekunteina.
Seuraavaksi voit luoda success()-funktion tarkistamaan kirjaimen olemassaoloajan ja muokkaamaan katoamisajan pituutta tarvittaessa:
javascriptfunction success(letter) {
var currentTime = new Date().getTime();
var creationTime = parseInt(letter.getAttribute('data-creation-time'));
var elapsedTime = currentTime - creationTime;
var percentage = (elapsedTime / disappearanceInterval) * 100;
if (percentage < 30) {
// Pienennä katoamisajan pituutta 10%:lla
disappearanceInterval *= 0.9;
} else if (percentage > 70) {
// Suurenna katoamisajan pituutta 10%:lla
disappearanceInterval *= 1.1;
}
console.log('Elapsed Time:', elapsedTime);
console.log('Percentage:', percentage);
console.log('New Disappearance Interval:', disappearanceInterval);
}
success()-funktiossa lasketaan kulunut aika currentTime-ajan ja data-creation-time-attribuutin välillä. Sitten lasketaan prosenttiosuus kuluneesta ajasta suhteessa kokonaiskatoamisajan pituuteen. Riippuen prosenttiosuudesta, katoamisajan pituutta muokataan 10%:lla joko pienentämällä tai suurentamalla sitä.
Huomaa, että tässä esimerkissä oletamme, että disappearanceInterval on globaali muuttuja, jota voidaan muokata success()-funktiossa.
Voit lisätä tarvittavat koodinpätkät edellisiin esimerkkeihin. Tällä tavoin kirjaimen luomisajankohta tallennetaan, ja success()-funktio tarkistaa kirjaimen olemassaoloajan ja muokkaa katoamisajan pituutta sen mukaan.
Muokkaa funktioita tarpeidesi mukaan ja lisää lisätoimenpiteitä success()-funktioon, jos tarpeen.
Toivottavasti tämä auttaa sinua kehittämään kirjainpeliäsi edelleen!
Voit tarkistaa, onko letter-elementti poistettu dokumentista käyttämällä sen parentNode-ominaisuutta. Jos letter.parentNode on null, se tarkoittaa, että elementti on poistettu dokumentista.
Voit lisätä tarkistuksen success()-funktioon, kuten alla:
javascriptfunction success(letter) {
var currentTime = new Date().getTime();
var creationTime = parseInt(letter.getAttribute('data-creation-time'));
var elapsedTime = currentTime - creationTime;
var percentage = (elapsedTime / disappearanceInterval) * 100;
if (percentage < 30) {
// Pienennä katoamisajan pituutta 10%:lla
disappearanceInterval *= 0.9;
} else if (percentage > 70) {
// Suurenna katoamisajan pituutta 10%:lla
disappearanceInterval *= 1.1;
}
console.log('Elapsed Time:', elapsedTime);
console.log('Percentage:', percentage);
console.log('New Disappearance Interval:', disappearanceInterval);
// Tarkista, onko kirjainta jo poistettu
if (!letter.parentNode) {
// Kirjain on jo poistettu
console.log('Letter already removed.');
} else {
// Kirjain ei ole poistettu, kutsu fail-funktiota
fail(letter);
}
}
Tässä tarkistamme, onko letter.parentNode arvo null vai ei. Jos letter.parentNode on null, se tarkoittaa, että kirjain on jo poistettu dokumentista. Voit tehdä tarvittavat toimenpiteet tämän perusteella.
Voit luoda fail()-funktion, joka käsittelee tapauksen, jossa kirjainta ei ole poistettu aikarajan ylittyessä:
javascriptfunction fail(letter) {
console.log('Letter removal failed:', letter.textContent);
// Kirjainta ei ole poistettu, tee tarvittavat toimenpiteet
}
fail()-funktio voi sisältää tarvittavat toimenpiteet, kun kirjainta ei ole poistettu.
Lisää tarvittavat koodipätkät ja mukauta funktiot tarpeidesi mukaan.
Toivottavasti tämä auttaa sinua tunnistamaan, onko kirjain jo poistettu dokumentista ja tekemään tarvittavat toimenpiteet sen mukaisesti!
Voit luoda showScore()-funktion, joka näyttää pistemäärän ja pelin alusta kuluneen ajan. Voit lisätä sen esimerkiksi HTML-dokumentin johonkin sopivaan paikkaan, kuten pistetilanteen näyttämiseen tarkoitettuun div-elementtiin.
Alla on esimerkkikoodi, joka päivittää pistemäärän ja kuluneen ajan:
javascriptvar startTime; // Pelin alkamisajankohta
function startGame() {
// ...
startTime = new Date().getTime(); // Tallenna pelin alkamisajankohta
// ...
}
function showScore() {
var currentTime = new Date().getTime();
var elapsedTime = currentTime - startTime;
var seconds = Math.floor(elapsedTime / 1000); // Muunna millisekunnit sekunneiksi
var scoreElement = document.getElementById('score');
scoreElement.textContent = 'Score: ' + score + ' | Time: ' + seconds + ' seconds';
}
Tässä koodissa startGame()-funktiossa tallennetaan startTime-muuttujaan pelin alkamisajankohta new Date().getTime()-kutsulla.
showScore()-funktiossa lasketaan kulunut aika currentTime-ajan ja startTime-ajan välillä. Sitten muunnetaan kulunut aika sekunneiksi jakamalla se 1000:llä. score-muuttuja sisältää pistemäärän, joka on päivitetty pelin aikana.
Lopuksi päivitetään scoreElement-elementin sisältö, joka voi olla esimerkiksi <div id="score"></div>. Sisältö päivitetään näyttämään pistemäärä ja kulunut aika.
Voit kutsua showScore()-funktiota tarvittavissa kohdissa, esimerkiksi pelin aikana tai pelin päätyttyä.
Toivottavasti tämä auttaa sinua näyttämään pistemäärän ja pelin kuluneen ajan pelissäsi!
Voit lisätä tarvittavat CSS-tyylit saadaksesi #score-elementtiin tasalevyisen fontin, säilyttämään välilyönnit ja lisäämään 1em marginaalin alareunaan seuraavasti:
css#score {
font-family: 'Courier New', monospace; /* Tasalevyinen fontti, esim. Courier New */
white-space: pre; /* Säilytä välilyönnit ja rivinvaihdot */
margin-bottom: 1em; /* 1em marginaali alareunaan */
}
Ensinnäkin, käytämme font-family-ominaisuutta asettamaan tasalevyisen fontin #score-elementtiin. Esimerkiksi Courier New on yksi tavallisista tasalevyisistä fonteista.
Toiseksi, asetamme white-space: pre;-ominaisuuden, jotta välilyönnit ja rivinvaihdot säilyvät. Tämä estää selainta yhdistämästä välilyöntejä ja muotoilemasta tekstiä automaattisesti.
Lopuksi, asetamme margin-bottom: 1em;-ominaisuuden, joka lisää 1em marginaalin alareunaan #score-elementille.
Näiden CSS-tyylien avulla saat #score-elementtiin tasalevyisen fontin, jossa välilyönnit säilyvät ja 1em marginaali alareunaan.
Voit muokata tarvittaessa font-family-ominaisuuden arvoa ja muita tyylejä vastaamaan tarkkoja fontti- ja ulkoasutoiveitasi.
Toivottavasti tämä vastaa tarpeitasi ja auttaa sinua saavuttamaan halutun tyylin #score-elementissä!
Tässä on koodi, joka luo "Uusi peli" -napin ja liittää siihen startGame()-funktion sekä kivat tyylit:
HTML:
html<button id="new-game-btn">Uusi peli</button>
CSS:
css#new-game-btn {
font-size: 24px; /* Fonttikoko */
padding: 10px 20px; /* Napin sisäväli */
background-color: #4CAF50; /* Taustaväri */
color: #fff; /* Tekstin väri */
border: none; /* Poista reunus */
border-radius: 5px; /* Pyöristä nurkat */
cursor: pointer; /* Osoitinkursori */
}
#new-game-btn:hover {
background-color: #45a049; /* Vaihda taustaväri hiiren ollessa päällä */
}
#new-game-btn:focus {
outline: none; /* Poista korostus kun nappia klikataan */
}
JavaScript:
javascriptdocument.getElementById('new-game-btn').addEventListener('click', startGame);
Tässä HTML:ssä luodaan yksinkertainen "Uusi peli" -nappi button-elementin avulla. CSS-tyylit lisätään napille, jolloin se saa kivan ulkoasun. JavaScript-koodissa lisätään tapahtumankuuntelija click-tapahtumalle, joka kutsuu startGame()-funktiota, kun nappia klikataan.
Muokkaa tarvittaessa fonttikokoa ja muita tyylejä saavuttaaksesi haluamasi ulkoasun napille.
Toivottavasti tämä auttaa sinua lisäämään "Uusi peli" -napin ja kivat tyylit peliisi!
Voit lisätä addScore(n)-funktion, joka lisää annetun luvun n pistemäärään, näyttää päivitetyn pistemäärän ja vaihtaa pelialueen luokan success tai fail sen mukaan, onko lisätty pistemäärä positiivinen (+) vai negatiivinen (-).
HTML:
html<button id="new-game-btn">Uusi peli</button>
<div id="game-area"></div>
<div id="score"></div>
CSS:
css#game-area {
/* Pelialueen tyylit */
width: 300px;
height: 200px;
border: 2px solid #000;
transition: border-color 0.25s; /* Sulava reunavärin vaihto */
}
.success {
border-color: forestgreen; /* Metsänvihreä reunaväri */
}
.fail {
border-color: crimson; /* Verenpunainen reunaväri */
}
JavaScript:
javascriptvar score = 0;
function addScore(n) {
score += n;
showScore();
updateGameAreaClass(n);
}
function showScore() {
var scoreElement = document.getElementById('score');
scoreElement.textContent = 'Score: ' + score;
}
function updateGameAreaClass(n) {
var gameArea = document.getElementById('game-area');
gameArea.classList.remove('success', 'fail');
gameArea.classList.add(n >= 0 ? 'success' : 'fail');
}
Tässä koodissa luodaan addScore(n)-funktio, joka lisää annetun luvun n pistemäärään, päivittää pistemäärän näytön showScore()-funktiolla ja vaihtaa pelialueen luokan success tai fail sen mukaan, onko lisätty pistemäärä positiivinen (+) vai negatiivinen (-).
Käytämme classList.remove()-metodia poistamaan kaikki aiemmat luokat pelialueelta ja classList.add()-metodia lisäämään joko success tai fail -luokan sen mukaan, onko n positiivinen vai negatiivinen.
Lisäksi lisäsimme CSS:ssä transition-ominaisuuden pelialueelle, jolloin reunavärin vaihto tapahtuu sulavasti 0,25 sekunnin aikana.
Toivottavasti tämä vastaa tarpeitasi ja auttaa sinua toteuttamaan pistemäärän päivittämisen ja pelialueen reunavärin vaihdon sulavasti pelissäsi!
Voit tehdä korjauksen, jotta jos randomPercentage on yli 50, asetetaan bottom-arvoksi käänteinen prosenttiosuus. Voit käyttää CSS-muuttujaa (custom property) tämän toteuttamiseen.
Alla on päivitetty koodi appearLetter()-funktioon, jossa huomioimme käänteisen prosenttiosuuden asettamisen:
javascriptfunction appearLetter() {
var letter = document.createElement('div');
letter.textContent = getRandomLetter();
var randomPercentage = Math.random() * 100;
if (randomPercentage > 50) {
letter.style.bottom = (100 - randomPercentage) + '%';
} else {
letter.style.top = randomPercentage + '%';
}
gameArea.appendChild(letter);
// ...
}
Tässä koodissa käytämme randomPercentage-muuttujaa arvon generoimiseen väliltä 0-100, jotta voimme määrittää, sijoitetaanko kirjain top- tai bottom-ominaisuuden avulla.
Jos randomPercentage on yli 50, asetetaan letter.style.bottom-ominaisuuden arvoksi käänteinen prosenttiosuus (100 - randomPercentage). Muutoin, jos randomPercentage on 50 tai pienempi, asetetaan letter.style.top-ominaisuuden arvoksi alkuperäinen prosenttiosuus randomPercentage.
Tämän avulla voit asettaa kirjaimen sijainnin joko ylä- tai alareunaan satunnaisesti pelialueella, mikä tuo vaihtelua peliisi.
Muista päivittää tarvittaessa muita osia koodissasi, jotka liittyvät kirjainten sijoitteluun pelialueelle, jos olet muuttanut tähän liittyviä ominaisuuksia.
Voit toteuttaa pelin silmukan käyttämällä setTimeout()-funktiota ja poistamalla vanhan ajastuksen uuden pelin alkaessa. Voit myös muokata kirjainten ilmestymisaikaa sen mukaan, että ensimmäinen kirjain ilmestyy 0.2 sekunnin kuluttua ja myöhemmin kirjaimet ilmestyvät ajan disappearanceInterval / 10 kuluttua.
Tässä on päivitetty koodi startGame()-funktioon ja uusi appearNextLetter()-funktio:
javascriptvar letterTimeout;
var disappearanceInterval = 2000; // Aseta oletuksena disappearanceInterval
function startGame() {
// Poista vanha ajastus, jos sellainen on olemassa
if (letterTimeout) {
clearTimeout(letterTimeout);
}
// Alusta pistemäärä ja muut tarvittavat muuttujat
score = 0;
showScore();
// Aseta ensimmäisen kirjaimen ilmestymisen ajastus
letterTimeout = setTimeout(appearNextLetter, 200);
}
function appearNextLetter() {
appearLetter();
// Aseta seuraavan kirjaimen ilmestymisen ajastus
letterTimeout = setTimeout(appearNextLetter, disappearanceInterval / 10);
}
Tässä koodissa käytämme letterTimeout-muuttujaa tallentamaan setTimeout()-funktion palauttaman ajastuksen viittauksen. Näin voimme myöhemmin poistaa sen clearTimeout()-funktiolla.
Kun startGame()-funktiota kutsutaan, poistamme vanhan ajastuksen clearTimeout()-funktiolla, jos sellainen on olemassa. Sitten alustamme pistemäärän ja muut tarvittavat muuttujat ja asetamme ensimmäisen kirjaimen ilmestymisen ajastuksen 0.2 sekunnin kuluttua appearNextLetter()-funktion avulla.
appearNextLetter()-funktio kutsuu appearLetter()-funktiota ja asettaa sitten uuden ajastuksen seuraavan kirjaimen ilmestymiselle ajan disappearanceInterval / 10 kuluttua.
Näin luodaan pelin silmukka, joka ilmentää uusia kirjaimia tietyin väliajoin ja mahdollistaa uuden pelin alkaessa aiemman ajastuksen poistamisen.
Toivottavasti tämä auttaa sinua luomaan pelin silmukan halutuilla ominaisuuksilla!
Voit päivittää handleKeyDown-funktiota tarkistamaan, onko painettu näppäin kirjain ja löytyykö se pelialueelta. Jos kirjainta ei löydy pelialueelta, voit antaa miinuspisteen kutsumalla addScore(-1). Jos kirjain löytyy pelialueelta, voit kutsua success-funktiota kyseiselle diville.
Tässä on päivitetty handleKeyDown-funktio:
javascriptfunction handleKeyDown(event) {
var pressedKey = event.key.toUpperCase(); // Konvertoi painetun näppäimen isoksi kirjaimeksi
var letterDivs = document.querySelectorAll('#game-area > div');
var foundLetter = false;
for (var i = 0; i < letterDivs.length; i++) {
var letterDiv = letterDivs[i];
var letterText = letterDiv.textContent.toUpperCase(); // Konvertoi kirjaimen sisällön isoksi kirjaimeksi
if (letterText === pressedKey) {
success(letterDiv);
foundLetter = true;
break;
}
}
if (!foundLetter && isLetter(pressedKey)) {
addScore(-1);
}
}
Tässä koodissa käytämme event.key saadaksemme painetun näppäimen arvon ja toUpperCase()-metodia muuttamaan sen isoksi kirjaimeksi. Sitten käytämme document.querySelectorAll()-metodia hakemaan kaikki pelialueen div-elementit.
Käymme läpi kaikki div-elementit for-silmukassa ja verrataan niiden sisältöä (myös muutettuna isoksi kirjaimeksi) painettuun näppäimeen. Jos kirjain löytyy pelialueelta, kutsutaan success-funktiota kyseiselle div-elementille ja merkitään foundLetter-muuttuja todeksi (true).
Jos foundLetter on edelleen false eikä kirjain löydy pelialueelta, tarkistetaan, onko painettu näppäin kirjain (A-Z tai ÅÄÖ) kutsumalla isLetter-funktiota. Jos se on, kutsutaan addScore(-1) antamaan miinuspiste.
isLetter-funktio voi olla oma apufunktio, joka tarkistaa, onko annettu merkki kirjain:
javascriptfunction isLetter(char) {
return /[A-ZÅÄÖ]/i.test(char);
}
Toivottavasti nämä päivitykset auttavat sinua lisäämään miinuspisteet ja kutsut success-funktiolle pelissäsi!
Tietenkin! Voimme päivittää isLetter-funktion tarkistamaan, että annettu merkki on vain yhden merkin pituinen (ei merkkijono). Voimme käyttää String.prototype.length-ominaisuutta tarkistaaksemme, onko merkkijonon pituus yksi.
Tässä päivitetty isLetter-funktio:
javascriptfunction isLetter(char) {
return typeof char === 'string' && char.length === 1 && /[A-ZÅÄÖ]/i.test(char);
}
Tässä koodissa tarkistamme ensin, että char on merkkijono (typeof char === 'string') ja sen pituus on yksi (char.length === 1). Sitten tarkistamme, että merkki vastaa sallittujen kirjainten joukkoa /[A-ZÅÄÖ]/i.
Tällä päivityksellä varmistamme, että isLetter-funktio hyväksyy vain yhden merkin pituiset kirjaimet ja hylkää merkkijonot, joissa on useampia merkkejä.
Toivottavasti tämä korjaus auttaa sinua tarkistamaan kirjainten kelvollisuuden pelissäsi!