I have not wrote a post on vuejs for a while, so I thought I would start a series of posts that are vuejs examples. So how about a vue calculator of sorts for starters. This will be a nice quick simple example that makes use of vue el, templates, methods and a few built in directives as well as the use of eval in javaScript to evaluate expressions.
This will be a post on a canvas example that is a very basic breakout) clone. Even a basic example of this game might prove to be a little involved for new developers especially if you are starting from the ground up, and not using a framework as a lot of topics can still come up with the nature of this kind of game. Still breakout is often a good starting point when it comes to exercising a range of skills that are needed to make games in general using canvas and javaScript. In this example I will be using a fair amount of code that touches base on a wide range of topics when it comes to game development in general with javaScript and canvas elements.
I will try to keep things as striped down as possible for this canvas example, but it will still be a little involved with several javaScript files. I will not be getting into many subjects of interest that come up when making a game like this into detail, but I will still be touching base on them. For example there is bounding box collision detection, how to go about changing the angle of a ball when it hits a surface such as a wall or block, and many other such topics that deserve a post alone.
Cloning games like this is a good idea I think, and not just for the sake of practice. When it comes to cloning a game like breakout there is not just cloning the mechanics of the game, but also adding my own features and tweaks that help to make the project distinct from all the other breakout clones on the open Internet. Cloning the game is often just a starting point for a project like this.
Time for yet another canvas example this time I think I will do a quick example of drawing a star using javaScript and canvas just for the sake of doing something fun. One thing that comes to mind is just drawing stars, and making a few different ways of going about doing so, to gain a sense of the best ways to go about doing so. In the process I might learn more about how to go about drawing things in general when it comes to a little javaScript used with canvas elements.
There are many ways of drawing a star with a canvas element and a little javaScript, many solutions that I see involve making a draw method that will draw a star directly to the canvas. They are like the built in 2d context methods like that of the arc method where one just passes some arguments and a star is drawn to the canvas. Although these kinds of solutions work I think a better way of doing so is to create a method that will create an array of points, and then have a draw method that will just render that array of points to the canvas. That way the process of drawing a star is just a matter of working out logic that will create an array of points that are to be rendered in a connect the dots type fashion. By doing so I am also pulling the state of these points away from logic that is used to render the state of such points to the canvas.
There is also taking a moment to just have a little fun with canvas and stars for once. Canvas elements are a part of front end javaScript that are a great example of fun, and creative rather than dull and boring javaScript. With that said in this example I think I will also be touching base on a wide range of other topics that come up when create a canvas project from the ground up, such as object pools, moving an object by way of system time rather than stepping on each loop, and more. There is a lot that can be done when it comes to getting creative with this kind of thing, so this post should be a little fun for once.
So then when it comes to javaScript form examples there is just getting started with input elements, and forms on the client side for starers. This is simple enough, but in order to have a truly functioning form one will have to get into working out server code for some kind of back end system. This back end system can start out with something that is very simple, but when it comes to making a real project things can get very time consuming especially if one is making everything from the ground up.
Depending on what it is that you want or need to do with a javaScript form and input elements a back end system may not be needed at all, however a typical use case of forms is to involve some kind of back end system. Still that might not always be the case, so in this post I will be going over some simple examples that just have to do with the basics of working with form elements and javaScript in a client side javaScript environment. In addition I might get around to at least one example that make use of a nodejs back end system.
This will be the first post of a new series of posts that serve as javaScript examples. They will aim to be simple getting started examples for new developers that are just learning javaScript for the first time, while also maybe still being of interest for more experienced developers also.
This javaScript example post will be on making a multiplication table module example with just core javaScript code. I will then be going over some additional client side javaScript code that can then be used as a way to render this multiplication table. So this might not prove to be the most interesting javaScript example post, but I have to start somewhere with these, and in time I might get around to making a few that will prove to be more interesting.
One major reason why is because many posts on the topic of javaScript examples do not always give such a great overview of what can be done with the language. So I thought I would start out with something very simple like just making a multiplication table, and then may move onto some more interesting examples like an experience point system javaScript example or something to that effect.
However I think that the bulk of these javaScript examples should be about a module that will work great in a client side environment, but also in a nodejs environment also actually without changing to much in the code. The emphasis should be on going headless as one might put it. That is making javaScript code that just creates and object, but does not render that object as that is something that will change from one environment to another.
Well lets get to it then so that we can move on to something else that might prove to be more interesting.