Nuestros remedios en nosotros residen.
Los cuales atribuimos al cielo
Shakespeare
en versión original:
Our remedies in ourselves do lie.
Which we ascribe to Heaven
Shakespeare
Tecnología, Apps, Web, Educación, Mentalidad y Alicante, la millor terreta del món
Nuestros remedios en nosotros residen.
Los cuales atribuimos al cielo
Shakespeare
en versión original:
Our remedies in ourselves do lie.
Which we ascribe to Heaven
Shakespeare
Hace poco más de una semana que he vuelto a escribir en este blog, y he conseguido hacerlo con una frecuencia bastante alta. La clave para escribir con tanta frecuencia ha sido utilizar el blog como cuaderno de notas: para capturar ideas y recursos, e incluso desarrollar esos recursos y crear recursos propios.
A pesar de no conseguir visitas, estoy consiguiendo otras recompensas a nivel personal:
Concluyo, la escritura en papel es una tecnología de la información, una de las más antiguas y que a día de hoy, a pesar de la gran variedad de alternativas digitales, sigue siendo de una gran utilidad.
Habits are the compound interest of self improvement
Rich Roll Podcast. James Clear
Primero implementamos la interfaz de nuestro juego en un fichero index.html. La interfaz visualizará la elección del ordenador, la elección del usuario, el resultado y los tres botones para que el usuario pueda elegir piedra, papel o tijeras. Al presionar uno de los botones la interfaz se actualizará como corresponda.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Rock, paper, scissors</title>
</head>
<body>
<h2>Computer: <span id="computer-choice"></span></h2>
<h2>Your choice: <span id="user-choice"></span></h2>
<h2>Result: <span id="result"></span></h2>
<button id="rock">rock</button>
<button id="paper">paper</button>
<button id="scissors">scissors</button>
<script src="app.js" charset="utf-8"></script>
</body>
</html>
Creamos un fichero llamado app.js, y en este fichero referenciamos los diferentes componentes de la interfaz. Además, añadimos unas variables globales para almacenar la elección del usuario, el ordenador y el resultado (userChoice, computerChoice y result) .
onst computerChoiceDisplay = document.getElementById('computer-choice')
const userChoiceDisplay = document.getElementById('user-choice')
const resultDisplay = document.getElementById('result')
const possibleChoices = document.querySelectorAll('button')
let userChoice
let computerChoice
let result
Después capturamos el evento ‘click’ para todos los botones de la interfaz, para que al pulsar uno de los botones:
possibleChoices.forEach(possibleChoice => possibleChoice.addEventListener('click', (e) => {
userChoice = e.target.id
userChoiceDisplay.innerHTML = userChoice
generateComputerChoice()
getResult()
}))
A continuación, implementamos la función generateComputerChoice() que genera la opción del ordenador:
function generateComputerChoice(){
const randomNumber = Math.floor(Math.random() * 3) + 1
if(randomNumber === 1){
computerChoice = 'rock'
}
if(randomNumber === 2){
computerChoice = 'scissors'
}
if(randomNumber === 3){
computerChoice = 'paper'
}
computerChoiceDisplay.innerHTML = computerChoice
}
Y por último, implementamos la función que visualiza el resultado:
function getResult() {
if(computerChoice === userChoice){
result = 'its a draw!'
}
if(computerChoice === 'rock' && userChoice ==='paper'){
result = 'you win!'
}
if(computerChoice === 'rock' && userChoice ==='scissors'){
result = 'you lost!'
}
if(computerChoice === 'paper' && userChoice ==='scissors'){
result = 'you win!'
}
if(computerChoice === 'paper' && userChoice ==='rock'){
result = 'you lost!'
}
if(computerChoice === 'scissors' && userChoice ==='rock'){
result = 'you win!'
}
if(computerChoice === 'scissors' && userChoice ==='paper'){
result = 'you lost!'
}
resultDisplay.innerHTML = result
}
El código completo del fichero app.js:
const computerChoiceDisplay = document.getElementById('computer-choice')
const userChoiceDisplay = document.getElementById('user-choice')
const resultDisplay = document.getElementById('result')
const possibleChoices = document.querySelectorAll('button')
let userChoice
let computerChoice
let result
possibleChoices.forEach(possibleChoice => possibleChoice.addEventListener('click', (e) => {
userChoice = e.target.id
userChoiceDisplay.innerHTML = userChoice
generateComputerChoice()
getResult()
}))
function generateComputerChoice(){
const randomNumber = Math.floor(Math.random() * 3) + 1
if(randomNumber === 1){
computerChoice = 'rock'
}
if(randomNumber === 2){
computerChoice = 'scissors'
}
if(randomNumber === 3){
computerChoice = 'paper'
}
computerChoiceDisplay.innerHTML = computerChoice
}
function getResult() {
if(computerChoice === userChoice){
result = 'its a draw!'
}
if(computerChoice === 'rock' && userChoice ==='paper'){
result = 'you win!'
}
if(computerChoice === 'rock' && userChoice ==='scissors'){
result = 'you lost!'
}
if(computerChoice === 'paper' && userChoice ==='scissors'){
result = 'you win!'
}
if(computerChoice === 'paper' && userChoice ==='rock'){
result = 'you lost!'
}
if(computerChoice === 'scissors' && userChoice ==='rock'){
result = 'you win!'
}
if(computerChoice === 'scissors' && userChoice ==='paper'){
result = 'you lost!'
}
resultDisplay.innerHTML = result
}
Fuente: Learn JavaScript by building 7 games de Ania Kubów
He encontrado este curso en freeCodeCamp.org para aprender JavaScript programando 7 juegos clásicos. El curso dura 5 horas y es gratuito, como todo lo que se puede encontrar en FreeCodeCamp.org. Eso sí, el curso es en inglés.
Me ha parecido una propuesta fantástica y creo que se puede adaptar al aprendizaje basado en proyectos, para alumnos de bachillerato, y tal vez de ESO.
// TODO: Adaptar curso a proyectos
// Tercer proyecto
El curso es una adaptación de un curso más avanzado que incluye juegos como Tetris.
Versión principiantes: https://www.freecodecamp.org/news/learn-javascript-by-coding-7-games/
Versión avanzada: https://www.freecodecamp.org/news/learn-javascript-by-building-7-games-video-course/
Afrontar nuestro destino, aceptar las cartas que la vida nos reparte y jugarlas lo mejor posible, no dejar que el viento en contra nos pare. Sin duda, lo que nos vamos encontrando en la vida es decisivo, pero también lo es cómo decidamos afrontar cada adversidad.
Cuando sabes que tu tiempo en este mundo es finito y que cada vez te queda menos, puedes tomártelo de varias formas:
Tú decides.
A veces buscamos las causas de nuestros problemas en elementos externos: otras personas, compañeros de trabajo, familiares, las herramientas que usamos, cosas que no tenemos, la suerte e incluso la meteorología, o cualquier evento que catalogamos como adversidad.
Pero la clave de nuestras vidas reside en nosotros mismos. Somos nosotros quienes decidimos cómo actuamos ante todo lo que pasa en nuestras vidas, todo lo que nos sucede.
Cuida lo que dices sobre ti.
Cuida lo que escribes sobre ti.
Cuida lo que piensas de ti.
Cuida lo que haces.
Porque todo influirá en cómo te sientes.
Cuídate.
Para mejorar tu escritura, lee y escribe más.
Vala Afshar
Para mejorar tus relaciones, da más.
Para mejorar tus conversaciones, escucha más.
Para mejorar tu resistencia, muévete más.
Para hablar mejor en público, habla más.
Para mejorar tus conocimientos, enseña más.
Para ser más feliz, valora más.