Coding challenges for future game developers

CodeGuppy · October 19, 2019

I want to share a small PDF booklet with JavaScript coding challenges:

https://codeguppy.com/site/download/50_coding_challenges.pdf

These coding challenges are designed for beginners and intended to offer the foundation that they may need when developing mini-games on https://codeguppy.com or any other platform.

8Observer8 · October 20, 2019

I am not beginner but I know how to make it more hard for me. I will write Unit Tests using Jasmine Framework. I study TDD and this challenge is useful for me. I use TypeScript.

1. Print numbers from 1 to 10. We expect that the array with numbers [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] will be generated. I wrote this unit test first. It is TDD in action.

Playground: https://next.plnkr.co/edit/NJHyFVGFXJjCaZSV?preview

KataTests.ts

import Kata from "../../src/client/Kata";

describe("KataTests", () =>
{
    it("GetNumbersFrom1to10_ReturnsNumbersfrom1to10", () =>
    {
        // Arrange
        let expectedArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

        // Act
        let actualArray = Kata.GetNumbersFrom1To10();

        // Assert
        expect(actualArray).toEqual(expectedArray);
    });
});

Kata.ts


export default class Kata
{
    public static GetNumbersFrom1To10(): number[]
    {
        return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    }
}

Program.ts


import Kata from "./Kata";
import Output from "./Output";

class Program
{
    public static Main(): void
    {
        // Get array
        let resultArray = Kata.GetNumbersFrom1To10();

        // Print array
        resultArray.forEach((element) =>
        {
            Output.Instance.Print(element.toString());
        });
    }
}

// Debug Version
Program.Main();

// Release Version
// window.onload = () => Program.Main();

8Observer8 · October 21, 2019

I want to find challenges for practice with WebGL features. If we know how to draw and move a rectangle we can write a lot of simple games like: breakout, snake, tetris and so on. I use the glMatrix library for linear algebra.

Colored Rectangle with translation: https://jsfiddle.net/8Observer8/t2q4rmnm/

019_translate_square_using_gl_matrix.png.3f4592dacce3a030a8f93e1fe3f09fa6.png

Just save it in the index.html file and run in browser. It is JavaScript ES5:

index.html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Translate a square using glMatrix</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script>
    <style>
        #renderCanvas {
            border: 5px solid #aaaaaa;
        }
    </style>
</head>
 
<body>
    <canvas id="renderCanvas" width="250" height="250"></canvas>
 
    <script>
        var vertexShaderSource =
            `attribute vec2 a_Position;
            uniform mat4 u_ModelMatrix;
 
            void main()
            {
                gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0);
            }`;
 
        var fragmentShaderSource =
            `precision mediump float;
            uniform vec3 u_Color;
 
            void main()
            {
                gl_FragColor = vec4(u_Color, 1.0);
            }`;
 
        var gl = document.getElementById("renderCanvas").getContext("webgl");
 
        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);
 
        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);
 
        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);
 
        var vertices = new Float32Array([
            -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5
        ]);
 
        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
 
        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);
 
        var u_Color = gl.getUniformLocation(program, "u_Color");
        gl.uniform3f(u_Color, 0.635, 0.450, 0.125);
 
        var modelMatrix = mat4.create();
        mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(0.3, 0.3, 0.0));
 
        var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix");
        gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix);
 
        gl.clearColor(0.898, 0.984, 0.905, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
 
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    </script>
</body>
 
</html>

8Observer8 · October 21, 2019

Final example in WebGL 1.0 and JavaScript. Textured Rectangle: https://jsfiddle.net/zjydm1ev/

026_applying_a_texture_to_a_square.png.c85d8c69761d38673ce828cf74deb7a2.png

You need run it from local server. I use http-server. Install it using the command: npm i http-server -g And run it in place where the index.html file is: http-server

index.html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Applying a texture to a square</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script>
    <style>
        #renderCanvas {
            border: 5px solid #aaaaaa;
        }
    </style>
</head>
 
<body>
    <canvas id="renderCanvas" width="250" height="250"></canvas>
 
    <script>
        var vertexShaderSource =
            `
            attribute vec2 a_Position;
            attribute vec2 a_TexCoord;
            uniform mat4 u_ModelMatrix;
            varying vec2 v_TexCoord;
 
            void main()
            {
                gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0);
                v_TexCoord = a_TexCoord;
            }`;
 
        var fragmentShaderSource =
            `
            precision mediump float;
            uniform sampler2D u_Sampler;
            varying vec2 v_TexCoord;
 
            void main()
            {
                gl_FragColor = texture2D(u_Sampler, v_TexCoord);
            }`;
 
        var gl = document.getElementById("renderCanvas").getContext("webgl");
 
        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);
 
        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);
 
        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);
 
        var verticesAndTexCoords = new Float32Array([
            -0.5, 0.5, 0.0, 1.0,    // (x, y), (u, v)
            -0.5, -0.5, 0.0, 0.0,
            0.5, 0.5, 1.0, 1.0,
            0.5, -0.5, 1.0, 0.0
        ]);
 
        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, verticesAndTexCoords, gl.STATIC_DRAW);
 
        var FSIZE = verticesAndTexCoords.BYTES_PER_ELEMENT;
 
        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 4 * FSIZE, 0);
        gl.enableVertexAttribArray(a_Position);
 
        var a_TexCoord = gl.getAttribLocation(program, "a_TexCoord");
        gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, 4 * FSIZE, 2 * FSIZE);
        gl.enableVertexAttribArray(a_TexCoord);
 
        var image = new Image();
 
        image.onload = function ()
        {
            gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
            gl.activeTexture(gl.TEXTURE0);
 
            var texture = gl.createTexture();
            gl.bindTexture(gl.TEXTURE_2D, texture);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
 
            var u_Sampler = gl.getUniformLocation(program, "u_Sampler");
            gl.uniform1i(u_Sampler, 0);
 
            var modelMatrix = mat4.create();
            mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(1.5, 1.5, 1.5));
 
            var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix");
            gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix);
 
            gl.clearColor(0.898, 0.984, 0.905, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);
 
            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
        }
        image.crossOrigin = "";
        image.src = 'https://dl.dropboxusercontent.com/s/xi091ya34qqzda2/lightblueflower.jpg';
    </script>
</body>
 
</html>

8Observer8 · October 23, 2019

I think this challenge can be useful for me. I just think how to make challenges for learning WebGL. For example, draw 5 cube, make a pyramid using cube. The CodeGuppy web site is very good. I found a lot of tutorials that I can translate to TypeScript/WebGL 1.0 and C#/OpenTK/OpenGL30. I created a few cards on Trello.

I will try to solve these 50 tasks from this topic in 3 languages: TypeScript, C# and Python with Unit Tests because I need a practice with TDD (Test-Driven Development). I really like to write Unit Tests. I will create cards for the challenges and repository on GitHub.

Edited October 23, 2019 by 8Observer8

Sign In

Coding challenges for future game developers

Recommended Posts

CodeGuppy

Link to comment

Share on other sites

8Observer8

Link to comment

Share on other sites

8Observer8

Link to comment

Share on other sites

8Observer8

Link to comment

Share on other sites

8Observer8

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity