-
Notifications
You must be signed in to change notification settings - Fork 0
/
blog.html
495 lines (457 loc) · 35.4 KB
/
blog.html
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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
<!DOCTYPE HTML>
<!--
Prism by TEMPLATED
templated.co @templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html lang="en">
<head>
<!-- Removed Google Analytics :) -->
<title>KaizNike's Home - Blog</title>
<meta charset="utf-8" />
<meta name="description" content="Nick's Blog, early stages, includes a post about the year so far.">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="assets/fa/css/all.css" rel="stylesheet">
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!-- <link rel="shortcut icon" href="assets/imgs/me_nick.ico"> -->
<link rel="icon" type="image/png" href="favicon.png"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="assets/js/scripts.js"></script>
<link rel="stylesheet" href="assets/css/styles.css">
<script src="assets/js/blog.js"></script>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid" style="text-align: center">
<a href="index.html"><i class="fa fa-home" aria-hidden="true"></i>
Home</a>
<a href="projects.html"><i class="fa fa-briefcase" aria-hidden="true"></i>
Projects</a>
<!-- <a><i class="fa fa-book" aria-hidden="true"></i>
Blog</a> -->
<a href="art.html"><i class="fa fa-picture-o" aria-hidden="true"></i>
Art</a>
<a href="#contact"><i class="fa fa-link" aria-hidden="true"></i>
Links</a>
</div>
</nav>
<!-- Banner -->
<section id="banner">
<div class="inner split">
<section>
<h3>KaizNike's Blogs</h3>
<p>Time for my takes.</p>
</section>
<section>
<h4><a href='#2024'>2024</a></h4>
<h4><a href='#2021'>2021</a></h4>
<ul class="contact fa-ul">
<li><a href="#2021-oct">October</a></li>
<li><a href="#2021-feb">February</a></li>
</ul>
</section>
</div>
</section>
<!-- Two -->
<section id="two" class="wrapper style2 alt">
<!--
<ul class="actions special">
<li><a href="#" class="button alt">Ipsum magna tempus</a></li>
</ul>
-->
<div class="inner">
<h3 id="2024">2024</h3>
<div id="2021-sept" class="spotlight">
<div class='image'>
<img src="assets/imgs/AnbyScreenshotTwitter.png" alt="Japanese Twitter artist 安場羊治(Anby) makes their stance on AI discourse. This tweet was discovered as another Japanese artist had their artstyle copied by AI art. Their tweet translated by Google is as follows:'AI had a future where it could be a great help to new manga artists who can't hire assistants by outputting backgrounds that don't require individuality or by creating shortcuts for tones and flat processing, but it looks like that's no longer possible.
If you use AI to make money, not only will you lose credibility as a creator, but you may not even be treated like a person.'">
</div>
<div class="content">
<h3>AI, Art, Copytheft, Law, Order, Code, Privacy, Hacking, and Where We Stand!</h3>
<p>2024 - September, 10: I dropped out of school due to a bevy of emotions and regret that I can't stick to it. This discussion will aim at one of my concerns that made me drop out. Neural network massive language models sitting in data centers hogging electricity and water, constantly needed to make ground move in a 600 Billion dollar industry.</p>
<ul class="actions">
<li><button onclick="show_passage('4')">f(x) = 1</button></li>
</ul>
<div id="4" class="hidden">
<p>
Hi. Let's talk about two videos I saw lately plus more in AI. For some bonus fun, let's get up to speed on this year and happenings...
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/QCcJtTBvSKk?si=u3rzB0O8_Bj8O_aR" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/FEJaYqquDDk?si=1s4-J8Xf6V5fgZdN" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<p>
If I can summarize what I remember from those videos, Mark Zuckerburg is wondering where the AI curve ends and is looking less like an alien. According to <a href="https://www.theglobeandmail.com/business/article-thirsty-data-centres-spring-up-in-water-poor-mexican-town/">other news I read (the globe and mail dot com) about Mexico.</a> These investments in computing are quick to flee the USA and create new Silicon Valleys wherein places that need money, but don't neccessarily have the resources to survive are.
</p>
<br>
<h4>'new Silicon Valleys...' - The data must flow.</h4>
<br>
<p>
In this era, data is everywhere and every social security number of every citizen in the States, Canada, and the United Kingdoms has apparently been leaked. <a href="https://www.pcmag.com/news/hackers-steal-billions-of-social-security-numbers-how-to-protect-yourself"><img src="assets/imgs/hackreport1.png" alt="Article by PC Mag, written by a somewhat Asian man: 'Michael Kan', below is some Social Security cards."></a> Travel through image above to see an article detailing the event in more detail. It is stunning.
<br>
I have brought up three topics, let's degauss it. The first is of twitter and art theft: According to digital trends: <a href="https://www.digitaltrends.com/computing/what-is-grok/">"The model is trained on a mix of web data (with a knowledge cutoff of Q3 2023) and X user data. Currently, Grok the chatbot is powered by the Grok-2 model, which was released in August 2024."</a>, it speaks of their AI grok. I can't really 'grok' what the context is behind @urct's cry, whether the user generated the content on Grok or another platform... If it was generated by Grok, then there's evidence of it using users' art to generate content against their will and against their revenue stream. The post content of @urct's retweet was deleted before I could screenshot, so all I will leave is the @. We are quickly making ourselves obsolete.</p>
<br>
<h4>Planned Obsolesence - The cash must accumulate.</h4>
<br>
<p>
We flought ourselves with high concept concepts like, "simulation theory", "flat earth theory", "theory of everything", "artificial general intelligence", to name some big ones I recall. All the while Earth remains a dangerous place to live and so many crises are visible on the daily. I want art to continue being a valuable path for people, as I would love to follow that path given time. I know I personally have trouble making money from my passions, a lot of my work that I put out is pretty tepid and uninteresting, I am unwilling to make a decent try of things and be let down. Be let down...
<br>
It is pretty scary that we are training these AI to replicate what we do and say, with knowledge of how imperfect we are, we are gods in this era. Our fathers and theirs shaped earth, land, and stone. We shape silicon. What ghosts do we leave as we die? A recent video on Youtube got me wondering that...
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/M-gZuFcEu0E?si=FFUzNBD7_aG-vMLS" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
What legacy do I leave? A support to my family, perhaps, but to the greater world, I was not a footnote, save for what I get to write myself. I made my shrine to my cats on my page, which is more than I'm used to doing to connect my public persona with my private life. Even like vtubers, tho I have posted a lot of details about myself, I keep track of what I say as Kaizar Nike.
</p>
<br>
<h4>I am Kaizar Nike - My public face said.</h4>
<br>
<p>I could stop talking at any point on this blog, but let's cover more of what's on my mind of late. Transgenderism is a wierd wyord. I keep getting disgusted by their scarred bodies, turned on by their genshin transformations, confused by their hatred, infatuated with their works. I keep Shinigami Eyes on me, a interesting plugin. I keep treating red names as problematic and green names as heroes, but then I see those green names saying vile things, and those red names I have trouble taking seriously, but sometimes wisdom pops uot.<br>Today: Nikocado Avocado, Natalie Lawman, Taylor McCue, Brianna Wu, Christian Chandler, these names do not all fit in the same circle of a venn diagram, but are people none the less. So much of our worlds revolve around the icons we see or hate each day.
Today, Nikocado makes a reveal. Yesterday, Brianna Wu speaks. A day before, Taylor makes a crude art of a teenish boy disgusted at a tran's wound of a sex part. Inbetween those times, Natalie freely exudes her history with the games press. At another point Chris gets out of prison for allegdly raping his mother. (Not willing to research that thanks.) These people live in another world to me, some closer than others. Yet it's still Earth; the planet.</p>
<br>
<h4>Summation - Respite for Weary Eyes</h4>
<p>Now that you're up to date with the past, let's talk future. I need cash, so I'm willing to try anything. There's ad space for sale now on this site, but *hint hint*, I won't let intrusive ads on. So what did we learn? What's next? I want to work on my RPG project, been lacking Steam for that. The AI debacle could go all the way to disaster, but I think people will lose money on it just like Crypto, Web-3 and the 3D + AR/VR/XR boom. The disaster I'm thinking of: AI getting outside it's sandbox, could be very terrible to online creatives as they find digital eye time being competed for with bots. Here's a vision from a Google before it's Monopoly hearing:
</p>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/MGt25mv4-2Q?si=17XKnrs_48JWyOJb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<p>Bye.</p>
<br>
<p>Because I didn't upload this in time let's talk the debate. Kamala Harris won decisively in making me not want to vote for her or Trump. Global Warming was a foot note. Harris spoke of a two state Israel/Palestine, but who would accomplish such a deal? Trump offers peace and American strength, Harris offers unity and justice for all, "We are both gun owners, guns aren't going away," Harris said. Transgender and women would be better off under Harris, as Trump wants to leave women's rights to tyrannical states. Trump kept asking what Harris did during her term as vice president and calling them the worst pair to hold office in history of the USA.</p>
<br>
<h4>Global Warming, more like Global boring.</h4>
<p>Calling out my dad here, but he said they didn't make any real mistakes, they talked over each other a lot, and were fighting the hosts. Political drama, and people loved Harris's victory. The <a href="https://www.forbes.com/sites/brucejapsen/2024/09/10/trump-admits-he-has-no-answer-to-obamacare-but-concepts-of-a-plan/">internet (Forbes)</a> <a href="https://x.com/ZFDigiVagrant/status/1833699291099283496">is laughing (Twitter img).</a>
<br>
I am now listening to a Twitter discussion on Spaces, one guy is confused about Roe v Wade. The topic is Trump's refusal to outright say he would veto a Republican led abortion ban. Now they are talking about how reliable the government is, I could keep typing, so I might.
<br>
This space is a tragedy, this Colin Bull guy says girls know the day after if you're pregnant. Thank you guys for discussing women. This is cringe, the topic failed. The time is 11:18 PM Central US. Now they're talking Palestine. This Destin guy is talking about how Harris's anwsers failed for me tonight. John Spencer "@spencerguard", brings up the point that Trump spoke reality of Iran. Now jefe showed up talking shit of Destin. Man Destin is cringe, I love this - thank you for reading. This after debate party is real, they have spent 30 minutes laughing at their dumb discussion. I am watching Adrian try to teach jefe how to talk to people.
<br>
<p>I continue to listen to this, now Adrian is claiming a girl sucks out the blue part of tide pods first, and calls her retarted. What a wonderful guy, I love going to Elon's Twitter. Did you see his Taylor Swift baby making offer? Now back to the space, this Adrian guy has a unworldy fascination with autistic people. Now Michael has arrived at 12:10 with more substance, Harris's $50,000 small business grants. They are sprinkling in this conversation with bits of crypto and deregulation. Some discussion of past cantidates like Rand Paul and Bernie Sanders. Now they're talking of Elon Musk. At 12:48 they're looking at Elon's successes. They are arguing again. I like when the host argues with everybody. This Adrain guy could speak in Audible books. I LOVE MICHAEL BARBOUR! He got kicked and thus it ended.</p>
<br>
<h4>Spaces - Forums of the Heart, rarely mind.</h4>
<p>On to other things: </p>
<a href="https://cohost.org/staff/post/7611443-cohost-to-shut-down"><img src="assets/imgs/cohostfinancialsfinal1.png" alt="Link to Cohost's last financial report, net income is down by double (100%) compared to last month, totalling a 25$ dollar loss in August 2024."></a>
<p>Cohost is going away, I might backup parts of it to my site, including my better old posts. IT's sad, as that place was a haven for the transgender and queer people like myself. I hope a new site can rise and be sustainable in its place. Now time to say goodbye for real, check out my neocities! <a href="https://k4izn1ke-c1ubh0u53.neocities.org/">https://k4izn1ke-c1ubh0u53.neocities.org</a></p>
</div>
</div>
</div>
<!-- Posts from yesteryears -->
<h3 id="2021">2021</h3>
<div id="2021-oct" class="spotlight">
<div class="image">
<img alt="A fledgling tile based adventure game, with ways of showing enemies and yourself on a screen." src="assets/imgs/2DArray.webp">
</div>
<div class="content">
<h3>Teaching the Basics of 2D Array Games, Tilebased</h3>
<p>2021 - October, 27: Everyone wants to make a roguelike, let me show you how to start in HTML, followed by Godot. == Under Construction ==<br>
</p>
<ul class="actions">
<li><button onclick="show_passage('2')">Learn!</button></li>
</ul>
<p id="2" class="hidden">Hello! <code>#Let's get started, this section features code snippets!</code><br/>
So you want to make a roguelike? Or any other game that uses a 2D Array, lets get looking at one.<br/><code>var Array = [["player", 0, "kobold"],[0,0,"kobold"],["kobold",0,"ogre"]]</code> Yes that's a 2D array and that should work in both JavaScript and GDScript, my tools of choice. If arrays aren't in the language you're using, go ahead and implement them. <a href="https://en.wikipedia.org/wiki/Array_programming">You can learn from a source like Wikipedia if you have the dire need to develop your own iteration of the array.</a> So now that we have an array, feel free to copy that one, we need to get something on screen, I will show you in JavaScript first and then more generally.<br/> So let's review our goals, we need to cover "player", the number 0, "kobold", and even an "ogre". My task for you now is to get those assets ready, but if you want to be simple, use "@", "0", "k", and "O". Best to capitalize the ogre as it is strong. As for the @ symbol, well some programmer used to represent the player and we've been using it ever since.<br/>Now we need to display it, and I hope you have those assets ready and an IDE with HTML/CSS/JavaScript capability, cuz we're going in hot!<br/><textarea style="color: #e83e8c" readonly='true'>function drawMap() {
for (var i = 0; i < mapArray.length; i++) {
for (var j = 0; j < mapArray[i].length; j++) {
// YOUR NEXT STEP
}</textarea><br/>This will do the brute labor, it will iterate through the length of <code>mapArray</code> so set <code>Array</code> to be <code>mapArray</code> best not to be too generic! If you didn't know weHave a specialWay of naming variables, but you can really name it anything. I mean that! As long as what you choose doesn't cause errors that is! But that's basics.<br/>Next!<br/><br/><textarea style="color: #e83e8c" readonly='true'>if(mapArray[i][j] == 0) {
$('#containerMap').append(tileGrass.advDetail);
}</textarea> I hope you have tile grass, cuz 0 is next! I just threw some new curveballs at you. You need JQuery for this, it didn't work well without it for me. I included <code>tileGrass.advDetail</code> as a dictionary containing the term "advDetail" and that looks like this! <textarea style="color: #e83e8c" readonly="true">tilesMain = [
tileGrass = {id: 0, name: "Grass", advDetail: '<div class="grass"></div>'}]</textarea> So we're using jQuery to append a class, but to what? Yes you need a div called <textarea style="color: #e83e8c" readonly='true'><div id="containerMap">
<!-- example tile for testing purposes, containerMap should be empty when first loaded. -->
<!-- <div class="grass"></div> -->
</div></textarea> Yes that's my comment there, if you've gotten this far, maybe you want to review my first major <a href="https://github.com/KaizNike/Beast-Kings/blob/master/Scripts/adventurescript.js">failed project.</a> If you click that, you agree to learn from my mistakes! Also copy this code over to your IDE to get a better typecasing, yes even this tutorial is under construction! You can uncomment that div to get the grass to display! But wait we don't have a grass class! (that rhymed!)<textarea style="color: #e83e8c" readonly='true'>/* example of a single tile */
.grass {
height: 20px;
width: 20px;
position:relative;
float:left;
background-color: green;
outline: 1px solid #ccc;
}</textarea> That's 0 covered! Try it out yourself, I hope this worked! Let me get the full script for you! See you in part two!</p>
<ul class="actions">
<li><button onclick="show_passage('3')">Learn Part Two!</button></li>
</ul>
<p id="3" class="hidden">Here is the script, download to a html file and run! All good to go. Though if you followed the first part, you should have this, if you don't, raise an issue on <a href="https://github.com/KaizNike/KaizNike.github.io/issues">Github.</a><textarea style="color: #e83e8c" readonly="true"><html> <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
/* example of a single tile */
.grass {
height: 20px;
width: 20px;
position:relative;
float:left;
background-color: green;
outline: 1px solid #ccc;
}
</style>
<script>
var mapArray = [["player", 0, "kobold"],[0,0,"kobold"],["kobold",0,"ogre"]]
tilesMain = [
tileGrass = {id: 0, name: "Grass", advDetail: '<div class="grass"></div>'}]
window.onload = function() {
drawMap()
}
function drawMap() {
for (var i = 0; i < mapArray.length; i++) {
for (var j = 0; j < mapArray[i].length; j++) {
if(mapArray[i][j] == 0) {
$('#containerMap').append(tileGrass.advDetail);
}
}
}
}
</script>
<body>
Hi!
<div id="containerMap">
<!-- example tile for testing purposes, containerMap should be empty when first loaded. -->
<!-- <div class="grass"></div> -->
</div>
</body>
</html></textarea> Hope you got all that, now if that doesn't work bother @KaizarNike on Twitter. Now to get crazy! Let's, instead of implementing ECS, have two arrays! <code>mapArray=[[0,0,0],[0,0,0],[0,0,0]] actorArray=[["player", 0, "kobold"],[0,0,"kobold"],["kobold",0,"ogre"]]</code>Hmm now how's it look? Nine squares in a row, we can do better. Add this to style. <code>#containerMap {
height: 60px;
width: 60px;
}</code> So what have we done? We have nine boxes in a cube. Cool, time for dudes. I got stuck in dev hell, so look what I have wrought!<textarea style="color: #e83e8c" readonly="true"><!DOCTYPE html>
<html> <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
/* example of a single tile */
.grass {
height: 20px;
width: 20px;
position:relative;
float:left;
background-color: green;
outline: 1px solid #ccc;
}
.grass p {
z-index: 2;
position: absolute;
display: block;
top: 0px;
left: 2px;
margin-top: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
}
#containerMap {
height: 60px;
width: 60px;
}
</style>
<script>
var mapArray = [["player", 0, "kobold"],[0,0,"kobold"],["kobold",0,"ogre"]]
tilesMain = [
tileGrass = {id: 0, name: "Grass", advDetail: '<div class="grass"></div>'},
tilePlayerGrass = {id: 1, name: "Player on Grass", advDetail: '<div class="grass"><p>@</p></div>'}]
window.onload = function() {
drawMap()
}
function drawMap() {
for (var i = 0; i < mapArray.length; i++) {
for (var j = 0; j < mapArray[i].length; j++) {
console.log(mapArray[i][j])
if(mapArray[i][j] === "player") {
console.log('YES!');
$('#containerMap').append(tilePlayerGrass.advDetail);
continue;
}
if(mapArray[i][j] == 0) {
console.log("NO");
$('#containerMap').append(tileGrass.advDetail);
continue;
}
}
}
}
</script>
<body>
Hi!
<p>@</p>
<!--
<div class="grass"><p>@</p></div>
-->
<div id="containerMap">
<!-- example tile for testing purposes, containerMap should be empty when first loaded. -->
<!-- <div class="grass"></div> -->
</div>
</body>
</html></textarea> The second array is gone, and we are left with the origin. Now let's finish the job! We need to add two more tiles, of the kobold and ogre, can you guess it? <textarea style="color: #e83e8c" readonly="true">var mapArray = [["player", 0, "kobold"],[0,0,"kobold"],["kobold",0,"ogre"]]
tilesMain = [
tileGrass = {id: 0, name: "Grass", advDetail: '<div class="grass"></div>'},
tilePlayerGrass = {id: 1, name: "Player on Grass", advDetail: '<div class="grass"><p>@</p></div>'},
tileKoboldGrass = {id: 2, name: "Kobold on Grass", advDetail: '<div class="grass"><p>k</p></div>'},
tileOgreGrass = {id: 3, name: "Ogre on Grass", advDetail: '<div class="grass"><p>O</p></div>'}] </textarea> This is just one way of organizing things, now lets round this out! Let's continue the sprint with the drawMap, the final step! <textarea style="color: #e83e8c", readonly="true">function drawMap() {
for (var i = 0; i < mapArray.length; i++) {
for (var j = 0; j < mapArray[i].length; j++) {
console.log(mapArray[i][j])
if(mapArray[i][j] === "player") {
$('#containerMap').append(tilePlayerGrass.advDetail);
continue;
}
if(mapArray[i][j] == 0) {
$('#containerMap').append(tileGrass.advDetail);
continue;
}
if (mapArray[i][j] == "kobold") {
$('#containerMap').append(tileKoboldGrass.advDetail);
}
if (mapArray[i][j] == "ogre") {
$('#containerMap').append(tileOgreGrass.advDetail);
}
}
}
}</textarea>Here is the result! ==> <img src="assets/imgs/progress!.webp" class="blog-inner">And here is the final code, check it out!<textarea style="color: #e83e8c", readonly="true">
<html> <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
/* example of a single tile */
.grass {
height: 20px;
width: 20px;
position:relative;
float:left;
background-color: green;
outline: 1px solid #ccc;
}
.grass p {
z-index: 2;
position: absolute;
display: block;
top: 0px;
left: 2px;
margin-top: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
}
#containerMap {
height: 60px;
width: 60px;
}
</style>
<script>
var mapArray = [["player", 0, "kobold"],[0,0,"kobold"],["kobold",0,"ogre"]]
tilesMain = [
tileGrass = {id: 0, name: "Grass", advDetail: '<div class="grass"></div>'},
tilePlayerGrass = {id: 1, name: "Player on Grass", advDetail: '<div class="grass"><p>@</p></div>'},
tileKoboldGrass = {id: 2, name: "Kobold on Grass", advDetail: '<div class="grass"><p>k</p></div>'},
tileOgreGrass = {id: 3, name: "Ogre on Grass", advDetail: '<div class="grass"><p>O</p></div>'}]
window.onload = function() {
drawMap()
}
function drawMap() {
for (var i = 0; i < mapArray.length; i++) {
for (var j = 0; j < mapArray[i].length; j++) {
console.log(mapArray[i][j])
if(mapArray[i][j] === "player") {
$('#containerMap').append(tilePlayerGrass.advDetail);
continue;
}
if(mapArray[i][j] == 0) {
$('#containerMap').append(tileGrass.advDetail);
continue;
}
if (mapArray[i][j] == "kobold") {
$('#containerMap').append(tileKoboldGrass.advDetail);
}
if (mapArray[i][j] == "ogre") {
$('#containerMap').append(tileOgreGrass.advDetail);
}
}
}
}
</script>
<body>
Hi!
<p>@</p>
<!--
<div class="grass"><p>@</p></div>
-->
<div id="containerMap">
<!-- example tile for testing purposes, containerMap should be empty when first loaded. -->
<!-- <div class="grass"></div> -->
</div>
</body>
</html></textarea>Now let's walk through the code step by step. We define the html and head tags first. (tags are Html's way of identifying things. We then import jQuery as a tool. Then we define the indoc styles we need. <code>.grass</code>,<code>.grass p</code>, and<code>#containerMap</code> These all allow the page to be styled properly to our liking. For some quick tips on the attributes <code>background-color</code> in grass turns it green. <code>height</code> and <code>width</code> in grass define the size of each tile, hope you kept those assets small! After the styling, we come across <code>mapArray</code> and <code>tilesMain</code> which store our needed data. I usually put stuff like that in a data.js that gets loaded first for housekeeping. mapArray is a 2D array, which means its nested. You have to go two levels deep to get the data out. The reason for <code>mapArray[i][j]</code> later in the code.
<br/>Whew. I'm tired. Lets keep going. We call <code>windows.onload = function(){drawMap()}</code> to get things started before the player sees. It calls drawMap, so let's talkl about it. drawMap is made of a nested for loop that allows you to access the nested array. Finally we used jQuery to append the data set in our tilesMan array, made of dictionaries.<br/><br/>
That's all for part two, stick around for Godot. But I hope you can use something from this web tutorial!</p>
</div>
</div>
</div>
<div class="inner">
<div id="2021-feb" class="spotlight">
<div class="image">
<img alt="First! Number one post!" src="assets/imgs/one.webp">
</div>
<div class="content">
<h3>First Post</h3>
<p>2021 - February, 6: <br> This is my first blog post, I'm going to go over the recent events of the year.
</p>
<ul class="actions">
<li><button onclick="show_passage('1')">Show more</button></li>
</ul>
<p id="1" class="hidden">Scalpers, insurrectionists, opioids out of control, pandemic, its been a good start to a year. 2020 was widely agreed to be the worst, so what did I do? Well I started the year with the yogscast game jam and made my first jam game, Abundance of Death. Who knew that the during the year we'd be losing so many? Maybe no one wants the gift of death this christmas, the game was supposed to be about giving for krissake. <br> I learned a lot during that jam. About tilesets, about animations, about platformers. I did a good job. I really love game jams and would like to do another.
<br> I started with nicehash this year with my 1060. Not seeing huge profits, but its nice to have bitcoin, but it could drop anytime - guess I'll sell. Want to make at least $50 before that. Messed around with my overclocking, but couldnt get it stable. Am fine with default for now. I dream of having a mining rig one day.</p>
</div>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="wrapper">
<div class="inner split">
<section>
<h2>About Me:</h2>
<p>Gamedev for fun and hire, currently at school to maximize my innermost potentials and increase my EVs. No one can stop me. Unstoppable. Force of nature doesn't cut it, just because man can't stop nature don't mean it could be stopped - look at rivers for example. Studying Computer Science of course.</p>
<!--
<form action="#" class="alt" method="POST">
<div class="row uniform">
<div class="6u 12u$(xsmall)">
<input name="name" placeholder="Name" type="text">
</div>
<div class="6u$ 12u$(xsmall)">
<input name="email" placeholder="Email" type="email">
</div>
<div class="12u$">
<textarea name="message" placeholder="Message" rows="4"></textarea>
</div>
</div>
<ul class="actions">
<li><input class="alt" value="Send message" type="submit"></li>
</ul>
</form>
-->
</section>
<section>
<ul class="contact fa-ul">
<li><i style="color: #00BC8A;" class="fab fa-twitter"></i><span style="margin: 5px;"></span><a href="https://twitter.com/KaizarNike">@Kaizarnike</a></li>
<li><i style="color: #00BC8A;" class="fab fa-itch-io"></i><span style="margin: 5px;"></span><a href="https://kaizarnike.itch.io/">KaizarNike</a></li>
<li><i style="color: #00BC8A;" class="fab fa-youtube"></i><span style="margin: 5px;"></span><a href="https://www.youtube.com/channel/UCGye3sp0VSkbomdbP9hsoRw">Kaizar Nike on Youtube</a></li>
<!--
<li class="fa-facebook"><a href="#">facebook.com/untitled-tld</a></li>
<li class="fa-instagram"><a href="#">instagram.com/untitled-tld</a></li>
-->
<li><i style="color: #00BC8A;" class="fa fa-envelope"></i><span style="margin: 5px;"></span><a href="mailto: [email protected]">[email protected]</a></li>
<li><i style="color: #00BC8A;" class="fa fa-home"></i><span style="margin: 5px;"></span>Castle Neverland</li>
</ul>
</section>
</div>
</section>
<div>
<p id="lastUpdate">A long time ago.</p>
</div>
<!-- Footer © Untitled. All rights reserved. Images: <a href="http://unsplash.com">Unsplash</a>. -->
<footer id="footer">
<div class="copyright">
Design: <a href="https://templated.live/">TEMPLATED</a>.
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
</body>
</html>