CodeGuppy

Coding challenges for future game developers

Recommended Posts

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.

 

wide_cc.png

Share this post


Link to post
Share on other sites

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();

 

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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 by 8Observer8

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.