4 Übung: Tic Tac Toe

Bei dieser Aufgabe sollten wir ein Tic Tac Toe spiel gestalten. Wir hatten Creative Freiheit und durften das Spiel neu interpretieren. Hierbei sollten wir mit einem Zufallsfaktor arbeiten, wie z.b. sich verändernde Farben oder Kreise und Kreuze. Hierbei wanden wir zum ersten mal einen Loop an.



let box = [
  {
    w: 100,
    h: 100,
    x: 0,
    y: 0
} ,
  {
    w: 100,
    h: 100,
    x: 0,
    y: 100
} ,
  {
    w: 100,
    h: 100,
    x: 0,
    y: 200
} ,
  {
    w: 100,
    h: 100,
    x: 100,
    y: 0
} ,
  {
    w: 100,
    h: 100,
    x: 200,
    y: 0
} ,
  {
    w: 100,
    h: 100,
    x: 100,
    y: 100
} ,
  {
    w: 100,
    h: 100,
    x: 200,
    y: 200
} ,
  {
    w: 100,
    h: 100,
    x: 200,
    y: 100
} ,
  {
    w: 100,
    h: 100,
    x: 100,
    y: 200
}
];

let r;
let g;
let b;
let a;

let r1;
let g1;
let b1;
let a1;

let x;
let y;


  
function setup() {
    createCanvas(300, 300);
    
    drawBox(box[0]);
    drawBox(box[1]);
    drawBox(box[2]);
    drawBox(box[3]);
    drawBox(box[4]);
    drawBox(box[5]);
    drawBox(box[6]);
    drawBox(box[7]);
    drawBox(box[8]);

  }


function drawBox(box) {
  
  r = random(0,100);
  g = random(0,50);
  b = random(150,255);
  a = random(50,100);

  fill(r, g, b, a);
  stroke(0)
  strokeWeight(0)
  rect(box.x, box.y, box.w, box.h)

// Circles and Crosses
  r1 = random(200,255);
  g1 = random(100,150);
  b1 = random(50,200);
  a1 = random(200,255);
  
  let xSize = random(50,100);
  let ySize = random(50,100);
        
  x = random(width);
  y = random(height);

  stroke(r1, g1, b1, a1)
  strokeWeight(15)
  noFill()
  crossX = line(x+30,y-20,x+85,y-75) + line(x+80,y-20,x+30,y-75)
  circleO = ellipse(x,y, xSize, ySize)
}

function draw() {
  x = x + 0.1;
  if (x > width) {
    x = 0;
  }
  r = random(0,255);
  g = random(0,250);
  b = random(150,255);
  a = random(50,100);
  stroke(r, g, b, a)
  strokeWeight(10)
  circle(50,50,50);
  circle(150,150,50);
  circle(250,250,50);
  
  x = random(width);
  y = random(height);
  
  let s = 'Tic Tac Toe lets go';
  fill(50);
  textFont('Times New Roman');
  textSize(20);
  text(s, 70, 80, 200, 80);
  
  let Tic = 'Tic Tac Toe';
  fill(50);
  textFont('Times New Roman');
  textSize(50);
  rotate(PI / 10)
  text(Tic, x+0,y+100,x+300,y+80);
}

function mousePressed() {
  loop();
}

function mouseReleased() {
  noLoop();
}