Pacman concept using HTML, CSS(stylus), JavaScript(Babel) - Coding Torque

Pacman Concept

Hello Guys! Welcome to Coding Torque. In this blog, I'm going to explain to you how to make Pacman concept using HTML, CSS(stylus), JavaScript(Babel) . You can use this effect on your website/portfolio to showcase any skills/features. This will be a step-by-step guide. Let's get started 🚀.

Let's go step by step:

Step 1: HTML Code

<script> type="x-shader/x-vertex" id="shader-passthrough-vertex">
varying vec2 vUv;
void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
</script>

<script> type="x-shader/x-fragment" id="shader-passthrough-fragment">
uniform sampler2D tDiffuse;
varying vec2 vUv;
void main() {
    gl_FragColor = texture2D( tDiffuse, vec2( vUv.x, vUv.y ) );
}
</script>

<script> type="x-shader/x-fragment" id="shader-volumetric-light-fragment">
varying vec2 vUv;
uniform sampler2D tDiffuse;
uniform vec2 lightPosition;
uniform float exposure;
uniform float decay;
uniform float density;
uniform float weight;
uniform int samples;
const int MAX_SAMPLES = 100;
void main()
{
    vec2 texCoord = vUv;
    vec2 deltaTextCoord = texCoord - lightPosition;
    deltaTextCoord *= 1.0 / float(samples) * density;
    vec4 color = texture2D(tDiffuse, texCoord);
    float illuminationDecay = 1.0;
    for(int i=0; i < MAX_SAMPLES; i++) {
    if(i == samples) {
        break;
    }
    texCoord -= deltaTextCoord;
    vec4 sample = texture2D(tDiffuse, texCoord);
    sample *= illuminationDecay * weight;
    color += sample;
    illuminationDecay *= decay;
    }
    gl_FragColor = color * exposure;
}
</script>

<script> type="x-shader/x-fragment" id="shader-additive-fragment">
uniform sampler2D tDiffuse;
uniform sampler2D tAdd;
varying vec2 vUv;
void main() {
    vec4 color = texture2D( tDiffuse, vUv );
    vec4 add = texture2D( tAdd, vUv );
    gl_FragColor = color + add;
}
</script>


<img id="map-test" src="data:image/gif;base64,R0lGODdhHAAfAPIAAAAAAAD/AAAA//8AACZFySZFySZFySZFySH5BAEAAAQALAAAAAAcAB8AAAOwOLrc/iMIAISkNahL7cyKwIhj2JDmADArq7QLrKZ0itYk5+0SL3gdzeBGupWGR2IteeQAhD3oTxp8GIsnB4YyY7q24FUrOp2+VGFMF8VNibcObBhJZ4GjaHh0nkXOsQ1gaxAkb2liGx9bFmeHXC1GC4V5bUcyLnUMOk6MEYpAIJlXS0qifaOSiVAZZT5Pql6RNkt0gHGzCxJ4nq+enWRCsqmZt8SBtE2KYK5pnRDP0AkAOw==" />

Step 2: CSS(Stylus) Code

body
    overflow: hidden
    //background-color: white
    background: radial-gradient(ellipse at center, #000000 0%, #100B0D 99%);
    
  img
    display: none

Output Till Now

Check Codepen for JavaScript:

Code Credits: @radixzz

Written by: Piyush Patil

If you want me to code any project or post any specific post, feel free to DM me at IG @code.scientist or @codingtorque

If you have any doubt or any project ideas feel free to Contact Us 

Hope you find this post helpful💖 

 

 Follow us on Instagram for more projects like this👨‍💻 

- @code.scientist 

- @codingtorque  

- @codingknights