Phone     L P S     Pizzazz  Physics  Three  Game Cam
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Given F, S, W, H or frame, stage, stageW, stageH
F.color=dark;
F.outerColor=black;
// ZIM BITS - Local Storage (2016 - updated 2022)
// ALSO SEE ZIM Bind() to bind to localStorage or database
// We can store an object on the user's computer
// and put as many properties as we want in the object (string values)
// so often we store a JSON string
// the data can persist for the session (sessionStorage)
// or better, as long as we want (localStorage)
// In this ZIM Bit we make a game to place circles without touching anything
// we read from the localStorage to get the starting data if any
// we save the state in localStorage so the user can continue next time
// we also store the user's high score
// to share the high score with others, like a leader board, we would need a database
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
// Given F, S, W, H or frame, stage, stageW, stageH
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Do you want to clear your code?

YES NO
Do you want to overwrite your code?

YES NO

SIGN IN   or   SIGN UP


Recovery






login
X

z_e324sw
Hidden
Forked
Prefix, category or topic (optional)

Title

Description (optional)

Reference URLs
Additional Scripts
Additional Imports
  

       
file
X



file
X
z_e324sw
Title
Author
Description
Reference
Scripts
Imports
Libraries
Tags
info
X
MID


You can copy these to your lists
look
X

Name:
You can reorder, remove or paste from other lists.
Add sub-titles with lines of text. Use HTML.
Add a - at the start of a line to the deactivate the link.


SAVE DELETE
edit
X


share
X

EDITOR     VIDEO
AThe Editor includes the ZIM Template from the CODE page
BType ZIM code (see the LEARN page) into the Editor and TEST
CUse JavaScript syntax (see ZIM SKOOL) with ZIM DOCS commands
DPress the various interface icons of the Editor to get it how you like it
EDrag the windows at bottom right corners to resize height
FTEST the code in the Editor with alt/option T - or ctrl/command S
GFULL-SCREEN the Editor by putting cursor in Editor and pressing F11
HUsually, we code in an editor like VS Code with our TEMPLATE
ZAPPS
IZapps are what we call files made with ZIM
JPress the ZAPPS tab to see a growing list of examples
KPress a Zapp to VIEW it and use the CODE tab to see its code
LUse the transfer arrow at bottom right to copy code into editor
MUNDO with ctrl/command U to go back to your code
NPress the + on a demo to FAVE the Zapp
OPress the - in the FAVE section to remove the Zapp from faves
PPess PROMO to get a link to a Zapp and see more information
QYou can directly link to any section using editor/section
RFor VIEW and CODE use editor/section/fileID
LOGIN
SPress LOGIN to sign up or login
TThese use an active e-mail which must be confirmed
UA recovery can be sent if a password is forgotten
FILES
VWhen logged in, use FILE to SAVE, COPY, DELETE or LOAD code
WYou can make a NEW file (optionally hide it from search engines)
XYou will have a chance to save your current file
YYou can also DOWNLOAD your code to your computer
LISTS
ZThe ZAPPS section will show your FAVES list if you have any
AAYour FILES will also be listed if you have any
ABPress COPY to copy these to a new list
ACYou can EDIT your lists and optionally insert text headings
ADYou can also LOOK at any list and copy Zapps to your lists
AENote: the file names in List do not update if the file is changed
AFYou can SHARE your lists in multiple ways
AGTo share multiple lists use editor/zapps/listID,listID,etc.
AHeditor/teach/listID will show only the list
AIeditor/learn/listID will show only the list with no copy
AJin both these cases, their faves and files may show
AKeditor/zapps/listID,listID/fileID will select a file
ALeditor/view/fileID/listID,listID will view a file
AMeditor/code/fileID/listID,listID will view code for a file
AMAAdding - at the start of a list entry will disable the entry
AMBHTML can be used - for instance details and summary tags
AMCUse an HTML comment tag to comment out list entries
REFERENCES
ANThe ZIM icon, at the top left and in the footer, links to the main site
AOAlso see CODEPEN for many examples you can fork
APCodePen has a great online editor so join and follow ZIM on CODEPEN
AQZIM KIDS has tutorials and the Slate Editor
ARHere are ZIM TEASERS on YouTube
ASFind EXAMPLES and in the browser, use CTRL/⌘ U to see the code
ATOnly paste what is INSIDE the the Frame's ready(){} event function
AUNote the ZIM BITS 64 common Interactive Media techniques
AVRead the GUIDES on Medium with descriptions of code techniques
AWSee the ZIM TIPS for the latest way we code with ZIM!
AXJoin our communities on SLACK and DISCORD and ask questions
AYFollow us on TWITTER and INSTAGRAM for exciting ZIM news!
AZWe have TIK TOK and MEDIUM too!
SPECIAL
BAUse: F.version = "014"; to set older versions
BBUse: F.zapp_scaling = FULL; to set scaling
BCUse: F.zapp_width = 1024; to set width
BDUse: F.zapp_height = 1366; to set height
BEUse: F.zapp_color = blue; to set frame color
BFUse: F.zapp_outerColor = red; to set frame outer color
BGUse: F.zapp_assets = [gf_Roboto, "backing.mp3"]; to set assets
BHUse: F.zapp_path = "https://zimjs.org/assets/"; to set path
BIUse: F.zapp_progress = new Waiter(); to set progress
BJUse: F.zapp_gpu = true; to set gpu
BKUse: F.zapp_gpuObj = {antialias:true}; to set gpu object
BLUse: F.zapp_maxNum = 1; to set maxNum for sound
BMUse: F.zapp_singleTouch = true; to set single touch
guide
X
Delete file?

CONFIRM CANCEL
Delete list? (Will not delete files)

CONFIRM CANCEL
Update current file?

YES NO X
Add current code to the new file?

YES NO X

CTRL S does TEST
Use FILE to save.



X
Save preview screenshot?

ZIM JavaScript Canvas Framework - Code Creativity!
YES NO X
Login Failed


The ZIM Editor is used for learning
Usually we start here