Tetris in Javascript!

I'm fiddling around with Javascript, and managed to build a Tetris protoype. I like that There aren't actually any tetris blocks on screen- no display objects - but rather I maniplate the bg colors to create the blocks. Feel free to download the code, and let me know what you think.

Play Tetris
Donwload Source code

תגובות

הוסף רשומת תגובה

פוסטים פופולריים מהבלוג הזה

Raycasting engine - polished

תמונה
So i've been hard at work on my wolf3d raycasting clone, and have added floors, ceilings and furniture. For more information on what ray casting is, check out my previous video: https://yonnyzohardesignblog.blogspot.com/2020/04/were-still-dealing-with-pseudo-3d-retro.html Anyway, the furniture is drawn after being hit by a ray, except it is not drawn column by column like the walls, but rather as a single blit, and scaled by its distance. This means it looks the same regardless of angle, although you could always prepare in advance different images to be blitted at different angles (36 images to be changed every 10 angles for instance). The Floors however we a completely different story. I ended up using a technique called "mode7" - creating an off screen bitmap, equivalent in size to my map, populated with floor tiles. I then defined a near and far plane that stretched from the left most angle of my line of sight to the right most angle. I then began sampl...
המשך לקרוא

Pseudo 3D First Person Shooter Example

תמונה
We're still dealing with Pseudo 3D retro games - The creation of 3d worlds without using a 3d engine, models etc - but rather simple pixel manipulation on a 2d canvas.Today I'd like to show an example of the beautiful classic - Wolfenstein 3d - which was a pioneer in the pseudo 3d category.In previous posts we saw how to simulate depth on a static image of a road, by progressing towards an imaginary distance. We did so by drawing the pixels in each row of the road according to a set percentage that got smaller as we progressed towards the distance.In Wolf 3d the creators used a similar approach. They split the screen into columns and filled each column with a "wall segment". The height of each wall (the number of rows the pixels of each segment took up) was determined by the distance of the player to that wall.How do you calculate distance and depth in a 2d canvas? By using a technique called "Ray casting".You start out with a 2d map (can be seen in t...
המשך לקרוא

Pseudo 3d Isometric view

תמונה
Today i'd like to demonstrate another nifty use for pseudo 3d pixel manipulation - 3d isometric view! We've all seen 2d games using isometric view, mostly popular in early strategy games like Age of Empires, or StarCraft. Rotating tiles 45 degrees creates the illusion of depth, which brings us closer to a 3d feeling. However, using pixel manipulation and simple geometry we can do better and create a much richer sense of 3d. The attached video shows a map created completely with 2d pixel manipulation, although it appears 3d. The effect is achieved by creating each image (building and tree) like a cake - layer by layer, with each layer getting a slight offset on the Y axis (known as sprite stacking). For example, the bottom layer of the tree will be drawn at its determined x and y, and the following layer will be at (x, y - 2). Our tree is made up of 10 layers of stump, and 4 layers of green leaves. Our building uses 20 layers, some consisting of the same image, ...
המשך לקרוא