Posted in Uncategorized

JS Post 1 – Basic Game coding (๑꒪▿꒪)*

I am gonna make more of these pics and pattern-ize everything most probably after my exams 

Okay, so what have I to exploit today? Ever played a 2D pixelated web game online that doesn’t take much of your CPU? Are you aware that a web game can be programmed purely in JS? And JS is just a scripting language with not much of the strict coding methodologies like Java and C!!! I will be posting a bunch of files that makes use of HTML + CSS + JS files that produce magic… or something similar?

But before I dive into the game logic part of the JS let put out a few basic thigs you have to keep in mind when you try to code in JS.

JS is JavaScript, a java techie that I learnt as part of Internet Programming a course regarding the basics if setting up a web page.If I remember correctly I think I did a full-fledged Bootstrap web page for something… and that was like a long time ago

(≖ლ≖๑ )フ

Okay moving on, If you are interested in knowing about JS , I kinda learnt from these 2 sites :

Site1 : w3schools this place has web related techies like HTML,CSS,JS,Bootstrap,PHP etc..
Site2 : TutorialsPoint this place kinda gives you offline data,so yeah suite yourself.

(๑→‿←๑)

Moving onto the game, this js game is a retro game, not interesting to play but was easy to code so I thought I’ll put it up here.

2D Breakout Game – Tutorial : I learnt to code web game from here.
2D Breakout Game –  Code : Download the code and open in web browser.

(#^^#)ゞ

Okay so that being provided, here’s something I made for the blog:

.
.
.

Click anywhere on the blog page !!! 
(almost anywhere I think?I hope it works on touch screen devices also)

☜(⌒▽⌒)☞

// <![CDATA[ var sparks=150; // how many sparks per clicksplosion var speed=50; // how fast – smaller is faster var bangs=10; // how many can be launched simultaneously (note that using too many can slow the script down) var colours=new Array('#03f', '#f03', '#0e0', '#93f', '#0cf', '#f93', '#f0c'); // blue red green purple cyan orange pink var intensity=new Array(); var Xpos=new Array(); var Ypos=new Array(); var dX=new Array(); var dY=new Array(); var stars=new Array(); var decay=new Array(); var timers=new Array(); var swide=800; var shigh=600; var sleft=sdown=0; var count=0; function addLoadEvent(funky) { var oldonload=window.onload; if (typeof(oldonload)!='function') window.onload=funky; else window.onload=function() { if (oldonload) oldonload(); funky(); } } addLoadEvent(clicksplode); function clicksplode() { if (document.getElementById) { var i, j; window.onscroll=set_scroll; window.onresize=set_width; document.onclick=eksplode; set_width(); set_scroll(); for (i=0; i<bangs; i++) for (j=sparks*i; j<sparks+sparks*i; j++) { stars[j]=createDiv('*', 13); document.body.appendChild(stars[j]); } }} function createDiv(char, size) { var div, sty; div=document.createElement('div'); sty=div.style; sty.font=size+'px monospace'; sty.position='absolute'; sty.backgroundColor='transparent'; sty.visibility='hidden'; sty.zIndex='101'; div.appendChild(document.createTextNode(char)); return (div); } function bang(N) { var i, Z, A=0; for (i=sparks*N; i=swide || Xpos[i]=shigh+sdown || Ypos[i]<0) decay[i]=1; else { Z.left=Xpos[i]+'px'; Z.top=Ypos[i]+'px'; } if (decay[i]==15) Z.fontSize='7px'; else if (decay[i]==7) Z.fontSize='2px'; else if (decay[i]==1) Z.visibility='hidden'; decay[i]–; } else A++; } if (A!=sparks) timers[N]=setTimeout('bang('+N+')', speed); } function eksplode(e) { var x, y, i, M, Z, N; set_scroll(); y=(e)?e.pageY:event.y+sdown; x=(e)?e.pageX:event.x+sleft; N=++count%bangs; M=Math.floor(Math.random()*3*colours.length); intensity[N]=5+Math.random()*4; for (i=N*sparks; i<(N+1)*sparks; i++) { Xpos[i]=x; Ypos[i]=y-5; dY[i]=(Math.random()-0.5)*intensity[N]; dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25; decay[i]=16+Math.floor(Math.random()*16); Z=stars[i].style; if (M<colours.length) Z.color=colours[i%2?count%colours.length:M]; else if (M0) sw_min=document.documentElement.clientWidth; if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight; } if (typeof(self.innerWidth)==’number’ && self.innerWidth) { if (self.innerWidth>0 && self.innerWidth0 && self.innerHeight0 && document.body.clientWidth0 && document.body.clientHeight
Update:

Link to Video

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s