platzhersh / pacman-canvas Goto Github PK

An old classic, re-written in HTML5.

License: Creative Commons Zero v1.0 Universal

PHP 3.80% JavaScript 65.27% CSS 15.71% HTML 11.11% Shell 4.12%

pacman-canvas's Introduction

pacman-canvas

Disclaimer

I am currenty migrating this project to Typescript and React. You can check it out at https://github.com/platzhersh/pacman-canvas-next (work in progress). I will most probably not further update this repository.

Description

An old classic, re-written in HTML5. Visit http://pacman.platzh1rsch.ch to see it live.

Sounds from http://soundfxcenter.com/ and http://soundfxnow.com/

If you like this project, feel free to buy me a coffee:

License

pacman-canvas by Platzh1rsch is marked with CC0 1.0 Universal

Get started

To just run the game locally, run npm start. If you want to see the console logs in your browser, use the npm run start:dev instead.

To modify the game for your needs, look at the pacman-canvas.js file and make your modifications. To change the look and feel, edit the pacman-canvas.css file or also the index.htmfile, where everything comes together.

Version history

Version 1.0.6 - 14.08.2022

adjust license
update npm dependencies

Version 1.0.5 - 22.03.2021

add webpack config
fix finished game state
show console logs when started locally

Version 1.0.4 - 26.12.2020

remove highscore reset endpoint

Version 1.0.3 - 26.12.2020

fix speed issue

Version 1.0.2 - 26.12.2020

add get started section in README
limit to 10 levels for now
small refactorings
add score validation in JS

Version 1.0.1 - 6.10.2020

add bump-version.sh to make versioning easier

Version 1.0.0 - 5.9.2020

use "default" version number format, go up to 1.0.0
add package.json
add server.js
you can now run pacman running an express JS server, using npm start
don't use ajax async: false anymore to load map config, since it has been marked as deprecated

Version 0.93 - 8.1.2020

add ads.txt

Version 0.92 - 6.3.2018

remove navigator.vibrate() calls

Version 0.91 - 15.01.2016

more tests to avoid cheaters
better highscore form validation
timer integrated (not in use yet)
"your screen is too small to play in landscape view" message removed
fix number of points for eating a ghost

Version 0.9 - 15.10.2015

different difficulties depending on level
scatter / chase indicated through wall colour
extended instructions

Version 0.87 - 08.10.2015

fix a bug that allowed resuming a game after game over

Version 0.86 - 25.05.2015

some security fixes to avoid cheaters from adding highscores

Version 0.84 - 09.11.2014

fixed bug that caused game to crash when leaving game area to the right side while holding the right arrow

Version 0.83 - 07.05.2014

not possible to stop by turning into walls anymore
mute / unmute the game by pressing the "M" key

Version 0.82 - 02.04.2014

small bugfixes
swipe gestures detection on the whole screen not only game area

Version 0.81 - 16.03.2014

Ghost Modes Scatter & Chase
Pathfinding AI for Blinky
Ghosts need to return to Ghost House when dead

Version 0.8 - 13.11.2013

lots of small changes in the backend
when you go in landscape mode and your screen is too small to display the whole site, you get notified to rotate your phone into portrait mode
all onClick and onMousedown in HTML removed and replaced by EventListeners in JavaScript
Pacman Canvas now uses ApplicationCache to cache its content, so you can play the game offline!

Version 0.78 - 05.11.2013

navigation via buttons should be less delayed by using onMouseDown event instead of onClick
refreshRate is now a game attribute and could be changed easily during the game (not yet implemented in frontend)

Version 0.77 - 24.05.2013

Ghosts start to blink before to undazzle
Pacman now dies with style

Version 0.76 - 02.05.2013

You can now use the usual arrow keys to control pacman
fixed 2 small bugs regarding KeyEvents

Version 0.75 - 28.04.2013

You can pause / resume the game by pressing SPACE
ESC is no longer used to pause / resume, but to go back to the main view
Game Menu only showing while game is paused
some css tweaks
Simple Highscore implemented using Ajax, Json and Sqlite3

Version 0.74 - 25.04.2013

You can pause / resume the game by pressing ESC or clicking into canvas
Swipe Gestures using hammerjs
replaced alerts by nice html overlay messages

Version 0.73 - 17.04.2013

You can play on until you lost all your 3 lives
Ghosts state gets reset everytime they get eaten or new level starts

Version 0.72 - 30.01.2013

Ghost Base Door
Reset Game after winning

Version 0.71 - 30.01.2013

Ghosts can die too

Version 0.7 - 29.01.2013

Powerpills & Beastmode

Version 0.63 - 29.01.2013

Pills now get loaded over external json file (map.json)
ghost collisions implemented -> dying
tried to clean up the code a bit

Version 0.62 - 23.01.2013

disable zoom on Mobile
change name to Pacman Canvas (Alpha)

Version 0.61 - 12.01.2013

all walls defined (incl. collisions)

Version 0.6 - 12.01.2013

small fixes for mobile view
sound control (default: muted)
collision control for walls
json datastructure design for all game objects (pills, magic pills, walls)

Version 0.41 - 10.12.2012

Mobile Design Fix
New Icon

Version 0.40 - 08.12.2012

Control Buttons for mobile
Small Design Updates

Version 0.30 - 05.12.2012

Touch Support via jGestures
Responsive

Version 0.20 - 22.11.2012

Code Refactored for further development
Sound added
Appcache implemented

Version 0.13 - 29.10.2012

Never miss a dot: Pacman now always stays in the grid.

Version 0.12 - 19.10.2012

Pacman is now able to eat the dots. Eating a dot equals 10 points for now.
LiveScore implemented.
Game ends when all dots are eaten.

Version 0.11 - 15.10.2012

Placing white Dots and storing them in a Hashtable
Monster/Ghost Prototype
Score Prototype
Pacman had to get smaller (r=15px)
Display Grid
Refactoring HTML

Version 0.10 - 23.08.2012

Started cleaning up the code using Objects
Pacman now turns around when changing directions

pacman-canvas's People

Contributors

Stargazers

Watchers

Forkers

javatarx olehs1 pfirpfel davidpmccormick leonardoherrera77 supraman4oh1 mansimransingh jerry-ye beemolin pilou510 thorbenheins yewkai duffywan jermspeaks mrngoitall gklayza andreaslangsays robbert aizad02 sanctusgee luisrochadev titusblair ghalbi nmalo5 purintibkaew vbguyny mgalpy font pierrevdk abcmarketing mimilau spydertech dselman maroumal bitcoinbeastie p14char varad25 diagramatics jamesdonelan pukkamustard ajbm6 joejoecube gamble86 nthayer1 nhanphankyanon stantoxt cntoby pb75-ch mikey2002 langzhenjun megwayne bamf-media grandsong sachgits gennttii worldrules ebenezerdn maderio semcneil musthofamisbah10 djatikusuma va21eu theatul konstantinos12 kingsleyogu tstuber linyucion kingandroid rardiol 0080004 mmborres mkvideos123 dchu096 masternetfmoraes rsmart myplayboxtv w3ss youssefedu ramirogavagnin ptpcg a-adly marvinrusinek brianehlert deweydarnell seelog touei10 v1w3 nonanimation emupedia matta2 chengjingfeng germahub bdesmero black123on atillabilgic emissiveslider jeniawhite cryptoworldgames aguywhodoesnutinmuch sling-j

pacman-canvas's Issues

Fruits

Hello there, thank you for your job, it's really great!
I've read your code, but i can't find a function for create/manage the fruits, will you implement that? or it's only my problem that can't find this function?

thank you

Replacing Pac-Man with an image

Is it possible to replace the Pac-Man shape with an image using context.drawImage?

testing & modularisation

game doesn't stop running in the background when ending by finishing level 10

Highscores

I'd love to get the highscore functionality working, Is there a working example of this at all?

make game playable in landscape mode on mobile

possible approach:

transparent controls overlaying the gaming area

replace the whole php highscore logic with something else

hide db file from external access
find more clever solution

hello

How to run this in READ.ME

How do I run this locally?

Lag frame on mobile

Hi, first of all great work. I wanted to point out that when I click the arrows on my smartphone, the game lags. The frame freezes on touch and then starts again. You can notice this when you click them multiple times at the same time and see the game jerk.

Could this be solved?

use a token for highscore submission

currently it is pretty easy to push the same result multiple times to the db-handler

SQL Injection

SQL Injection vulnerability
https://github.com/platzhersh/pacman-canvas/blob/master/data/db-handler.php#L99

write up: https://archive.org/details/sql-injection-pacman.platzh1rsch.ch

README license differs from LICENSE file

In the Readme, it's written that the project is licensed with Creative Commons Attribution-ShareAlike 4.0 International License.
(By the way, this license is not recommended for this type of projects. CC licenses (except CC0) are not made for programs.)

In the License file, the license is Creative Commons Zero v1.0 Universal.

I would recommend changing the license in the Readme to be also CC0 to avoid confusion and having a license made for programs.

I can also submit a pull request to make the changes recommended here.

Use requestAnimationFrame to be smoother

Hello, nice game ! thx for sharing !

To get a smoother animation, you should use requestAnimationFrame and
have the move time driven. If you want i can do a P.R. with such changes.
Btw i posted about requestAnimationFrame here if you fancy a read :
http://codepen.io/gamealchemist/post/animationcanvas1

Regards.

Add build script to generate Google chrome app and / or minified js script for deployment

setup github action, triggered by new releases

publish to pacman.platzh1rsch.ch
chrome app creation & publication
windows marketplace app creation & publication

remove highscore reset endpoint

[question] pacman licensing

Hi,

First of all, great job on the development!

I was curious what was the licensing of the code - is it GPL/BSD/MIT or anything similar?

Lag frame on mobile

Could this be solved?

map.json blocked by CORS policy

When I unzip it and open index.html directly with Chrome, the page is loading but the game is not working and this is what I can see in the console:

"Access to XMLHttpRequest at 'file:///D:/SRC/HTML5-EXAMPLES/pacman-canvas-master/data/map.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https..."

I don't know about other browsers but, is there any file I can edit to fix this problem with Google Chrome?

It doesn't work on Chrome

I have tried that it works perfectly on the Safari, but it doesn't work on chrome.
I don't know if anyone has the same issue with me.

Cannot get maze canvas on any browser

I have loaded the code to http://tngctest.com/ecoman , and the maze and graphics do not show up after clicking 'Click to Play'. (see screen shot)

I think this may have something to do with the fact that the game cannot load the Highscores. Could this be related to the map.json or manifest.json and verification key?

how to replace Pac Man with in image

cancellation of "new game" dialog resumes game, even if it's game over

level system

make the levels different, i.e. the game should get harder and harder with each level

Get level map causes: XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience

// get Level Map
$.ajax({
url: mapConfig,
async: false,
beforeSend: function(xhr){
if (xhr.overrideMimeType) xhr.overrideMimeType("application/json");
},
dataType: "json",
success: function (data) {
game.map = data;
}
});

as far as i am aware, async false isnt allowed anymore and causes a error in the console

Some Ghosts are not walking and coming out of center
almost every ghost keeps walking forward even if they can be killed because of big dot they turn blue, they still not trying to go back for a while
Ghosts speed should be more than pac-man while blue, while not blue speed should a little bit lesser than pac-man