a very simple clicker game created during the classes

a very simple clicker game created during the classes

Georgios Lazaridis
Coding, art, science

p5.js clicker game

The game was developed with one of my students, we learned about gravity, scoring system, game over and restart options, basics of machine learning as well as a nice user experience.

I think the project turned out really well so i am posting it on my blog. The pictures used in the game were found on Flaticon.com and are used under a Creative Commons license, and are a property of Kawaii Lineal Colors.

The project was created on glitch, where is also its repository.

instructions: click on the flowers to make them vanish and get points when they are under the line, don’t let them fall if they do you will loose life and have to start over. Good luck!

Here you can play the little game project:

and here is the full code.

<html>
    <head><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
      <style>body{margin:0px;}</style>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
<script>
//icons are the intelectual property of Kawaii Lineal Color®
// Coding by Ystudio as part of the coding classes project®
let y=0;
let y1 = 0;
let y2 = 0;
let y3=0;
let y4=0;
let score=0;
let life = 1;
let lifeadd=false;
let x = 100;
let x1 = 100;
let x2 = 100;
let x3 = 100;
let x4=100;



function preload() {
  img = loadImage('https://image.flaticon.com/icons/svg/678/678070.svg');
  img1 = loadImage('https://image.flaticon.com/icons/svg/1682/1682267.svg');
  img2 = loadImage('https://image.flaticon.com/icons/svg/284/284807.svg');
 img3 = loadImage('https://image.flaticon.com/icons/svg/284/284827.svg');
  img4 = loadImage('https://image.flaticon.com/icons/svg/284/284817.svg');

  //

}
 function setup (){
  createCanvas(windowWidth,windowHeight);

   y=0;
   y1=0;
   y2=0;
   y3=0;
   y4=0;
  background(89, 89, 255);
  translate(width/2,height/2);






}

function draw(){

  //println(second(),y);
  background(89, 89, 255);
  fill(255);
  noStroke();
  textSize(15);
  text("score: "+score,5,40);
  text("life: "+life,5,20);
  stroke(255);
  line(0,height/2,width,height/2);
  noStroke();


  if(score>5){
  y=y+5;

  }else if(score>10){
   y=y+10 ;
    y1 = y1+5;
  } else if ( score > 15){
   y = y+12;
    y1=y1+7;

  } else if(score>20){
    y=y+9;
    y1=y1+9;
    y3=y3+5;

  } else if (score>30) {
             y = y + 15;
              y1=y1+15;
              y2=y2+15;
      } else if (score>50){
             y = y + 20;
              y1=y1+20;
              y2=y2+20;
              y4=y4+2;
            } else {
             y = y+3;

            }

  if(y>height){
    y=0;

    life = life-1;
  }
  if(y1>height){
    y1=0;

    life = life-1;
  }
  if(y2>height){
    y2=0;

    life = life-1;
  }
  if(y3>height){
    y3=0;

    life = life-1;
  }
  if(y4>height){
    y4=0;

    life = life-1;
  }

 fill(255);
 if(y>height/2){
   fill(251, 4, 156);

 }
 image(img, x, y,100,100);
  //rect(x,y,100,100);
 if (score>5){
   image(img1, x1, y1,100,100);
   y1 = y1+3;
 }
 if (score>10){
   image(img2, x2, y2,100,100);
   y2 = y2+7;
 }
 if (score>20){
   image(img3, x3, y3,100,100);
   y3 = y3+7;
 }if (score>50){
   image(img4, x4, y4,100,100);
   y4 = y4+2;
 }

 life_add();

if(life<=0){
  game_over();
}
}


function life_add(){
  if ((score>10)&&(score%100==0)){
  lifeadd=true;}
 if(lifeadd==true){
  life=life+1;
  score = score+1;
  lifeadd=false;
  }
}

function game_over(){
  background (137, 116, 255);
  image(img, x, y+50,100,100);
  textSize(20);
  y=0;
  y1=0;
  y2=0;
  y3=0;
  y4=0;
  text("you loose, Better luck next time!",width/10,height/2);
  textSize(15);
  text("your score was:"+" "+score,width/10,height/3);

  textSize(15);
  text("click to restart.",width/10,height/2+25);
}

function mousePressed() {

  if ((mouseY>= y)&& (mouseY<=y+100)&&(mouseX >=x||mouseX)&&
(mouseX <=x+100)&&(y>=height/2)){
    y= 0;
    x = random(100,width-100);
    score = score+1;
  }
  if ((mouseY>= y1)&& (mouseY<=y1+100)&&(mouseX >=x1||mouseX)&&
(mouseX <=x1+100)&&(y1>=height/2)){
    y1= 0;
    x1 = random(100,width-100);
    score = score+2;
  }
  if ((mouseY>= y2)&& (mouseY<=y2+100)&&(mouseX >=x2||mouseX)&&
(mouseX <=x2+100)&&(y2>=height/2)){
    y2= 0;
    x2 = random(100,width-100);
    score = score+3;
  }

  if ((mouseY>= y3)&& (mouseY<=y3+100)&&(mouseX >=x3||mouseX)&&
(mouseX <=x3+100)&&(y3>=height/2)){
    y3= 0;
    x3 = random(100,width-100);
    score = score+5;
  }

  if ((mouseY>= y4)&& (mouseY<=y4+100)&&(mouseX >=x4||mouseX)&&
(mouseX <=x4+100)&&(y4>=height/2)){
    y4= 0;
    x4 = random(100,width-100);
    score = score+3;
  }


  if(life<=0){
    life=1;
    score=0;
  }


}



</script>




</head>
<body>

</body>
</html>