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 相关文章推荐
Js中sort()方法的用法
Nov 04 Javascript
function, new function, new Function之间的区别
Mar 08 Javascript
Js 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
jQuery选择器querySelector的使用指南
Jan 23 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
May 16 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
vue watch深度监听对象实现数据联动效果
Aug 16 Javascript
深入了解JavaScript代码覆盖
Jun 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
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
js命名空间写法示例
2015/12/18 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
angular4自定义组件详解
2017/09/28 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
使用Python编写vim插件的简单示例
2015/04/17 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
Python全面分析系统的时域特性和频率域特性
2020/02/26 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
超市业务员岗位职责
2013/12/05 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js
python中的random模块和相关函数详解
2022/04/22 Python