Space Invaders
This page is styled with CSS. This layout uses negative margins to create this feature-rich layout.
The code
Copy and paste:
#include "MCUFRIEND_kbv.h"
MCUFRIEND_kbv tft;
#define BLACK 0x0000
#define BLUE 0x001F
#define RED 0xF800
#define WHITE 0xFFFF
//ship
static int y = 120;
static int s = 130;
static int h = 117;
//ship top
static int yy = 122;
static int ss = 128;
static int hh = 116;
//ship back
static int yyy = 118;
static int sss = 133;
static int hhh = 112;
//invaders
static int i1 = 0;
static int i2 = -125;
static int i3 = -55;
static int i4 = -100;
//fire 1
static int fireX = 273;
static int fireY = 0;
static int fire = 0;
static int fire1a = 0;
static int fire1b = 0;
//fire 2
static int fire2 = 0;
static int fire2a = 0;
static int fire2b = 0;
static int fireX2 = 273;
static int fireY2 = 0;
//fire 3
static int fire3 = 0;
static int fire3a = 0;
static int fire3b = 0;
static int fireX3 = 273;
static int fireY3 = 0;
//fire 4
static int fire4 = 0;
static int fire4a = 0;
static int fire4b = 0;
static int fireX4 = 273;
static int fireY4 = 0;
//fire 5
static int fire5 = 0;
static int fire5a = 0;
static int fire5b = 0;
static int fireX5 = 273;
static int fireY5 = 0;
//fire 6
static int fire6 = 0;
static int fire6a = 0;
static int fire6b = 0;
static int fireX6 = 273;
static int fireY6 = 0;
//scoreboard
static int lives = 3;
//buttons
int greenButton = 24;
int blueButton = 22;
int redButton = 26;
int greenb;
int blueb;
int redb;
//scores
static long score = 0;
static long lastScore = 0;
void setup()
{
Serial.begin(9600);
//hardware
pinMode(greenButton, INPUT);
pinMode(blueButton, INPUT);
pinMode(redButton, INPUT);
//start screen
tft.begin(0x9341);
tft.fillScreen(BLACK);
tft.setRotation(1);
tft.setTextColor(BLUE);
//scoreboard
tft.setCursor(120, 10);
tft.setTextSize(2);
tft.print("SCORE");
tft.setCursor(200, 10);
tft.print(score);
//stars
tft.drawPixel(180, 180, WHITE);
tft.drawPixel(50, 50, WHITE);
tft.drawPixel(200, 60, WHITE);
tft.drawPixel(40, 210, WHITE);
tft.drawPixel(80, 120, WHITE);
//circles lives left
tft.fillCircle(15, 15, 2, WHITE);
tft.fillCircle(25, 15, 2, WHITE);
tft.fillCircle(35, 15, 2, WHITE);
}
void collision() {
lives = lives - 1;
tft.fillScreen(BLACK);
tft.setCursor(120, 10);//score
tft.setTextSize(2);
tft.print("SCORE");
tft.setCursor(200, 10);
tft.print(score);
tft.drawPixel(150, 180, WHITE);//stars
tft.drawPixel(50, 50, WHITE);
tft.drawPixel(180, 60, WHITE);
tft.drawPixel(40, 210, WHITE);
tft.drawPixel(80, 120, WHITE);
tft.fillCircle(15, 15, 2, WHITE);//lives
tft.fillCircle(25, 15, 2, WHITE);
i1 = 0; i2 = -125; i3 = -55; i4 = -100;
}
void loop()
{
//ship
tft.fillRect(277, yyy, 3, 14, BLUE); //back
tft.fillRect(277, sss, 3, 3, BLACK); //back
tft.fillRect(277, hhh, 3, 5, BLACK);//back
tft.fillRect(278, yyy+6, 2, 3, BLACK);
tft.drawRect(275, y, 2, 10, BLUE); //middle
tft.drawRect(275, s, 2, 3, BLACK);//middle
tft.drawRect(275, h, 2, 3, BLACK);//middle
tft.fillRect(271, yy, 4, 6, BLUE); //front
tft.fillRect(271, yy-2, 4, 2, BLACK);//front
tft.drawRect(271, ss, 4, 2, BLACK);//front
tft.drawRect(269, yyy+6, 2, 2, BLUE);
tft.drawRect(269, yyy+4, 2, 2, BLACK);
tft.drawRect(269, yyy+8, 2, 2, BLACK);
greenb = digitalRead(greenButton);
blueb = digitalRead(blueButton);
if (greenb == 0) {y = y - 2; h = h - 2; s = s - 2;
yy = yy - 2; hh = hh - 2; ss = ss - 2;
yyy = yyy - 2; hhh = hhh - 2; sss = sss - 2;}
if (blueb == 0) {y = y + 2; h = h + 2; s = s + 2;
yy = yy + 2; hh = hh + 2; ss = ss + 2;
yyy = yyy + 2; hhh = hhh + 2; sss = sss + 2;}
//keep ship on screen
if (y > 240) {s = 240; y = 230; h = 227; yy = 232;
ss = 238; hh = 226; yyy = 228; sss = 243; hhh = 222;}
if (y < 0) {s = 10; y = 0; h = -3; yy = 2; ss = 8;
hh = -4; yyy = -2; sss = 13; hhh = -8;}
//invader 1
tft.drawRect(i1, 199, 6, 1, RED); //top side
tft.drawRect(i1-10, 199, 6, 1, BLACK); //top side
tft.drawRect(i1, 198, 3, 3, RED); //top side
tft.drawRect(i1-10, 198, 3, 1, BLACK); //top side
tft.drawRect(i1, 201, 6, 3, RED); //bottom side
tft.drawRect(i1-10, 201, 6, 3, BLACK); //bottom side
tft.drawRect(i1, 202, 3, 3, RED); //bottom side
tft.drawRect(i1-10, 202, 3, 3, BLACK); //bottom side
tft.drawRect(i1, 200, 10, 3, RED); //main
tft.drawRect(i1-10, 200, 10, 3, BLACK);//main
i1 = i1 + 1;
if (i1 == 340) {i1 = 0;}
//invader 2
tft.drawRect(i2, 49, 6, 1, RED); //top side
tft.drawRect(i2-10, 49, 6, 1, BLACK); //top side
tft.drawRect(i2, 48, 3, 3, RED); //top side
tft.drawRect(i2-10, 48, 3, 1, BLACK); //top side
tft.drawRect(i2, 50, 10, 3, RED); //main
tft.drawRect(i2-10, 50, 10, 3, BLACK);//main
tft.drawRect(i2, 51, 6, 3, RED); //bottom side
tft.drawRect(i2-10, 51, 6, 3, BLACK); //bottom side
tft.drawRect(i2, 52, 3, 3, RED); //bottom side
tft.drawRect(i2-10, 52, 3, 3, BLACK); //bottom side
i2 = i2 + 1;
if (i2 == 465) {i2 = -125;}
//invader 3
tft.drawRect(i3, 99, 6, 1, RED); //top side
tft.drawRect(i3-10, 99, 6, 1, BLACK); //top side
tft.drawRect(i3, 98, 3, 3, RED); //top side
tft.drawRect(i3-10, 98, 3, 1, BLACK); //top side
tft.drawRect(i3, 100, 10, 3, RED); //main
tft.drawRect(i3-10, 100, 10, 3, BLACK);//main
tft.drawRect(i3, 101, 6, 3, RED); //bottom side
tft.drawRect(i3-10, 101, 6, 3, BLACK); //bottom side
tft.drawRect(i3, 102, 3, 3, RED); //bottom side
tft.drawRect(i3-10, 102, 3, 3, BLACK); //bottom side
i3 = i3 + 1;
if (i3 == 395) {i3 = -55;}
//invader 4
tft.drawRect(i4, 149, 6, 1, RED); //top side
tft.drawRect(i4-10, 149, 6, 1, BLACK); //top side
tft.drawRect(i4, 148, 3, 3, RED); //top side
tft.drawRect(i4-10, 148, 3, 1, BLACK); //top side
tft.drawRect(i4, 150, 10, 3, RED); //main
tft.drawRect(i4-10, 150, 10, 3, BLACK); //main
tft.drawRect(i4, 151, 6, 3, RED); //bottom side
tft.drawRect(i4-10, 151, 6, 3, BLACK); //bottom side
tft.drawRect(i4, 152, 3, 3, RED); //bottom side
tft.drawRect(i4-10, 152, 3, 3, BLACK); //bottom side
i4 = i4 + 1;
if (i4 == 440) {i4 = -100;}
//game over
if (lives == 0) {
tft.fillScreen(BLACK);
tft.setTextSize(5);
tft.setCursor(26, 100);
tft.setTextColor(BLUE);
tft.print("Game Over");
delay(1000);
tft.fillScreen(BLACK);
i1 = 0; i2 = -125; i3 = -55; i4 = -100;
lives = 3;
tft.fillCircle(15, 15, 2, WHITE);
tft.fillCircle(25, 15, 2, WHITE);
tft.fillCircle(35, 15, 2, WHITE);
//Stars
tft.drawPixel(150, 180, WHITE);
tft.drawPixel(50, 50, WHITE);
tft.drawPixel(180, 60, WHITE);
tft.drawPixel(40, 210, WHITE);
tft.drawPixel(80, 120, WHITE);
//score
tft.setCursor(120, 10);
tft.setTextSize(2);
tft.setTextColor(BLUE);
tft.print("SCORE");
tft.setCursor(200, 10);
score = 0;
tft.print(score);}
//scoreboard
if (lives == 2) {tft.fillCircle(35, 15, 2, BLACK);}
if (lives == 1) {tft.fillCircle(25, 15, 2, BLACK);
tft.fillCircle(35, 15, 2, BLACK);}
tft.setCursor(200, 10);
if (score != lastScore) {
tft.fillRect(195, 10, 60, 20, BLACK);
tft.print(score);
lastScore = score; }
//collision i1
if (i1 == 273 && y >= 190 && y <= 210) {
collision();
}
//collision invader 2
if (i2 == 273 && y >= 45 && y <= 60){
collision();
}
//collision invader 3
if (i3 == 273 && y >= 95 && y <= 110){
collision();
}
//collision invader 4
if (i4 == 273 && y >= 145 && y <= 160){
collision();
}
//fire
redb = digitalRead(redButton);
Serial.println(redb);
if (redb == 1) {fire = fire + 1; fire2 = fire2 + 1;
fire3 = fire3 + 1; fire4 = fire4 + 1; fire5 = fire5 + 1;
fire6 = fire6 + 1;}
//fire shot 1
if (fire == 1) {fire1a = 1; fireY = y + 5;}
if (fire1a == 1){
tft.drawRect(fireX, fireY, 3, 1, WHITE);
tft.drawRect(fireX+3, fireY-8, 3, 15, BLACK);
fireX = fireX - 1;
fire1b = fire1b + 1;}
if (fire1b == 120) {tft.fillRect(fireX, fireY, 4, 1, BLACK);
tft.fillRect(150, 30, 8, 210, BLACK);
//tft.fillRect(152, 30, 121, 210, BLACK);
tft.drawPixel(180, 60, WHITE);
tft.drawPixel(40, 210, WHITE);
fire1a = 0; fireX = 273; fire = 0; fire1b = 0;}
//fire shot one hits i1
if (fireX-1 == i1 && fireY >= 198 && fireY <= 202) {
tft.fillRect(i1-10, 198, 20, 10, BLACK);
score = score + 1000; i1 = 0;}
if (fireX == i1 && fireY >= 198 && fireY <= 202) {
tft.fillRect(i1-10, 198, 20, 10, BLACK);
score = score + 1000; i1 = 0;}
//fire shot 1 hits i2
if (fireX-1 == i2 && fireY >= 48 && fireY <= 52) {
tft.fillRect(i2-10, 48, 20, 10, BLACK);
score = score + 1000; i2 = 0;}
if (fireX == i2 && fireY >= 48 && fireY <= 52) {
tft.fillRect(i2-10, 48, 20, 10, BLACK);
score = score + 1000; i2 = 0;}
//fire shot 1 hits i3
if (fireX-1 == i3 && fireY >= 98 && fireY <= 102) {
tft.fillRect(i3-10, 98, 20, 10, BLACK);
score = score + 1000; i3 = 0;}
if (fireX == i3 && fireY >= 98 && fireY <= 102) {
tft.fillRect(i3-10, 98, 20, 10, BLACK);
score = score + 1000; i3 = 0;}
//fire shot 1 hits i4
if (fireX-1 == i4 && fireY >= 148 && fireY <= 152) {
tft.fillRect(i4-10, 148, 20, 10, BLACK);
score = score + 1000; i4 = 0;}
if (fireX == i4 && fireY >= 148 && fireY <= 152) {
tft.fillRect(i4-10, 148, 20, 10, BLACK);
score = score + 1000; i4 = 0;}
//fire shot 2
if (fire2 == 20) {fire2a = 1; fireY2 = y + 5;}
if (fire2a == 1){
tft.drawRect(fireX2, fireY2, 3, 1, WHITE);
tft.drawRect(fireX2+3, fireY2-5, 3, 10, BLACK);
fireX2 = fireX2 - 1;
fire2b = fire2b + 1;
}
if (fire2b == 120) {tft.fillRect(fireX2, fireY2, 4, 1, BLACK);
fire2a = 0; fireX2 = 273; fire2 = 0; fire2b = 0;}
//fire shot 2 hits i1
if (fireX2-1 == i1 && fireY2 >= 198 && fireY2 <= 202) {
tft.fillRect(i1-10, 198, 20, 10, BLACK);
score = score + 1000; i1 = 0;}
if (fireX2 == i1 && fireY2 >= 198 && fireY2 <= 202) {
tft.fillRect(i1-10, 198, 20, 10, BLACK);
score = score + 1000; i1 = 0;}
//fire shot 2 hits i2
if (fireX2-1 == i2 && fireY2 >= 48 && fireY2 <= 52) {
tft.fillRect(i2-10, 48, 20, 10, BLACK);
score = score + 1000; i2 = 0;}
if (fireX2 == i2 && fireY2 >= 48 && fireY2 <= 52) {
tft.fillRect(i2-10, 48, 20, 10, BLACK);
score = score + 1000; i2 = 0;}
//fire shot 2 hits i3
if (fireX2-1 == i3 && fireY2 >= 98 && fireY2 <= 102) {
tft.fillRect(i3-10, 98, 20, 10, BLACK);
score = score + 1000; i3 = 0;}
if (fireX2 == i3 && fireY2 >= 98 && fireY2 <= 102) {
tft.fillRect(i3-10, 98, 20, 10, BLACK);
score = score + 1000; i3 = 0;}
//fire shot 2 hits i4
if (fireX2-1 == i4 && fireY2 >= 148 && fireY2 <= 152) {
tft.fillRect(i4-10, 148, 20, 10, BLACK);
score = score + 1000; i4 = 0;}
if (fireX2 == i4 && fireY2 >= 148 && fireY2 <= 152) {
tft.fillRect(i4-10, 148, 20, 10, BLACK);
score = score + 1000; i4 = 0;}
//fire shot 3
if (fire3 == 40) {fire3a = 1; fireY3 = y + 5;}
if (fire3a == 1){
tft.drawRect(fireX3, fireY3, 3, 1, WHITE);
tft.drawRect(fireX3+3, fireY3-5, 3, 10, BLACK);
fireX3 = fireX3 - 1;
fire3b = fire3b + 1;
}
if (fire3b == 120) {tft.fillRect(fireX3, fireY3, 4, 1, BLACK);
fire3a = 0; fireX3 = 273; fire3 = 0; fire3b = 0;}
//fire shot 3 hits i1
if (fireX3-1 == i1 && fireY3 >= 198 && fireY3 <= 202) {
tft.fillRect(i1-10, 198, 20, 10, BLACK);
score = score + 1000; i1 = 0;}
if (fireX3 == i1 && fireY3 >= 198 && fireY3 <= 202) {
tft.fillRect(i1-10, 198, 20, 10, BLACK);
score = score + 1000; i1 = 0;}
//fire shot 3 hits i2
if (fireX3-1 == i2 && fireY3 >= 48 && fireY3 <= 52) {
tft.fillRect(i2-10, 48, 20, 10, BLACK);
score = score + 1000; i2 = 0;}
if (fireX3 == i2 && fireY3 >= 48 && fireY3 <= 52) {
tft.fillRect(i2-10, 48, 20, 10, BLACK);
score = score + 1000; i2 = 0;}
//fire shot 3 hits i3
if (fireX3-1 == i3 && fireY3 >= 98 && fireY3 <= 102) {
tft.fillRect(i3-10, 98, 20, 10, BLACK);
score = score + 1000; i3 = 0;}
if (fireX3 == i3 && fireY3 >= 98 && fireY3 <= 102) {
tft.fillRect(i3-10, 98, 20, 10, BLACK);
score = score + 1000; i3 = 0;}
//fire shot 3 hits i4
if (fireX3-1 == i4 && fireY3 >= 148 && fireY3 <= 152) {
tft.fillRect(i4-10, 148, 20, 10, BLACK);
score = score + 1000; i4 = 0;}
if (fireX3 == i4 && fireY3 >= 148 && fireY3 <= 152) {
tft.fillRect(i4-10, 148, 20, 10, BLACK);
score = score + 1000; i4 = 0;}
//fire shot 4
if (fire4 == 60) {fire4a = 1; fireY4 = y + 5;}
if (fire4a == 1){
tft.drawRect(fireX4, fireY4, 3, 1, WHITE);
tft.drawRect(fireX4+3, fireY4-5, 3, 10, BLACK);
fireX4 = fireX4 - 1;
fire4b = fire4b + 1;
}
if (fire4b == 120) {tft.fillRect(fireX4, fireY4, 4, 1, BLACK);
fire4a = 0; fireX4 = 273; fire4 = 0; fire4b = 0;}
//fire shot 4 hits i1
if (fireX4-1 == i1 && fireY4 >= 198 && fireY4 <= 202) {
tft.fillRect(i1-10, 198, 20, 10, BLACK);
score = score + 1000; i1 = 0;}
if (fireX4 == i1 && fireY4 >= 198 && fireY4 <= 202) {
tft.fillRect(i1-10, 198, 20, 10, BLACK);
score = score + 1000; i1 = 0;}
//fire shot 4 hits i2
if (fireX4-1 == i2 && fireY4 >= 48 && fireY4 <= 52) {
tft.fillRect(i2-10, 48, 20, 10, BLACK);
score = score + 1000; i2 = 0;}
if (fireX4 == i2 && fireY4 >= 48 && fireY4 <= 52) {
tft.fillRect(i2-10, 48, 20, 10, BLACK);
score = score + 1000; i2 = 0;}
//fire shot 4 hits i3
if (fireX4-1 == i3 && fireY4 >= 98 && fireY4 <= 102) {
tft.fillRect(i3-10, 98, 20, 10, BLACK);
score = score + 1000; i3 = 0;}
if (fireX4 == i3 && fireY4 >= 98 && fireY4 <= 102) {
tft.fillRect(i3-10, 98, 20, 10, BLACK);
score = score + 1000; i3 = 0;}
//fire shot 4 hits i4
if (fireX4-1 == i4 && fireY4 >= 148 && fireY4 <= 152) {
tft.fillRect(i4-10, 148, 20, 10, BLACK);
score = score + 1000; i4 = 0;}
if (fireX4 == i4 && fireY4 >= 148 && fireY4 <= 152) {
tft.fillRect(i4-10, 148, 20, 10, BLACK);
score = score + 1000; i4 = 0;}
//fire shot 5
if (fire5 == 80) {fire5a = 1; fireY5 = y + 5;}
if (fire5a == 1){
tft.drawRect(fireX5, fireY5, 3, 1, WHITE);
tft.drawRect(fireX5+3, fireY5-5, 3, 10, BLACK);
fireX5 = fireX5 - 1;
fire5b = fire5b + 1;
}
if (fire5b == 120) {tft.fillRect(fireX5, fireY5, 4, 1, BLACK);
fire5a = 0; fireX5 = 273; fire5 = 0; fire5b = 0;}
//fire shot 5 hits i1
if (fireX5-1 == i1 && fireY5 >= 198 && fireY5 <= 202) {
tft.fillRect(i1-10, 198, 20, 10, BLACK);
score = score + 1000; i1 = 0;}
if (fireX5 == i1 && fireY5 >= 198 && fireY5 <= 202) {
tft.fillRect(i1-10, 198, 20, 10, BLACK);
score = score + 1000; i1 = 0;}
//fire shot 5 hits i2
if (fireX5-1 == i2 && fireY5 >= 48 && fireY5 <= 52) {
tft.fillRect(i2-10, 48, 20, 10, BLACK);
score = score + 1000; i2 = 0;}
if (fireX5 == i2 && fireY5 >= 48 && fireY5 <= 52) {
tft.fillRect(i2-10, 48, 20, 10, BLACK);
score = score + 1000; i2 = 0;}
//fire shot 5 hits i3
if (fireX5-1 == i3 && fireY5 >= 98 && fireY5 <= 102) {
tft.fillRect(i3-10, 98, 20, 10, BLACK);
score = score + 1000; i3 = 0;}
if (fireX5 == i3 && fireY5 >= 98 && fireY5 <= 102) {
tft.fillRect(i3-10, 98, 20, 10, BLACK);
score = score + 1000; i3 = 0;}
//fire shot 5 hits i4
if (fireX5-1 == i4 && fireY5 >= 148 && fireY5 <= 152) {
tft.fillRect(i4-10, 148, 20, 10, BLACK);
score = score + 1000; i4 = 0;}
if (fireX5 == i4 && fireY5 >= 148 && fireY5 <= 152) {
tft.fillRect(i4-10, 148, 20, 10, BLACK);
score = score + 1000; i4 = 0;}
}
Well anyways you get the picture, lol
The Stylib Files
This example uses two CSS files from the Stylib CSS library
The XHTML markup file is called
