Make sure you turn on orientation lock on your iPhone or Android device. */

​

let alpha = 0,

  beta = 0,

  gamma = 0; // gyroscope variables

let x = 0.0,

  y = 0.0,

  z = 0.0; // accelerometer variables

let bunnyImage;

let xPosition = 0;

let yPosition = 0;

let playerWidth = 50;

let playerHeight = 50;

​

let blocks = [];

let blocksL = [];

let blocksR = [];

let numBlocks = 10;

let blockHeight = 0;

let speed = 4;

let levelType = 0;

let blockSpace = 0;

​

let state = 0;

let d = 0;

let font;

​

let health = 5;

let score = 0;

let highScore = 0;

let ifHit = 0;

​

let qrImg, phoneImg, pileImg, playImg, replayImg, snowballImg, bgImg;

​

function preload() {

  snowballImg = loadImage("assets/snowball.gif");

  bgImg = loadImage("assets/bg.png");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  //bunnyImage = loadImage("assets/bunny.jpg");

  //imageMode(CENTER);

  //rectMode(CENTER);

  //ellipseMode(CENTER);

  createBlocks();

  font = loadFont("assets/SuperBoys.ttf");

​

  qrImg = loadImage("assets/qr.PNG");

  phoneImg = loadImage("assets/phone.png");

  pileImg = loadImage("assets/pile.png");

  playImg = loadImage("assets/play.png");

  replayImg = loadImage("assets/replay.png");

}

​

function draw() {

  background(136, 178, 219);

​

  image(bgImg, 0, 0, width, height);

​

  switch (state) {

    case 0: //title

      image(qrImg, 0, 0, width / 5, width / 5);

      push();

      textFont(font);

      fill("white");

      stroke(136, 178, 219);

      strokeWeight(2);

      textSize(20);

      text(

        "Gyro required to play. Please scan on supported device.",

        10 + width / 5,

        5,

        width / 2,

        100

      );

      strokeWeight(10);

      textAlign(CENTER);

      textSize(50);

      text("SNOWBALL", width / 2, height / 4);

      text("FALL", width / 2, height / 4 + 38);

      pop();

​

      // the map command !!!!

      // takes your variable and maps it from range 1 to range 2

      // map(yourVar, range1_x, range1_y, range2_x, range2_y) ;

      xPosition = map(gamma, -60, 60, 0, width);

      //yPosition = map(beta, -30, 30, 0, height);

      yPosition = height - 80;

​

      push(); // before you use translate, rotate, or scale commands, push and then pop after

​

      translate(xPosition, yPosition); // move everything over by x, y

​

      rotate(radians(alpha)); // rotate the bunny depending on the alpha intake

​

      image(snowballImg, 0, 0, playerWidth, playerHeight);

      pop();

​

      push();

      imageMode(CENTER);

      //rect(width/2,height/1.5,200,125);

      image(playImg, width / 2, height / 2, 150, 150);

      image(phoneImg, width / 2, height / 2 + 150, 150, 150);

      d = dist(mouseX, mouseY, width / 2, height / 2);

      if (d < 125 && mouseIsPressed) {

        state = 1;

      }

      pop();

      break;

​

    case 1: //game

      //gyroDebug();

      // the map command !!!!

      // takes your variable and maps it from range 1 to range 2

      // map(yourVar, range1_x, range1_y, range2_x, range2_y) ;

      xPosition = map(gamma, -60, 60, 0, width);

      //yPosition = map(beta, -30, 30, 0, height);

      yPosition = height - 80;

​

      push(); // before you use translate, rotate, or scale commands, push and then pop after

​

      translate(xPosition, yPosition); // move everything over by x, y

​

      rotate(radians(alpha)); // rotate the bunny depending on the alpha intake

      image(snowballImg, 0, 0, playerWidth, playerHeight);

      pop();

​

      if (levelType < 3) {

        for (let i = 0; i < blocks.length; i++) {

          blocks[i].display();

          blocks[i].move();

​

          if (

            blocks[i].pos.y > height ||

            (blocks[i].pos.x + blocks[i].width >= xPosition &&

              blocks[i].pos.x <= xPosition + playerWidth &&

              blocks[i].pos.y + blocks[i].height >= yPosition &&

              blocks[i].pos.y <= yPosition + playerHeight)

          ) {

            if (

              blocks[i].pos.x + blocks[i].width >= xPosition &&

              blocks[i].pos.x <= xPosition + playerWidth &&

              blocks[i].pos.y + blocks[i].height >= yPosition &&

              blocks[i].pos.y <= yPosition + playerHeight

            ) {

              health = health - 1;

            }

            blocks.splice(i, 1);

          }

​

          if (blocks.length == 0) {

            levelType = int(random(0, 4));

            createBlocks();

            score = score + 1;

            if (score % 5 == 0) {

              speed = speed + 1;

            }

            //print("speed: " +speed +", level Type: " +levelType +" score: " +score +" Health: " +health);

          }

        }

      } else {

        for (let i = 0; i < blocksL.length; i++) {

          blocksL[i].display();

          blocksL[i].move();

​

          if (

            blocksL[i].pos.y > height ||

            (blocksL[i].pos.x + blocksL[i].width >= xPosition &&

              blocksL[i].pos.x <= xPosition + playerWidth &&

              blocksL[i].pos.y + blocksL[i].height >= yPosition &&

              blocksL[i].pos.y <= yPosition + playerHeight)

          ) {

            if (

              blocksL[i].pos.x + blocksL[i].width >= xPosition &&

              blocksL[i].pos.x <= xPosition + playerWidth &&

              blocksL[i].pos.y + blocksL[i].height >= yPosition &&

              blocksL[i].pos.y <= yPosition + playerHeight

            ) {

              health = health - 1;

            }

            blocksL.splice(i, 1);

          }

        }

​

        for (let i = 0; i < blocksR.length; i++) {

          blocksR[i].display();

          blocksR[i].move();

​

          if (

            blocksR[i].pos.y > height ||

            (blocksR[i].pos.x + blocksR[i].width >= xPosition &&

              blocksR[i].pos.x <= xPosition + playerWidth &&

              blocksR[i].pos.y + blocksR[i].height >= yPosition &&

              blocksR[i].pos.y <= yPosition + playerHeight)

          ) {

            if (

              blocksR[i].pos.x + blocksR[i].width >= xPosition &&

              blocksR[i].pos.x <= xPosition + playerWidth &&

              blocksR[i].pos.y + blocksR[i].height >= yPosition &&

              blocksR[i].pos.y <= yPosition + playerHeight

            ) {

              health = health - 1;

            }

            blocksR.splice(i, 1);

          }

        }

​

        if (blocksL.length == 0 && blocksR.length == 0) {

          levelType = int(random(0, 4));

          createBlocks();

          score = score + 1;

          if (score % 5 == 0) {

            speed = speed + 1;

          }

          //print("speed: " +speed +", level Type: " +levelType +" score: " +score +" Health: " +health);

        }

      }

      if (health < 1) state = 2;

      break;

​

    case 2: //game over

      textFont(font);

      fill(255, 223, 107);

      stroke(136, 178, 219);

      strokeWeight(2);

      textSize(50);

      textAlign(CENTER);

​

      if (score >= highScore) {

        highScore = score;

        text("NEW HIGH SCORE!!!", width / 2, 150);

      }

      textSize(40);

      fill("white");

      text("GAME OVER", width / 2, 100);

      text("Score: " + score, width / 2, 250);

      text("High Score: " + highScore, width / 2, 200);

      push();

      imageMode(CENTER);

      //rect(width/2,height/1.5,200,125);

      image(replayImg, width / 2, height / 2, 150, 150);

      d = dist(mouseX, mouseY, width / 2, height / 2);

      if (d < 125 && mouseIsPressed) {

        speed = 4;

        health = 5;

        score = 0;

        blocks = [];

        blocksL = [];

        blocksR = [];

        createBlocks();

        state = 1;

      }

      pop();

      break;

  }

}

​

// Read in gyroscope data

window.addEventListener("deviceorientation", function (e) {

  alpha = e.alpha;

  beta = e.beta;

  gamma = e.gamma;

});

​

// Read in accelerometer data

window.addEventListener("devicemotion", function (e) {

  // get accelerometer values

  x = e.acceleration.x;

  y = e.acceleration.y;

  z = e.acceleration.z;

});

​

function gyroDebug() {

  // Text commands that display debugging data

  textAlign(LEFT);

  textSize(20);

  fill("black");

  text("orientation data:", 25, 25);

  textSize(15);

  text("alpha: " + alpha, 25, 50);

  text("beta: " + beta, 25, 70);

  text("gamma: " + gamma, 25, 90);

  textSize(20);

  text("acceleration data:", 25, 125);

  textSize(15);

  text("x = " + x.toFixed(2), 25, 150); // .toFixed means just show (x) decimal places

  text("y = " + y.toFixed(2), 25, 170);

  text("z = " + z.toFixed(4), 25, 190);

}

​

function createBlocks() {

  if (levelType == 0) {

    //creates level type 1

    numBlocks = 10;

    for (let i = 0; i < numBlocks; i++) {

      blockHeight = i * 200 + 25 - 2000;

      //blocks[i] = new Block();

      blocks.push(new ladderBlock());

    }

  } else if (levelType == 1) {

    //creates level type 2

    blockSpace = 0;

    numBlocks = 20;

    for (let i = 0; i < numBlocks; i++) {

      blockHeight = i * 50 + 25 - 1100;

      blockSpace = blockSpace + 10;

      //blocks[i] = new Block();

      blocks.push(new tunnelBlockL());

    }

  } else if (levelType == 2) {

    //creates level type 2

    blockSpace = 0;

    numBlocks = 20;

    for (let i = 0; i < numBlocks; i++) {

      blockHeight = i * 50 + 25 - 1100;

      blockSpace = blockSpace + 10;

      //blocks[i] = new Block();

      blocks.push(new tunnelBlockR());

    }

  } else if (levelType == 3) {

    //creates level type 2

    blockSpace = 0;

    numBlocks = 20;

    for (let i = 0; i < numBlocks; i++) {

      blockHeight = i * 50 + 25 - 1100;

      blockSpace = blockSpace + 10;

      blocksL.push(new tunnelBlockL());

      blocksR.push(new tunnelBlockR());

    }

  }

}

​

//level types

class ladderBlock {

  constructor() {

    this.randomX = [0, width / 2];

    this.width = windowWidth / 2;

    this.height = 50;

    this.pos = createVector(random(this.randomX), blockHeight);

  }

​

  display() {

    //rect(this.pos.x, this.pos.y, this.width, this.height);

    image(pileImg, this.pos.x, this.pos.y, this.width, this.height);

  }

​

  move() {

    this.pos.y = this.pos.y + speed;

  }

}

​

class tunnelBlockL {

  constructor() {

    this.width = windowWidth / 2;

    this.height = 50;

    this.pos = createVector(0 - blockSpace - 50, blockHeight);

  }

​

  display() {

    //rect(this.pos.x, this.pos.y, this.width, this.height);

    image(pileImg, this.pos.x, this.pos.y, this.width, this.height);

  }

​

  move() {

    this.pos.y = this.pos.y + speed;

  }

}

​

class tunnelBlockR {

  constructor() {

    this.width = windowWidth / 2;

    this.height = 50;

    this.pos = createVector(

      windowWidth + blockSpace - windowWidth / 2 + 50,

      blockHeight

    );

  }

​

  display() {

    //rect(this.pos.x, this.pos.y, this.width, this.height);

    image(pileImg, this.pos.x, this.pos.y, this.width, this.height);

  }

​

  move() {

    this.pos.y = this.pos.y + speed;

  }

}

​