- Home
- HTML
Canvas Basics – Arkanoid Game Tutorial
Whether you know it as Breakout, Arkanoid or any of the many names the game is known as, this tutorial will show you how to create Arkanoid using just a simple text editor and web browser. Over the last few posts, we have been looking at elements of code for gaming and we even created […]
Continue readingCanvas Basics – 09 More On Arrays
This is the ninth post in this series looking at the <canvas> element in HTML5. Each post will give a new element of snippet of code that can be put together to create your own games. So far we have covered the main elements needed to create a basic Pong-style tennis game. In this post, […]
Continue readingCanvas Game Tutorial Pong
After several posts about Canvas and game code, we are finally ready to put together our first game, Pong in this game tutorial. For those of you too young to remember 2d games or why it was so important for Marty McFly’s parents to kiss at the dance…. Pong is a basic tennis-style game. The […]
Continue readingCanvas Basics – 08 Bouncing And Deflecting
This is the eighth post in this series looking at the <canvas> element in HTML5. Each post will give a new element of snippet of code that can be put together to create your own games. So far we have displayed text on screen, looked at the mouse’s X and Y co-ordinates on the canvas, […]
Continue readingCanvas Basics – 07 Random Positions
This is the seventh post in this series looking at the <canvas> element in HTML5. Each post will give a new element of snippet of code that can be put together to create your own games. So far we have displayed text on screen, looked at the mouse’s X and Y co-ordinates on the canvas, […]
Continue readingCanvas Basics – 06 Collision Detection
This is the sixth post in this series looking at the <canvas> element in HTML5. Each post will give a new element of snippet of code that can be put together to create your own games. So far we have displayed text on screen, looked at the mouse’s X and Y co-ordinates on the canvas, […]
Continue readingCanvas Basics – 05 Limiting Movement To Canvas
This is the fifth post in this series looking at the <canvas> element in HTML5. Each post will give a new element of snippet of code that can be put together to create your own games. So far we have displayed text on screen, looked at the mouse’s X and Y co-ordinates on the canvas, […]
Continue readingCanvas Basics – 04 Move An Object Using The Keyboard
This is the fourth part of a series of posts looking at the <canvas> element in HTML5. I have been using the canvas element to create games and over this series of posts will look at some of the Canvas basics. This is a follow on from the posts looking at maths in games (click […]
Continue readingCanvas Basics – 03 Moving An Object
This is the third of a series of posts looking at the <canvas> element in HTML5. I have been using the canvas element to create games and over the next few posts will look at some of the Canvas basics. This is a follow on from the posts looking at maths in games (click here […]
Continue readingCanvas Basics – 02 Mouse Detection
This is the second of a series of posts looking at the <canvas> element in HTML5. I have been using the canvas element to create games and over the next few posts will look at some of the Canvas basics. This is a follow on from the posts looking at maths in games (click here […]
Continue readingCanvas Basics – 01 Hello World
This is the first of several posts looking at the <canvas> element in HTML5. I have been using the canvas element to create games and over the next few posts will look at some of the Canvas basics. This is a follow on from the posts looking at maths in games (click here to read […]
Continue readingWhy have a website?
Why have a website? This is a link to an article I published recently on LinkedIn.
Continue readingLayout With Columns
Improving your layout with columns is easy to do. Whether you want to set a layout with 3 columns, or a 3 column layout, it’s simply and gives very different results. I say 3 columns, but this could be 2, 4, 5 whatever you want (the more columns you have, the less impressive the page […]
Continue readingHTML5 CSS LAYOUT
So, you can display text and images on screen, you can insert numbered lists and bullet point lists, you can change elements of the page, but you’re probably not feeling as warm and fuzzy about your website as you feel. Let’s look at HTML5 CSS Layout now, “div” in particular and then hopefully you will […]
Continue readingCSS Selectors
CSS Selectors allow us to target and style specific elements of our webpage. In the last post, we applied borders and fonts to different headers in our page. The different level headers (h1, h2, h3) are different elements of the page. In the CSS file, we use CSS selectors to select and style those […]
Continue reading