javascript+css实现俄罗斯方块小游戏


Posted in Javascript onJune 28, 2020

俄罗斯方块,一个很有趣的一个小游戏,此次基于html+css+javaScript实现,包含在一个方块落地后自动生成方块、操控方块的移动以及方块变形等。

部分代码:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>俄罗斯方块 — 经典版V10</title>
  <link rel="stylesheet" href="css/tetris.css" />
  <style>
   .playground{ 
    width: 525px; height: 550px;
    margin: 20px auto 0 auto;
    position: relative;
    background-image:url(../img/tetris.png);
   }
   .pause{width: 525px; height: 550px;
    position: absolute;
    top:0;left:0;
    background-image:url(../img/pause.png);
    z-index:100;
    display:none;
   }
   .playground img{
    position:absolute;z-index:10;width:26px;
   }
   .playground p{
    font-size: 30px;
    font-family: 'SimHei';
    font-weight: bold;
    color: #667799;
    position: absolute;
    left:305px;
    top:120px;
   }
   .playground p+p{top:176px;}
   .playground p+p+p{top:232px;}   
  </style>
 </head>
 <body>
  <div class="playground">
   <p>SCORE:<span>0</span></p>
   <p>LINES:<span>0</span></p>
   <p>LEVEL:<span>1</span></p>
  </div> 
 <script src="js/shape.js"></script>
 <script src="js/tetris.js"></script>
 </body>
</html>

游戏截图:

javascript+css实现俄罗斯方块小游戏

源码可参考:js俄罗斯方块

更多有趣的经典小游戏实现专题,分享给大家:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
div移动 输入框不能输入的问题
Nov 19 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
vue router 传参获取不到的解决方式
Nov 13 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 Javascript
详解小程序横屏方案对比
Jun 28 #Javascript
微信小程序实现上传多张图片、删除图片
Jul 29 #Javascript
js模拟实现百度搜索
Jun 28 #Javascript
微信小程序地图实现展示线路
Jul 29 #Javascript
vuex实现购物车的增加减少移除
Jun 28 #Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 #Javascript
vuex实现购物车功能
Jun 28 #Javascript
You might like
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
node.js中的console用法总结
2014/12/15 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
[00:33]2016完美“圣”典风云人物:Sccc宣传片
2016/12/03 DOTA
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
python新手学习可变和不可变对象
2020/06/11 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
销售文员的岗位职责
2013/11/20 职场文书
2014年道德讲堂实施方案
2014/03/05 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
建筑横幅标语
2014/10/09 职场文书
2014年财政所工作总结
2014/11/22 职场文书
北京英文导游词
2015/02/12 职场文书
改进工作作风心得体会
2016/01/23 职场文书
详解vue中v-for的key唯一性
2021/05/15 Vue.js
FP-growth算法发现频繁项集——构建FP树
2021/06/24 Python
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS