Incom ist die Kommunikations-Plattform des Institut für Industrial Design - Hochschule Magdeburg-Stendal

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Make_a_Game // Zahltag.io

Wir programmieren Computerspiele mithilfe der Programmiersprache „JavaScript“ im Fach „Mediale Systeme“.

Quelle: Titelbild; pixabay.com; 10.04.2019

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
}

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

Ein Projekt von

Fachgruppe

Bachelor Industrial Design

Art des Projekts

Bachelor project

Betreuung

Danny Schott Elias Ringler

Zugehöriger Workspace

Mediale Systeme WS18/19

Entstehungszeitraum

WiSe 18 / 19 – SoSe 19

Noch keine Kommentare