Vamos a hacer una calculadora!

1

Tagged

Contributors

Stats

4,606 visits, 5,350 views

Tools

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 17 May, 2013. Last updated 25 Feb, 2019

Hola!!

Este es mi primer tutorial, está lejos de ser técnico, no es un juego y el objetivo es ayudar a los principiantes para completar un proyecto muy simple.

Sigo una regla: (Mantener ésto--> Simple)

Es una calculadora muy simple, hace las cuatro operaciones básicas (sumar, restar, dividir, multiplicar).

Para esta simple calculadora, si sigue mis consejos , usted será capaz de seguir solo y podrá ampliarlo con más cálculos (raíz cuadrada, por ejemplo, sumar y restar porcentajes)​​.

Lo guardé mínima y pequeña, porque se concibe como una aplicación de teléfono y para hacer que usted desea mejorar sus miradas. El control se realizará por el ratón. Sin embargo, otro reto: Agregar control táctil! :)

Esta es la obra terminada:

Lo primero es lo primero, los botones:

Use su editor de imagen of choice and create simple squares for all 10 numbers (1,2,3,4,5,6,7,8,9,0), operands (+,-,/,*), clear (c), and equal (=).

Yo usé Paint.NET, creating all buttons with 35 pixels on all sides, creating layers with the text, saving them to .png one by one.

Place them in your layout as you wish or makes sense to you.

Put also a text box on the top.

Add a mouse and touch object to interact with the objects.

Now, let's Construct!

Better yet, let's stop and think first and let's be logical about it. Wee will work with 2 values and an operation between them:

1+1=2

1-1=0

1*1=1

1/1=1

What do we have here? An initial value, an operator, another value and the end result.

So, we need two variables for each initial value, we need a variable to decide the operation to make, and a variable to post the end result.

4 variables:

calc_1 <- first value

calc_2 <- second value

operation <- operation to execute (1 will be add, 2 subtract, 3 divide,4 multiply)

result <- end result

Lets be cool and add a variable to write things on the text box.

1 variable:

textbox <-text to display when text box is clear or upon initialization

Now, when you turn your calculator on, you see a 0 on the screen. Let's try that.

We need to initialize "textbox" to 0. Add it as a global variable of 0, type number.

Add an event-> On start of layout -> Action -> TextBox -> Set Text -> textbox

If you run your project, you'll the textbox with a 0 there. It's working. :)

Close the webpage and let's get back to work!

Ok, to add a number to a variable without adding to it you need to use &, so the number you press on is written after the ones you have already typed.

So, for button 1 (and all others, change accordingly):

Add event: Mouse-> On object clicked-> sprite for number 1

Add action: Set textbox to textbox&"1"

Add action: Set text box text to textbox

Get it? the &"1" appends 1 to the end of the text in textbox, and you type the text in the text box.

Try it, if you want, and then do the same for all remaining numbers.

After all 10 numbers are down, time to do maths.

Fortunately, we have it easy. We dealt with the typing part, lets think about the operations we will make:

Get a value, add, subtract, divide, multiply the second one

So, on the operand buttons (change accordingly):

Add event: Mouse-> On object clicked-> sprite for add

Add action: Set calc_1 to textbox (save first value)

Add action: Set operation to 1 (select operation)

Add action: Set Text Box text to "" (empty text box)

Add action: Set textbox to 0 (reinitialize our variable)

Now we can save the first value, clear our text box and prepare for the second value.

Try it out, though the operation will not happen just yet.

Time to do real maths

You now need to invoke the operation after typing the second number by pressing =:

Add event: Mouse-> On object clicked-> sprite for equal

Add another condition: System - Compare two values operation equals to 1

Add action: Set calc_2 to textbox

Add action: Set result to calc_1+calc_2

Add action: Set text box text to result

Hacer lo mismo con las otras operaciones, y probar tu primera calculadora! Presione algunos números, presione agregar y presione algunos numeros de nuevo. Luego presione = y el resultado aparecerá.

Para limpiar todos los valores y resetear nuestra calculadora:

Add event: Mouse-> On object clicked-> sprite for clear

Add action: set text box text to "0"

Add action: Set calc_1 to 0

Add action: Set calc_2 to 0

Add action: Set operation to 0

Add action: Set result to 0

Add action: Set textbox to 0

Espero que les sea util!

Aquí esta el capx: dl.dropbox.com/u/60029808/calculator.capx

EDITED: Link to Capx changed.

  • 0 Comments

Want to leave a comment? Login or Register an account!