How to Develop a Web App Game

The required Steps - How to Develop a Web App Game

July 22, 2016

If you were curious about the Pop-Up

How Pop-Ups-are Made

This is a story of How to Develop a Web App Game. It will include all the steps and thought processes required to create a successful Web App. Mind you, at this moment the App is not made. It is a concept and it is my first real functional web Application. As an avid hobbies t, I learned many computer and web technologies. I hove a working familiarity with HTML, CSS, JavaScript, PHP, MySQL, NodeJS, Mongodb, Redis, Hapi.js, AngularJS, Android Applications and some JQuery. I use the term a working familiarity because I have a good basic understanding. I have the blocks, now to cement them together and build a structure.

Have no Limits Dream Big

No dream has ever been reached unless it was a dream. Strange sounding maybe, but very true. Dream your project, then work to make it a reality. The Internet is an unbelievable resource and it has information for every skill set and level you need or wish to acquire. STUDY all the time. Do not start to look up how to make a div appear as a pop-up and wind up looking at beautiful cloud formations. Keep on track. Make notes, hundreds of notes. Don't be afraid of real paper. In fact writing ideas and even code will help you remember what you learn. Beware of cut and pasting. I write my notes in HTML and use CSS to make them look nice. That way I can link to resources for later use. Not only that you will re-read what you wrote and give yourself the visual learning tool. You also can link to your code in a text file.

Developing the Game or App Idea

July 24, 2016

The hardest part by far. If you are taking this seriously buy a brand new notebook just for your project. Use it for nothing else. I use pencil and paper for that part. Also, I do not erase. I redraw and keep the old stuff. Never know if looking back will spur a memory. I actually bought a blank hard cover book. My idea was serious, treat it that way. I also decided to keep this Info-Diary of the process in hope it would help or motivate another developer.

How FishKiss came to Exist

The idea came from the blue. My sister is an Artist. She has come up with these neat looking fish characters.

After a little 'Gimp' work
( I am a Linux Dude Gimp is the Linux equivalent to Photoshop)

She had sent me a few pictures and I thought how neat it would be to make a short stop-motion video. When I started thinking about how to do that, it came to mind that JQuery drag and drop would be a very neat way. I could make a library of images and drag and drop them on the screen ( in a browser of course ). Drag n Drop If you go there, the left arrow will bring in another fish. I could make a div with a background then move the images and screen capture the Div. Stop motion Then I could Join the pictures with ffmpeg and make a video. It worked. It was very easy and worked fantastic.

In fact it worked so well, I started on a program ' Stop-Motion-Studio '. A browser based stop-motion video maker. Specially put together for non-programmers and working from a GUI. So anyone could easily make stop motion videos. With no programming experience at all.

I had drag and drop, but no change of angle. I started looking up how to rotate the image and came across a site that showed how to move the images with buttons. BUTTONS That meant that with only two objects I could move one with my mouse and one with my keyboard. As I looked at the coding I realized I could also move them with buttons. WOW ! On my tablet one with the right hand and one with the left. MMM That sounds game-like. Then came the fishy jitter idea. I could have other fish in the 'picture' that just kind of floated around:Float

I still was half in my 'Stop-Motion Studio' idea. I could see recording video with some preprogrammed objects AND the drag and drop for a few specific images, but deep inside I saw it changing fast into an APP.

Time as a Development factor

July 24, 2016

Much depends on what kind of situation you are in. Do you have a regular job? If you want to build an App and really hope to make a few bucks doing it and you are not a seasoned developer, it will take time. I am retired and live in the Philippines. I have a goal. I would like to buy a house for my Filipina wife. I want the App to do that. So, if it takes six months, so what. I do not need the income to survive. It is a bonus. I am lucky and think that is the best situation to be in. Not to require, but to desire.

Learning image coordinates

July 25, 2016

I have to learn to read coordinates and have a reaction when two image coordinates match 'The Kiss". I have decided to make a simple game first. I will have some moving bugs and have a fish eat them. This is the code so far. SO FAR I will later, or upon request post all exterior *.js files.
key-press.js is important and it keeps growing. As with much of this project the majority of the time is researching and practicing different short pieces of code. Not all js scripts play well together. Some of the things work GREAT alone, but when combined with other script 'break'. Lots of searching and research involved. I also am learning the JavaScript on the fly. It gets a bit easier every day.

Responding to Touch Seems to Be a Big Deal

The more I research, 'responding to touch screens and not just mouse clicks', the more it comes up as a problem. I Thought I had it working but, the delay is too long. 300ms to 500ms seem to be a short time, but in the

My Weird Version Tracking Has to Change

I currently I save files For example: move-image.html then when I am afraid I might break it I save it as move-image2.html, move-image3, etc. The version system was set up wisely, I need to adapt it when developing. It should be, and will be, from here on standardized. move-image-1.00.html, move-image-1.51.html, move-image-2.00.html, etc. Tiny changes one hundredth, larger steps. tenths, and big steps whole digits. Then I just remove the versions ( Example: move-image.html ) when I like the file and use it in production.

Backtracking is Hard, but, thats life sometimes

I actually had everything working with buttons on touch screen. I did not like the buttons and went with all different code to give 'Fancy Buttons'. A days work, for nothing my fancy buttons will not work on 'touch' screens .. OH Well !

This is neat

July 26, 2016

Arrange a window as you like then print a PDF of the window. This is very neat toy to arrange the screen and then print a PDF. I do now know if works the same on all computers but it is really neat on my Linux.

<button onclick="myFunction()">Print this page</button>
function myFunction() {
} </script>

The Coordinates Started

It does take patience. After two days I have finally built myself a couple tools to help with matching coordinates between objects. Still not quite what I want. All resources I find give 'relative to window' coordinates. I want object to object. Three days looking and no resources found on that. The window is okay, but scrolling and things knock it off. I guess I could just make the window fixed.

A couple of tools Familiar with the exception this page a couple buttons on the top to check coordinates. I know when they line up now.
My Duck this is very small script adaptable to put on any page to track movements.

The Bugs are Floating downstream

BUGS Darn Bugs, my first cross browser issue. It works well in Chrome and Opera but now in FieFox. Oh well, back to the drawing board

A few giant steps today. All the css is off the HTML page all the JavaScript is off the page also. The HTML page looks so lean Everything still working fine. Might play with minimizing everything for fun. The actual file will be very small. It might even be Android App size even with the graphics. Long way to go but today was NICE. The code looks pretty and organized.

A test for my Phone

What are the best tools

July 27, 2016

That could probably be argued forever. My poison, at this moment, is Vanilla Javascript, Canvas (not to render. Vanila HTML rendering, Css , maybe SASS for transformation)

There is a load of resources to study here



July 28, 2016

Here are some examples of Java-script write to screen code. There are several different ways to 'write to screen' with JavaScript. Here are some of the most commonly used methods.

Pop-Up Alerts

window.alert('So You Want to Learn JavaScript This is a Pop-up Window ! ');

The script Above caused the pop-up window you saw when the page opened. Basically you told the window to alert, and print a message in the parameter () after window.alert.

It is used to pass messages and errors to the viewer.It also can print numbers and variables. For example it may be used to print an image location. Below is an example of code that was used to print the current location of a ' floating image '.

Text to Document

document.write(' Now a short \"Welcome to Jack\'s Java Tutorials\" ');

Using document.write see the text below:

The text area within the parentheses will not acknowledge line breaks <br /> It writes one large paragraph. Notice the \" . That allowed me to use a " in the parameter area.

If used in conjunction with a button it will open a new document ( tab ) with the text inside. Again it will appear to be one large paragraph in the page.

Creating Pop Up Windows with Buttons

A pop-up window, often refereed to as an 'Alert Window', may also be opened with a click button. Notice it sad at the top " This Page Says: ".

<button onclick="document.write(' This is called an Alert Window ')">POP UP </button>

Writing Directing to Specific HTML locations

document.getElementById("demo").innerHTML = 'This prints within an \' id \' . in this case a p (paragraph) '
<p id="demo"<>/p > .
document.getElementById("demo").innerHTML = 'This prints within an \' id \' . in this case a p (paragraph) '

Getting Window Dimensions

At times I need to get window dimensions. to print them on the screen helps me understand the movement better for my algorithms. It is important to make responsive screens. that means wide screen as well as 3:4 and mobile devices. This is how to print that information to screen. It is usually used within the program.

<p id="dimensionWH"></p>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
var wh = document.getElementById("dimensionWH");
wh.innerHTML = "The Browsers Window: " + w + ", height: " + h + ".";

Generating Random Numbers

Random numbers are an important part of any game. They can provide numbers to control timers, movement, size, visibility, angles, any information that is not static must be generated 'random'. Without random numbers the ability of games would be would be very limited. Here I will show a few ways to generate random numbers. That will lead us into PIDs, variators, steppers and floats.

Display a Random Snail Speed in Miles Per Month.

Auto-Generated Random Numbers

The small black number was randomly generated when you loaded the page. Any reload will provide a new random number. The random numbers generated are between 0 and 1. The 0 is inclusive the 1 is not.

To get a random number from 0 to 100, you multiply 100 by the random number generated by the computer. The number generated will probably contain a decimal as illustrated in RED. The red number also was randomly generated when you loaded the page.

Random Whole Number Example

The big big 'gray' has nothing to do with the random number stuff. Thought you might be bored of the plain ol' numbers. So I beefed up the looks. A bit of CSS make-up. This random number is from 1 to . Huh ! . Magically match the range of lottery numbers. You win a million bucks email me.

Break the Boredom Make Something Move

This set designed to start with a button click, HOWEVER, it is 'duck soup easy' ( that means very easy ) to make it start to move when the page is loaded. Just use:

window.onload = function start { slidit(); }

slidit() being the function I would auto-start.

// if the three lines below are enabled the function slideit() will start automatically // no startbutton is required.