zhenglinlei / stackblock.io Goto Github PK

View Code? Open in Web Editor NEW

4.0 1.0 2.0 4.29 MB

.io minigame

Home Page: https://zhenglinlei.github.io/stackblock.io

License: Apache License 2.0

HTML 8.25% JavaScript 74.03% SCSS 17.72%

javascript threejs cannonjs game

stackblock.io's Introduction

⚠️ Warning

Passive activity due status="Working" and mode="Studying"

{
	name: "Zheng Lin Lei",
	status: "Working hard...",
	location: "Spain",
	github: "github.com/ZhengLinLei",
	linkedin: "linkedin.com/in/zhenglinlei",
	message: "Please support our open-source project",
	language: [
		"Spanish",
		"Chinese",
		"Catalan",
		"English",
		"Korean",
  	],
	contact: [
		"[email protected]",
		"[email protected]",
	],
	current_job: {
		job: "Backend Developer",
		company: "F1 Connecting",
		website: "f1-connecting.es",
		linkedin: "linkedin.com/company/f1-connecting",
	},
	education: {
		university: "University Polythecnic of Valencia",
		career: "Informatics Engineering",
	},
	fields_of_interests: [
		"Web Development",
		"Game Development",
		"Machine Learning",
		"Microprocessor & CPU Programming",
		"Robotics",
	],
}

stackblock.io's People

Contributors

Stargazers

Watchers

Forkers

sankeyr3 achechi15

stackblock.io's Issues

Manage to pull apart dist and src

Check it is can consider to pull apart dist code from src.

There are two options ro manage version release:

Add dist release code in docs folder
Create a separated branch to merge master in every release

Apple Screen Issues

In safari:

In the app:

Combo strike problem

The game gives me combos trikes every time I click it

Create Bot easter egg

setInterval(()=>{
    const lastLayer = stackBoxArr[stackBoxArr.length -1];
            const previousLayer = stackBoxArr[stackBoxArr.length -2];

        // LAST LAYER DIRECTION
        let lastDirection = lastLayer.direction;

        // CALCULATE OUTBOX 
        let delta = lastLayer.threejs.position[lastDirection] - previousLayer.threejs.position[lastDirection] // !NOTE: THE BOTH BOX MUST BE CALCULATED WITH THE SAME DIRECTION
        let alpha = Math.abs(delta); // GET POSITIVE NUM

        // CALCULATE OUTBOX WIDTH DEPTH
        let outbox = (lastDirection === "x")? lastLayer.width : lastLayer.depth;
        let inbox = outbox - alpha;
        
        const boxRelation = inbox / outbox; // 0 to 1
        if(boxRelation >= 0.9){
            document.body.click();
            
            console.log(boxRelation);
        }

}, 20);

Causing lag, after game over

The game over section cause lag in mobile devices. Please check the reasons. May the share image cause lag, or is there any other module that cause lag?

Take care that if something is causing lag, optimize it. If can not be optimized, remove it.

Error en space

Se buggea cuando mantienes la tecla space pulsada

Add PWA modal asking installation request

Show the pop-up modal if the user hasn't installed the game. Add don't show anymore option and disable it.

Randomizate color palette in every game

Random choose the design color palette after every new game.

Important
Do not confuse. Use the same color palette in an active game, don't change it in every layer created

// ==================================
// DEFINE STACK COLOR
const colorDesign = [
    [30, 70, 50],
    [200, 80, 60]
];

function changeBackground(i){
    scene.background = new THREE.Color(hslToHex(colorDesign[GAME_.designPalette][0] + 120 + (stackBoxArr.length), colorDesign[GAME_.designPalette][1], colorDesign[GAME_.designPalette][2]));
}

function generateBox(x, y, z, width, depth, animation = false){

    let colorPath = (animation) ? (stackBoxArr.length-1)*4 : stackBoxArr.length*4; // IF IT IS AN OUTBOX, GENERATE THE SAME COLOR AS THE INBOX

    const color = new THREE.Color(hslToHex(colorDesign[GAME_.designPalette][0] + (colorPath), colorDesign[GAME_.designPalette][1], colorDesign[GAME_.designPalette][2]));

    /* ...... */
}

Warn to user if fps count is below than FPS/2

This problem was found in Apple users devices, but we want to extend it to all devices

        // if enough time has elapsed, draw the next frame
        if (GAME_.fpsCtrl.elapsed > GAME_.fpsCtrl.fpsInterval) {
            // Measure fps
            GAME_.fpsCtrl.mFps = Math.round(1000 / GAME_.fpsCtrl.elapsed);
            if (GAME_.fpsCtrl.mFps < GAME_.fpsCtrl.fps/2) {
                console.log('Lagggggggggggggggg');
            }
            // Get ready for next frame by setting then = now
            GAME_.fpsCtrl.then = GAME_.fpsCtrl.now - (GAME_.fpsCtrl.elapsed % GAME_.fpsCtrl.fpsInterval);
            // SAFE TO DRAW
            draw();
        }

Add key event to the game for pc players.

Key event for pc players missed. Need to add the extension.

PlayBot stopped working

The playBot() function stopped working in new versions

Add Screenshot feature

Render the body html to image when the user reach new record and show it, then the user can share it friends and social media to flex their score.

Render image when the user get new record, not in every game over.

Can use this library: https://github.com/tsayen/dom-to-image

var node = document.getElementById('my-node');

domtoimage.toPng(node)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

And share it with native API

async function shareImage() {
  const response = await fetch('nacho.jpg');
  const blob = await response.blob();
  const filesArray = [
    new File(
      [blob],
      'meme.jpg',
      {
        type: "image/jpeg",
        lastModified: new Date().getTime()
      }
   )
  ];
  const shareData = {
    files: filesArray,
  };
  navigator.share(shareData);
}

Lag with the confetti when you get x10 combo-strike

In some devices the animation of the confetti when the game is running cause a little second of lag stunning.

Control animation in > 60fps

Some devices in 144fps or > 60fps. The game goes faster than normal.

Check the use of https://threejs.org/docs/#api/en/renderers/WebGLRenderer.setAnimationLoop

Change localStorage data-name

Use logical algorithm to save game data in localStorage. Dispise that is not using a lot the locaStorage but the game must have the data encripted.

Change bestResult to another name and encrypt the data to avoid hacking
Add context to game to prevent lose the game status after refreshing. (Keep the game after leaving)

Change Best Score to Score

The game show the text Best Score although is not the the record score. Change the text to Score.

       <header class="score-tab">
            <h3 class="best">NEW RECORD</h3>
            <h3 class="score">BEST SCORE</h3>
            <div class="color-shape"></div>
        </header>

Background Music

The game need bg music.

Requirements:

Need to be compatible for looping
Need to be compatible with other bg music without noticing the cut signal

Add background music

Add the music uploaded to the game. In ISSUE #16

Add DeadLock Mode

Add feature deadlock mode to the game when the user reach x20 combo.

Add:

Change velocity
Change BG and Color
Add Camera Shaking after putting a layer block

manifest.json

{
  "name": "Dev'Coffee",
  "short_name": "DevCoffee",
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#fdfdfd",
  "theme_color": "#db4938",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/images/icons/icon-72x72.png",
      "type": "image/png", "sizes": "72x72"
    }]
}

serviceWorker.js

const staticDevCoffee = "dev-coffee-site-v1"
const assets = [
  "/",
  "/index.html",
  "/css/style.css",
  "/js/app.js",
  "/images/coffee1.jpg",
  "/images/coffee2.jpg",
  "/images/coffee3.jpg",
  "/images/coffee4.jpg",
  "/images/coffee5.jpg",
  "/images/coffee6.jpg",
  "/images/coffee7.jpg",
  "/images/coffee8.jpg",
  "/images/coffee9.jpg",

  // Add own libraries to be cached
]

self.addEventListener("install", installEvent => {
  installEvent.waitUntil(
    caches.open(staticDevCoffee).then(cache => {
      cache.addAll(assets)
    })
  )
})

Zoom out after game over

Need to zoom out at least the 20% of the original zoom

    // CAMERA
    camera = new THREE.OrthographicCamera(
        cameraPos.width / -cameraPos.size, // left
        cameraPos.width / cameraPos.size, // right
        cameraPos.height / cameraPos.size, // top
        cameraPos.height / -cameraPos.size, // bottom
        cameraPos.near, // near
        cameraPos.far // far
    );
    camera.position.set(4, 4, 4);
    camera.lookAt(0, 0, 0);