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 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
js函数般调用正则
Apr 08 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 Javascript
javascript笛卡尔积算法实现方法
Apr 08 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
Vee-Validate的使用方法详解
Sep 22 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
浅析vue-router中params和query的区别
Dec 24 Javascript
react合成事件与原生事件的相关理解
May 13 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 substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
jQuery阻止同类型事件小结
2013/04/19 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
JS中的作用域链
2017/03/01 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
JS实现页面打印功能
2017/03/16 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
requirejs + vue 项目搭建详解
2017/06/16 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
利用python将pdf输出为txt的实例讲解
2018/04/23 Python
python K近邻算法的kd树实现
2018/09/06 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
基于树莓派的语音对话机器人
2019/06/17 Python
Python占用的内存优化教程
2019/07/28 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
python字典与json转换的方法总结
2020/12/28 Python
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
理工学院学生自我鉴定
2014/02/23 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
人事任命书格式
2014/06/05 职场文书
2015年安全生产责任书
2015/01/30 职场文书