4 ms·

SVG Tetris

84 points by marcodiego 6y ago

marcodiego 6y ago
Svg supports the <script> tag. This allows for some very interesting usages. Other examples: https://www.scriptol.fr/xml/code/invaders.svg https://www.scriptol.fr/xml/code/invaders.svg https://www.nayuki.io/res/full-screen-clock-javascript/full-screen-clock-analog-with-seconds.svg https://www.nayuki.io/res/full-screen-clock-javascript/full-... https://upload.wikimedia.org/wikipedia/commons/6/6c/Morphing_SMIL.svg https://upload.wikimedia.org/wikipedia/commons/6/6c/Morphing...
- bawolff 6y ago
  The last one is using SMIL (declarative animations) not a <script> tag. Wikipedia doesnt let you upload svgs that embed javascript.
- john-doe 6y ago
  Another example, a simple calendar: https://shkspr.mobi/blog/2018/02/this-svg-always-shows-todays-date/ https://shkspr.mobi/blog/2018/02/this-svg-always-shows-today...
- upofadown 6y ago
  >Svg supports the <script> tag. This allows for some very interesting usages. That raises the question of how one disables the <script> tag on one's browser to prevent the most interesting usages.
  - jancsika 6y ago
    IIRC an svg as the src of an img won't run the script. But it used to be that if you chose "View Image" on the SVG, then it would run the script when it opens the svg in its own window. Not sure if that's still true.
- nayuki 6y ago
  I first saw your comment on this topic a few weeks ago: https://news.ycombinator.com/item?id=26115086 https://news.ycombinator.com/item?id=26115086
commandlinefan 6y ago
The controls here are maddening though - I kept expecting the down button to drop the piece rather than rotate it.
- JellyBeanThief 6y ago
  I prefer the up button to rotate clockwise myself.
- NiceWayToDoIT 6y ago
  Me too, space should rotate and arrow down should drop.
NiceWayToDoIT 6y ago
"Look Maa it is image, it is game, it is web page ..." :) I thought oh I cannot believe this it is again one of those supper advance CSS, and then a saw javascript. Never the less, still cool!
croisillon 6y ago
Can’t do much on mobile, except with an old blackberry i guess. Do you intend to add touch controls as well?
- chungy 6y ago
  If you do a page info, you'll note the SVG was created in 2007. Highly doubtful anyone is going to update it. It was a neat tech demo at the time, but we do have better ways to implement Tetris on the web now (possibly then, too)
  - mkl 6y ago
    Looks like it's even earlier. From the page source:  
    - ChrisArchitect 6y ago
      Right, this was a famous SVG demo example from 2004 stored on http://www.croczilla.com/svg/samples/svgtetris/svgtetris.svg http://www.croczilla.com/svg/samples/svgtetris/svgtetris.svg for many years
amelius 6y ago
But they disabled the Control + and - keybindings so you can't zoom in!
- kroltan 6y ago
  They consume every event, even reloading the page is impossible without reaching for the UI buttons.
deleted 6y ago
[deleted]
imhoguy 6y ago
Score 102! SVG as a new Flash? Thankfully open standard.
deleted 6y ago
[deleted]

84 points by marcodiego 6y ago

Svg supports the <script> tag. This allows for some very interesting usages. Other examples: https://www.scriptol.fr/xml/code/invaders.svg https://www.scriptol.fr/xml/code/invaders.svg https://www.nayuki.io/res/full-screen-clock-javascript/full-screen-clock-analog-with-seconds.svg https://www.nayuki.io/res/full-screen-clock-javascript/full-... https://upload.wikimedia.org/wikipedia/commons/6/6c/Morphing_SMIL.svg https://upload.wikimedia.org/wikipedia/commons/6/6c/Morphing...

bawolff 6y ago
The last one is using SMIL (declarative animations) not a <script> tag. Wikipedia doesnt let you upload svgs that embed javascript.
john-doe 6y ago
Another example, a simple calendar: https://shkspr.mobi/blog/2018/02/this-svg-always-shows-todays-date/ https://shkspr.mobi/blog/2018/02/this-svg-always-shows-today...
upofadown 6y ago
>Svg supports the <script> tag. This allows for some very interesting usages. That raises the question of how one disables the <script> tag on one's browser to prevent the most interesting usages.
- jancsika 6y ago
  IIRC an svg as the src of an img won't run the script. But it used to be that if you chose "View Image" on the SVG, then it would run the script when it opens the svg in its own window. Not sure if that's still true.
nayuki 6y ago
I first saw your comment on this topic a few weeks ago: https://news.ycombinator.com/item?id=26115086 https://news.ycombinator.com/item?id=26115086

commandlinefan 6y ago

The controls here are maddening though - I kept expecting the down button to drop the piece rather than rotate it.

JellyBeanThief 6y ago
I prefer the up button to rotate clockwise myself.
NiceWayToDoIT 6y ago
Me too, space should rotate and arrow down should drop.

NiceWayToDoIT 6y ago

"Look Maa it is image, it is game, it is web page ..." :) I thought oh I cannot believe this it is again one of those supper advance CSS, and then a saw javascript. Never the less, still cool!

croisillon 6y ago

Can’t do much on mobile, except with an old blackberry i guess. Do you intend to add touch controls as well?

chungy 6y ago
If you do a page info, you'll note the SVG was created in 2007. Highly doubtful anyone is going to update it. It was a neat tech demo at the time, but we do have better ways to implement Tetris on the web now (possibly then, too)
- mkl 6y ago
  Looks like it's even earlier. From the page source:  
  - ChrisArchitect 6y ago
    Right, this was a famous SVG demo example from 2004 stored on http://www.croczilla.com/svg/samples/svgtetris/svgtetris.svg http://www.croczilla.com/svg/samples/svgtetris/svgtetris.svg for many years

amelius 6y ago

But they disabled the Control + and - keybindings so you can't zoom in!

kroltan 6y ago
They consume every event, even reloading the page is impossible without reaching for the UI buttons.

deleted 6y ago

[deleted]

imhoguy 6y ago

Score 102! SVG as a new Flash? Thankfully open standard.

deleted 6y ago

[deleted]