Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

change .git for switer to cong

  • Loading branch information...
commit 24a92454e23900e7dec5da4b719a977579adef15 1 parent a8fce54
@switer switer authored
Showing with 6,886 additions and 6,916 deletions.
  1. +161 −161 css/backup/global.css
  2. +325 −425 css/global.css
  3. +166 −166 css/part3.css
  4. +9 −9 doodlepie.manifest
  5. BIN  font/MarkerFeltWide.ttf
  6. BIN  images/Thumbs.db
  7. BIN  images/blackboard/Thumbs.db
  8. BIN  images/blackboard/blackboard-bg.png
  9. BIN  images/crayon-pens/Thumbs.db
  10. BIN  images/guess/pencil副本.png
  11. BIN  images/guess/slippers副本.png
  12. BIN  images/guess/手套副本.png
  13. BIN  images/lightbox-blank.gif
  14. BIN  images/lightbox-blank.png
  15. BIN  images/magic/Thumbs.db
  16. BIN  images/magic/circle.png
  17. BIN  images/magic/magic-show.png
  18. BIN  images/magic/rectangle.png
  19. BIN  images/magic/triangle.png
  20. BIN  images/menu/Thumbs.db
  21. BIN  images/pictures/triangle/Thumbs.db
  22. +101 −10 index.html
  23. +153 −153 scripts/backup/backboard.js
  24. +221 −221 scripts/backup/drawPicture.js
  25. +192 −192 scripts/backup/drawShape.js
  26. +152 −152 scripts/backup/fill.js
  27. +69 −69 scripts/backup/game.js
  28. +377 −377 scripts/backup/hoverable_touchable.js
  29. +5 −5 scripts/backup/jcanvas.min.js
  30. +227 −227 scripts/backup/jquery-crayon.js
  31. +69 −69 scripts/backup/jquery-stamps.js
  32. +8 −8 scripts/backup/main.js
  33. +71 −71 scripts/backup/menu.js
  34. +68 −68 scripts/backup/old.html
  35. +188 −188 scripts/backup/paint.js
  36. +205 −205 scripts/backup/part1.js
  37. +229 −229 scripts/backup/part2.js
  38. +319 −319 scripts/backup/part3.js
  39. +76 −76 scripts/backup/sandbox/brushSize.js
  40. +57 −57 scripts/backup/sandbox/chalk.js
  41. +83 −83 scripts/backup/sandbox/crayon.js
  42. +26 −26 scripts/backup/sandbox/home.js
  43. +96 −96 scripts/backup/sandbox/stamp.js
  44. +52 −52 scripts/backup/sandbox/undo.js
  45. +0 −12 scripts/index.js
  46. +3 −3 scripts/jquery/jquery-1.7.2.min.js
  47. +144 −144 scripts/jquery/jquery-fullscreen.js
  48. +136 −136 scripts/sandbox/blackboard.js
  49. +142 −143 scripts/sandbox/container.js
  50. +237 −237 scripts/sandbox/core.js
  51. +191 −191 scripts/sandbox/drawPicture.js
  52. +158 −161 scripts/sandbox/drawShape.js
  53. +70 −70 scripts/sandbox/fullscreen.js
  54. +246 −246 scripts/sandbox/game.js
  55. +615 −539 scripts/sandbox/kaleidoscope.js
  56. +144 −144 scripts/sandbox/painting.js
  57. +126 −125 scripts/sandbox/pieMenu.js
  58. +225 −225 scripts/sandbox/sandbox.js
  59. +177 −177 scripts/sandbox/solo.js
  60. +524 −606 scripts/sandbox/tools.js
  61. +43 −43 server.js
View
322 css/backup/global.css
@@ -1,162 +1,162 @@
-#container {
- margin-top: -384px;
- margin-left: -512px;
- width: 1024px;
- height: 768px;
- position: absolute;
- overflow: hidden;
- top: 50%;
- left: 50%;
-}
-
-#main {
- width: 100%;
- height: 100%;
- background-image: url(../images/bg.png);
- cursor: crosshair;
-}
-
-#pie {
- z-index: 10;
- position: absolute;
- background-image: url(../images/pie.png);
- top: 580px;
- left: 710px;
- width: 317px;
- height: 200px;
-}
-
-#save {
- z-index: 1000;
- position: absolute;
- /* border: 1px solid red; */
- background-image: url(../images/menu/save.png);
- left: 573px;
- top: 682px;
- width: 126px;
- height: 86px;
- display: none;
-}
-
-#save.disable {
- background-image: url(../images/menu/save_disable.png);
-}
-
-#guess {
- z-index: 1000;
- position: absolute;
- /* border: 1px solid red; */
- background-image: url(../images/menu/guess.png);
- left: 600px;
- top: 577px;
- width: 110px;
- height: 99px;
- display: none;
-}
-
-#guess.disable {
- background-image: url(../images/menu/guess_disable.png);
-}
-
-#fill {
- z-index: 1000;
- position: absolute;
- /* border: 1px solid red; */
- background-image: url(../images/menu/fill.png);
- left: 704px;
- top: 518px;
- width: 103px;
- height: 105px;
- display: none;
-}
-
-#fill.disable {
- background-image: url(../images/menu/fill_disable.png);
-}
-
-#blackboard {
- z-index: 1000;
- position: absolute;
- /* border: 1px solid red; */
- background-image: url(../images/menu/blackboard.png);
- left: 803px;
- top: 481px;
- width: 110px;
- height: 118px;
- display: none;
-}
-
-#blackboard.disable {
- background-image: url(../images/menu/blackboard_disable.png);
-}
-
-#magic {
- z-index: 1000;
- position: absolute;
- /* border: 1px solid red; */
- background-image: url(../images/menu/magic.png);
- left: 922px;
- top: 503px;
- width: 101px;
- height: 100px;
- display: none;
-}
-
-#magic.disable {
- background-image: url(../images/menu/magic_disable.png);
-}
-
-#home {
- /* border: 1px solid red; */
- position: absolute;
- width: 90px;
- height: 90px;
- left: 915px;
- top: 5px;
-}
-
-.frontCanvas {
- position: absolute;
- left: 132px;
- top: 120px;
- border: #000 solid 1px;
- z-index: 2;
-}
-
-.backCanvas {
- position: absolute;
- left: 132px;
- top: 120px;
- border: #000 solid 1px;
- z-index: 1;
-}
-
-.crayonPen {
- position: absolute;
- height: 49px;
- width: 238px;
-}
-
- .crayonPen.unselected{
- left: -138px;
- }
-
- .crayonPen.selected {
- left: -100px;
- }
-
-.brushSize {
- position: absolute;
- width: 222px;
- height: 75px;
- left: 0px;
- top: 690px;
- z-index: 3;
-}
-
- .brushSize .brush {
- position: absolute;
- width: 30px;
- height: 30px;
- top: 15px;
+#container {
+ margin-top: -384px;
+ margin-left: -512px;
+ width: 1024px;
+ height: 768px;
+ position: absolute;
+ overflow: hidden;
+ top: 50%;
+ left: 50%;
+}
+
+#main {
+ width: 100%;
+ height: 100%;
+ background-image: url(../images/bg.png);
+ cursor: crosshair;
+}
+
+#pie {
+ z-index: 10;
+ position: absolute;
+ background-image: url(../images/pie.png);
+ top: 580px;
+ left: 710px;
+ width: 317px;
+ height: 200px;
+}
+
+#save {
+ z-index: 1000;
+ position: absolute;
+ /* border: 1px solid red; */
+ background-image: url(../images/menu/save.png);
+ left: 573px;
+ top: 682px;
+ width: 126px;
+ height: 86px;
+ display: none;
+}
+
+#save.disable {
+ background-image: url(../images/menu/save_disable.png);
+}
+
+#guess {
+ z-index: 1000;
+ position: absolute;
+ /* border: 1px solid red; */
+ background-image: url(../images/menu/guess.png);
+ left: 600px;
+ top: 577px;
+ width: 110px;
+ height: 99px;
+ display: none;
+}
+
+#guess.disable {
+ background-image: url(../images/menu/guess_disable.png);
+}
+
+#fill {
+ z-index: 1000;
+ position: absolute;
+ /* border: 1px solid red; */
+ background-image: url(../images/menu/fill.png);
+ left: 704px;
+ top: 518px;
+ width: 103px;
+ height: 105px;
+ display: none;
+}
+
+#fill.disable {
+ background-image: url(../images/menu/fill_disable.png);
+}
+
+#blackboard {
+ z-index: 1000;
+ position: absolute;
+ /* border: 1px solid red; */
+ background-image: url(../images/menu/blackboard.png);
+ left: 803px;
+ top: 481px;
+ width: 110px;
+ height: 118px;
+ display: none;
+}
+
+#blackboard.disable {
+ background-image: url(../images/menu/blackboard_disable.png);
+}
+
+#magic {
+ z-index: 1000;
+ position: absolute;
+ /* border: 1px solid red; */
+ background-image: url(../images/menu/magic.png);
+ left: 922px;
+ top: 503px;
+ width: 101px;
+ height: 100px;
+ display: none;
+}
+
+#magic.disable {
+ background-image: url(../images/menu/magic_disable.png);
+}
+
+#home {
+ /* border: 1px solid red; */
+ position: absolute;
+ width: 90px;
+ height: 90px;
+ left: 915px;
+ top: 5px;
+}
+
+.frontCanvas {
+ position: absolute;
+ left: 132px;
+ top: 120px;
+ border: #000 solid 1px;
+ z-index: 2;
+}
+
+.backCanvas {
+ position: absolute;
+ left: 132px;
+ top: 120px;
+ border: #000 solid 1px;
+ z-index: 1;
+}
+
+.crayonPen {
+ position: absolute;
+ height: 49px;
+ width: 238px;
+}
+
+ .crayonPen.unselected{
+ left: -138px;
+ }
+
+ .crayonPen.selected {
+ left: -100px;
+ }
+
+.brushSize {
+ position: absolute;
+ width: 222px;
+ height: 75px;
+ left: 0px;
+ top: 690px;
+ z-index: 3;
+}
+
+ .brushSize .brush {
+ position: absolute;
+ width: 30px;
+ height: 30px;
+ top: 15px;
}
View
750 css/global.css
@@ -1,426 +1,326 @@
-#title {
- background-image: url(../images/title.png);
- width: 650px;
- height: 105px;
- position: absolute;
- top: -14px;
- left: 200px;
-}
-
-#container {
- margin-top: -384px;
- margin-left: -512px;
- width: 1024px;
- height: 768px;
- position: absolute;
- overflow: hidden;
- top: 50%;
- left: 50%;
- cursor: crosshair;
-}
-
-#main {
- width: 100%;
- height: 100%;
- cursor: crosshair;
-}
-
-#pie {
- z-index: 10;
- position: absolute;
- background-image: url(../images/pie.png);
- top: 580px;
- left: 710px;
- width: 317px;
- height: 200px;
-}
-
-#soloBtn {
- z-index: 1000;
- position: absolute;
- /* border: 1px solid red; */
- background-image: url(../images/menu/solo.png);
- left: 573px;
- top: 682px;
- width: 126px;
- height: 86px;
-}
-
-#soloBtn.disable {
- background-image: url(../images/menu/solo_disable.png);
-}
-
-#guess {
- z-index: 1000;
- position: absolute;
- /* border: 1px solid red; */
- background-image: url(../images/menu/guess.png);
- left: 600px;
- top: 577px;
- width: 110px;
- height: 99px;
-}
-
-#guess.disable {
- background-image: url(../images/menu/guess_disable.png);
-}
-
-#fill {
- z-index: 1000;
- position: absolute;
- /* border: 1px solid red; */
- background-image: url(../images/menu/fill.png);
- left: 704px;
- top: 518px;
- width: 103px;
- height: 105px;
-}
-
-#fill.disable {
- background-image: url(../images/menu/fill_disable.png);
-}
-
-#blackboard {
- z-index: 1000;
- position: absolute;
- /* border: 1px solid red; */
- background-image: url(../images/menu/blackboard.png);
- left: 803px;
- top: 481px;
- width: 110px;
- height: 118px;
-}
-
-#blackboard.disable {
- background-image: url(../images/menu/blackboard_disable.png);
-}
-
-#magic {
- z-index: 1000;
- position: absolute;
- /* border: 1px solid red; */
- background-image: url(../images/menu/magic.png);
- left: 922px;
- top: 503px;
- width: 101px;
- height: 100px;
-}
-
-#magic.disable {
- background-image: url(../images/menu/magic_disable.png);
-}
-
-#home {
- /* border: 1px solid red; */
- position: absolute;
- width: 114px;
- height: 106px;
- left: 905px;
- top: 1px;
- background-image: url(../images/home.png);
-}
-
-.frontCanvas {
- position: absolute;
- left: 132px;
- top: 118px;
- /*border: #000 solid 1px;*/
- z-index: 2;
-}
-
-.backCanvas {
- position: absolute;
- left: 132px;
- top: 118px;
- /*border: #000 solid 1px;*/
- z-index: 1;
-}
-
-.crayonPen {
- position: absolute;
- height: 49px;
- width: 238px;
-}
-
- .crayonPen.unselected{
- left: -138px;
- }
-
- .crayonPen.selected {
- left: -100px;
- }
-
-.brushSize {
- position: absolute;
- width: 222px;
- height: 75px;
- left: 0px;
- top: 690px;
- z-index: 3;
-}
-
- .brushSize .brush {
- position: absolute;
- width: 30px;
- height: 30px;
- top: 15px;
- }
-
-.stampList {
- position: absolute;
- background: url(../images/stamps/background.png) no-repeat;
- top: -50px;
- left: 180px;
- height: 188px;
- width: 736px;
-}
-
- .stampList .stamp {
- position: absolute;
- height: 109px;
- width: 106px;
- }
-
- .stampList .stamp.selected {
- top: 55px;
- }
-
- .stampList .stamp.unselected {
- top: 35px;
- }
-
-.undoContainer {
- z-index: 3;
- position: absolute;
- height: 62px;
- top: 700px;
- left: 210px;
-}
-
-.undo {
- position: absolute;
- width: 83px;
- height: 62px;
- border: "1px solid red";
- background-image: url(../images/undo.png);
- top: 0px;
- left: 0px;
- z-index: 3;
-}
-
-.reset {
- position: absolute;
- width: 83px;
- height: 62px;
- border: "1px solid red";
- background-image: url(../images/reset.png);
- top: 0px;
- left: 98px;
- z-index: 3;
-}
-
-.chalkPen {
- position: absolute;
- height: 54px;
- width: 218px;
- /*border: solid 1px red;*/
-}
-
- .chalkPen.unselected {
- left: -138px;
- }
-
- .chalkPen.selected {
- left: -100px;
- }
-
-.blackboard {
- background-image: url(../images/blackboard/blackboard-bg.jpg);
-}
-
-.normal {
- background-image: url(../images/bg.jpg);
-}
-
-#help {
- position: absolute;
- top: 110px;
- right: 9px;
- width: 114px;
- height: 106px;
- background-image: url(../images/help.png);
- z-index: 4;
-}
-
-#finish {
- position: absolute;
- top: 220px;
- right: 9px;
- width: 114px;
- height: 106px;
- background-image: url(../images/finish.png);
- z-index: 4;
-}
-
-.sd {
- position: absolute;
- top: 0px;
- left: 0px;
- width: 1024px;
- height: 768px;
- background-color: gray;
- opacity: 0.7;
- -moz-opacity: 0.7;
- filter:alpha(opacity=7);
- z-index: 5;
-}
-
-@-webkit-keyframes popup {
- 0% {
- width: 0px;
- height: 0px;
- top: 384px;
- left: 512px;
- }
- 100% {
- width: 400px;
- height: 300px;
- top: 234px;
- left: 312px;
- }
-}
-
-#popup {
- position: absolute;
- top: 234px;
- left: 312px;
- width: 400px;
- height: 300px;
- background: url(../images/pop-bg.png) repeat;
- z-index: 6;
- -webkit-animation-name: popup;
- -webkit-animation-duration: 0.5s;
- -webkit-animation-timing-function: linear;
-}
-
-.rc {
- -moz-border-radius: 10px;
- -o-border-radius: 10px;
- -webkit-border-radius: 10px;
- -ms-border-radius: 10px;
-}
-.shadow {
- -moz-box-shadow: 10px 10px 10px gray;
- -o-box-shadow: 10px 10px 10px gray;
- -webkit-box-shadow: 10px 10px 10px gray;
- -ms-box-shadow: 10px 10px 10px gray;
-}
-
-#pop-content {
- position: absolute;
- top: 10px;
- left: 10px;
- width: 374px;
- height: 274px;
- border: 3px dashed #b79770;
-}
-
-#check {
- position: absolute;
- top: 234px;
- left: 312px;
- width: 400px;
- height: 300px;
- background: url(../images/pop-bg.png) repeat;
- z-index: 6;
-}
-#state {
- position: absolute;
- top: 234px;
- left: 312px;
- width: 400px;
- height: 300px;
- background: url(../images/pop-bg.png) repeat;
- z-index: 6;
-}
-.content {
- position: absolute;
- top: 10px;
- left: 10px;
- width: 374px;
- height: 274px;
- border: 3px dashed #b79770;
- text-align: center;
-}
-.closeBtn {
- margin: 0;
- position: absolute;
- top: -8px;
- right: -8px;
- background-image: url(../images/close.png);
- width: 40px;
- height: 40px;
- z-index: 6;
-}
-#infoBtn {
- background-image: url(../images/info.png);
- width: 86px;
- height: 77px;
- position: absolute;
- bottom: 10px;
- right: 10px;
- z-index: 6;
-}
-#checkContent #main {
- width: 370px;
- height: 150px;
-}
-#checkContent #main {
- text-align: center;
-}
-#sina {
- position: absolute;
- top: 170px;
- left: 80px;
- background-image: url(../images/sina.png);
- width: 64px;
- height: 64px;
- display: block;
-}
-#email {
- position: absolute;
- top: 170px;
- right: 80px;
- background-image: url(../images/sina.png);
- width: 64px;
- height: 64px;
- display: block;
-}
-
-@font-face {
- font-family: WebFont;
- src: url(../font/MarkerFeltWide.ttf) format("truetype");
- font-weight: normal;
-}
-
-.webfont {
- font-family: WebFont;
-}
-
-#state #level {
- font-size: 40px;
- margin-bottom: 0;
-}
-
-#state #tasks {
- text-align: left;
- list-style: none;
- font-weight: bold;
- font-size: 20px;
- margin-top: 0;
- line-height: 40px;
-}
-
-#check #tips {
- font-size: 25px;
+#title {
+ background-image: url(../images/title.png);
+ width: 650px;
+ height: 105px;
+ position: absolute;
+ top: -14px;
+ left: 200px;
+}
+
+#container {
+ margin-top: -384px;
+ margin-left: -512px;
+ width: 1024px;
+ height: 768px;
+ position: absolute;
+ overflow: hidden;
+ top: 50%;
+ left: 50%;
+ cursor: crosshair;
+}
+
+#main {
+ width: 100%;
+ height: 100%;
+ cursor: crosshair;
+}
+
+#pie {
+ z-index: 10;
+ position: absolute;
+ background-image: url(../images/pie.png);
+ top: 580px;
+ left: 710px;
+ width: 317px;
+ height: 200px;
+}
+
+#soloBtn {
+ z-index: 1000;
+ position: absolute;
+ /* border: 1px solid red; */
+ background-image: url(../images/menu/solo.png);
+ left: 573px;
+ top: 682px;
+ width: 126px;
+ height: 86px;
+}
+
+#soloBtn.disable {
+ background-image: url(../images/menu/solo_disable.png);
+}
+
+#guess {
+ z-index: 1000;
+ position: absolute;
+ /* border: 1px solid red; */
+ background-image: url(../images/menu/guess.png);
+ left: 600px;
+ top: 577px;
+ width: 110px;
+ height: 99px;
+}
+
+#guess.disable {
+ background-image: url(../images/menu/guess_disable.png);
+}
+
+#fill {
+ z-index: 1000;
+ position: absolute;
+ /* border: 1px solid red; */
+ background-image: url(../images/menu/fill.png);
+ left: 704px;
+ top: 518px;
+ width: 103px;
+ height: 105px;
+}
+
+#fill.disable {
+ background-image: url(../images/menu/fill_disable.png);
+}
+
+#blackboard {
+ z-index: 1000;
+ position: absolute;
+ /* border: 1px solid red; */
+ background-image: url(../images/menu/blackboard.png);
+ left: 803px;
+ top: 481px;
+ width: 110px;
+ height: 118px;
+}
+
+#blackboard.disable {
+ background-image: url(../images/menu/blackboard_disable.png);
+}
+
+#magic {
+ z-index: 1000;
+ position: absolute;
+ /* border: 1px solid red; */
+ background-image: url(../images/menu/magic.png);
+ left: 922px;
+ top: 503px;
+ width: 101px;
+ height: 100px;
+}
+
+#magic.disable {
+ background-image: url(../images/menu/magic_disable.png);
+}
+
+#home {
+ /* border: 1px solid red; */
+ position: absolute;
+ width: 114px;
+ height: 106px;
+ left: 905px;
+ top: 1px;
+ background-image: url(../images/home.png);
+}
+
+.frontCanvas {
+ position: absolute;
+ left: 132px;
+ top: 118px;
+ /*border: #000 solid 1px;*/
+ z-index: 2;
+}
+
+.backCanvas {
+ position: absolute;
+ left: 132px;
+ top: 118px;
+ /*border: #000 solid 1px;*/
+ z-index: 1;
+}
+
+.crayonPen {
+ position: absolute;
+ height: 49px;
+ width: 238px;
+}
+
+ .crayonPen.unselected{
+ left: -138px;
+ }
+
+ .crayonPen.selected {
+ left: -100px;
+ }
+
+.brushSize {
+ position: absolute;
+ width: 222px;
+ height: 75px;
+ left: 0px;
+ top: 690px;
+ z-index: 3;
+}
+
+ .brushSize .brush {
+ position: absolute;
+ width: 30px;
+ height: 30px;
+ top: 15px;
+ }
+
+.stampList {
+ position: absolute;
+ background: url(../images/stamps/background.png) no-repeat;
+ top: -50px;
+ left: 180px;
+ height: 188px;
+ width: 736px;
+}
+
+ .stampList .stamp {
+ position: absolute;
+ height: 109px;
+ width: 106px;
+ }
+
+ .stampList .stamp.selected {
+ top: 55px;
+ }
+
+ .stampList .stamp.unselected {
+ top: 35px;
+ }
+
+.undoContainer {
+ z-index: 3;
+ position: absolute;
+ height: 62px;
+ top: 700px;
+ left: 210px;
+}
+
+.undo {
+ position: absolute;
+ width: 83px;
+ height: 62px;
+ border: "1px solid red";
+ background-image: url(../images/undo.png);
+ top: 0px;
+ left: 0px;
+ z-index: 3;
+}
+
+.reset {
+ position: absolute;
+ width: 83px;
+ height: 62px;
+ border: "1px solid red";
+ background-image: url(../images/reset.png);
+ top: 0px;
+ left: 98px;
+ z-index: 3;
+}
+
+.chalkPen {
+ position: absolute;
+ height: 54px;
+ width: 218px;
+ /*border: solid 1px red;*/
+}
+
+ .chalkPen.unselected {
+ left: -138px;
+ }
+
+ .chalkPen.selected {
+ left: -100px;
+ }
+
+.blackboard {
+ background-image: url(../images/blackboard/blackboard-bg.jpg);
+}
+
+.normal {
+ background-image: url(../images/bg.jpg);
+}
+
+#help {
+ position: absolute;
+ top: 110px;
+ right: 9px;
+ width: 114px;
+ height: 106px;
+ background-image: url(../images/help.png);
+ z-index: 4;
+}
+
+#finish {
+ position: absolute;
+ top: 220px;
+ right: 9px;
+ width: 114px;
+ height: 106px;
+ background-image: url(../images/finish.png);
+ z-index: 4;
+}
+
+.sd {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 1024px;
+ height: 768px;
+ background-color: gray;
+ opacity: 0.7;
+ -moz-opacity: 0.7;
+ filter:alpha(opacity=7);
+ z-index: 5;
+}
+
+@-webkit-keyframes popup {
+ 0% {
+ width: 0px;
+ height: 0px;
+ top: 384px;
+ left: 512px;
+ }
+ 100% {
+ width: 400px;
+ height: 300px;
+ top: 234px;
+ left: 312px;
+ }
+}
+
+#popup {
+ position: absolute;
+ top: 234px;
+ left: 312px;
+ width: 400px;
+ height: 300px;
+ background: url(../images/pop-bg.png) repeat;
+ z-index: 6;
+ -webkit-animation-name: popup;
+ -webkit-animation-duration: 0.5s;
+ -webkit-animation-timing-function: linear;
+}
+
+.rc {
+ -moz-border-radius: 10px;
+ -o-border-radius: 10px;
+ -webkit-border-radius: 10px;
+ -ms-border-radius: 10px;
+}
+.shadow {
+ -moz-box-shadow: 10px 10px 10px gray;
+ -o-box-shadow: 10px 10px 10px gray;
+ -webkit-box-shadow: 10px 10px 10px gray;
+ -ms-box-shadow: 10px 10px 10px gray;
+}
+
+#pop-content {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ width: 374px;
+ height: 274px;
+ border: 3px dashed #b79770;
}
View
332 css/part3.css
@@ -1,167 +1,167 @@
-#slider{
-
- margin:auto;
- padding: 61px 0px 0px 0px;
- height:100%;
- width:100%;
-}
-#game{
-
- position: relative;
- top:0px;
- height: 1024px;
-}
-#slider .content{
- position:relative;
- width:800px;
- height:600px;
- margin: auto;
-}
-#slider .con-left{
- position: relative;
- width:500px;
- height:600px;
- float:left;
-
-}
-#slider .con-right{
-
- width:300px;
- height:600px;
- float:left;
-}
-#slider .con-right-top{
- position: relative;
- /*height:250px;*/
-}
-
-#slider .con-right-bottom{
-
- position: relative;
-}
-#slider table{
- height:100%;
- width:100%;
-}
-#slider table td{
- vertical-align: middle;
- text-align: center;
-
-
-}
-
-#slider .part3-option{
- height:90px;
- cursor: pointer;
- list-style: none;
-}
-#slider .toNextButton{
- position: absolute;
- display: block;
- background-image: url(../images/guess/next.png);
- height:84px;
- width:87px;
- right:0;
- bottom:0;
- cursor: pointer;
-}
-#slider .toNextButton:hover{
-
-background-image: url(../images/guess/next_s.png);
-}
-
-#slider .score{
- position: absolute;
- bottom:0;
- left:0;
-}
-#slider .wrong{
- position: absolute;
- background-image: url(../images/guess/wrong.png);
- height:186px;
- width:307px;
- bottom:390px;
- right:100px;
-
-}
-#slider .right{
- position: absolute;
- background-image: url(../images/guess/right.png);
- height:186px;
- width:307px;
- bottom:390px;
- right:100px;
-
-}
-.fromRight{
- -webkit-transform-style: preserve-3d;
- -webkit-animation-name: anim-fromRight;
- -webkit-animation-duration: 0.5s;
- -webkit-animation-iteration-count: 1;
- -webkit-animation-timing-function: linear;
-}
-@-webkit-keyframes anim-fromRight
-{
- 0%{
- -webkit-transform: translate(500px, 0px);
-
-}
-100%{
- -webkit-transform: translate(0px, 0px);
-}
-}
-/*from left*/
-.fromLeft{
- -webkit-transform-style: preserve-3d;
- -webkit-animation-name: anim-fromLeft;
- -webkit-animation-duration: 0.5s;
- -webkit-animation-iteration-count: 1;
- -webkit-animation-timing-function: linear;
-}
-@-webkit-keyframes anim-fromLeft
-{
- 0%{
- -webkit-transform: translate(-500px, 0px);
-
-}
-100%{
- -webkit-transform: translate(0px, 0px);
-}
-}
-/*from top*/
-.fromTop{
- -webkit-transform-style: preserve-3d;
- -webkit-animation-name: anim-fromTop;
- -webkit-animation-duration: 0.5s;
- -webkit-animation-iteration-count: 1;
- -webkit-animation-timing-function: linear;
-}
-@-webkit-keyframes anim-fromTop
-{
- 0%{
- -webkit-transform: translate(0px, 500px);
-
-}
-100%{
- -webkit-transform: translate(0px, 0px);
-}
-}
-
-/*from bottom*/
-.fromBottom{
- -webkit-transform-style: preserve-3d;
- -webkit-animation-name: anim-fromBottom;
- -webkit-animation-duration: 0.5s;
- -webkit-animation-iteration-count: 1;
- -webkit-animation-timing-function: linear;
-}
-@-webkit-keyframes anim-fromBottom
-{
- 0%{
- -webkit-transform: translate(0px, -500px);
-
-}
-100%{
- -webkit-transform: translate(0px, 0px);
-}
+#slider{
+
+ margin:auto;
+ padding: 61px 0px 0px 0px;
+ height:100%;
+ width:100%;
+}
+#game{
+
+ position: relative;
+ top:0px;
+ height: 1024px;
+}
+#slider .content{
+ position:relative;
+ width:800px;
+ height:600px;
+ margin: auto;
+}
+#slider .con-left{
+ position: relative;
+ width:500px;
+ height:600px;
+ float:left;
+
+}
+#slider .con-right{
+
+ width:300px;
+ height:600px;
+ float:left;
+}
+#slider .con-right-top{
+ position: relative;
+ /*height:250px;*/
+}
+
+#slider .con-right-bottom{
+
+ position: relative;
+}
+#slider table{
+ height:100%;
+ width:100%;
+}
+#slider table td{
+ vertical-align: middle;
+ text-align: center;
+
+
+}
+
+#slider .part3-option{
+ height:90px;
+ cursor: pointer;
+ list-style: none;
+}
+#slider .toNextButton{
+ position: absolute;
+ display: block;
+ background-image: url(../images/guess/next.png);
+ height:84px;
+ width:87px;
+ right:0;
+ bottom:0;
+ cursor: pointer;
+}
+#slider .toNextButton:hover{
+
+background-image: url(../images/guess/next_s.png);
+}
+
+#slider .score{
+ position: absolute;
+ bottom:0;
+ left:0;
+}
+#slider .wrong{
+ position: absolute;
+ background-image: url(../images/guess/wrong.png);
+ height:186px;
+ width:307px;
+ bottom:390px;
+ right:100px;
+
+}
+#slider .right{
+ position: absolute;
+ background-image: url(../images/guess/right.png);
+ height:186px;
+ width:307px;
+ bottom:390px;
+ right:100px;
+
+}
+.fromRight{
+ -webkit-transform-style: preserve-3d;
+ -webkit-animation-name: anim-fromRight;
+ -webkit-animation-duration: 0.5s;
+ -webkit-animation-iteration-count: 1;
+ -webkit-animation-timing-function: linear;
+}
+@-webkit-keyframes anim-fromRight
+{
+ 0%{
+ -webkit-transform: translate(500px, 0px);
+
+}
+100%{
+ -webkit-transform: translate(0px, 0px);
+}
+}
+/*from left*/
+.fromLeft{
+ -webkit-transform-style: preserve-3d;
+ -webkit-animation-name: anim-fromLeft;
+ -webkit-animation-duration: 0.5s;
+ -webkit-animation-iteration-count: 1;
+ -webkit-animation-timing-function: linear;
+}
+@-webkit-keyframes anim-fromLeft
+{
+ 0%{
+ -webkit-transform: translate(-500px, 0px);
+
+}
+100%{
+ -webkit-transform: translate(0px, 0px);
+}
+}
+/*from top*/
+.fromTop{
+ -webkit-transform-style: preserve-3d;
+ -webkit-animation-name: anim-fromTop;
+ -webkit-animation-duration: 0.5s;
+ -webkit-animation-iteration-count: 1;
+ -webkit-animation-timing-function: linear;
+}
+@-webkit-keyframes anim-fromTop
+{
+ 0%{
+ -webkit-transform: translate(0px, 500px);
+
+}
+100%{
+ -webkit-transform: translate(0px, 0px);
+}
+}
+
+/*from bottom*/
+.fromBottom{
+ -webkit-transform-style: preserve-3d;
+ -webkit-animation-name: anim-fromBottom;
+ -webkit-animation-duration: 0.5s;
+ -webkit-animation-iteration-count: 1;
+ -webkit-animation-timing-function: linear;
+}
+@-webkit-keyframes anim-fromBottom
+{
+ 0%{
+ -webkit-transform: translate(0px, -500px);
+
+}
+100%{
+ -webkit-transform: translate(0px, 0px);
+}
}
View
18 doodlepie.manifest
@@ -1,9 +1,9 @@
-CACHE MANIFEST
-# version 1
-CACHE:
-scripts/jquery/*
-images/bg.jpg
-
-NETWORK:
-
-FALLBACK:
+CACHE MANIFEST
+# version 1
+CACHE:
+scripts/jquery/*
+images/bg.jpg
+
+NETWORK:
+
+FALLBACK:
View
BIN  font/MarkerFeltWide.ttf
Binary file not shown
View
BIN  images/Thumbs.db
Binary file not shown
View
BIN  images/blackboard/Thumbs.db
Binary file not shown
View
BIN  images/blackboard/blackboard-bg.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/crayon-pens/Thumbs.db
Binary file not shown
View
BIN  images/guess/pencil副本.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/guess/slippers副本.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/guess/手套副本.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/lightbox-blank.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/lightbox-blank.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/magic/Thumbs.db
Binary file not shown
View
BIN  images/magic/circle.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/magic/magic-show.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/magic/rectangle.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/magic/triangle.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/menu/Thumbs.db
Binary file not shown
View
BIN  images/pictures/triangle/Thumbs.db
Binary file not shown
View
111 index.html
@@ -14,8 +14,98 @@
<meta name="msapplication-navbutton-color" content="yellow"/>
<link rel="shortcut icon" href="favicon.ico" />
+
<link rel="stylesheet" type="text/css" href="css/global.css" />
<link rel="stylesheet" type="text/css" href="css/part3.css" />
+
+<script type="text/javascript" src="scripts/jquery/jquery-1.7.2.min.js"></script>
+<script src=" http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=3168919025" type="text/javascript" charset="utf-8"></script>
+<script type="text/javascript">
+$.extend($.support, { touch: "ontouchend" in document });
+$(document).ready(function () {
+ if($.support.touch) {
+ document.body.addEventListener("touchmove", function(e) {
+ e.preventDefault();
+ }, false);
+ document.body.addEventListener("touchstart", function(evt) {
+ evt.preventDefault();
+ }, false);
+ }
+});
+</script>
+<style type="text/css">
+#check {
+ position: absolute;
+ top: 234px;
+ left: 312px;
+ width: 400px;
+ height: 300px;
+ background: url(images/pop-bg.png) repeat;
+ z-index: 6;
+}
+#state {
+ position: absolute;
+ top: 234px;
+ left: 312px;
+ width: 400px;
+ height: 300px;
+ background: url(images/pop-bg.png) repeat;
+ z-index: 6;
+}
+.content {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ width: 374px;
+ height: 274px;
+ border: 3px dashed #b79770;
+ text-align: center;
+}
+.closeBtn {
+ margin: 0;
+ position: absolute;
+ top: -8px;
+ right: -8px;
+ background-image: url(images/close.png);
+ width: 40px;
+ height: 40px;
+ z-index: 6;
+}
+#infoBtn {
+ background-image: url(images/info.png);
+ width: 86px;
+ height: 77px;
+ position: absolute;
+ bottom: 10px;
+ right: 10px;
+ z-index: 6;
+}
+#checkContent #main {
+ width: 370px;
+ height: 150px;
+}
+#checkContent #main {
+ text-align: center;
+}
+#sina {
+ position: absolute;
+ top: 170px;
+ left: 80px;
+ background-image: url(images/sina.png);
+ width: 64px;
+ height: 64px;
+ display: block;
+}
+#email {
+ position: absolute;
+ top: 170px;
+ right: 80px;
+ background-image: url(images/sina.png);
+ width: 64px;
+ height: 64px;
+ display: block;
+}
+</style>
</head>
<body>
<div id="container">
@@ -45,20 +135,20 @@
<div id="info">
<div id="help"></div>
<div id="finish"></div>
- <div id="state" class="rc shadow" style="display: none;">
+ <div id="state" class="rc shadow">
<div id="stateContent" class="rc content">
- <h1 id="level" class="webfont"></h1>
- <ul id="tasks" class="webfont">
+ <h1 id="level">Level 2 Challenge</h1>
+ <ul id="tasks">
</ul>
</div>
- <a id="infoBtn" href="http://weibo.com/u/2787987584" target="_blank"></a>
+ <div id="infoBtn"></div>
<div class="closeBtn"></div>
</div>
- <div id="check" class="rc shadow" style="display: none;">
+ <div id="check" class="rc shadow">
<div id="checkContent" class="rc content">
<div id="main">
- <h1 class="webfont">Bingo! Checked!</h1>
- <p id="tips" class="webfont">Just share your work with your friends!<p>
+ <h1>耶!完成啦!</h1>
+ <p>分享你的作品吧!<p>
</div>
<div id="share">
<a id="sina" href="javascript: void(0);"></a>
@@ -69,7 +159,6 @@ <h1 class="webfont">Bingo! Checked!</h1>
</div>
</div>
</div>
- <script type="text/javascript" src="scripts/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="scripts/dollar.js"></script>
<script type="text/javascript" src="scripts/sandbox/core.js"></script>
<script type="text/javascript" src="scripts/sandbox/sandbox.js"></script>
@@ -83,7 +172,9 @@ <h1 class="webfont">Bingo! Checked!</h1>
<script type="text/javascript" src="scripts/sandbox/blackboard.js"></script>
<script type="text/javascript" src="scripts/sandbox/game.js"></script>
<script type="text/javascript" src="scripts/sandbox/kaleidoscope.js"></script>
- <!-- <script src=" http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=3168919025" type="text/javascript" charset="utf-8"></script> -->
- <script type="text/javascript" src="scripts/index.js"></script>
+ <script type="text/javascript">
+ // Core.startAll();
+ Core.start("container");
+ </script>
</body>
</html>
View
306 scripts/backup/backboard.js
@@ -1,153 +1,153 @@
-(function () {
-
- var main;
- var save;
-
- function init() {
- main = $("#main");
- main.empty();
-
- // canvas
- var mainCanvas = $("<canvas></canvas>").appendTo(main);
- mainCanvas.css({
- position: "absolute",
- // border: "1px solid red",
- left: 132,
- top: 120
- });
-
- mainCanvas.attr({
- "width": 800,
- "height": 600
- });
-
- var bgImage = new Image();
- bgImage.src = "images/fill-background.png"
-
- var canvas = mainCanvas.get(0);
- var context = canvas.getContext("2d");
-
- var currColor;
- var currSize = 10;
- var drawing = false;
-
- var pathes = [];
- var currPath;
-
- var undo = function () {
- if (pathes.length > 0) {
- pathes.pop();
- }
-
- repaint();
- }
-
- var reset = function () {
- pathes.length = 0;
- repaint();
- }
-
- var sizeSelected = function (size) {
- currSize = size;
- };
-
- var colorSelected = function (color) {
- currColor = color;
- };
-
- $.crayon({
- main: main,
- colorSelected: colorSelected,
- sizeSelected: sizeSelected,
- undo: undo,
- reset: reset
- });
-
- // collect pathes
- mainCanvas.mousedown(function (ev) {
- drawing = true;
-
- currPath = {
- color: currColor,
- size: currSize,
- points: [ {
- x: ev.offsetX,
- y: ev.offsetY
- } ]
- };
-
- pathes.push(currPath);
-
- repaint();
- });
-
- mainCanvas.mouseup(function (ev) {
- drawing = false;
- });
-
- mainCanvas.mousemove(function (ev) {
- if (!drawing) return;
-
- currPath.points.push({
- x: ev.offsetX,
- y: ev.offsetY
- });
-
- repaint();
- });
-
- // save
- save = $("#save");
- save.live("click", function () {
- game.fillFinished();
-
- try {
- var dataUrl = canvas.toDataURL("image/png");
- window.open(dataUrl);
- } catch (ex) {
- console.log(ex);
- }
- });
-
- // repaint
- var repaint = function () {
-
- context.fillStyle = '#ffffff'; // Work around for Chrome
- context.fillRect(0, 0, canvas.width, canvas.height); // Fill in the canvas with white
-
- for (var i = 0; i < pathes.length; i++) {
- var path = pathes[i];
-
- context.beginPath();
- context.strokeStyle = "#" + path.color;
- context.lineWidth = path.size;
- context.lineJoin = "round";
-
- context.moveTo(path.points[0].x, path.points[0].y);
-
- for (var j = 1; j < path.points.length; j++) {
- context.lineTo(path.points[j].x, path.points[j].y);
- }
-
- context.stroke();
- context.closePath();
- }
-
- context.drawImage(bgImage, 0, 0, bgImage.width, bgImage.height);
- }
-
- window.setTimeout(repaint, 100);
- }
-
- function dispose() {
- main = null;
-
- save.die();
- save = null;
- }
-
- modules["backboard"] = {
- init: init,
- dispose: dispose
- }
-})();
+(function () {
+
+ var main;
+ var save;
+
+ function init() {
+ main = $("#main");
+ main.empty();
+
+ // canvas
+ var mainCanvas = $("<canvas></canvas>").appendTo(main);
+ mainCanvas.css({
+ position: "absolute",
+ // border: "1px solid red",
+ left: 132,
+ top: 120
+ });
+
+ mainCanvas.attr({
+ "width": 800,
+ "height": 600
+ });
+
+ var bgImage = new Image();
+ bgImage.src = "images/fill-background.png"
+
+ var canvas = mainCanvas.get(0);
+ var context = canvas.getContext("2d");
+
+ var currColor;
+ var currSize = 10;
+ var drawing = false;
+
+ var pathes = [];
+ var currPath;
+
+ var undo = function () {
+ if (pathes.length > 0) {
+ pathes.pop();
+ }
+
+ repaint();
+ }
+
+ var reset = function () {
+ pathes.length = 0;
+ repaint();
+ }
+
+ var sizeSelected = function (size) {
+ currSize = size;
+ };
+
+ var colorSelected = function (color) {
+ currColor = color;
+ };
+
+ $.crayon({
+ main: main,
+ colorSelected: colorSelected,
+ sizeSelected: sizeSelected,
+ undo: undo,
+ reset: reset
+ });
+
+ // collect pathes
+ mainCanvas.mousedown(function (ev) {
+ drawing = true;
+
+ currPath = {
+ color: currColor,
+ size: currSize,
+ points: [ {
+ x: ev.offsetX,
+ y: ev.offsetY
+ } ]
+ };
+
+ pathes.push(currPath);
+
+ repaint();
+ });
+
+ mainCanvas.mouseup(function (ev) {
+ drawing = false;
+ });
+
+ mainCanvas.mousemove(function (ev) {
+ if (!drawing) return;
+
+ currPath.points.push({
+ x: ev.offsetX,
+ y: ev.offsetY
+ });
+
+ repaint();
+ });
+
+ // save
+ save = $("#save");
+ save.live("click", function () {
+ game.fillFinished();
+
+ try {
+ var dataUrl = canvas.toDataURL("image/png");
+ window.open(dataUrl);
+ } catch (ex) {
+ console.log(ex);
+ }
+ });
+
+ // repaint
+ var repaint = function () {
+
+ context.fillStyle = '#ffffff'; // Work around for Chrome
+ context.fillRect(0, 0, canvas.width, canvas.height); // Fill in the canvas with white
+
+ for (var i = 0; i < pathes.length; i++) {
+ var path = pathes[i];
+
+ context.beginPath();
+ context.strokeStyle = "#" + path.color;
+ context.lineWidth = path.size;
+ context.lineJoin = "round";
+
+ context.moveTo(path.points[0].x, path.points[0].y);
+
+ for (var j = 1; j < path.points.length; j++) {
+ context.lineTo(path.points[j].x, path.points[j].y);
+ }
+
+ context.stroke();
+ context.closePath();
+ }
+
+ context.drawImage(bgImage, 0, 0, bgImage.width, bgImage.height);
+ }
+
+ window.setTimeout(repaint, 100);
+ }
+
+ function dispose() {
+ main = null;
+
+ save.die();
+ save = null;
+ }
+
+ modules["backboard"] = {
+ init: init,
+ dispose: dispose
+ }
+})();
View
442 scripts/backup/drawPicture.js
@@ -1,221 +1,221 @@
-(function () {
-
- var main;
- var img;
- var imgs = [];
- var canvases = new Array(2);
- var stampsList = [ "ball", "flower", "heart", "music", "star" ];
-
- function init(options) {
- main = $("#main");
- main.empty();
-
- img = new Image();
- img.src = options.argument + ".png";
- for(var i = 0; i < stampsList.length; i++) {
- var stampImage = new Image();
- var imgPath = stampsList[i];
- stampImage.src = "images/stamps/"+stampsList[i]+"1.png";
- imgs[imgPath] = stampImage;
- }
- $("#pieMenu").show();
-
- for(var i = 0; i < canvases.length; i++) {
- canvases[i] = $("<canvas></canvas>").appendTo(main);
- canvases[i].css({
- position: "absolute",
- left: 132,
- top: 120,
- "z-index": (i+1)
- });
- canvases[i].attr({
- width: 800,
- height: 600
- });
- }
- var frontCanvas = canvases[1].get(0);
- var backCanvas = canvases[0].get(0);
- var frontCtx = frontCanvas.getContext("2d");
- var backCtx = backCanvas.getContext("2d");
- var textureImage = new Image();
- textureImage.src = "images/crayon-texture.png"
-
- var currColor;
- var currSize;
- var pathes = [];
- var currPath;
- var currStamp;
-
- var undo = function() {
- // console.log(pathes.length);
- if(pathes.length > 0) {
- pathes.pop();
- }
- repaintFront();
- repaintBack();
- };
- var reset = function() {
- pathes.length = 0;
- currPath = null;
- repaintFront();
- repaintBack();
- };
- var sizeSelected = function(size) {
- currSize = size;
- }
- var colorSelected = function(color) {
- currColor = color;
- }
- var stampSelected = function(stamp) {
- currStamp = stamp;
- }
- $.crayon({
- main: main,
- colorSelected: colorSelected,
- sizeSelected: sizeSelected,
- undo: undo,
- reset: reset,
- stampSelected: stampSelected
- });
-
- var isDrawing = false;
-
- $(frontCanvas).mousedown(function(e) {
- if(currStamp) {
- currPath = {
- stamp: currStamp,
- X: e.offsetX,
- Y: e.offsetY
- };
- } else {
- isDrawing = true;
- currPath = {
- color: currColor,
- size: currSize,
- points: [ {
- X: e.offsetX,
- Y: e.offsetY
- } ],
- stamp: null
- };
- }
- });
-
- $(frontCanvas).mouseup(function(e) {
- if(isDrawing == true || currStamp) {
- isDrawing = false;
- pathes.push(currPath);
- // console.log(pathes.length);
- repaintBack();
- }
- });
-
- $(frontCanvas).mousemove(function(e) {
- if(isDrawing == true) {
- currPath.points.push( {
- X: e.offsetX,
- Y: e.offsetY
- } );
- repaintFront();
- }
- });
-
- $(frontCanvas).mouseleave(function(e) {
- if(isDrawing == true) {
- isDrawing = false;
- pathes.push(currPath);
- console.log(pathes.length);
- repaintBack();
- }
- });
-
- var touchCanvas = $(frontCanvas).Touchable();
- touchCanvas.bind("touchablemove", function(e, touch) {
- });
- touchCanvas.bind("touchableend", function(e, touch) {
- });
- touchCanvas.bind("tap", function(e, touch) {
- });
-
- frontCanvas.addEventListener("touchstart", function(e) {
- });
-
- frontCanvas.addEventListener("touchmove", function(e) {
- });
-
- frontCanvas.addEventListener("touchend", function(e) {});
-
- var repaintFront = function() {
- frontCtx.fillStyle = "rgba(255, 255, 255, 0)";
- frontCtx.clearRect(0, 0, frontCanvas.width, frontCanvas.height);
-
- if(!currPath || currPath.stamp) {
- frontCtx.drawImage(textureImage, 0, 0, textureImage.width, textureImage.height);
- return ;
- }
-
- frontCtx.beginPath();
- frontCtx.strokeStyle = "#" + currPath.color;
- frontCtx.lineWidth = currPath.size;
- frontCtx.lineJoin = "round";
- frontCtx.lineCap = "round";
-
- frontCtx.moveTo(currPath.points[0].X, currPath.points[0].Y);
-
- for(var i = 0; i < currPath.points.length; i++) {
- frontCtx.lineTo(currPath.points[i].X, currPath.points[i].Y);
- }
- frontCtx.stroke();
- frontCtx.closePath();
- frontCtx.drawImage(textureImage, 0, 0, textureImage.width, textureImage.height);
- };
-
- var repaintBack = function() {
- backCtx.clearRect(0, 0, backCanvas.width, backCanvas.height);
-
- for(var i = 0; i < pathes.length; i++) {
- var path = pathes[i];
-
- if(path && path.stamp) {
- var stampImg = imgs[path.stamp];
- backCtx.drawImage(stampImg, path.X - stampImg.width/2, path.Y - stampImg.height/2);
- } else if(path) {
- backCtx.beginPath();
- backCtx.strokeStyle = "#" + path.color;
- backCtx.lineWidth = path.size;
- backCtx.lineCap = "round";
- backCtx.lineJoin = "round";
- backCtx.moveTo(path.points[0].X, path.points[0].Y);
-
- for(var j = 1; j < path.points.length; j++) {
- backCtx.lineTo(path.points[j].X, path.points[j].Y);
- }
-
- backCtx.stroke();
- backCtx.closePath();
-
- }
- }
- backCtx.globalAlpha = 0.4;
- backCtx.drawImage(img, 0, 0, img.width, img.height);
- backCtx.globalAlpha = 1;
- };
-
- setTimeout(function() {
- frontCtx.drawImage(textureImage, 0, 0, textureImage.width, textureImage.height);
- }, 50);
- setTimeout(repaintBack, 100);
-
- }
-
- function dispose() {
- main = null;
- img = null;
- imgs = null;
- }
-
- modules["drawPicture"] = {
- init: init,
- dispose: dispose
- }
-})();
+(function () {
+
+ var main;
+ var img;
+ var imgs = [];
+ var canvases = new Array(2);
+ var stampsList = [ "ball", "flower", "heart", "music", "star" ];
+
+ function init(options) {
+ main = $("#main");
+ main.empty();
+
+ img = new Image();
+ img.src = options.argument + ".png";
+ for(var i = 0; i < stampsList.length; i++) {
+ var stampImage = new Image();
+ var imgPath = stampsList[i];
+ stampImage.src = "images/stamps/"+stampsList[i]+"1.png";
+ imgs[imgPath] = stampImage;
+ }
+ $("#pieMenu").show();
+
+ for(var i = 0; i < canvases.length; i++) {
+ canvases[i] = $("<canvas></canvas>").appendTo(main);
+ canvases[i].css({
+ position: "absolute",
+ left: 132,
+ top: 120,
+ "z-index": (i+1)
+ });
+ canvases[i].attr({
+ width: 800,
+ height: 600
+ });
+ }
+ var frontCanvas = canvases[1].get(0);
+ var backCanvas = canvases[0].get(0);
+ var frontCtx = frontCanvas.getContext("2d");
+ var backCtx = backCanvas.getContext("2d");
+ var textureImage = new Image();
+ textureImage.src = "images/crayon-texture.png"
+
+ var currColor;
+ var currSize;
+ var pathes = [];
+ var currPath;
+ var currStamp;
+
+ var undo = function() {
+ // console.log(pathes.length);
+ if(pathes.length > 0) {
+ pathes.pop();
+ }
+ repaintFront();
+ repaintBack();
+ };
+ var reset = function() {
+ pathes.length = 0;
+ currPath = null;
+ repaintFront();
+ repaintBack();
+ };
+ var sizeSelected = function(size) {
+ currSize = size;
+ }
+ var colorSelected = function(color) {
+ currColor = color;
+ }
+ var stampSelected = function(stamp) {
+ currStamp = stamp;
+ }
+ $.crayon({
+ main: main,
+ colorSelected: colorSelected,
+ sizeSelected: sizeSelected,
+ undo: undo,
+ reset: reset,
+ stampSelected: stampSelected
+ });
+
+ var isDrawing = false;
+
+ $(frontCanvas).mousedown(function(e) {
+ if(currStamp) {
+ currPath = {
+ stamp: currStamp,
+ X: e.offsetX,
+ Y: e.offsetY
+ };
+ } else {
+ isDrawing = true;
+ currPath = {
+ color: currColor,
+ size: currSize,
+ points: [ {
+ X: e.offsetX,
+ Y: e.offsetY
+ } ],
+ stamp: null
+ };
+ }
+ });
+
+ $(frontCanvas).mouseup(function(e) {
+ if(isDrawing == true || currStamp) {
+ isDrawing = false;
+ pathes.push(currPath);
+ // console.log(pathes.length);
+ repaintBack();
+ }
+ });
+
+ $(frontCanvas).mousemove(function(e) {
+ if(isDrawing == true) {
+ currPath.points.push( {
+ X: e.offsetX,
+ Y: e.offsetY
+ } );
+ repaintFront();
+ }
+ });
+
+ $(frontCanvas).mouseleave(function(e) {
+ if(isDrawing == true) {
+ isDrawing = false;
+ pathes.push(currPath);
+ console.log(pathes.length);
+ repaintBack();
+ }
+ });
+
+ var touchCanvas = $(frontCanvas).Touchable();
+ touchCanvas.bind("touchablemove", function(e, touch) {
+ });
+ touchCanvas.bind("touchableend", function(e, touch) {
+ });
+ touchCanvas.bind("tap", function(e, touch) {
+ });
+
+ frontCanvas.addEventListener("touchstart", function(e) {
+ });
+
+ frontCanvas.addEventListener("touchmove", function(e) {
+ });
+
+ frontCanvas.addEventListener("touchend", function(e) {});
+
+ var repaintFront = function() {
+ frontCtx.fillStyle = "rgba(255, 255, 255, 0)";
+ frontCtx.clearRect(0, 0, frontCanvas.width, frontCanvas.height);
+
+ if(!currPath || currPath.stamp) {
+ frontCtx.drawImage(textureImage, 0, 0, textureImage.width, textureImage.height);
+ return ;
+ }
+
+ frontCtx.beginPath();
+ frontCtx.strokeStyle = "#" + currPath.color;
+ frontCtx.lineWidth = currPath.size;
+ frontCtx.lineJoin = "round";
+ frontCtx.lineCap = "round";
+
+ frontCtx.moveTo(currPath.points[0].X, currPath.points[0].Y);
+
+ for(var i = 0; i < currPath.points.length; i++) {
+ frontCtx.lineTo(currPath.points[i].X, currPath.points[i].Y);
+ }
+ frontCtx.stroke();
+ frontCtx.closePath();
+ frontCtx.drawImage(textureImage, 0, 0, textureImage.width, textureImage.height);
+ };
+
+ var repaintBack = function() {
+ backCtx.clearRect(0, 0, backCanvas.width, backCanvas.height);