Einführung

Nach einem intesiven Einführungskurs mit mehreren kleinen Übungen wagte Ich mich an die Semesteraufgabe. Aufgabe war es, ein funktionierendes Spiel für zwei Spieler zu programmieren.Das Spielprinzip war frei wählbar. Nach einer Ideenfindungsphase und Rücksprache mit unserem Dozenten wurde eine aus drei Spielideen favorisiert und als „machbar“ eingestuft.

Konzepte

Spielprinzip in einem Satz:

Spieler 1 generiert Buchstaben,denen Spieler 2 ausweichen muss.

Erster Programmierversuch ohne grafischen Anspruch

Erklärung:

Zu sehen ist die Spielfläche.Oben ist die Stoppuhr,die die verbleibende Spielzeit anzeigt.In der Mitte ist der Spieler2,steuerbar mit Pfeiltasten innerhalb der gesamten Spielfläche.Unten links ist ein „Buchstabe“, ein Element gesteuert von Spieler 1, den Spieler 2 ausweicht.

Spielkonzept vereinfacht

Wie im folgenden Bild zu sehen,hab ich das Spielprinzip etwas verändert.

Erklärung: Rote Buchstaben und Zahlen bewegen sich von oben nach unten durch Spielfläche. Diese werden vom Computer automatisch generiert und bewegt.

Spieler 1 (weißer Quader mit A) sammelt Buchstaben ein,Spieler 2 sammelt Zahlen ein.

Ganz unten ist der Spielstand zu sehen.

Grafische Überarbeitung = finale Version

Spielbedienung

p5.js CODE (sharing is caring)

//ARRAY 1 var nums = ['A','B','C','D','E','F']

//ARRAY 2 var zahl = ['1','2','3','4','5','6']

//ARRAY 3 var zähler =[2,3]

//ARRAY 4

var zahlposition = [150,200,250,300]

//SPIELFLÄCHE

var hintergrundfarbe='#6658B4'

//VARIABLE FALLGESCHWINDIGKEIT var yspeed=1

//VARIABLEN SPIELER MAUS var xspielermaus var yspielermaus var spielermauswidth=40 var spielermausheight=40 var spielermausfarbe='#2ECCFA' var spielermausindexfarbe=250

//VARIABLEN SPIELER TASTEN

var xspielertast=250 var yspielertast=400 var spielertastspeed=4 var spielertastheight=100 var spielertastwidth=100 var spielertastfarbe='#CEF6D8' var spielertastindexfarbe=250

// VARIABLE SPIELZEIT var spielzeit=1000

//VARIABLE POINTS var punktestandplayermaus=0 var punktestandplayertast=0

//VARIABLE INDEX var index=0 //fallender buchstabe var index2=0 //buchstabe in spielerfigur var index3=0 //fallende zahl var index4=0 //zahl in spielerfigur

//VARIABLE STARTPUNKT FALLENDER BUCHSTABE var xtext=100 var ytext=0 var zahlspeed=3 var farbebuchstabe= '#F7FE2E' var großebuchstabe=80

//VARIABLE STARTPUNKT FALLENDE ZAHL var xzahl=300 var yzahl= 0 var buchstabespeed=1 var farbezahl='#FE2EC8' var großezahl=90

//VARIABLE TIMER var timerspeed=0 var timerx= 160 var timery=120 var timerellipsewidth=100 var spielstart= 0

///////////////////////////////////////////////////////////////////////

function setup (){

//SPIELFLÄCHE
createCanvas(350,700)

}

function draw() {

//HINTERGRUNDFARBE////////////////////////// background(hintergrundfarbe) //MAUSZEIGER WEG////////////////////////// noCursor() //TEXT IMMER IN MITTE PLATZIEREN///////////////////////// textAlign(CENTER) ellipseMode(CENTER)

//MOTION//////////////////

fill(farbebuchstabe) //das die farbe von fallender buchstabe stroke(100) //dicke des text textSize(40) //größe des text xtext=xtext+buchstabespeed if (xtext>300){xtext=xtext-300}
ytext=ytext+buchstabespeed // die abwärtsbewegung von dem fallenden buchstaben yzahl=yzahl +zahlspeed
text(nums[index],xtext,ytext) // der text setzt dich zusammen aus einem element aus der liste //nums //,also ein buchstabe aus dem alphabet,der index bestimmt //welcher platz,also welcher buchstabe aufgerufen wird fill(farbezahl)

noStroke()

text(zahl[index3],xzahl,yzahl)

yzahl=yzahl + yspeed //bewegung von fallender zahl

if (ytext>windowHeight){ytext=0} //das ist sozusagen der reset der abwärtsbewegung des buchstabens if (yzahl>windowHeight){yzahl=0} //das ist sozusagen der reset der abwärtsbewegung der zahl

//KOLLISON_SPIELERMAUS//////////////////////////////////////////////////////////////////

let d = dist(xspielermaus+spielermauswidth/2,yspielermaus+spielermausheight/2,xtext,ytext) //das ist die Kollision von Buchstabe und Spieler

if (d<=(spielermausheight||spielermauswidth)&& index==index2) //wenn distanz kleiner als ..... && beide buchstaben gleich //sind,der fallende buchstabe und der in der spielerfigur,dann wird fallender
//buchstabe nach oben zurückgesetzt {ytext=0} //

if (d<=(spielermausheight||spielermauswidth)&& index==index2) //habs nicht anders hinbekommen,als das doppelt zu schreiben {punktestandplayermaus++} // wenn das selbe wie oben eintrifft,dann gabs ne kollision also bekommt //der spieler einen punkt

//KOLLISON_SPIELERTASTATUR//////////////////////////////////////////////////////////////////

let d2 = dist(xspielertast+spielertastwidth/2,yspielertast+spielertastheight/2,xzahl,yzahl) //das ist die Kollision von zahl und Spieler

if (d2<=(spielertastheight||spielertastwidth)&& index3==index4) //wenn distanz kleiner als ..... && beide zahlen gleich //sind,die fallende zahl und der in der spielerfigur,dann wird fallender
//zahl nach oben zurückgesetzt {yzahl=0} //

if (d2<=(spielertastheight||spielertastwidth)&& index3==index4) //habs nicht anders hinbekommen,als das doppelt zu schreiben {punktestandplayertast++} // wenn das selbe wie oben eintrifft,dann gabs ne kollision also bekommt //der spieler einen punkt

//CONTROL SPIELERMAUS ////////////////////////////////////////////////////////////////

fill(spielermausfarbe) // farbe von alles was drunterist

xspielermaus=mouseX // hier die steuerung und die darstellung des Spielers mit der Maus yspielermaus=mouseY // rect(xspielermaus,yspielermaus,spielermauswidth,spielermausheight) // fill(hintergrundfarbe) textSize(50); text(nums[index2],xspielermaus+20,yspielermaus+42) // buchstabe im rechteck

// CONTROL SPIELERTAST///////////////////////////////// fill(spielertastfarbe) if (keyIsDown(39)&&xspielertast<windowWidth){xspielertast=xspielertast+spielertastspeed} if (keyIsDown(37)&&xspielertast>0){xspielertast=xspielertast-spielertastspeed} if (keyIsDown(40)&&yspielertast<windowHeight){yspielertast=yspielertast+spielertastspeed} if (keyIsDown(38)&&yspielertast>0){yspielertast=yspielertast-spielertastspeed}

ellipse(xspielertast,yspielertast,spielertastwidth,spielertastheight) fill(hintergrundfarbe) textSize(120) text(zahl[index4],xspielertast,yspielertast+40)

//TIMER///////////////////////////////////////////////////////////////////

if (punktestandplayermaus==10||punktestandplayertast==10){noLoop(); //NACH ABLAUF DER ZEIT KEIN DURCHLAUF MEHR = EINFRIEREN }

//POINTS////////////////////////////////////////////////////////////////// fill(250) text(punktestandplayermaus,70,600) stroke(250) line(170,630,170,500) noStroke() text(punktestandplayertast,260,600)

//INDEX///////////////////////////////////////////////////////////////////

if (index>5){index=0} //eine loop funktion.... index if (index2>5){index2=0} //eine loop funktion.... index

if (index3>5){index3=0}                                      //eine loop funktion.... index
if (index4>5){index4=0}                                      //eine loop funktion.... index 

if (ytext==0||ytext==50||ytext==100||ytext==350){index=index+random(zähler)                            //hier ein array gebastelt ,damit nur gerade  

} //zahlen aufgerufen werden,hab //die funktion dafür nicht parat if (yzahl==0||yzahl==50||yzahl==100||yzahl==350){index3=index3+random(zähler) //hier ein array gebastelt ,damit nur gerade
} //zahlen aufgerufen werden,hab //die funktion dafür nicht parat }

function mouseClicked() { //index2 ist die zahl des buchstabens im mausspieler index2 = index2 + 1; //wenn maus geklickt wird,wird aufaddiert,das heißt buchstabe ändert sich

}

function keyReleased(){ index4=index4+1 }

/////////////////////////////////////////////////////////////////////////////////