Blog - Cloud Web Designs

Landing Page Example

By Karel Jordaan / On

Hello and hope you had a look at the landing page example first before you read this. If not go quick then come read further.

Ok so as you could see there really is not much to the page. It was coded using only HTML5,CSS3, vanilla javascript and I also used bootstrap 4 for the styling, only really used bootstrap for the navigation bar that you see in the top right corner of the page.

So there really is not much to the page, its basic,clean and clear and sometimes thats all you need right.
Ok so let me break it down just a bit. The navigation bar is a bootstrap component that was just customed slightly to display with a different font and a different color. The font used is one I found on google fonts and its called Courgette.
Only the Home link is linked up to take you back to the Cloud Web homepage but other than that none of the links or icons on the page will take you anywhere as that was not really the premis for this example.

Then the background images is coded dynamically so that they change every 3.5 seconds.I did not download the images and store them to an image folder to call the images from the file, that will be the “correct” way to do it, but rather what I did was simply use the direct URL of the image where I found it on the web. So the images might take a couple of seconds to load in some instances, also according to your internet speed, but once the sequence has ran a couple times the images might be cached in your browser so the loading will become more smooth and faster…I hope.There is 7 images in the sequence.
To make it change I coded a function using javascript.I stored all the image URL’s in a array and then used a javascript method called setInterval to run the images to set the background of the page body to the next image in the array.

At the bottom of the page I added some social media icons and added a nice little animation to them using only the CSS3 animation property.I looks quite cool I think.

And thats pretty much it. If you want to view the code go have a look on my github page here – or click the github icon on the bottom of this page and go to landing page example.

Thanks for reading,

React user info app with PHP.

By Karel Jordaan / On

I wanted to code an application that could take in a picture and store it to a database so that was pretty much the premise for the application.So I decided to code a little user profile application that stores the user picture and user info that can then be recalled and viewed from a database.No real practical use for it I supose but it was just how I felt like coding it to try make some sort of sense of it.

The front submit form is rendered out to the user as a React component but once it submits thats when all hell breaks loose ha ha!
So what does that mean, well once it submits PHP takes over in the back and it gets submitted to a little Mysql database I setup.
Thats actually still ok, its really when the display button is clicked when the hell part breaks loose.

The biggest problem I had was trying to figure out how to return the data from Mysql with PHP as a object to the front end react component so that it could then be rendered out to the DOM through the react component. Now as it looks that is kind of the case however the output of the info is actually recalled then its echoed out in PHP in the back and then what is echoed out is returned to the front end react component and then just displayed as the innerHTML value of a div tag.
Now I think technically that is actually completely wrong but I sat so long to try and figure it out that after a very long time I just decided stuff you you prick and I just settled on the fact that the way I have it now is working so Im not going to spend any more time on this.
So that is pretty much what happend. If you are brave enough and want to view the code then please click on my github icon on the bottom right of this page and you can go have a look at what mess I made. Maybe you can tell me where I went wrong and help me to improve the code.
The delete button just wipes all entries from the database so if you want to go ahead and try it feel free.

Thats all im going to say about that. It was fun.
Next im thinking of building something using the CSS-grid and CSS transition and animation properties.
Will see how thats gona pan out.
Ok thanks for reading,cheers!

React login form example

By Karel Jordaan / On

Another React.js example is up on my site for you to look at and try. Its just a simple little user name and email login app.
Be aware though that I make it connect to a very simple mysqli database which I setup and connect to using PHP so the information you enter will be stored in the database and then displayed back to you on the right hand side of the page.

Not to worry though because no information you enter will be used for any reason at all and by just clicking the red delete button which you will notice at the left bottom of the table where the information gets displayed, it will delete all of the database content completely.

React is a javascript library that was developed by Facebook and the deal in a nutshell about React is that every single element that displays to the DOM/webpage is reffered to as a component.

A component in React represents a HTML5 tag,it can be a heading tag or a input tag or button tag ect. that gets returned to the DOM or web page via the render method and then gets displayed. Ideally best practice in React is to keep one element per component, that is what they suggest in their documentation because it makes any edits or updates or fixes easier to maintain in the long run especially if you are building a very large application. You can however put more than one element in a component if you wrap them all in div tags or in the case of a form you wrap all in a form tag.

In my form example I coded it using classes and all the functions contained within the class. There is also alot of vanilla javascript contained within those classes and it all runs fine seeing as though React is a javascript framework. Im not sure if it would be best practice but for now it works fine.

I used vanilla javascript AJAX calls to the back end to pass the input values to PHP in order to connect to Mysqli and store the information as well as recall it from the database to display and then also to delete it. Also used little bit of my own CSS with some media queries at certain break points and used bootstrap for a bit of styling.

If you would like to have a look at the code you can find it on my github page which you will be taken to if you click on the github icon at the right hand bottom of my website
It was a simple application but really loved building it. More examples to follow.

Thanks for reading.

Neville the Knight

By Karel Jordaan / On

Neville the Knight is pretty much as far done as Im going to take it.
It took quite a long time just to do the little that I’ve done up to now and it was really just a further learning experience with making a rpg game using the enchant.js framework.

There really isnt much to the game infact I wont even call it a game. I might want to consider calling it a demo but I dont even think it qualifies as that so if you keen just go try it and see what I mean.
There is some example code that I used but I also coded quite alot of “my own code” as I came to understand the framework better and what it offers.
Its not perpect but at least playable and maybe just maybe I will build upon that which I have allready done there in the future and add a few more scenarios or charachters and scenes but for now Im going to let it just rest were it is…

I have also started on another web application that parents can use with their kids to help kids learn to count to 10.
The concept in a nutshell is to match the actual number with the word number. So ex. match 1 with the word ONE, 2 with TWO ect ect you get the idea. Then I will also probably make it play the other way around aswell so matching the word ONE with the number 1 ect ect. It will pretty much be a drag and drop type of vibe to move everything into place.
Maybe someone out there in the world wide web might actually try it, who would even know,ha ha.
Either way I enjoy doing this so I will finish that probably in a week or two and start thinking about a concept for a new game I want to make.

Till then,
Go give Neville the Knight a quick try on your smartphone if you will,I thank you then. Just click the link and Bob is your daddy or uncle or maybe even your brother from another mother, who even cares.

Neville the Knight!

By Karel Jordaan / On

Who is this oke!?

Ok so ive been busy for a long time with this game Neville the Knight and it is still not done.
I am however making progress and will probably upload it to my website within a couple of weeks when there’s a little more of exploring to do.

It is as always a learning experience with this javascript framework enchant.js but alot of fun and rewarding when you figure it out and the code works ha ha! Alot of it is example code as usual but also because the plugins enchant.js has availble makes alot of functionality quite easy to implement in the game.Its also my first attempt at developing a RPG type game so learning as I go along is really the main focus.RPG is short for Role Playing Game in case you did not know.
There really wont be much of a plot or in depth of mechanics to the game,which is a big deal with RPG games, but keeping in mind that im learning all the time so I try to keep things simple at my first attempts otherwise I find I get dispondent too quickly and thats not a good thing.

So is there any plot then you chop?I hear you ask!?Well for now Neville the Knight cruises around in a world called Gamblaria,which is a little plot of land with a gambling vibe to it.Every one seems to want to gamble for gold.There is a great gambling sorceror who sets the stakes high, so he is gaurded by a huge dragon, which I would not want to mess with but to get to Gableron the great gambling sorceror, you have to sneak past that guy and he looks scary.I’d watch my step if I were you ha ha!
If you get in his way you will have to fight him and that could be dangerous for you…

Thats kind of all I can say for now about Neville the Knight, however I have also started to recode my space shooter game from scratch now that I have little bit more knowledge of enchant.js, I’m updating it a bit to make it more playable on mobile devices so when its done I’ll let you know then you can go and try it on your smart phone. For now the first version is still on my site to try on your pc.You can also try Alien Crusher on your smart phone a have a couple minutes of fun until those pesky alien buggers infest your phone whu ha haa!
K thats all for now,
Thanks cheers!

Alien Crusher

By Karel Jordaan / On

Alien Crusher is a new little game that took me about a 10 days to complete using enchant.js and all images,sounds and music that is used for the game are all free assets that gets provided to use with the framework when you download it.There is some really good stuff to use so my next game that I will be attempting might be something along the lines of a RPG game which is short for Role Playing Game.

The concept for Alien Crusher came about within 30 minutes of me starting scripting on the game. Initially the concept I had for the game was going to be quite different, more along the lines of a movement game where you as a player have to dodge objects or aliens coming at you but the idea changed into what it is now. The focus however for this game was to make the game more playable on mobile devices such as smartphones and tablets but I also had desktop in mind so you will still be able to give it a go on your desktop with a mouse. Being more playable on mobile devices really just means that your interaction with the game is done via screen taps that trigger the explosions to destroy those pesky little alien buggers.
If you havent tried the game yet please do so and who knows you might just enjoy it.

The plot for the game is quite simple. If you have tried the Space Shooter game then you will know all about those pesky little alien buggers that fly around your screen like they own the damn place , well in this game those pesky little alien buggers are trying to infest your device and you have to fend them off by smashing them to a puff of smoking smitherines.
All the power is in your fingers as your finger taps destroyes them one by one whu ha haa!

Theres always one group that dominates and in this case its those pesky green buggers and theres no perticular reason for that so thats just a bit of useless information for you. From what I’ve heard though they are actually the bastard children of that pesky blue bugger but I dont want to get into their personal lives and neither should you. Now smashing aliens is hard work so make sure to keep an eye on your energy bar and keep it powered up by tapping the power block when it appears on the screen cause if your energy runs out it means those pesky little alien buggers have won the battle of investation on your device.Also keep a lookout cause if those pesky buggers discover the source of your energy they will attack it to try and defeat you.
Darn pesky little buggers…he he.
Till next time,cheers.

If you want to see the code for the game you can follow the link below to my github account,thanks.
github to view the game code

Space Shooter slightly updated.

By Karel Jordaan / On

Ok people I have uploaded a sligthly upgraded version of the little Space Shooter game that I was working on the last few weeks.
Again a live and learn experience and alot of fun for sure. Everything probably wont be perfect but there was progress so thats a good thing at least.It might take a few seconds to load once you click the Space Shooter link on the website so please be patient and hopefully it will be ready to start.

So the plot is simple, you are the little space shooter in your spacecraft zipping around in space and have to zap the little space alien buggers flying around you. Be carefull though cause some of those little buggers can get quite arrogant and all puffed up with pride but little do they know it actually just makes it easier for you to zap them! Oh and just a little warning, just as you think you killing it you might just get hit by a little meteor shower starting to rain down on you, so make sure you dodge that aswell before it zaps you whu ha haa! Also just a heads up there is music in the game so be aware of that.

The game was made using HTML5 and a Javascript library called enchant.js, which is specifically used to develop games.All of the images/sprites used for the player and aliens and bullet and meteor are free assets to use and it comes with the enchant.js library when you download it. The background images I downloaded from google images.
Its again specifically made to play on desktop PC or laptop and although it might display in a browser on a smart phone you wont really be able to move around because you will need the arrow keys on a keyboard for that.So mouse left click will shoot and arrow keys will move you around in space. I think my next game will be more targetted towards play on smart phone mobile devices so that excites me although Im not quite sure as yet what its going to be but will let you know ASAP.

Just a bit of boring info for you about the scripting of the game is that everything you see is coded behind the scenes as a Object that you create in a Class and then specify what the object is all about by giving it properties with values for example: the space ship that you see moving around on your screen will look like this behind the scenes –

Player = Class.create(Sprite, {
this.image = game.assets['graphic.png'];
this.x = playerX;
this.y = playerY;
this.frame = 0;
this.scaleX = 1.5;
this.scaleY = 1.5;

So all of that code says that you the Player, are a Sprite, (a Sprite is a term used for an image in game development) and then you specify the height and width of the sprite/image and you specify what Sprite sheet/image should be used from the games assets to get the image that needs to be used for you the Player. this.x and this.y sets the position for the player when the game starts. The this.frame=0; property tells the game what image to use from the sprite sheet that is essentially read as an array which is 0 based so that means the first image on the sprite sheet should be used as the Player image. this.scaleX = 1.5; and this.scaleY = 1.5; enlarges the image a bit and then you add it to the scene with game.rootScene.addChild(this);

Ok so all of that is a bit of technical jargon which most of you probable wont understand but its just a little insite into what things amount to behind the scenes.

All of thats quite alot for now but if you have actually read this far then I want to thank you and ask you to please go try the game and have some fun for a few seconds. You can also comment below the post and go like my facebook page Cloud Web Designs .

Will be letting you know about the next game I’m planning soon, cheers for now people!

Space shooter Demo version

By Karel Jordaan / On

Ok hello guys, my little space shooter game is up and ready to try if you are keen. I’ve been working on this for about a week so keep in mind this is only a demo version so there will be some changes and updates in the near future to make it perhaps a little more interesting to play. Go have a quick play and feel free to leave a comment about the game in the section below.If you dont see a section to comment then click on the header of the post that will take you to the page that will allow you to comment at the bottom,thanks.
This is only for play on desktop or laptop computers for now so you need a mouse or at least a touchpad as in the case of a laptop to shoot.
To control the player use the arrow keys on your keyboard and left mouse button to shoot.
Thanks guys go have a little play.

Thanks till later cheers…

Space shooter game

By Karel Jordaan / On

Ok so my second game is almost done and again nothing new or ground breaking but phew! alot of fun to make and learning this new frame work called enchant.js is so much fun and makes scripting games alot easier in many ways.

So the concept for the game quickly in a nutshell is you, the player, being a spaceship that can travel around in space and being confronted with alien ships appearing randomly or flying in from outer space and just minding their own business really, but you having the ability to shoot them to earn points.
I must be honest, the original concept for the game was quite different but as I run into roadblocks and limited knowledge, I find myself having to reshape the original concept that I had for the game into something new , which is not always such a bad thing…
So the approach for scripting this game was using Javascript and the object orietated way of doing things . Creating classes with properties and functions to bring the characters to life on the screen ect ect.

Below is bit of code that basically represents a Class in the Javascript enchant.js framework that contain all the players properties and functions.

Player = Class.create(Sprite, { // declare a custom class called player
initialize:function(playerX,playerY){ // initialize the class (constructor),16,16); // initialize the sprite
this.image = game.assets['graphic.png']; // set the image
this.x = playerX;
this.y = playerY;
this.frame = 0;
} else if(game.input.right){
} else if (game.input.down){
} else if(game.input.left){

So I will upload a Beta version of the game for you to play a bit by the end of the week and a Beta version basically just means that it’s not the final product but its something playable to try out for now.
Thanks for reading,till later then,cheers.

Little putt putt game.

By Karel Jordaan / On

If you reading this then hello to you and thanks for coming this long you will continue reading this remains to be seen and that choice is entirely up to you. Im not going to ramble much so this post will primarily be about the silly little putt putt golf game you can find on my site, which if you haven’t tried it yet, I want to kindly suggest you go do so quick,thanks.

So if you tried the game I hope you made that trick shot and I shall call you tiger. Anyways why did I decide to create a game like that, well I got the idea from the fact that one of my clients is a driving range in Hillcrest Durban so the plan was to create the game as a little something extra for visitors to interact with on their website.
So lets be honest its definetely not a game reminiscent of any PS4 or XBOX1 titles, in fact more like a Atari or commodore 64 type game, and also not very original, but it was still alot of fun for me to make.
So most of the code is actually example code that can be found on the website, which is a great free online source to utilise if you are interested in learning to code. The rest mostly comprises of conditional logic that had to be implemeted to get all the actions and events to trigger. The whole game is coded in HTML5 and vanilla Javascript,the HTML5 part basically is just a element called a canvas tag which gets added to the page and that allows for drawing and graphics to be displayed on the screen inside the element.It took about a week to code as I worked on it for about 3/4 hours a day. So its not perfect theres bound to be some bugs in there somewhere but for the most part its playable I think.

So after I finished that game I started looking at a javascript framework called enchant.js, which is a framework that is specifically used for game development. Its probably not the latest or greatest framework but for now I think it offers all the functionality needed for me to start coding my next game. So the next game I have started working on will be a space shooter/space invaders type of game using the enchant.js framework and the platform I will target again will be desktop computers. I will however in the future also target mobile devices as this framework makes it quite easy to do so. I will put up some posts from time to time to let you know when its done so you can go and play it and let me know what you think.

Ok so thats it for now on my first post. Thanks for reading and feel free to comment and go like my facebook page. Cloud web designs . Thanks Cheers for now..