Create a Math Game

CodingIsLife · November 2015

I'm quite new to Codea but I need to make this program that does math. The description of the program is:

"Create a program that will allow the user to enter in the answer from a simple math problem. Both numbers for the question are in the range from 1 -> 99. If the user gets it right, a message tells them this and then increments the “Number Correct” count. If the user gets it wrong, a message tells them they got it wrong, tell them the correct answer and then increments the “Number Wrong” count. Both numbers should be generated randomly and the program should randomly select an operation each time as well (+, -, *, /). Also don't use the iPad keyboard to input the answer"

I would appreciate any input from anyone on how I would go about doing this. Thanks!

Ignatz · November 2015

School project?

If so, how much can you figure out for yourself? While we are happy to help, you won't learn anything if we do all the thinking for you.

I suggest you break the problem into its parts

creating random numbers and arithmetic operations
displaying the problem on the screen
providing a way for the user to enter an answer without the keyboard
keeping score of correct and incorrect answers

Looking at each of these separately makes it easier to solve.

(and welcome to the forum).
:-h

quezadav · November 2015

Check this for ideas: http://codea.io/talk/discussion/6936/guess-the-number

CodingIsLife · November 2015

@Ignatz Yeah it kind of is a project but my teacher hasn't taught us a lot. I know the print function and we skimmed through if statements in Codea. We haven't learned about buttons or generating random mathematical equations. But thanks anyways, I'll search the forum.

CodingIsLife · November 2015

@quezadav Thanks as well. Although I don't quite understand that code, but it's alright. I'll just figure it out somehow.

Ignatz · November 2015

If that's all you know, you haven't any chance of doing this.

You need to understand the drawing cycle, how to draw text on the screen, how to make simple clickable "buttons" and how touch works.

You could do it more simply by printing the test questions and the results in the output area at the left of screen, but you'd still need buttons and touches for the user to input an answer.

There's not much point us writing it for you, either, because you won't understand it.

I would discuss with your teacher that this is probably too hard based on what you know.

dave1707 · November 2015

I don't mean to hijack this post, but this link might be relevant. It's 2 years old and I would like to ask anyone who started Codea about Dec 2013: Was it better to give you code so you could see how it was done without you doing anything, or was it better to give you suggestions so you had to figure it out yourself. A lot of people on this forum can write the code for the above post in a couple of minutes, but are we helping or hurting those trying to learn. I'm not sure if I should write the code for this as I normally do and post it, or just let it go with the suggestions above.

http://codea.io/talk/discussion/4246/homework/p1

Ignatz · November 2015

Dave, I think sample code is great when you have some basic skills and just need some help with the shape of a program or some technique.

The problem here is that the knowledge deficit is so great that our code - especially anything to do with drawing or touch - is going to look like greek.

Additionally, homework is supposed to be done by you personally, not by other people. It's unfair to the rest of the class if we write a great program for one student.

So I suggest our role here is to help unblock problems, and to explain, but not to solve the assignment or write the code.

CodingIsLife · November 2015

Writing sample codes wouldn't hurt. I'm familiar with touch events a bit and the text function. Also the code isn't being presented to the class so it won't affect anyone. Thanks anyways

Ignatz · November 2015

Ah, well, that's a bit different from what you said above.

I go back to my original advice of breaking the project into its parts and tackling each separately. It will be more fun than just having someone write the whole thing for you.

dave1707 · November 2015

@CodingIsLife Here's an example. I'll leave it to you to add the bells and whistles.
Tap the button with the correct answer. You don't go to the next problem unless you get the current one right.

displayMode(FULLSCREEN)

function setup()
    rectMode(CENTER)
    right=0
    wrong=0
    create()    
end

function create()
    a={}
    ans={}
    str={}
    choice=math.random(4)
    c=math.random(4)    -- + - x /
    for z=1,4 do
        a[z]=vec2(math.random(99),math.random(99))
        if c==1 then
            str[z]=string.format("%d + %d = ",a[z].x,a[z].y)
            ans[z]=math.tointeger(a[z].x+a[z].y)
        elseif c==2 then
            str[z]=string.format("%d - %d = ",a[z].x,a[z].y)
            ans[z]=math.tointeger(a[z].x-a[z].y)
        elseif c==3 then
            str[z]=string.format("%d x %d = ",a[z].x,a[z].y)
            ans[z]=math.tointeger(a[z].x*a[z].y)
        elseif c==4 then
            str[z]=string.format("%d / %d = ",a[z].x,a[z].y)
            ans[z]=a[z].x/a[z].y
        end        
    end
end

function draw()
    background(0)
    fill(255)
    text("Right   "..right,WIDTH/2-100,HEIGHT-50)
    text("Wrong   "..wrong,WIDTH/2+100,HEIGHT-50)
    text(str[choice],WIDTH/2,HEIGHT/2 )
    for a,b in pairs(ans) do
        fill(255)
        rect(WIDTH/2,100+a*50,180,40)
        fill(0)
        text(b,WIDTH/2,100+a*50)
    end   
end

function touched(t)
    if t.state==BEGAN then
        if choice==(t.y-25-100)//50+1 then
            right=right+1
            create()
        else
            wrong=wrong+1
        end
    end
end

nfgdayton · November 2015

I think this is a pedagogically appropriate answer to the question. It offers a solution to the problem of not using the keyboard, and the touch handler offers a lesson for UI design. You have covered the design issues specified by @Ignatz, while still leaving plenty of bells and whistles to implement given the original specification. I encourage @CodingIsLife to post their solution. I would be interested in seeing how they handled the design trade offs for generating a problem, getting the answer, and providing feedback.

Moving beyond multiple choice opens up interesting user interface problems for negative numbers and precision for division.

Ignatz · November 2015

I think I would put the numbers 0 to 9 on the screen so you could touch them in turn to give your answer, like a calculator keypad.

But there are several ways to do it, of course...

dave1707 · November 2015

@Ignatz I did the 0-9 . - keys to start, but it started to get too complicated for just a simple example. As mentioned above, the precision on the divide would be a problem.

CodingIsLife · November 2015

@dave1707 Thanks for your example. It works but I don't understand it. I'll see what I come up with and @nfgdayton I'll definitely post my code if I figure out how to do it. In addition, @Ignatz you're right, a 0-9 keypad is the better option in my opinion. Thanks to all of you

CodingIsLife · November 2015

This is all I have so far. It's mainly just the draw function. The program doesn't do much. I still need to generate random numbers and operations, program the buttons to display numbers when touched + an enter button and tell the user the right answer if answered wrong. It's not perfect I know and it can probably be shortened but this is what I have. [Screenshot of my program] http://imgur.com/yGyOCmY

-- MathGame

--Variables 
local button0 = "Project:button0"
local button1 = "Project:button1"
local button2 = "Project:button2"
local button3 = "Project:button3"
local button4 = "Project:button4"
local button5 = "Project:button5"
local button6 = "Project:button6"
local button7 = "Project:button7"
local button8 = "Project:button8"
local button9 = "Project:button9"

-- Use this function to perform your initial setup
function setup()
    supportedOrientations(LANDSCAPE_ANY)
    --displayMode(FULLSCREEN)
   noFill()
   noSmooth()
   noStroke()
   pushStyle()
end

-- This function gets called once every frame
function touched(touch)

end

-- This function gets called once every frame
function draw()

-- This sets a dark background color 
background(40, 40, 50)

--This displays numbers 0-9 in a keypad fashion on the screen
sprite(button0, WIDTH/2-150, HEIGHT/2-300, 75, 75)
sprite(button1, WIDTH/2-250, HEIGHT/2, 75, 75)
sprite(button2, WIDTH/2-150, HEIGHT/2, 75, 75)
sprite(button3, WIDTH/2-50, HEIGHT/2, 75, 75)
sprite(button4, WIDTH/2-250, HEIGHT/2-100, 75, 75)
sprite(button5, WIDTH/2-150, HEIGHT/2-100, 75, 75)
sprite(button6, WIDTH/2-50, HEIGHT/2-100, 75, 75)
sprite(button7, WIDTH/2-250, HEIGHT/2-200, 75, 75)
sprite(button8, WIDTH/2-150, HEIGHT/2-200, 75, 75)
sprite(button9, WIDTH/2-50, HEIGHT/2-200, 75, 75)

-- This displays the "Right" and "Wrong" at the top of the screen 
fill(255)
fontSize(48)
text("Right     ",WIDTH/2-100,HEIGHT-50)
text("Wrong     ",WIDTH/2+100,HEIGHT-50)
end

dave1707 · November 2015

@CodingIsLife Don't forget the Clear, Backspace, Minus, and Decimal point buttons. When you show a divide problem, how many places past the decimal point will you expect the user to key. Also, will you round up the answer or just truncate the answer. You're off to a good start, but you have a long way to go.

Ignatz · November 2015

You're getting there. You may find this is neater

buttons={}
for i=0,9 do
    buttons[i]={} --make subtable for each button
    buttons[i].img="Project:button"..i
end
--use the table to hold screen position too
buttons[0].pos=vec2(WIDTH/2-150,HEIGHT/2-300)
--and so on, for the other buttons

--and in draw..
for i=0,9 do
    sprite(buttons[i].img,buttons[i].pos.x,buttons[i].pos.y,75)
end

When the user touches the screen, it is easy to tell which button has been pressed

function touched(t)
    if t.state==ENDED then --wait for touch to end
        local touch=vec2(t.x,t.y)
        for i=0,9 do
            if touch:dist(buttons[i].pos)<75 then
                keyTouched=i
                return
            end
        end
    end
end

CodingIsLife · November 2015

@dave1707 Thanks for the heads up. Although I believe having a decimal and minus button will over complicate the program. Is there a way to program the division problems to only be even (e.g. 18/6=3)? (No floats just integers)

@Ignatz I haven't tried your code just yet but it looks good. I like keeping things organized so thanks Where would I put the buttons={} chunk of code? Under any function or just at the beginning OR as a new blank file? Also could you possibly do a further example using 2 or 3 buttons? Just so get an idea of what specifics I must put.

I'm going to keep trying at this.

dave1707 · November 2015

@CodingIsLife For whole division, pick 2 numbers so when they're multiplied together is below some limit you set. Then use the multiplied value divided by one of the 2 numbers. The result will be your other number.

CodingIsLife · November 2015

@dave1707 That makes sense in my head but I don't know exactly how to code that perfectly. I'm very visual so examples help (in code).

(I understand why that reverse math works)

Ignatz · November 2015

@CodingIsLife - For the division problem, it's probably best to work backwards from the divisor, ie choose that first.

For example,

randomly choose a divisor D between 0 and 50, eg 17
calculate how many times N it goes into 99 evenly (which is 5 for 17)
randomly choose a number R between 2 and N
ask the user to divide D*R by D

Can you figure some of this code out for yourself?

You should put buttons={} just before you start allocating images and positions, and the obvious place for all that code is in setup.

for the button positions, here's the second one

buttons[1].pos=vec2(WIDTH/2-250,HEIGHT/2)

(I'm just copying the positions you used in draw)

CodingIsLife · November 2015

@Ignatz Thanks for the example. That'll help a bunch. I'm sure I can figure out the math.random function. That step-by-step process really helps!

dave1707 · November 2015

@CodingIsLife Here's a simple example. You can adjust the numbers in calc() to fit your needs. Keep taping the screen for another problem.

function setup()
    calc()
end

function calc()
    output.clear()
    a=math.random(25)
    b=math.random(50,99)//a
    print(a*b.." / "..a.." = "..b)
end

function touched(t)
    if t.state==BEGAN then
        calc()
    end
end

CodingIsLife · November 2015

@dave1707 That works nicely. I would rather have the equations in a text function than print (if that's even possible)

CodingIsLife · November 2015

@Ignatz This is how I interpreted your comment.

 -- MathGame

-- Use this function to perform your initial setup
function setup()
supportedOrientations(LANDSCAPE_ANY)
--displayMode(FULLSCREEN)
noFill()
noSmooth()
noStroke()
pushStyle()

buttons={}
for i=0,9 do
buttons[i]={} 
buttons[i].img="Project:button"..i
end

buttons[0].pos=vec2(WIDTH/2-150,HEIGHT/2-300)
buttons[1].pos=vec2(WIDTH/2-250, HEIGHT/2)
buttons[2].pos=vec2(WIDTH/2-150,HEIGHT/2)
buttons[3].pos=vec2(WIDTH/2-50, HEIGHT/2)
buttons[4].pos=vec2(WIDTH/2-250,HEIGHT/2-100)
buttons[5].pos=vec2(WIDTH/2-150,HEIGHT/2-100)
buttons[6].pos=vec2(WIDTH/2-50, HEIGHT/2-100)
buttons[7].pos=vec2(WIDTH/2-250,HEIGHT/2-200)
buttons[8].pos=vec2(WIDTH/2-150, HEIGHT/2-200)
buttons[9].pos=vec2(WIDTH/2-50,HEIGHT/2-200)

end

-- This function gets called once every frame
function touched(t)
    if t.state==ENDED then --wait for touch to end
        local touch=vec2(t.x,t.y)
        for i=0,9 do
            if touch:dist(buttons[i].pos)<75 then
                keyTouched=i
                return
                print("touch") --just a test to see if it registers the touch
            end
        end
    end
end

-- This function gets called once every frame
function draw()

-- This sets a dark background color 
background(40, 40, 50)

for i=0,9 do
    sprite(buttons[i].img,buttons[i].pos.x,buttons[i].pos.y,75)
end

-- This displays the "Right" and "Wrong" at the top of the screen 
fill(255)
fontSize(48)
text("Right     ",WIDTH/2-100,HEIGHT-50)
text("Wrong     ",WIDTH/2+100,HEIGHT-50)

end

dave1707 · November 2015

@CodingIsLife Here's an example with text added.

function setup()
    calc()
end

function calc()
    output.clear()
    a=math.random(25)
    b=math.random(50,99)//a
    print(a*b.." / "..a.." = "..b)
end

function draw()
    background(0)
    fill(255)
    text(a*b.." / "..a.." = ",WIDTH/2,HEIGHT/2)
end

function touched(t)
    if t.state==BEGAN then
        calc()
    end
end

CodingIsLife · November 2015

@dave1707 Thanks. Now I just need to randomly generate the operation and display that in an output rect and have an input rect too for the keypad.

Ignatz · November 2015

Yes.

You can make it neater still by putting the button positions into a table, like so

local pos={vec2(-150,-300),vec2(-250,0),vec2(-150,0), etc etc}
buttons={}
for i=0,9 do
    buttons[i]={} --make subtable for each button
    buttons[i].img="Project:button"..i
    buttons[i].pos=vec2(WIDTH/2,HEIGHT/2)+pos[i]
end

The temporary pos table lists the ten screen positions of the button, leaving out WIDTh and HEIGHT because they are the same for all of them, so we can add them later.

Then our loop that sets the images, can also set the positions, avoiding the need for 10 separate statements.

CodingIsLife · November 2015

@Ignatz I've attempted to make the list but when I press the start program button I get to errors. Screenshot line 20 is

buttons[i].pos=vec2(WIDTH/2,HEIGHT/2)+pos[i]

and line 46 is

sprite(buttons[i].img,buttons[i].pos.x,buttons[i].pos.y,75)

-- MathGame

-- Use this function to perform your initial setup
function setup()
supportedOrientations(LANDSCAPE_ANY)
--displayMode(FULLSCREEN)
noFill()
noSmooth()
noStroke()
pushStyle()

right=0
wrong=0

local pos =     {vec2(-150,-300),vec2(-250,0),vec2(-150,0),vec2(-50,0),vec2(-250,-100),vec2(-150,-100),vec2(-50,-100),vec2(-250,-200),vec2(-150,-200),vec2(-50,-200)}
buttons={}
for i=0,9 do
buttons[i]={} 
buttons[i].img="Project:button"..i
buttons[i].pos=vec2(WIDTH/2,HEIGHT/2)+pos[i] 
end
end

-- This function gets called once every frame
function touched(t)
if t.state==ENDED then --wait for touch to end
    local touch=vec2(t.x,t.y)
    for i=0,9 do
        if touch:dist(buttons[i].pos)<75 then
            keyTouched=i
            return
            print("touch") --just a test to see if it registers the touch
        end
    end
end
end

-- This function gets called once every frame
function draw()

-- This sets a dark background color 
background(40, 40, 50)

-- This displays the 0-9 keypad
for i=0,9 do
    sprite(buttons[i].img,buttons[i].pos.x,buttons[i].pos.y,75)
end

-- This displays the input rectangle correlating with the keypad
rect(WIDTH/2-100, HEIGHT/2-300)

-- This displays the "Right" and "Wrong" at the top of the screen 
fill(255)
fontSize(48)
text("Right     ",WIDTH/2-100,HEIGHT-50)
text("Wrong     ",WIDTH/2+100,HEIGHT-50)
rect(WIDTH/2-300, HEIGHT/2+100, 300, 50)

text(right, WIDTH/2-50, HEIGHT-50)
text(wrong, WIDTH/2+175, HEIGHT-50)
end

Ignatz · November 2015

Yes, the problem is that when we set up a table this way, it starts from 1, not 0 as we want. So what we can do is just give it the positions 1 to 9, then add position 0 afterward, like this

local pos =     {vec2(-250,0),vec2(-150,0),vec2(-50,0),vec2(-250,-100),vec2(-150,-100),vec2(-50,-100),vec2(-250,-200),vec2(-150,-200),vec2(-50,-200)}
pos[0]=vec2(-150,-300)

CodingIsLife · November 2015

I've changed that part of the code and the "Right" & "Wrong" and the rect displays, but the number keypad does not. Although the output sidebar still prints "touch" when I tap on where they'd be.

Ignatz · November 2015

Do your button images exist?

You don't need them anyway, you can draw text numbers instead

--to draw them...
    fill(255) --NEW
    fontSize(24) --NEW
    for i=0,9 do
        text(i,buttons[i].pos.x,buttons[i].pos.y) --NEW
    end

CodingIsLife · November 2015

For some reason it works now. I just deleted the sprite(buttons[i].img...) stuff under the draw function and retyped it

CodingIsLife · November 2015

Okay so I've added a clear and backspace button. The next thing I want to do is when the buttons are pressed they actually do something ) Also in case you want to see my code (anyone) this is it: (http://imgur.com/69mKCPP)

-- MathGame

-- Use this function to perform your initial setup
function setup()
supportedOrientations(LANDSCAPE_ANY)
--displayMode(FULLSCREEN)
noFill()
noSmooth()
noStroke()
pushStyle()

right=0
wrong=0

clearButton = "Project:clearButton"
backspaceButton = "Project:backspaceButton"
local pos =     {vec2(-250,0),vec2(-150,0),vec2(-50,0),vec2(-250,-100),vec2(-150,-100),vec2(-50,-100),vec2(-250,-200),vec2(-150,-200),vec2(-50,-200)}
pos[0]=vec2(-150,-300)

buttons={}
for i=0,9 do
buttons[i]={} 
buttons[i].img="Project:button"..i
buttons[i].pos=vec2(WIDTH/2,HEIGHT/2)+pos[i]
end
end

-- This function gets called once every frame
function touched(t)
if t.state==ENDED then --wait for touch to end
    local touch=vec2(t.x,t.y)
    for i=0,9 do
        if touch:dist(buttons[i].pos)<75 then
            keyTouched=i
            return
            print("touch") --just a test to see if it registers the touch
        end
    end
end
end

-- This function gets called once every frame
function draw()

-- This sets a dark background color 
background(40, 40, 50)

-- This displays the 0-9 keypad
for i=0,9 do
    sprite(buttons[i].img,buttons[i].pos.x,buttons[i].pos.y,75)
end

-- This displays the input rectangle correlating with the keypad
rect(WIDTH/2-100, HEIGHT/2-300)

-- This displays the backspace and clear button
sprite(clearButton, WIDTH/2-250, HEIGHT/2-300, 75)
sprite(backspaceButton, WIDTH/2-50, HEIGHT/2-300, 75)

-- This displays the "Right" and "Wrong" at the top of the screen and the increments 
fill(255)
fontSize(48)
text("Right "..right,WIDTH/2-100,HEIGHT-50) -- "Right 0" 
text("Wrong "..wrong,WIDTH/2+100,HEIGHT-50) -- "Wrong 0"
rect(WIDTH/2-300, HEIGHT/2+100, 300, 50) -- Input bar

end

nfgdayton · November 2015

I've looked up project data and assets. I have pulled in a windmill image with the statement:

sprite("Small World:Windmill",pos._x,_pos.y,75)

And looked at moving data into my global project file on post

http://codea.io/talk/discussion/6448/downloading-multiple-images-via-http-request

Where is @CodingIsLife's project data coming from?

I looked at this post:

http://codea.io/talk/discussion/58/persistent-data

To see that project data is stored in a Data.plist file. When I look up Data.plist I go to an iOS developer page, which is way out of the scope for Codea

Ignatz · November 2015

The data is stored locally on the iPad, so unless he shares the pictures with you, you'll have to make your own, or else just print numbers on the screen instead of pictures (see my code for this a little higher up).

CodingIsLife · November 2015

Yes I am using my own images. They are straight from either Google or some icon website. I'd be happy to share the images if it allows other people to use the program I'm making

nfgdayton · November 2015

@CodingIslife ... I used the wrong Google search the first time I looked for buttons. Found a link to a site http://dabuttonfactory.com/ which should help me experiment with buttons. I will need to do this and will use your program as a template.

I think you have reached a difficult part in your development and recommend that you read http://codeatuts.blogspot.com.au/2012/07/tutorial-5-finite-state-machines.html before attempting the buttons on your own. The user experience for your program is going to be initially a little frustrating for negative numbers I suspect. I am looking forward to seeing your code for presenting answers for addition problems!

@ignatz I have been messing with Codea for a couple of months now and am finally getting a feel for the language. Text and Sprite both use the center of the displayed object making your obj vec2(touch.x,touch.y) ... obj:dist(object location) ... Coding pattern really cool. I've been messing with my own button logic that I drew from the lower left corner, making handling the touch event a lot more complicated. I really appreciate the work you have done with Codea. I hope to be able to discuss graphics with you a little more intelligently real soon now :-bd

dave1707 · November 2015

@CodingIsLife Here's a keyboard that I had that uses built in emoji images, so anyone can use it. It handles BACKSPACE (single triangle), CLEAR (double triangle), ENTER (curly arrow). The * and # buttons do nothing in this example.

function setup()
    pic={"*️⃣","↩️","#️⃣","◀️","0️⃣","⏪","1️⃣","2️⃣",
            "3️⃣","4️⃣","5️⃣","6️⃣","7️⃣","8️⃣","9️⃣"}
    val={-99,-4,-99,-1,0,-2,1,2,3,4,5,6,7,8,9}
    rectMode(CENTER)
    butt={}
    count=0
    for y=1,5 do
        for x=1,3 do
            count=count+1
            table.insert(butt,button(100+x*70,200+y*70,70,count))
        end
    end
    value=0
end

function draw()
    background(40, 40, 50)    
    stroke(206, 223, 228, 255)
    strokeWidth(5)
    fill(0, 176, 255, 255)
    rect(240,410,220,360)
    for a,b in pairs(butt) do
        b:draw()
    end
    fill(0,176,255,255)
    rect(240,620,220,50)
    fill(255)
    fontSize(40)
    fill(255)
    text(value,240,620)
end

function touched(t)
    for a,b in pairs(butt) do
        b:touched(t,a)
    end
end

button=class()

function button:init(x,y,w,c)
    self.x=x
    self.y=y
    self.w=w
    self.pic=pic[c]
    self.keyVal=val[c]
end

function button:draw()
    fontSize(65)
    fill(255)
    text(self.pic,self.x,self.y)       
end

function button:touched(t,a)
    if t.state==BEGAN then
        if t.x>self.x-self.w/2 and t.x<self.x+self.w/2 and
                t.y>self.y-self.w/2 and t.y<self.y+self.w/2 then
            if self.keyVal>=0 then
                value=value*10+self.keyVal
            elseif self.keyVal==-1 then
                value=value//10
            elseif self.keyVal==-2 then
                value=0
            elseif self.keyVal==-4 then
                print(value)
                value=0
            end
        end
    end
end

CodingIsLife · November 2015

@dave1707 Code works nicely and it's very appreciated but I'm probably going to stick with my own buttons for my program but I'm sure others can figure out how to add your code into mine

CodingIsLife · November 2015

This comment is for anyone to help. I've achieved drawing the sprites where I'd like. The only problem I face now is coding/displaying the math and coding the buttons to do what they should. Any insight is appreciated even if it's an organization tip. (http://imgur.com/qfmVGZN)

-- MathGame

-- Use this function to perform your initial setup
function setup()
supportedOrientations(LANDSCAPE_ANY)
--displayMode(FULLSCREEN)
noFill()
noSmooth()
noStroke()
pushStyle()
-- Sprites in variables  
    right=0
   wrong=0
   clearButton = "Project:clearButton"
   backspaceButton = "Project:backspaceButton"
   professor = "Project:professor"
   speechBubble = "Project:speechBubble"

   -- List of positions for the keypad
    local pos =     {vec2(-250,0),vec2(-150,0),vec2(-50,0),vec2(-250,-100),vec2(-150,-100),vec2(-50,-100),  vec2(-250,-200),vec2(-150,-200),vec2(-50,-200)}
 pos[0]=vec2(-150,-300)

buttons={}
for i=0,9 do
buttons[i]={} 
buttons[i].img="Project:button"..i
buttons[i].pos=vec2(WIDTH/2,HEIGHT/2)+pos[i]
end
end

-- This function gets called once every frame
function touched(t)
    if t.state==ENDED then --wait for touch to end
    local touch=vec2(t.x,t.y)
    for i=0,9 do
        if touch:dist(buttons[i].pos)<75 then
            keyTouched=i
            return
            print("touch") --just a test to see if it registers the touch
        end
    end
end
end

-- This function gets called once every frame
function draw()

-- This sets a dark background color 
background(40, 40, 50)

-- This displays the 0-9 keypad
for i=0,9 do
    sprite(buttons[i].img,buttons[i].pos.x,buttons[i].pos.y,75)
end

-- This displays the input rectangle correlating with the keypad
rect(WIDTH/2-100, HEIGHT/2-300)

-- This displays the backspace and clear button
sprite(clearButton, WIDTH/2-250, HEIGHT/2-300, 75)
sprite(backspaceButton, WIDTH/2-50, HEIGHT/2-300, 75)

-- This displays the "Right" and "Wrong" at the top of the screen and the increments 
fill(255)
fontSize(48)
text("Right "..right,WIDTH/2-100,HEIGHT-50) -- "Right 0" 
text("Wrong "..wrong,WIDTH/2+100,HEIGHT-50) -- "Wrong 0"
rect(WIDTH/2-300, HEIGHT/2+100, 300, 50) -- Input bar

-- This displays the professor sprite and his speech bubble
sprite(professor, WIDTH/2+225,HEIGHT/2-100, 350, 600)
sprite(speechBubble, WIDTH/2+75, HEIGHT/2+200, 250, 150)
end

dave1707 · November 2015

@CodingIsLife That's fine. I just put this out to show a keyboard using emoji images instead of using local images that others on the forum don't have access to.

dave1707 · November 2015

@CodingIsLife My code above does what you need, but I don't know if you understand or used classes yet. The code in the function button:touched() gets a key value and builds the final value. It also does the backspace, clear, and enter code.

CodingIsLife · November 2015

@dave1707 Yes I assumed that. It'd be great if I could take the part of your code that does all that button code and merge into my code. Is that possible?

dave1707 · November 2015

@CodingIsLife The exact code won't work, but the way I do the calculations and backspace, clear, enter code should work with your keys.

CodingIsLife · November 2015

@dave1707 What specific parts of the code should I copy? And is there anything I need to change in yours to work with mine buttons?

dave1707 · November 2015

@CodingIsLife I don't think there anything you could copy and have it work with yours, but the math should work. When you tap a digit (0-9) then value=value*10+digit. That will build value as you key digits. When you hit backspace, then value=value//10. That will remove the rightmost digit. When you hit clear, value=0. When you hit enter, do whatever you need to do with value then move 0 to it.

CodingIsLife · November 2015

@dave1707 Thanks. Again that makes sense in my mind but I'm not sure how I'd code it. I'm thinking using an if statement and possibly the t.state == ENDED code. Any tips?

dave1707 · November 2015

@CodingIsLife Everything is going to be based on what's touched on the keypad. If you tap the digits, you build the value. If you tap backspace, the rightmost digit is removed. If you tap clear, you move 0 to value. If you tap enter, you compare the value to the answer of your calculation. If they match, you create a new problem. If they don't match, you move 0 to value and the user tries again.

CodingIsLife · November 2015

@dave1707 Perfect. I believe I know what to do. I'll post an update when I get it working (of if I have any other errors :P )

Howdy, Stranger!

Categories

In this Discussion

Create a Math Game

Comments