Advertisement

Latest Javascript Activity

8Observer8
April 05, 2024 10:42 AM
How to set up Box2D-WASM with importmap and Rollup for JavaScript

​Playground: https://plnkr.co/edit/BGNYcIJRiJXpd9N4?preview

GitHub: https://github.com/8Observer8/how-to-set-up-box2dwasm-with-importmap-rollup-js

glMatrix is just a bonus:

index.html

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewpor…
40,119 views
Advertisement
8Observer8
July 24, 2023 02:11 PM
Sprite in SFML style using FreeTexturePacker, pure WebGL 1.0, and JavaScript

This example loads sprites from the FreeTexturePacker sprite sheet and uses a sprite in SFML style

Playgrounds:

2,397 views
8Observer8
July 21, 2023 01:36 PM
The debug drawer of Box2D-WASM colliders using Melon.js and JavaScript

I added debug drawing of the circle collider using the Melon.js game engine and Box2D-WASM.

Live demo: https://8observer8.github.io/webgl10-js/debug-drawer-box2dwasm-melonjs-js/
GitHub repository: https://https://github.com/8Observer8/debug-drawer-box2dwasm-melonjs-js

Playgrounds/Sandboxes:

2,583 views
8Observer8
May 29, 2023 03:36 AM
The simplest multiplayer using WebSockets and pure WebGL 1.0 with animation from Resident Evil

I implemented the simplest multiplayer using WebSockets (package ws - npm) and Node.js. I send keyboard input to the server, which relays it to other clients. Used by WebGL 1.0, glMatrix and OimoPhysics. Extracted original models, textures and animations using RE1MV. Created a non-skinned skel…

8,111 views
[Leek programming game: Leek Wars

Hi!

I forgot to mention that the game is coded with the following technologies:

  • Front end: Vue.js, TypeScript, CodeMirror, Vuetify
  • Back end : PHP, Java, Nginx, Docker, Traefik
  • Software: VSCode, Gimp, Inkscape, Blender

Do not hesitate if you have any questions or suggestions :)

2,896 views

Looks like what you're looking for is a loop similar to the following:

for (x = ids[0]; x !== ids[0][2][2][2][2][2][2][2][2][2][2][2]; x = x[2]) {
  if (x[3] === ids[1][i][0][1]) {
    x[2] = [subInpVal,subTxtArray,[],ids[1][i][0][2]];
    break;
  }
}
4,588 views

@a light breeze This slightly helped, as I have just realized what the problem was,

var docHeight = $(document).height();
var docWidth = $(document).width();

it was with these two functions, all I had to do to make it work the way that I wanted was by changing the document's to window so that it wasn…

3,895 views
8Observer8
February 09, 2023 03:05 PM
Five-pointed Star with WebGL and JavaScript

Playground: https://plnkr.co/edit/W49ndxcQemMgkAoP

My Video: 

assets/shaders/default.vert

attribute vec2 aPosition;
uniform mat4 uMvpMatrix;
 
void main() {
    gl_Position = uMvpMatrix * vec4(aPosition, 0.0, 1.0);
}

assets/shaders/default.frag

precision mediump float;
uniform vec3 uColor;
 
void…
20,690 views

I’ve always wanted to tell a story that’s so tragic and moving. A story that could bring the characters to life and people can relate to . The game will be an RPG and I would like for it to be in the style of earthbound or a modern pixel art game. Any developers that are interested please reply to …

2,582 views

I've long forgotten all the web dev things. But i assume to edit an external webpage in an iframe, the only way is to edit the html of said webpage itself (on it's server where it comes from). 

3,893 views
JoeJ
September 04, 2022 08:32 AM

Awtsmoos said:
Not sure if this can be used in an octree, however, or of it would save size.

Yes it can and should be used.

Hypothetically if I'm not transforming the actual model itself it might be unnecessary to apply the world matrix to every vertex individually, maybe that would save time, or mayb…

13,666 views

Bad design and needed to simplify the problem I'll post my solution shortly.

UPDATE:

My new solution basically checks a pathing array against the collision map, and returns true or false, accordingly. Here it is if anyone is interested.

https://gist.github.com/Langerz82/32a9707b83bfd03dd5b041ab1f2309c…

5,040 views

Hello!

I went live with a pet project called “A cup of skill”.

It's a silly idea I had to host and run user-generated code for simple games where you update a JSON state and its automatically synced to clients. The project focuses on competitive multiplayer or solo highscore games.  They are lim…

2,908 views
8Observer8
March 11, 2022 03:42 PM
Make small Games. Minesweeper in WebGL. Port from NoobTuts

I made this playable demo in pure WebGL 1.0 and JavaScript using this tutorial: Unity 2D Minesweeper Tutorial

I use these tools:

5,647 views

After recharging my batteries for seven days, I am now filled with usable intent.  Pure JavaScript is appealing to me, and I am wondering if there are any areas that I need to be aware of besides what I have done.  What I am concerned with is just JavaScript, not the libraries like React.…

8,579 views

This is my template in TypeScript that shows how to write unit-tests with mocks and spies: https://github.com/8Observer8/person-service-mocha-sinon-ts​ I wrote a short instruction in the README.md file. You can use Test-driven development:

Test-driven development (TDD) is a software development proc…

16,759 views

Sounds like you've resolved the issue already, so that's great.

I'd like to offer you some alternatives while you're working through this.  RegEx is powerful, but it can become extremely difficult to handle more complex syntax.  My suggestion if you plan on going down this path is to use a…

8,110 views

For your virtual gamepad, you often have a bounding box for the controls in screen space. Detect when a touch appears inside one of those controls, you could but must not use a spatial positionening data structure for this, a simple rectangle vs. point check should do the trick as well for a limite…

6,295 views
8Observer8
December 30, 2021 12:39 AM
Christmas Tree in pure WebGL

Demo in pure WebGL, glMatrix, Ammo.js, JavaScript: Christmas Tree

  • w, s, d, a - for moving
  • arrows keys - for camera rotation
  • the ‘f’ key - the third person camera for debugging of colliders
5,961 views
8Observer8
December 17, 2021 05:11 AM
Deploying a Node.js server with WebSockets on a free hosting Heroku. Web- Desktop Clients (Qt)

Working example: https://mouse-click-js.herokuapp.com/ in which the coordinates of the mouse click are sent to the server and the response is returned to the client in the form of a message that it displays on the screen.

14,581 views

@LorenzoGatti

Well, does the mixing of px, vw, and percentage CSS size units matter, I think that is not much of a problem after all it is just the way that I want it.

Sorry, but nothing in my stylesheet is irrelevant, they all have a purpose or will have one eventually.

Also, the test line does not s…

6,712 views
8Observer8
November 29, 2021 07:59 PM

This example https://github.com/8Observer8/login-websocket-js is just for demonstration how to read information on server side. It uses WebSockets for communication. You can save records of your users to MySQL (MongoDB and so on) to show a record table. This simple example reads login/password from…

5,666 views

Solution:

const userData = { name: name };
(this.body as any).userData = userData;
function detectCollison(): void
{
    const dispatcher = physicsWorld.getDispatcher();
    const numManifolds = dispatcher.getNumManifolds();

    for (let i = 0; i < numManifolds; i++)
    {
        const contactMa…
4,514 views
[Need Javascripter] Nostalgic 16-bit 2d RPG (Rev Share)

GAME IMAGE




Hello, My name is Royal! I am an experienced game designer / developer looking for javascript programmer(s)

My game right now is an RPG about being a barbarian whose tribe got attacked by a dragon. The setting is medieval times. The goal is to kill the dragon and collect all the characters…

2,467 views

I started programming in college, if you're starting now then you'll probably be leagues ahead of your classmates by the time you get to college if you stay at it consistently. 

I just wanted to point out that the three.js library is very popular for javascript game making. https://threejs.org/…

6,161 views

We released our debut title Untold RPG a year ago. It's a dark fantasy RPG, available on App Store and Google Play. With over 250.000 downloads, we've started to build a decent following, and we're currently working on the sequel - and we have many more games planned. We're a small indie team consi…

3,696 views
8Observer8
December 21, 2020 02:22 PM
Set Up Ammo.js with Browserify (Ammo.js is a port of Bullet Physics Engine to JS)

I found a solution how to use Ammo.js with Browserify:

npm install kripken/ammo.js

Install Browserify and UglifyJS globally:

npm i browserify uglify-js -g

Make this project structure:

public/index.html
public/js
src/client
src/server

Copy this example to src/client/main.js

const Ammo = require("ammo.js");

l…
4,918 views
khawk
April 28, 2020 03:46 PM
Phaser 3.23.0 Released - New Rope Game Object and more

The Phaser community, the open source desktop and mobile HTML5 game framework, has released Phaser 3.23.0 to GitHub and npm. This release includes the new Rope Game Object, 100% JSDoc coverage for the entire API, and a list of improvements and new features as they progress to Phase 4.

The new Rope G…

4,394 views
ProjectTaival
April 27, 2020 08:31 AM
Dev Diary #117 - Last Week, In Summary 15

Hello and welcome to this weeks Dev Diary, the short version and a tad more info about SEO concerns that I found out.

Last week went along with the following topics;

  • Searching for the best way to use CSS for Tabs and Loader screen, instead of Javascript. Search is still ongoing, but one of the most p…
3,819 views
8thWallDev
November 18, 2019 06:22 PM
Women in Motion: Art Exhibit Uses AR and AI to Amplify the Voices of Women in Entertainment

An eye-opening AI- and WebAR-activated art gallery took place in LA at the Women in Entertainment Summit and at ART+TECH 2 exhibit at the Infinity Festival Hollywood in October and November.

The Women in Motion Augmented Reality art exhibit by creative studio Studio Moshon brought to life oil pain…

7,484 views
8thWallDev
November 04, 2019 07:54 PM
A Week in WebAR: Ally + MONOPOLY Transform Cities into a Live Board Game and Adidas Surprises…
A Week in WebAR: Ally + MONOPOLY Transform Cities into a Live Board Game and Adidas Surprises Commuters

We’re sensing a growing trend of brands using web-based AR to bring an element of surprise and delight to their customers’ daily routines, with entertaining games that truly augment their realit…

4,379 views
Webellion
November 03, 2019 11:17 AM
End of October DevLog

RTS fans, we're coming at you with yet another DevLog entry!

New features are landing in this weeks version
  • Advanced AI updates to enhance how computers control their economy, production, and military in Skirmish mode.
  • Long-waited in-game menu where players can fine-tune how they …
3,033 views
8thWallDev
October 29, 2019 03:24 PM
Introducing 8th Wall’s Cloud Editor & Built-in Hosting
Cloud Editor and Hosting allows users to create, collaborate on and instantly publish WebAR projects.

It’s finally time for us to share what we’ve been busy working on and we couldn’t be more excited!

We spent the past year listening to you on how we could make creating WebAR faster, easier and mor…

4,625 views
8thWallDev
October 14, 2019 07:12 PM
A Week in WebAR: London’s Waterloo Station, Porsche, Clarins, EVA Air and a Spider-Man: Far From…
A Week in WebAR: London’s Waterloo Station, Porsche, Clarins, EVA Air and a Spider-Man: Far From Home Activation

A Week in WebAR is a new 8th Wall blog series that highlights innovative brand experiences created by our customers and partners.

https://medium.com/media/58fd9e884062be301494fc3705b958…
4,024 views
8thWallDev
October 07, 2019 04:43 PM
New Integration: Microsoft’s Mixed Reality Capture Studios Brings Lifelike Holograms to the Web
Image provided by Microsoft

Our latest integration will allow you to bring realistic holograms to life in WebAR. Microsoft’s Mixed Reality Capture Studios generates high res, low latency volumetric videos which can now be imported into your 8th Wall Web project. Check it out:

https://medium.com/med…
3,819 views
8thWallDev
September 18, 2019 03:26 PM
A Year in WebAR: Celebrating the First Anniversary of 8th Wall Web

Wow, we can’t believe it’s already been one year since we rolled out 8th Wall Web! Since its debut in September 2018, our partners and customers have developed some pretty amazing augmented reality activations using 8th Wall’s entirely web-based solution. We’ve seen everything from super heroes sc…

3,606 views
8thWallDev
September 11, 2019 07:38 PM
Adidas Takes ARCommerce to Finish Line

If you happen to be at a Finish Line store this week, you might notice a display in the center of the shop advertising Adidas’ latest line of kicks. But with this in-store centerpiece there’s more than meets the eye. It’s actually a WebAR installation containing hidden 3D content, all part of its …

3,835 views
MakeIndieGreatAgain
September 19, 2018 04:48 PM

Game developers will be able to become pioneers in the development of decentralized games for the gambling industry using DAO.Casino protocol.

On September 17, 2018, DAO.Casino is opening Sandbox for developers, independent teams and game development studios that choose to harness the power …

4,561 views
Palitri
August 25, 2017 01:54 PM
Axis 3D for Web

Axis is a free open source 3D engine for web pages and desktop applications. It's been a month since its official release with full source code, editor and all and there is more content available now like samples, info pages, API documentation and recently the team opened the discussion pages on…

4,392 views
Advertisement
Advertisement