diff --git a/staff/joseramon-rodriguez/shapes/car/Car.js b/staff/joseramon-rodriguez/shapes/car/Car.js
new file mode 100644
index 000000000..93a9f2103
--- /dev/null
+++ b/staff/joseramon-rodriguez/shapes/car/Car.js
@@ -0,0 +1,36 @@
+function Car(width, height, color) {
+
+    if (width > height * 3) {
+        height = width / 3
+    }
+
+    else if (height >= width * 1.1) {
+        width = height
+    }
+
+    var wheelsSize = (width * 0.8 + height * 1.3) / 2 * 0.2
+
+    Shape2D.call(this, width, height + wheelsSize / 2)
+
+    // this.setStyle('background-color', 'transparent')
+    this.setStyle('border', '1px solid black')
+
+    var carBody = new CarBody(width * 0.75, height, color)
+    carBody.setLocation(0, 0)
+    this.add(carBody)
+
+    var carFront = new CarFront(width * 0.25, height * 0.40, color)
+    carFront.setLocation(width * 0.75, carBody.getHeight() - carFront.getHeight())
+    this.add(carFront)
+
+    var wheelRight = new Wheel(wheelsSize, wheelsSize)
+    wheelRight.setLocation(wheelRight.getWidth() / 2, carBody.getHeight() - wheelRight.getHeight() / 2)
+    this.add(wheelRight)
+
+    var wheelLeft = new Wheel(wheelsSize, wheelsSize)
+    wheelLeft.setLocation(carBody.getWidth() - wheelLeft.getWidth() / 2, carBody.getHeight() - wheelLeft.getHeight() / 2)
+    this.add(wheelLeft)
+}
+
+Car.prototype = Object.create(Shape2D.prototype)
+Car.prototype.constructor = Car
\ No newline at end of file
diff --git a/staff/joseramon-rodriguez/shapes/car/CarBody.js b/staff/joseramon-rodriguez/shapes/car/CarBody.js
new file mode 100644
index 000000000..1f8a511d8
--- /dev/null
+++ b/staff/joseramon-rodriguez/shapes/car/CarBody.js
@@ -0,0 +1,20 @@
+function CarBody(width, height, color) {
+    Shape2D.call(this, width, height, color)
+
+    var windowRight = new Window(width, height)
+
+    windowRight.setLocation(this.width - windowRight.width, 20)
+    windowRight.setStyle('borderTopRightRadius', '20%')
+
+    this.add(windowRight)
+
+    var windowLeft = new Window(width, height)
+
+    windowLeft.setLocation(this.width - 2 * (windowLeft.width), 20)
+    this.add(windowLeft)
+
+    this.setStyle('borderRadius', '10px 10px 0 10px')
+}
+
+CarBody.prototype = Object.create(Shape2D.prototype)
+CarBody.prototype.constructor = CarBody
\ No newline at end of file
diff --git a/staff/joseramon-rodriguez/shapes/car/CarFront.js b/staff/joseramon-rodriguez/shapes/car/CarFront.js
new file mode 100644
index 000000000..638aaeb00
--- /dev/null
+++ b/staff/joseramon-rodriguez/shapes/car/CarFront.js
@@ -0,0 +1,8 @@
+function CarFront(width, height, color) {
+    Shape2D.call(this, width, height, color)
+
+    this.setStyle('borderRadius', '0 10px 10px 0')
+}
+
+CarFront.prototype = Object.create(Shape2D.prototype)
+CarFront.prototype.constructor = CarFront
\ No newline at end of file
diff --git a/staff/joseramon-rodriguez/shapes/car/Component.js b/staff/joseramon-rodriguez/shapes/car/Component.js
new file mode 100644
index 000000000..5f04e7b90
--- /dev/null
+++ b/staff/joseramon-rodriguez/shapes/car/Component.js
@@ -0,0 +1,15 @@
+function Component(tagName) {
+    this.container = document.createElement(tagName)
+}
+
+Component.prototype.setStyle = function (property, value) {
+    this.container.style[property] = value
+}
+
+Component.prototype.add = function
+    (component) {
+    if (!(component instanceof Component))
+        throw new TypeError('component is not a Component')
+
+    this.container.appendChild(component.container)
+}
\ No newline at end of file
diff --git a/staff/joseramon-rodriguez/shapes/car/Shape2D.js b/staff/joseramon-rodriguez/shapes/car/Shape2D.js
new file mode 100644
index 000000000..82e28bb62
--- /dev/null
+++ b/staff/joseramon-rodriguez/shapes/car/Shape2D.js
@@ -0,0 +1,75 @@
+function Shape2D(width, height, color) {
+    Component.call(this, 'div')
+
+    this.width = width
+    this.height = height
+    this.color = color
+
+    this.x = 0
+    this.y = 0
+
+    this.container.style.boxSizing = 'border-box'
+    this.container.style.position = 'absolute'
+    this.container.style.left = this.x + 'px'
+    this.container.style.top = this.y + 'px'
+    this.container.style.width = this.width + 'px'
+    this.container.style.height = this.height + 'px'
+    this.container.style.backgroundColor = this.color
+}
+
+Shape2D.prototype = Object.create(Component.prototype)
+Shape2D.prototype.constructor = Shape2D
+
+// location
+
+Shape2D.prototype.setX = function (x) {
+    this.x = x
+
+    this.container.style.left = this.x + 'px'
+}
+
+Shape2D.prototype.getX = function () {
+    return this.x
+}
+
+Shape2D.prototype.setY = function (y) {
+    this.y = y
+
+    this.container.style.top = this.y + 'px'
+}
+
+Shape2D.prototype.getY = function () {
+    return this.y
+}
+
+Shape2D.prototype.setLocation = function (x, y) {
+    this.setX(x)
+    this.setY(y)
+}
+
+// dimensions
+
+Shape2D.prototype.setWidth = function (width) {
+    this.width = width
+
+    this.container.style.width = this.width + 'px'
+}
+
+Shape2D.prototype.getWidth = function () {
+    return this.width
+}
+
+Shape2D.prototype.setHeight = function (height) {
+    this.height = height
+
+    this.container.style.height = this.height + 'px'
+}
+
+Shape2D.prototype.getHeight = function () {
+    return this.height
+}
+
+Shape2D.prototype.setDimensions = function (width, height) {
+    this.setWidth(width)
+    this.setHeight(height)
+}
\ No newline at end of file
diff --git a/staff/joseramon-rodriguez/shapes/car/Wheel.js b/staff/joseramon-rodriguez/shapes/car/Wheel.js
new file mode 100644
index 000000000..44350f47f
--- /dev/null
+++ b/staff/joseramon-rodriguez/shapes/car/Wheel.js
@@ -0,0 +1,13 @@
+function Wheel(width, height) {
+    Shape2D.call(this, width, height, 'gray')
+
+    this.setStyle('borderRadius', '50%')
+
+    var wheel = 'solid black ' + (width + height) * 0.1 + 'px'
+
+    this.setStyle('border', wheel)
+    this.setStyle('zIndex', 1)
+}
+
+Wheel.prototype = Object.create(Shape2D.prototype)
+Wheel.prototype.constructor = Wheel
\ No newline at end of file
diff --git a/staff/joseramon-rodriguez/shapes/car/Window.js b/staff/joseramon-rodriguez/shapes/car/Window.js
new file mode 100644
index 000000000..852de499f
--- /dev/null
+++ b/staff/joseramon-rodriguez/shapes/car/Window.js
@@ -0,0 +1,10 @@
+function Window(width, height) {
+    Shape2D.call(this, width * 0.35, height * 0.40, 'skyblue')
+
+    var windowBorder = 'solid black ' + (width + height) * 0.02 + 'px'
+
+    this.setStyle('border', windowBorder)
+}
+
+Window.prototype = Object.create(Shape2D.prototype)
+Window.prototype.constructor = Window
\ No newline at end of file
diff --git a/staff/joseramon-rodriguez/shapes/car/index.html b/staff/joseramon-rodriguez/shapes/car/index.html
new file mode 100644
index 000000000..e7b97cf3c
--- /dev/null
+++ b/staff/joseramon-rodriguez/shapes/car/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pixel Art Car</title>
+</head>
+
+<body>
+    <!-- ATOMICOS -->
+    <script src="Component.js"></script>
+    <script src="Shape2D.js"></script>
+    <script src="Wheel.js"></script>
+    <script src="Window.js"></script>
+    <script src="CarBody.js"></script>
+    <script src="CarFront.js"></script>
+    <script src="Car.js"></script>
+
+    <script src="index.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/staff/joseramon-rodriguez/shapes/car/index.js b/staff/joseramon-rodriguez/shapes/car/index.js
new file mode 100644
index 000000000..8be3485ea
--- /dev/null
+++ b/staff/joseramon-rodriguez/shapes/car/index.js
@@ -0,0 +1,25 @@
+var body = new Component
+body.container = document.body
+
+var wheelRight = new Wheel(90, 90)
+wheelRight.setLocation(430, 380)
+body.add(wheelRight)
+
+var wheelLeft = new Wheel(90, 90)
+wheelLeft.setLocation(180, 380)
+body.add(wheelLeft)
+
+var carBody = new CarBody(350, 200, 'red')
+carBody.setLocation(150, 220)
+body.add(carBody)
+
+var carFront = new CarFront(100, 100, 'red')
+carFront.setLocation(500, 320)
+body.add(carFront)
+
+var car = new Car(100, 100, 'green')
+body.add(car)
+
+var car2 = new Car(400, 50, 'blue')
+car2.setLocation(300, 0)
+body.add(car2)
diff --git a/staff/joseramon-rodriguez/shapes/hangman/Button.js b/staff/joseramon-rodriguez/shapes/hangman/Button.js
index d5132a757..322a6f6d9 100644
--- a/staff/joseramon-rodriguez/shapes/hangman/Button.js
+++ b/staff/joseramon-rodriguez/shapes/hangman/Button.js
@@ -1,10 +1,9 @@
-function Button() {
-    Component.call(this, 'button')
-}
+class Button extends Component {
+    constructor() {
+        super('button')
+    }
 
-Button.prototype = Object.create(Component.prototype)
-Button.prototype.constructor = Button
-
-Button.prototype.setType = function (type) {
-    this.container.type = type
+    setType(type) {
+        this.container.type = type
+    }
 }
\ No newline at end of file
diff --git a/staff/joseramon-rodriguez/shapes/hangman/CharBoxes.js b/staff/joseramon-rodriguez/shapes/hangman/CharBoxes.js
index 18de24476..0be5639f2 100644
--- a/staff/joseramon-rodriguez/shapes/hangman/CharBoxes.js
+++ b/staff/joseramon-rodriguez/shapes/hangman/CharBoxes.js
@@ -1,37 +1,35 @@
-function CharBoxes(words) {
-    Component.call(this, 'div')
-
-    this.setId('characters')
-    this.setStyle('display', 'flex')
-    this.setStyle('gap', '5px')
-    this.setStyle('margin', '5px')
-
-    this.boxes = []
-
-    for (var i = 0; i < words.length; i++) {
-        var char = words[i]
-
-        var charBox = new Component('div')
-        charBox.setStyle('border', '1px solid black')
-        charBox.setStyle('font-family', 'courier')
-        charBox.setStyle('font-size', '36px')
-        charBox.setStyle('padding', '5px')
-        charBox.setStyle('background-color', 'black')
-        charBox.setStyle('min-width', '20px')
-        charBox.setStyle('user-select', 'none')
-        charBox.setText(char)
-
-        this.add(charBox)
-        this.boxes.push(charBox)
+class CharBoxes extends Component {
+    constructor(words) {
+        super('div')
+
+        this.setId('characters')
+        this.setStyle('display', 'flex')
+        this.setStyle('gap', '5px')
+        this.setStyle('margin', '5px')
+
+        this.boxes = []
+
+        for (const i in words) {
+            const char = words[i]
+
+            const charBox = new Component('div')
+            charBox.setStyle('border', '1px solid black')
+            charBox.setStyle('font-family', 'courier')
+            charBox.setStyle('font-size', '36px')
+            charBox.setStyle('padding', '5px')
+            charBox.setStyle('background-color', 'black')
+            charBox.setStyle('min-width', '20px')
+            charBox.setStyle('user-select', 'none')
+            charBox.setText(char)
+
+            this.add(charBox)
+            this.boxes.push(charBox)
+        }
     }
-}
-
-CharBoxes.prototype = Object.create(Component.prototype)
-CharBoxes.prototype.constructor = CharBoxes
 
-CharBoxes.prototype.showChar = function (index) {
-    var charBox = this.boxes[index]
-
-    charBox.setStyle('background-color', 'transparent')
+    showChar(index) {
+        const charBox = this.boxes[index]
 
+        charBox.setStyle('background-color', 'transparent')
+    }
 }
\ No newline at end of file
diff --git a/staff/joseramon-rodriguez/shapes/hangman/Component.js b/staff/joseramon-rodriguez/shapes/hangman/Component.js
index 635684228..4e6b4992c 100644
--- a/staff/joseramon-rodriguez/shapes/hangman/Component.js
+++ b/staff/joseramon-rodriguez/shapes/hangman/Component.js
@@ -1,27 +1,29 @@
-function Component(tagName) {
-    this.container = document.createElement(tagName)
-}
+class Component {
+    constructor(tagName) {
+        this.container = document.createElement(tagName)
+    }
 
-Component.prototype.setId = function (id) {
-    this.container.id = id
-}
+    setId(id) {
+        this.container.id = id
+    }
 
-Component.prototype.setText = function (text) {
-    this.container.innerText = text
-}
+    setText(text) {
+        this.container.innerText = text
+    }
 
-Component.prototype.add = function (component) {
-    if (!(component instanceof Component)) throw new TypeError('component is not a Component')
+    add(component) {
+        if (!(component instanceof Component)) throw new TypeError('component is not a Component')
 
-    this.container.appendChild(component.container)
-}
+        this.container.appendChild(component.container)
+    }
 
-Component.prototype.remove = function (component) {
-    if (!(component instanceof Component)) throw new TypeError('component is not a Component')
+    remove(component) {
+        if (!(component instanceof Component)) throw new TypeError('component is not a Component')
 
-    this.container.removeChild(component.container)
-}
+        this.container.removeChild(component.container)
+    }
 
-Component.prototype.setStyle = function (property, value) {
-    this.container.style[property] = value
+    setStyle(property, value) {
+        this.container.style[property] = value
+    }
 }
\ No newline at end of file
diff --git a/staff/joseramon-rodriguez/shapes/hangman/Form.js b/staff/joseramon-rodriguez/shapes/hangman/Form.js
index cb8de9a66..83a4dee49 100644
--- a/staff/joseramon-rodriguez/shapes/hangman/Form.js
+++ b/staff/joseramon-rodriguez/shapes/hangman/Form.js
@@ -1,14 +1,13 @@
-function Form() {
-    Component.call(this, 'form')
-}
+class Form extends Component {
+    constructor() {
+        super('form')
+    }
 
-Form.prototype = Object.create(Component.prototype)
-Form.prototype.constructor = Form
+    onSubmit(callback) {
+        this.container.onsubmit = callback
+    }
 
-Form.prototype.onSubmit = function (callback) {
-    this.container.onSubmit = callback
-}
-
-Form.prototype.reset = function () {
-    this.container.reset()
+    reset() {
+        this.container.reset()
+    }
 }
\ No newline at end of file
diff --git a/staff/joseramon-rodriguez/shapes/hangman/GuessForm.js b/staff/joseramon-rodriguez/shapes/hangman/GuessForm.js
index dcb4ec5cc..6d346810b 100644
--- a/staff/joseramon-rodriguez/shapes/hangman/GuessForm.js
+++ b/staff/joseramon-rodriguez/shapes/hangman/GuessForm.js
@@ -1,38 +1,36 @@
-function GuessForm() {
-    Form.call(this)
+class GuessForm extends Form {
+    constructor() {
+        super()
 
-    this.setStyle('display', 'flex')
-    this.setStyle('gap', '10px')
+        this.setStyle('display', 'flex')
+        this.setStyle('gap', '10px')
 
-    var label = new Label
-    label.setFor('guessInput')
-    label.setText('Type a letter')
-    this.add(label)
+        const label = new Label
+        label.setFor('guessInput')
+        label.setText('Type a letter')
+        this.add(label)
 
-    var charInput = new Input
-    charInput.setId('guessInput')
-    charInput.setStyle('maxWidth', '20px')
-    charInput.container.maxLength = '1'
-    this.add(charInput)
+        const charInput = new Input
+        charInput.setId('guessInput')
+        charInput.setStyle('maxWidth', '20px')
+        charInput.container.maxLength = '1'
+        this.add(charInput)
 
-    this.charInput = charInput
+        this.charInput = charInput
 
-    var button = new Button
-    button.setType('submit')
-    button.setText('Send')
-    this.add(button)
-}
-
-GuessForm.prototype = Object.create(Form.prototype)
-GuessForm.prototype.constructor = GuessForm
+        const button = new Button
+        button.setType('submit')
+        button.setText('Send')
+        this.add(button)
+    }
 
-GuessForm.prototype.onSubmit = function (callback) {
-    this.container.onsubmit = function (event) {
-        event.preventDefault()
+    onSubmit(callback) {
+        super.onSubmit(event => {
+            event.preventDefault()
 
-        var char = this.charInput.getValue()
+            const char = this.charInput.getValue()
 
-        callback(char)
-    }.bind(this)
+            callback(char)
+        })
+    }
 }
-
diff --git a/staff/joseramon-rodriguez/shapes/hangman/Hangman.js b/staff/joseramon-rodriguez/shapes/hangman/Hangman.js
index 79ece5240..d8946accd 100644
--- a/staff/joseramon-rodriguez/shapes/hangman/Hangman.js
+++ b/staff/joseramon-rodriguez/shapes/hangman/Hangman.js
@@ -1,81 +1,65 @@
-function Hangman(width, height) {
-    Shape2D.call(this, width, height, 'transparent')
-
-    this.setLocation(50, 500)
-
-
-    var gallowBase = new Shape2D(100, 0)
-    gallowBase.setStyle('border', '1px solid blue')
-    gallowBase.setLocation(this.width - gallowBase.width - 5, this.height)
-    this.add(gallowBase)
-
-    var gallowBar1 = new Shape2D(0, 200)
-    gallowBar1.setStyle('border', '1px solid red')
-    gallowBar1.setLocation(this.width - 5 - (gallowBase.width / 2), this.height - gallowBar1.height)
-    this.add(gallowBar1)
-
-    var gallowBar2 = new Shape2D(50, 0)
-    gallowBar2.setStyle('border', '1px solid green')
-    gallowBar2.setLocation(this.width - 5 - (gallowBase.width / 2) - gallowBar2.width, 0)
-    this.add(gallowBar2)
-
-    var gallowBar3 = new Shape2D(0, 50)
-    gallowBar3.setStyle('border', '1px solid orange')
-    gallowBar3.setLocation(this.width - 5 - (gallowBase.width / 2) - gallowBar2.width, 0)
-    this.add(gallowBar3)
-
-    var head = new Shape2D(20, 20)
-    head.setStyle('border', '1px solid brown')
-    head.setStyle('borderRadius', '50%')
-    head.setLocation(this.width - 5 - (gallowBase.width / 2) - gallowBar2.width - head.width / 2, gallowBar3.height)
-    //this.add(head)
-
-    var body = new Shape2D(0, 50)
-    body.setStyle('border', '1px solid gray')
-    //this.add(body)
-    body.setLocation(this.width - 5 - (gallowBase.width / 2) - gallowBar2.width, gallowBar3.height + head.height)
-
-    var rightArm = new Shape2D(25, 0)
-    rightArm.setStyle('border', '1px solid pink')
-    rightArm.setLocation(this.width - 5 - (gallowBase.width / 2) - gallowBar2.width, gallowBar3.height + head.height + body.height * 0.25)
-    //this.add(rightArm)
-
-    var leftArm = new Shape2D(25, 0)
-    leftArm.setStyle('border', '1px solid purple')
-    leftArm.setLocation(this.width - 5 - (gallowBase.width / 2) - gallowBar2.width - leftArm.width, gallowBar3.height + head.height + body.height * 0.25)
-    //this.add(leftArm)
-
-    var rightLeg = new Shape2D(0, 25)
-    rightLeg.setStyle('border', '1px solid yellowgreen')
-    rightLeg.setStyle('transform-origin', 'top left')
-    rightLeg.setStyle('transform', 'rotate(45deg)')
-    rightLeg.setLocation(this.width - 5 - (gallowBase.width / 2) - gallowBar2.width, gallowBar3.height + head.height + body.height)
-    //this.add(rightLeg)
-
-    var leftLeg = new Shape2D(0, 25)
-    leftLeg.setStyle('border', '1px solid magenta')
-    leftLeg.setStyle('transform-origin', 'top left')
-    leftLeg.setStyle('transform', 'rotate(-45deg)')
-    leftLeg.setLocation(this.width - 5 - (gallowBase.width / 2) - gallowBar2.width, gallowBar3.height + head.height + body.height)
-    //this.add(leftLeg)
-
-    // this.head = head
-    // this.body = body
-    // this.rightArm = rightArm
-    // this.leftArm = leftArm
-    // this.rightLeg = rightLeg
-    // this.leftLeg = leftLeg
-
-    this.parts = [head, body, rightArm, leftArm, rightLeg, leftLeg]
-
-}
-
-Hangman.prototype = Object.create(Shape2D.prototype)
-Hangman.prototype.constructor = Hangman
-
-Hangman.prototype.setFails = function (count) {
-    var part = this.parts[count - 1]
-
-    this.add(part)
+class Hangman extends Shape2D {
+    constructor(width, height) {
+        super(width, height, 'transparent')
+
+        this.setLocation(50, 500)
+
+        const gallowBase = new Shape2D(100, 0)
+        gallowBase.setStyle('border', '1px solid blue')
+        gallowBase.setLocation(this.width - gallowBase.width - 5, this.height)
+        this.add(gallowBase)
+
+        const gallowBar1 = new Shape2D(0, 200)
+        gallowBar1.setStyle('border', '1px solid red')
+        gallowBar1.setLocation(this.width - 5 - (gallowBase.width / 2), this.height - gallowBar1.height)
+        this.add(gallowBar1)
+
+        const gallowBar2 = new Shape2D(50, 0)
+        gallowBar2.setStyle('border', '1px solid green')
+        gallowBar2.setLocation(this.width - 5 - (gallowBase.width / 2) - gallowBar2.width, 0)
+        this.add(gallowBar2)
+
+        const gallowBar3 = new Shape2D(0, 50)
+        gallowBar3.setStyle('border', '1px solid orange')
+        gallowBar3.setLocation(this.width - 5 - (gallowBase.width / 2) - gallowBar2.width, 0)
+        this.add(gallowBar3)
+
+        const head = new Shape2D(20, 20)
+        head.setStyle('border', '1px solid brown')
+        head.setStyle('borderRadius', '50%')
+        head.setLocation(this.width - 5 - (gallowBase.width / 2) - gallowBar2.width - head.width / 2, gallowBar3.height)
+
+        const body = new Shape2D(0, 50)
+        body.setStyle('border', '1px solid gray')
+        body.setLocation(this.width - 5 - (gallowBase.width / 2) - gallowBar2.width, gallowBar3.height + head.height)
+
+        const rightArm = new Shape2D(25, 0)
+        rightArm.setStyle('border', '1px solid pink')
+        rightArm.setLocation(this.width - 5 - (gallowBase.width / 2) - gallowBar2.width, gallowBar3.height + head.height + body.height * 0.25)
+
+        const leftArm = new Shape2D(25, 0)
+        leftArm.setStyle('border', '1px solid purple')
+        leftArm.setLocation(this.width - 5 - (gallowBase.width / 2) - gallowBar2.width - leftArm.width, gallowBar3.height + head.height + body.height * 0.25)
+
+        const rightLeg = new Shape2D(0, 25)
+        rightLeg.setStyle('border', '1px solid yellowgreen')
+        rightLeg.setStyle('transform-origin', 'top left')
+        rightLeg.setStyle('transform', 'rotate(45deg)')
+        rightLeg.setLocation(this.width - 5 - (gallowBase.width / 2) - gallowBar2.width, gallowBar3.height + head.height + body.height)
+
+        const leftLeg = new Shape2D(0, 25)
+        leftLeg.setStyle('border', '1px solid magenta')
+        leftLeg.setStyle('transform-origin', 'top left')
+        leftLeg.setStyle('transform', 'rotate(-45deg)')
+        leftLeg.setLocation(this.width - 5 - (gallowBase.width / 2) - gallowBar2.width, gallowBar3.height + head.height + body.height)
+
+        this.parts = [head, body, rightArm, leftArm, rightLeg, leftLeg]
+    }
+
+    setFails(count) {
+        const part = this.parts[count - 1]
+
+        this.add(part)
+    }
 }
 
diff --git a/staff/joseramon-rodriguez/shapes/hangman/Input.js b/staff/joseramon-rodriguez/shapes/hangman/Input.js
index 982a7d037..9b25dd643 100644
--- a/staff/joseramon-rodriguez/shapes/hangman/Input.js
+++ b/staff/joseramon-rodriguez/shapes/hangman/Input.js
@@ -1,11 +1,18 @@
-function Input() {
-    Component.call(this, 'input')
-}
+class Input extends Component {
+    constructor() {
+        super('input')
+    }
+
+    getValue() {
+        return this.container.value
+    }
 
-Input.prototype = Object.create(Component.prototype)
-Input.prototype.constructor = Input
+    setMaxLenght(maxLength) {
+        this.container.maxLength = maxLength
+    }
 
-Input.prototype.getValue = function () {
-    return this.container.value
+    setType(type) {
+        this.container.type = type
+    }
 }
 
diff --git a/staff/joseramon-rodriguez/shapes/hangman/Label.js b/staff/joseramon-rodriguez/shapes/hangman/Label.js
index 86e14b879..0d765b00d 100644
--- a/staff/joseramon-rodriguez/shapes/hangman/Label.js
+++ b/staff/joseramon-rodriguez/shapes/hangman/Label.js
@@ -1,10 +1,9 @@
-function Label() {
-    Component.call(this, 'label')
-}
+class Label extends Component {
+    constructor() {
+        super('label')
+    }
 
-Label.prototype = Object.create(Component.prototype)
-Label.prototype.constructor = Label
-
-Label.prototype.setFor = function (htmlfor) {
-    this.container.htmlFor = htmlfor
+    setFor(htmlfor) {
+        this.container.htmlFor = htmlfor
+    }
 }
\ No newline at end of file
diff --git a/staff/joseramon-rodriguez/shapes/hangman/Shape2D.js b/staff/joseramon-rodriguez/shapes/hangman/Shape2D.js
index 73620b730..fcf0f53af 100644
--- a/staff/joseramon-rodriguez/shapes/hangman/Shape2D.js
+++ b/staff/joseramon-rodriguez/shapes/hangman/Shape2D.js
@@ -1,74 +1,72 @@
-function Shape2D(width, height, color) {
-    Component.call(this, 'div')
+class Shape2D extends Component {
+    constructor(width, height, color) {
+        super('div')
 
-    this.width = width
-    this.height = height
-    this.color = color
+        this.width = width
+        this.height = height
+        this.color = color
 
-    this.x = 0
-    this.y = 0
+        this.x = 0
+        this.y = 0
 
-    this.container.style.position = 'absolute'
-    this.container.style.left = this.x + 'px'
-    this.container.style.top = this.y + 'px'
-    this.container.style.width = this.width + 'px'
-    this.container.style.height = this.height + 'px'
-    this.container.style.backgroundColor = this.color
-}
+        this.container.style.position = 'absolute'
+        this.container.style.left = this.x + 'px'
+        this.container.style.top = this.y + 'px'
+        this.container.style.width = this.width + 'px'
+        this.container.style.height = this.height + 'px'
+        this.container.style.backgroundColor = this.color
+    }
+    // location
 
-Shape2D.prototype = Object.create(Component.prototype)
-Shape2D.prototype.constructor = Shape2D
+    setX(x) {
+        this.x = x
 
-// location
+        this.container.style.left = this.x + 'px'
+    }
 
-Shape2D.prototype.setX = function (x) {
-    this.x = x
+    getX() {
+        return this.x
+    }
 
-    this.container.style.left = this.x + 'px'
-}
+    setY(y) {
+        this.y = y
 
-Shape2D.prototype.getX = function () {
-    return this.x
-}
+        this.container.style.top = this.y + 'px'
+    }
 
-Shape2D.prototype.setY = function (y) {
-    this.y = y
+    getY() {
+        return this.y
+    }
 
-    this.container.style.top = this.y + 'px'
-}
+    setLocation(x, y) {
+        this.setX(x)
+        this.setY(y)
+    }
 
-Shape2D.prototype.getY = function () {
-    return this.y
-}
+    // dimensions
 
-Shape2D.prototype.setLocation = function (x, y) {
-    this.setX(x)
-    this.setY(y)
-}
+    setWidth(width) {
+        this.width = width
 
-// dimensions
+        this.container.style.width = this.width + 'px'
+    }
 
-Shape2D.prototype.setWidth = function (width) {
-    this.width = width
+    getWidth() {
+        return this.width
+    }
 
-    this.container.style.width = this.width + 'px'
-}
+    setHeight(height) {
+        this.height = height
 
-Shape2D.prototype.getWidth = function () {
-    return this.width
-}
+        this.container.style.height = this.height + 'px'
+    }
 
-Shape2D.prototype.setHeight = function (height) {
-    this.height = height
+    getHeight() {
+        return this.height
+    }
 
-    this.container.style.height = this.height + 'px'
-}
-
-Shape2D.prototype.getHeight = function () {
-    return this.height
-}
-
-Shape2D.prototype.setDimensions = function (width, height) {
-    this.setWidth(width)
-    this.setHeight(height)
+    setDimensions(width, height) {
+        this.setWidth(width)
+        this.setHeight(height)
+    }
 }
\ No newline at end of file
diff --git a/staff/joseramon-rodriguez/shapes/hangman/StartForm.js b/staff/joseramon-rodriguez/shapes/hangman/StartForm.js
index 8323ee61e..2cbc51720 100644
--- a/staff/joseramon-rodriguez/shapes/hangman/StartForm.js
+++ b/staff/joseramon-rodriguez/shapes/hangman/StartForm.js
@@ -1,35 +1,37 @@
-function StartForm() {
-    Form.call(this)
+class StartForm extends Form {
+    constructor() {
+        super()
 
-    this.setStyle('display', 'flex')
-    this.setStyle('gap', '10px')
+        this.setStyle('display', 'flex')
+        this.setStyle('gap', '10px')
 
-    var wordsLabel = new Label
-    wordsLabel.setFor('words')
-    wordsLabel.setText('Words')
-    this.add(wordsLabel)
+        const wordsLabel = new Label
+        wordsLabel.setFor('words')
+        wordsLabel.setText('Words')
+        this.add(wordsLabel)
 
-    var wordsInput = new Input
-    wordsInput.setId('words')
-    this.add(wordsInput)
+        const wordsInput = new Input
+        wordsInput.setId('words')
+        wordsInput.setType('password')
+        this.add(wordsInput)
 
-    this.wordsInput = wordsInput
+        this.wordsInput = wordsInput
 
-    var startButton = new Button
-    startButton.setType('submit')
-    startButton.setText('Start')
-    this.add(startButton)
-}
+        const startButton = new Button
+        startButton.setType('submit')
+        startButton.setText('Start')
+        this.add(startButton)
+    }
 
-StartForm.prototype = Object.create(Form.prototype)
-StartForm.prototype.constructor = StartForm
+    onSubmit(callback) {
+        super.onSubmit(event => {
+            event.preventDefault()
 
-StartForm.prototype.onSubmit = function (callback) {
-    this.container.onsubmit = function (event) {
-        event.preventDefault()
+            const value = this.wordsInput.getValue()
 
-        const value = this.wordsInput.getValue()
+            this.reset
 
-        callback(value)
-    }.bind(this)
+            callback(value)
+        })
+    }
 }
\ No newline at end of file
diff --git a/staff/joseramon-rodriguez/shapes/hangman/index.js b/staff/joseramon-rodriguez/shapes/hangman/index.js
index 1e92bfb40..3cb51187b 100644
--- a/staff/joseramon-rodriguez/shapes/hangman/index.js
+++ b/staff/joseramon-rodriguez/shapes/hangman/index.js
@@ -1,15 +1,21 @@
-var body = new Component
+const body = new Component
 body.container = document.body
 
-var title = new Component('h1')
+const title = new Component('h1')
 title.setText('Hangman')
 body.add(title)
 
 var startForm = new StartForm
-var charBoxes
-var hangman
+var guessForm = new GuessForm
+let charBoxes
+let hangman
+let failsCount = 0
+let assertionsCount = 0
+let charsUsed = []
+
+body.add(startForm)
 
-startForm.onSubmit(function (words) {
+startForm.onSubmit(words => {
     sessionStorage.secret = words
 
     body.remove(startForm)
@@ -21,29 +27,25 @@ startForm.onSubmit(function (words) {
 
     body.add(charBoxes)
 
-    body.add(guessForm)
-
     startForm.reset()
-})
-
-body.add(startForm)
 
-var guessForm = new GuessForm
+    failsCount = 0
 
-var failsCount = 0
+    assertionsCount = 0
 
-var assertionsCount = 0
+    charsUsed = []
 
-var charsUsed = []
+    body.add(guessForm)
+})
 
-guessForm.onSubmit(function (char) {
+guessForm.onSubmit(char => {
     if (!charsUsed.includes(char)) {
         charsUsed.push(char)
 
-        var secret = sessionStorage.secret
+        const secret = sessionStorage.secret
 
-        for (var i = 0; i < secret.length; i++) {
-            var charToCompare = secret[i]
+        for (const i in secret) {
+            const charToCompare = secret[i]
             if (char === charToCompare) {
                 charBoxes.showChar(i)
                 assertionsCount++
@@ -64,12 +66,16 @@ guessForm.onSubmit(function (char) {
         if (!secret.includes(char)) {
             failsCount++
 
-            if (failsCount > 6) {
-                alert('game over. The solution was ' + sessionStorage.secret)
-                body.remove(guessForm)
-                body.remove(hangman)
-                body.remove(charBoxes)
-                body.add(startForm)
+            if (failsCount === 6) {
+                hangman.setFails(failsCount)
+                setTimeout(function () {
+                    alert('game over. The solution was ' + sessionStorage.secret)
+
+                    body.remove(guessForm)
+                    body.remove(hangman)
+                    body.remove(charBoxes)
+                    body.add(startForm)
+                }, 1000)
             } else {
                 hangman.setFails(failsCount)
                 console.log('fallo')