01_03_spacebase/index.html at master · hfgcoding/01_03_spacebase · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>SPACE INVADERS</title>
  <style>
  	pre {
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  -webkit-transform: translate(-50%, -50%);
	  transform: translate(-50%, -50%);
	  border: 1px solid gray;
	}

	body {
		color: white;
		background-color: black;
	}
  </style>
</head>

<body>
  <pre id="console">
  	<!-- Hier landet später der Output aus Javascript -->
  </pre>

  <script>
    let renderStr = "";
    let rows = 50;
    let cols = 140;
    let cnt = 0;
    let spaceshipPos = Math.round(cols / 2);
    let currentBullets = [];
    let invaders = [];
    let obstacles = [];

	/*
	*	SPIELELOGIK
	*/
	//Kugel abfeuern
	function newGame() {
		//TODO Punktestände

		//TODO Invaders erzeugen und in Array (invaders) schreiben damit sie gerendet werden können

		//Obstacles erzeugen
		obstacles.push({x: Math.round(cols/2)-5,
						y: rows-10,
						width: 10,
						height:3,
						char: "*" })
	}

	function fireBullet() {
		currentBullets.push({x: spaceshipPos+3, y: rows-4});
	}


	/*
	 *	HELFERFUNKTIONEN
	 */
	//Characters in String editieren
	function setCharsAt(str,index,chr) {
		if(index > str.length-1) return str;
		return str.substr(0,index) + chr + str.substr(index+chr.length);
	}

	//X/Y-Wert in fortlaufende String-Position umwandeln
	function xyToStringPos(posX, posY) {
		//Zusätzliche Characters wegen Zeilenumbrüchen
		let rowOffset = posY;
		//Position im Gesamtstring, (AnzahlZeilen/YPos+i)*ZeichenProZeile plus rowOffset plus momentan gezeichnete Zeile des Ships
		let posInString = posY*cols+rowOffset+posX;
		return posInString;
	}

	//Spieler-Interaktionen verschicken
	document.addEventListener('keydown', (event) => {
	  const keyCode = event.keyCode;

	  if(keyCode === 37) {
	  	//Linke Pfeiltaste - Spaceship nach links bewegen
	  	spaceshipPos = Math.max(0, spaceshipPos-1);
	  } else if(keyCode === 39) {
	  	//Rechte Pfeiltaste - Spaceship nach rechts bewegen
	  	spaceshipPos = Math.min(cols-7, spaceshipPos+1);
	  } else if(keyCode === 32) {
	  	//Leertase - Feuer!
	  	fireBullet();
	  }
	}, false);


	/*
	* RENDERFUNKTIONEN
	*/
	function renderBackground(rows, cols) {
		//console.log("render "+cnt)
		let str = ""
		for (var i = 0; i < rows; i++) {
			for (var j = 0; j < cols; j++) {
				if(i == cnt + Math.round(Math.random()*20)) str += "`"
				else str += " "
			}
			str += "\n"
		}
		cnt++;
		if(cnt > rows) cnt = 0;
		return str;
	}

	function renderSpaceship(posX, posY) {
		//Spaceship-Array
		let spaceship = ["   #   ",
						 "#######",
						 "#######"]

		for (var i = 0; i < spaceship.length; i++) {
			//Zeilenweise in String schreiben
			renderStr = setCharsAt(renderStr,xyToStringPos(posX, posY+i),spaceship[i]);
		}
	}

	function renderObstacles() {
		obstacles.forEach((obstacle) => {
			for (var i = 0; i < obstacle.height; i++) {
				//Zeilenweise in String schreiben
				renderStr = setCharsAt(renderStr,xyToStringPos(obstacle.x, obstacle.y+i),obstacle.char.repeat(obstacle.width));
			}
		});
	}

	function renderBullets() {
		//TODO: Prüfen ob eine Kugel einen Invader oder ein Obstacle trifft, wenn ja Aktion auslösen

		//Kugeln entfernen die am oberen Rand angekommen sind ohne Treffer
		currentBullets = currentBullets.filter(bullet => bullet.y > 1);
		//Kugeln einen Schritt weiter bewegen, dann rendern
		currentBullets.forEach((bullet) => {
			bullet.y -= 1;
			renderStr = setCharsAt(renderStr,xyToStringPos(bullet.x, bullet.y),"|");
		})
	}

	function renderInvaders(invader, pos) {
		//TODO Invaders rendern

	}


	//Hauptrenderfunktion
	function render() {
		//Render Background
		renderStr = renderBackground(rows,cols);

		//Render Obstacle
		renderObstacles();

		//Render Spaceship
		renderSpaceship(spaceshipPos, rows-3, renderStr);

		//Render Invaders
		renderInvaders(123456, 0, renderStr);

		//Render Bullets
		renderBullets(renderStr);

		//Gesamtergebnis anzeigen
		document.getElementById("console").innerText = renderStr;
	}

	//Es geht los - alle 40 Millisekunden rendern
	newGame();
	setInterval(render, 40)
  </script>
</body>
</html>