Tetris Game / 俄罗斯方块 JavaScript/TypeScript源码

Tetris Game / 俄罗斯方块

浏览器兼容 ie8+, chrome, firefox ... 小时候穷,买不起游戏机,现在用js写一个来弥补一下童年 →_→

源码地址:https://github.com/capricorncd/tetris

游戏截图

初始化方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Tetris - 俄罗斯方块单机版 - Capricorncd</title>
  <link rel="stylesheet" href="../dist/css/tetris.css" type="text/css">
  <style>
    body {background-color: #333;}
    .game-box { float: left; margin-right: 10px; padding: 10px; width: 320px; height: 540px; border: 1px solid #999}
  </style>
</head>
<body>

<div class="game-box" id="TetrisA"></div>

<script src="../dist/js/tetris.js"></script>
<script>
  new Tetris({
    // 可选参数,默认为body
    container: '#TetrisA',
    // 错误回调
    error: function (err) {
      console.error(err)
    },
    // 游戏DOM结构创建完成回调
    ready: function (res) {
      console.log(res)
    }
  })
</script>
</body>
</html>

待开发功能

  • 游戏难易程度选项
  • PC操作自定义方向键
  • 游戏声音
  • 排行榜记录
  • 自定义主题(方块颜色、舞台颜色等等)
  • ... UI方面暂时没有想到合适的方案

源码地址:https://github.com/capricorncd/tetris

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏C/C++基础

C++类的设计与实现规范

规范是一种规定,遵守这种规定能够带来长远的利益,而违反这种规定却不会立即收到惩罚。程序设计的规范是人们在长期的编程时间中总结出来的,深入理解中这些规范需要认真的...

672
来自专栏深入浅出区块链技术

Solidity教程系列2 - 地址类型介绍

Solidity是以太坊智能合约编程语言,阅读本文前,你应该对以太坊、智能合约有所了解,如果你还不了解,建议你先看以太坊是什么

672
来自专栏一个番茄说

让你的编译器更懂你,写出更棒的Swift

自从Swift诞生以后,苹果就一直在努力让它变得更好,更快。相比更加灵活的Objective-C,Swift显得更加老实本分。但是,如果你真的对它了解之后,你会...

643
来自专栏ACM算法日常

企鹅QQ(字符串哈希)- BZOJ-3555

PenguinQQ是中国最大、最具影响力的SNS(Social Networking Services)网站,以实名制为基础,为用户提供日志、群...

934
来自专栏Python爬虫实战

设计模式:简单工厂模式

简单工厂模式又称静态工厂方法(Static Factory Method)模式,它不是Gof 所讲的23种设计模式之一,但是它却是我们在编码过程中经常使用的方法...

461
来自专栏IT派

那些神奇的一行 Python 代码

Python 这门语言非常的有趣,不仅可以做高大上的人工智能、大数据、机器学习。还可以用来做 Web、爬虫。还有其它很多的应用。今天我就给大家展示下一行 Pyt...

1064
来自专栏容器云生态

Python中关于集合(set)的思考

        又是好久没有发技术上的文章了,一方面是最近工作也比较忙,同时自己也在学习python,另外一方面是因为个人不喜欢发表一些在互联网上可以直接找到的...

2415
来自专栏IT派

真疯了!Java 9 还没会用,Java 10 就要来了!

2017年8月,JCP执行委员会提出将Java的发布频率改为每六个月一次,随后,Oracle发言人Donald Smith在他的博客中确认了这一消息。该决定将在...

3687
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS3(四)边框图片,过渡

并且,添加边框图片是以背景的方式添加的,所以会有可能文字覆盖在边框的情况,后面也会介绍处理方法。

351
来自专栏编程

任鸟飞谈逆向-《梦三国》字符串突破口以及跳回游戏领空

在逆向很多数据的时候 无论是PC端还是移动端,我们都会借用到字符串去当突破口 今天只是说说PC端的字符串突破口,移动端下个月忙完手里的工作,分享给大家,我们系统...

1840

扫码关注云+社区