An elevation
a Children’s Game
Background:
As a planner, it is generally acknowledged the difficulty to translate a planning language into the word that can be understood by ordinary people. Creating an interactive game might be a valid way to spread the relevant knowledge of planning and catch people’s eyesight toward the field. In this project, a children’s game called ‘Guess the building’ is introduced to attract children and provide some basic understanding of the building structure itself. The empire state building in this project is a sample and can be replaced by other photos of the landscape and cities.
Rules:
The inspiration of the game came from the website example in assignment 2. The rules of the game comes from two different aspect: (1) to make the game attractive to children; (2) to make the game interactive.
1. Attraction:
a) Instead of a single-color background, the background of the game is made by ellipse grids nested in square grids, looking like some small pillows overlapping with each other;
b) The sparkling grid will make it more attractive for children to click the grid.
2. Interactivity:
a) When the mouse is clicked, the grid will disappear, and a part of the picture will occur;
b) A variable called ‘num’ is used to count the number of mouse clicks. When the number of clicks is less than 11, “you still have chance” will show up on the screen; when the number of clicks is more than 10, “you run out of chance” will show up on the screen. The limitation of clicks will increase the interactivity of the game.
Layout:
The code of the project:
def setup():
size(700,700)
global img, imgWidth, imgHeight, cubeLength, cubes, squareSize, squaresPerRow, bubbleSize, bubblesPerRow, j, k, l
img = loadImage("empire state building.png")
imgWidth = 600
imgHeight = 600
squareSize = 50
squaresPerRow = int(width/ squareSize)
bubblesPerRow = 2
bubbleSize = int(squareSize / bubblesPerRow)
cubeLength = 60
# making array
cubes = [[1] * 10 for n in range(10)] # text font
j = createFont("Good Unicorn.ttf",80,True)
k = createFont("Good Unicorn.ttf",60,True)
l = createFont("Good Unicorn.ttf",20,True)
def draw():
background(255)
# insert the bubbles in the background
fill("#f0f0f4")
stroke(255)
strokeWeight(5)
a = 0
while a < squaresPerRow + 1:
b = 0
while b < squaresPerRow + 1:
rect(a * squareSize + bubbleSize / 2, b * squareSize - bubbleSize / 2, squareSize, squareSize)
b = b + 1
c = 0
while c < bubblesPerRow:
d = 0
while d < bubblesPerRow:
ellipse(a * squareSize + c * bubbleSize + bubbleSize / 2, b * squareSize + d * bubbleSize - bubbleSize / 2, bubbleSize, bubbleSize)
d = d + 1
c = c + 1
a = a + 1
# insert the elevation to be guessed
image(img, (width - imgWidth) / 2, 50, imgWidth, imgHeight)
x, y = (width - imgWidth) / 2, 50
num = 0
for row in cubes:
for col in row:
if col > -1:
colors = "#b48363", "#535a6b", "#a6976c","#8a8a82","#b7b6b4","#c5c8bf"
index = int(random(len(colors)))
fill(colors[index])
stroke(225)
strokeWeight(4)
rect(x,y, cubeLength, cubeLength)
else:
noFill()
stroke("#ff461f")
strokeWeight(4)
num = num + 1
rect(x + 4, y + 4, cubeLength - 8, cubeLength - 8)
x = x + cubeLength
y = y + cubeLength
x = (width - imgWidth) / 2
# the name of the game
textFont(j)
fill("#44cef6")
textAlign(CENTER)
text("Guess the Building", width / 2, height / 2 - 80)
# the counting of the game
if num < 11 and num > 0:
fill("#44cef6")
textFont(k)
textAlign(CENTER)
text("You still have chance", width / 2, height / 2 + 40)
elif num <> 0:
fill("#ff461f")
text("You run out of Chance!", width / 2, height / 2 + 40)
# signature in the header
textFont(l)
fill(0)
textAlign(RIGHT)
text("A Children's Game", width-30 , width-15)
text("Shuyang Huang(sh3685)", width-30 , width-35)
def mousePressed():
# the cube disappears when the mouse is clicked
cubes[(mouseY-50)/cubeLength][(mouseX - (width - imgWidth) / 2)/cubeLength] = cubes[(mouseY - 50)/cubeLength][(mouseX - (width - imgWidth) / 2)/cubeLength] * -1
