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 相关文章推荐
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
Sep 22 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
JavaScript获取网页中第一个链接ID的方法
Apr 03 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
javascript iframe跨域详解
Oct 26 Javascript
Vue结合原生js实现自定义组件自动生成示例
Jan 21 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
Vue自定义指令使用方法详解
Aug 21 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
浅谈vue项目用到的mock数据接口的两种方式
Oct 09 Javascript
vue-cli 关闭热更新操作
Sep 18 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
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
vue项目上传Github预览的实现示例
2018/11/06 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
用python代码做configure文件
2014/07/20 Python
python中list循环语句用法实例
2014/11/10 Python
Python中使用ElementTree解析XML示例
2015/06/02 Python
Python如何发布程序的详细教程
2018/10/09 Python
python打包成so文件过程解析
2019/09/28 Python
python-numpy-指数分布实例详解
2019/12/07 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
数字天堂软件测试面试题
2012/12/23 面试题
环境科学专业个人求职信
2013/09/26 职场文书
购房意向书
2014/04/01 职场文书
大学活动总结模板
2014/07/10 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书
欠条范文
2015/07/03 职场文书
运动会开幕式致辞
2015/07/29 职场文书
python随机打印成绩排名表
2021/06/23 Python