A simple Sokoban game made in JavaScript + HTML + CSS

Overview





About

Sokoban is a puzzle video game genre in which the player pushes crates or boxes around in a warehouse, trying to get them to storage locations. Click for more info.

Description

This is another Sokoban game. I've made it in JavaScript (ES6) + HTML (Canvas API) + CSS (SCSS).


It was a challenge, because I built the prototype in a few hours with simple arrays, a canvas and color blocks. Then, took me two weeks to finally finish it complete with the graphics that I've made in pixel art and only three levels (believe me, make levels it's really hard).

Sokoban

You can play the game online.

Controls:

  • Use W, A, S, D or Arrow Keys to move the character arround the map.
  • Use R to reset the level.
  • Use M to toggle the Background Music.
  • Use X to toggle the Sound Effects.
  • Use Esc to pause the game and show the main menu.

Rules:

  • You NEED to push all the available boxes to fit each one on a goal destination.
  • You CAN'T pull the boxes.
  • You CAN'T undo a movement.
  • You CAN restart the level (R) as many times you want without punishment in the statistics.

Libs

Credits

  • Juan Manuel Flecha: Programming & Pixel Art graphics.
  • Sound Image: Background music & SFX
You might also like...

A simple electron wrapper for bonk.io, a fun online game

A simple electron wrapper for bonk.io, a fun online game I tend to play a lot. I dunno how useful it'd be for other players, maybe they'd like the fullscreen of it, but it'll probably mostly just be for myself to play around with the source code of the game.

Feb 16, 2022

LittleJS Logo LittleJS - The Tiny JavaScript Game Engine That Can

 LittleJS Logo LittleJS - The Tiny JavaScript Game Engine That Can

The Tiny JavaScript Game Engine That Can! ๐Ÿš‚

Dec 31, 2022

Hangman Game in JavaScript v2.3

Hangman Game in JavaScript v2.3

Hangman Game Hangman Game in JavaScript Hangman is a paper and pencil guessing game for two or more players. One player thinks of a word, phrase or se

Jul 27, 2022

JavaScript library guessing game, a Wordle clone

Jazle JavaScript library guessing game, a Wordle clone. A fork of cwackerfuss/react-wordle. See the list of accepted libraries: wordlist.ts Build and

May 26, 2022

A super generic Lua web engine. Uses Lua for front-end, JavaScript for back-end, implemented in HTML.

A super generic Lua web engine. Uses Lua for front-end, JavaScript for back-end, implemented in HTML.

A super generic Lua web engine. Uses Lua for front-end, JavaScript for back-end, implemented in HTML. This project is still in HEAVY development and w

Jan 31, 2022

A lightweight 3D game engine for the web.

A lightweight 3D game engine for the web.

A lightweight 3D game engine for the web. Built with three.js and cannon-es.

Dec 31, 2022

๐ŸŽ Open source racing game developed by everyone willing

๐ŸŽ Open source racing game developed by everyone willing

๐ŸŽ Open source racing game developed by everyone willing

Dec 26, 2022

Golf it! is a game designed to let you show off your code-fu by solving problems

 Golf it! is a game designed to let you show off your code-fu by solving problems

Golf it! Golf it! is a game designed to let you show off your code-fu by solving problems in the least number of characters โœจ Explore the docs ยป View

Aug 18, 2022

๐ŸŽฎ Excalibur is a free game engine written in TypeScript for making 2D games in HTML5 canvas

๐ŸŽฎ Excalibur is a free game engine written in TypeScript for making 2D games in HTML5 canvas

๐ŸŽฎ An easy to use 2D HTML5 game engine written in TypeScript

Dec 30, 2022
The Snake Game implemented using HTML, CSS, and JavaScript

The Snake Game implemented using HTML, CSS, and JavaScript

Wissam Fawaz 3 Mar 2, 2022
'Neko Mezashi Attack' - a simple but cute action game made with Vite and TypeScript

'Neko Mezashi Attack' is a simple but cute action game made with Vite and TypeScript. This app is packed all resources including style, graphics and audio into 4KB(4096 chars) JS. No runtime libraries or external resources are required.

yuneco 10 Dec 1, 2022
Fill 100 squares game, made in JavaScript

Fill 100 Game Fill 100 squares game, made in JavaScript How it works The game needs a 10x10 square, but you can choose any size. Every cell is filled

Matteo Bruni 4 Mar 5, 2022
Eva.js is a front-end game engine specifically for creating interactive game projects.

High-performance: Eva.js is powered by efficient runtime and rendering pipeline (Pixi.JS) which makes it possible to unleash the full potential of your device.

EVA 1.6k Dec 27, 2022
WordleGameCB - a game inspired by the Wordle word game developed by Josh Wardle

Technologies WordleGameCB WordleGameCB is a game inspired by the Wordle word game developed by Josh Wardle. This application was developed with the ai

@Encoding 4 Feb 20, 2022
A clone of the popular game Wordle made using React, Typescript, and Tailwind

Wordle Clone Go play the real Wordle here Read the story behind it here Try a demo of this clone project here Inspiration: This game is an open source

Hannah Park 2.4k Jan 8, 2023
HTML5 Runner Game Made With Phaser.

"Hurry up Runner!" The Tunner Game "Hurry up!" Is A Small Funny Game Made With Phaser 3. This Game Is About Ordinary Salaryman That Hurries For His Jo

Abhay 3 Sep 26, 2022
A recreation of the popular game Wordle with additional modes and features. Made with Svelte in Typescript.

A recreation of the popular game Wordle by Josh Wardle (now purchased by the New York Times), with additional modes and features. Hosted on GitHub pag

Mikha Davids 117 Dec 11, 2022
Pig is a simple two player dice game.

Pig game Pig is a simple two player dice game. Play here: formidablae.github.io/pig_game or formaidablae-pig-game.netlify.app Each turn, a player repe

null 10 Oct 5, 2022
EarthDefender is a simple personal project JS game

EarthDefender is a simple personal project JS game, the goal of it is to stop the meteors from hitting Earth.

Svetoslav Zhekov 2 Jan 25, 2022