哈哈这个实在是有点意思

备受打击当初用java各种类写的都要几百行啦

先看效果图：

游戏结束图：

javascript实现源码：

[javascript] view
plaincopyprint?

  1. <!doctype html>
  2. <html><head><title>俄罗斯方块</title>
  3. <meta name="Description" content="俄罗斯方块Javascript实现">
  4. <meta name="Keywords" content="俄罗斯方块,Javascript,实现,短小精悍,游戏,ithomer,ithomer.net">
  5. </head><body>
  6. <div id="box" style="margin: 20px auto; text-align:center; width:252px;font:25px/25px 宋体;background:#000;color:#9f9;border:#999 20px ridge;text-shadow:2px 3px 1px #0f0;"></div>
  7. <div id="footer" style="margin-top: 200px auto; text-align:center; font-size: 16px;">© 2009 - 2014 All Rights by <a href="http://blog.ithomer.net">ithomer.net</a></div>
  8. <script>
  9. var domain="***";
  10. var author="zuidaima";
  11. var map=eval("["+Array(23).join("0x801,")+"0xfff]");
  12. var tatris=[[0x6600],[0x2222,0xf00],[0xc600,0x2640],[0x6c00,0x4620],[0x4460,0x2e0,0x6220,0x740],[0x2260,0xe20,0x6440,0x4700],[0x2620,0x720,0x2320,0x2700]];
  13. var keycom={"38":"rotate(1)","40":"down()","37":"move(2,1)","39":"move(0.5,-1)"};
  14. var dia, pos, bak, run;
  15. function start(){
  16. dia=tatris[~~(Math.random()*7)];
  17. bak=pos={fk:[],y:0,x:4,s:~~(Math.random()*4)};
  18. rotate(0);
  19. }
  20. function over(){
  21. document.onkeydown=null;
  22. clearInterval(run);
  23. alert("GAME OVER");
  24. }
  25. function update(t){
  26. bak={fk:pos.fk.slice(0),y:pos.y,x:pos.x,s:pos.s};
  27. if(t) return;
  28. for(var i=0,a2=""; i<22; i++)
  29. a2+=map[i].toString(2).slice(1,-1)+"<br/>";
  30. for(var i=0,n; i<4; i++)
  31. if(/([^0]+)/.test(bak.fk[i].toString(2).replace(/1/g,"\u25a1")))
  32. a2=a2.substr(0,n=(bak.y+i+1)*15-RegExp.$_.length-4)+RegExp.$1+a2.slice(n+RegExp.$1.length);
  33. document.getElementById("box").innerHTML=a2.replace(/1/g,"\u25a0").replace(/0/g,"\u3000");
  34. }
  35. function is(){
  36. for(var i=0; i<4; i++)
  37. if((pos.fk[i]&map[pos.y+i])!=0) return pos=bak;
  38. }
  39. function rotate(r){
  40. var f=dia[pos.s=(pos.s+r)%dia.length];
  41. for(var i=0; i<4; i++)
  42. pos.fk[i]=(f>>(12-i*4)&15)<<pos.x;
  43. update(is());
  44. }
  45. function down(){
  46. ++pos.y;
  47. if(is()){
  48. for(var i=0; i<4 && pos.y+i<22; i++)
  49. if((map[pos.y+i]|=pos.fk[i])==0xfff)
  50. map.splice(pos.y+i,1), map.unshift(0x801);
  51. if(map[1]!=0x801) return over();
  52. start();
  53. }
  54. update();
  55. }
  56. function move(t,k){
  57. pos.x+=k;
  58. for(var i=0; i<4; i++)
  59. pos.fk[i]*=t;
  60. update(is());
  61. }
  62. document.onkeydown=function(e){
  63. eval(keycom[(e?e:event).keyCode]);
  64. };
  65. start();
  66. run=setInterval("down()",400);
  67. </script></body></html>

在线演示

原文： http://blog.ithomer.net/2014/05/60-lines-of-code-the-small-javascript-written-in-russia-block-game/

版权声明：本文为博主原创文章，未经博主允许不得转载。

60行代码：Javascript 写的俄罗斯方块游戏的更多相关文章

  1. 【转】shell脚本写的俄罗斯方块游戏

    亲测一个很好玩的shell脚本写的俄罗斯方块游戏,脚本来自互联网 先来讲一下思维流程 一.方块的表示 由于shell不能定义二维数组,所以只能用一维数组表示方块,俄罗斯方块主要可以分为7类,每一类方块 ...

  2. Python 写一个俄罗斯方块游戏

    使用 Python 的 PyGame 库写一个俄罗斯方块游戏的逐步指南 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例的人 ...

  3. 60行自己动手写LockSupport是什么体验？

    60行自己动手写LockSupport是什么体验? 前言 在JDK当中给我们提供的各种并发工具当中,比如ReentrantLock等等工具的内部实现,经常会使用到一个工具,这个工具就是LockSupp ...

  4. 3行代码，为QQ轻游戏加上语音互动能力

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯游戏云 发表于云+社区专栏 游戏和社交往往有着密不可分的关系,QQ轻游戏就是一款集成在手Q里面的游戏平台,直接通过手Q入口就能随开 ...

  5. 用C写的俄罗斯方块游戏 By: hoodlum1980 编程论坛

    /************************************ * Desc: 俄罗斯方块游戏 * By: hoodlum1980 * Email: jinfd@126.com * Dat ...

  6. 280行代码：Javascript 写的2048游戏

    2048 原作者就是用Js写的,一直想尝试,但久久未动手. 昨天教学生学习JS代码.最好还是就做个有趣的游戏好了.2048这么火,是一个不错的选择. 思路: 1. 数组 ,2维数组4x4 2. 移动算 ...

  7. javascript写贪吃蛇游戏（20行代码！）

    <!doctype html> <html> <body> <canvas id="can" width="400" ...

  8. JavaScript写一个拼图游戏

    拼图游戏的代码400行, 有点多了, 在线DEMO的地址是:打开: 因为使用canvas,所以某些浏览器是不支持的: you know: 为什么要用canvas(⊙o⊙)?  因为图片是一整张jpg或 ...

  9. 1000行代码徒手写正则表达式引擎【1】--JAVA中正则表达式的使用

    简介: 本文是系列博客的第一篇,主要讲解和分析正则表达式规则以及JAVA中原生正则表达式引擎的使用.在后续的文章中会涉及基于NFA的正则表达式引擎内部的工作原理,并在此基础上用1000行左右的JAVA ...

随机推荐

  1. 偏前端 - div+mui+vue.js 制作问卷调查单页 ——题目答案由后台随机给出10道

    封装的ajax获取数据.代码可能有些是多余的,没做处理!!点击提交后有弹框,在这里我没有贴出来.第一次写博客,这些也是别人教我的,经理解后,贴出来于大家分享 ——html—— <script t ...

  2. 网页中的图像<img>

    插入图像 img标记的属性及描述 属性 值 描述 alt text 定义有关图形的短描述 src URL 要显示图像的URL height pixels% 定义图像的高度 width pixels% ...

  3. Flume(1)-概述与组成架构

    一. 定义 Flume是Cloudera提供的一个高可用的,高可靠的,分布式的海量日志采集.聚合和传输的系统.Flume基于流式架构,灵活简单. 二. 优点 1. 可以和任意集中式存储进程集成. 2. ...

  4. 与“零值”作比较的 if 语句。

    笔试时候遇到的问题,在此做一下记录. 1.if语句中的布尔变量与零值作比较 不能用布尔变量与true,false,1,0直接作比较.布尔变量类型的语义是:零值为“假”,任何非零值都表示“真”.因为tr ...

  5. UART学习之路（三）基于STM32F103的USART实验

    关于STM32串口的资料可以在RM0008 Reference Manual中找到,有中文版的资料.STM32F103支持5个串口,选取USART1用来实验,其对应的IO口为PA9和PA10.这次的实 ...

  6. 前端chrome调试

    Resources标签页 Resources标签页可以查看到请求的资源情况,包括CSS.JS.图片等的内容.也可以设置各种断点.对存储的内容进行编辑然后保存也会实时的反应到页面上. 几个常用的断点快捷 ...

  7. 20145226夏艺华 《Java程序设计》第2周学习总结

    教材学习内容总结 学习目标 了解Java编程风格 认识Java的类型与变量 掌握Java流程控制的方法(分支.循环) 教材第三章内容总结 认识类型与变量 学习运算符的基本使用 了解类型转换细节 运用基 ...

  8. 20145226夏艺华 网络对抗技术 EXP7 网络欺诈技术防范

    20145226夏艺华 网络对抗技术 EXP7 网络欺诈技术防范 实践内容 本实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法. · 简单应用SET工具建立冒名网站 · ett ...

  9. 【BZOJ4553】[HAOI2016&TJOI2016]序列

    [BZOJ4553][HAOI2016&TJOI2016]序列 题面 bzoj 洛谷 题解 一定要仔细看题啊qwq... 我们设$mn[i],mx[i]$表示第$i$个位置上最小出现.最大出现 ...

  10. Mybaits: MyBaits的xml文件中大于号和小于号的转义

    < 小于号  <     > 大于号  & & 和 & ' 单引号 &apos; " 双引号  "