We all have seen the simple game in Google’s Chrome browser that we can access only when there is no internet connection. A fun and simple way to pass time while waiting for the connection to return. The dino character is not only cute but also represents a pre-historic period without internet.
(The game from Google Chrome)
Today, I’ll write about how I tried to recreate the game in the Arduino platform. This is a fairly simple project and can be finished in an afternoon’s time.
Components needed
1.Arduino UNO (Or any other board)
2.16x2 lcd screen with I2C driver
3.A push button
4.A resistor (of resistance between 1 and 10k ohms)
5.A piezo buzzer
(Mine's an old one, which I had used for another project from college.)
6.Jumper Wires
7.Breadboard
8.A Battery
9.An enclosure of any sort
Wiring up the components
As we have used an lcd screen with an I2C driver, all we need to do is to connect the SDA and SCL pins of the lcd to the respective SDA and SCL ports of your suitable Arduino board.
I connected a pushbutton and connected one of its ends to the positive rail and the other end was connected to a digital pin in the Arduino board. This pin was also pulled down to ground by a resistor. The resistance value can be anything from 1ohm to 10k ohms. This is to pull down the button while it is not pushed.
Next, connect the piezo buzzer’s ground to the ground rail and the positive pin to any of the digital pins of the Arduino.
Code
#include
#include
LiquidCrystal_I2C lcd(0X3F, 2, 1, 0, 4, 5, 6, 7, 3, POSITIVE);
boolean dinoOnGround = true;
//declare a boolean to check if the dino is in the ground
int buttonPin = 8;
int buzzerPin = 9;
int buttonState = 0;
// a token variable to check the state of the button
int highScore = 0;
boolean playState = false;
//the game starts only when this becomes true
// This is a common method used in coding games
int dist = 0;
int distTwo = 0;
// variables to set the distance between the trees
int score = 0;
/* An array of byte type is used to display
bitmaps in an LCD Display.
Here, the display is 5x8, the size of one
'unit' in our lcd
The places where it is a 1 will light up and
the places with a 0 will be off
You can create this array easily with a site
that I'll explain below
*/
//bitmap array for the dino character
byte dino [8]
{ B00000,
B00111,
B00101,
B10111,
B11100,
B11111,
B01101,
B01100,
};
//character for the tree
byte tree [8]
{
B00011,
B11011,
B11011,
B11011,
B11011,
B11111,
B01110,
B01110
};
void setup() {
lcd.begin(16,2);
lcd.createChar(7, dino);
lcd.createChar(6,tree);
lcd.setCursor(0,1);
lcd.write(7);
pinMode(buttonPin,INPUT);
pinMode(buzzerPin,OUTPUT);
}
void loop() {
lcd.clear();
// at the start, check is playState is true or false
if(!playState){
lcd.setCursor(0,0);
lcd.print("Press to start");
//When it is false, print the starting instruction
if(digitalRead(buttonPin)==HIGH) //Read the button
{
playState = true;
// when button pushed, make playState true
}
}
// when playState is true, call the startGame function
if(playState)
{
startGame();
}
delay(100);
}
// the loop function ends here
// when playState is true, startGame function is called
void startGame(){
lcd.clear();
dist = random(4,9);
distTwo = random(4,9);
//Generate two random distances for the gap between the trees
// this for loop is to make the trees move
for(int i=16; i>=-(dist+distTwo); i--){
lcd.setCursor(13,0);
lcd.print(score); // print the score
int state = digitalRead(buttonPin);
// Read the push button
if(state == HIGH)
{
buttonState = 1;
tone(buzzerPin,700,100);
}
else if(state == LOW)
{
buttonState = 0;
}
//when the button is pushed, print the dino on the upper
if(buttonState == 1){
lcd.setCursor(1,0); // row and set dinoOnGround to false
lcd.write(7);
lcd.setCursor(1,1);
lcd.print(" ");
dinoOnGround = false;
}
else{ // When the button is not pushed
lcd.setCursor(1,1); // print the dino on the lower row
lcd.write(7); // and set dinoOnGround to true
lcd.setCursor(1,0);
lcd.print(" ");
dinoOnGround = true;
}
// This prints the trees so that it moves with the for loop
lcd.setCursor(i,1);
lcd.write(6);
lcd.setCursor(i+1,1);
lcd.print(" ");
lcd.setCursor(i+dist,1);
lcd.write(6);
lcd.setCursor(i+dist+1,1);
lcd.print(" ");
lcd.setCursor(i+dist+distTwo,1);
lcd.write(6);
lcd.setCursor(i+dist+distTwo+1,1);
lcd.print(" ");
//When the trees reaches the starting point
if((i+dist+distTwo)==-1){
i=12;
} // they are taken to the end and set up randomly once more
/* Now check if the position of the trees
and that of the dino coincides, but we
only need to do this if the dino is in the ground.
Use the dinoOnGround variable and check if the
condition is satisfied. If so the game is over
*/
if(i==1 && (dinoOnGround == true))
{
lcd.clear(); // instructions for the game over screen
lcd.print("YOU LOSE SUCKAA");
if(score>highScore){
highScore = score;
}
lcd.setCursor(0,1);
lcd.print("HIGH : ");
lcd.print(highScore);
playState = false; //Set the playState as false so it goes to the
delay(5000); // start screen after the game is over
score = 0;
break;
}
else if(i+dist == 1 && (dinoOnGround == true))
{
lcd.clear();
lcd.print("YOU LOSE SUCKAA");
if(score>highScore){
highScore = score;
}
lcd.setCursor(0,1);
lcd.print("HIGH : ");
lcd.print(highScore);
playState = false;
delay(5000);
score = 0;
break;
}
else if(i+dist+distTwo == 1 && (dinoOnGround == true))
{
lcd.clear();
lcd.print("YOU LOSE SUCKAA");
if(score>highScore){
highScore = score;
}
lcd.setCursor(0,1);
lcd.print("HIGH : ");
lcd.print(highScore);
playState = false;
delay(5000);
score = 0;
break;
}
score++;
// increase the score variable for every run of the loop
delay(500);
}
}
Explanation of the code
Explanations for various parts of the code
byte dino [8] //bitmap array for the dino character
{ B00000,
B00111,
B00101,
B10111,
B11100,
B11111,
B01101,
B01100,
};
This is used to define the shape of the character. You can either write it up in paper or use the handy dandy link that I'll provide here to generate the code.
You can go to https://omerk.github.io/lcdchargen/ for easily generating the bitmap code for any shape you want.
The cells you click will be black. They will light up in the lcd screen.
Here is how I made the code for the characters used in my code
(The dino)
(The tree)
What's more interesting is that they even provide you with some sample arduino code to display it in your lcd!
lcd.createChar(7,dino);
lcd.write(7);
These commands are for creating the array which you wrote as a character and for further displaying it in the lcd screen.
if(score>highScore){
highScore = score;
}
lcd.setCursor(0,1);
lcd.print("HIGH : ");
lcd.print(highScore);
playState = false;
This is after the game is over (Dino coinciding with the tree) and it checks if the score attained is greater than the high score and set the high score. It also sets the playState to false so that it goes back to the start screen
Conclusion
Up and runnning!!
I tried putting it all together into a box.
All packed up!
It was a really fun project and I was able to complete it in around half a day.
Sources
All the code and the pictures are my own creation. The screenshots of the web pages were taken by me.