javascript+css實現俄羅斯方塊小游戲
更新時間：2020年06月28日 14:07:02 作者：YUN♛
這篇文章主要為大家詳細介紹了javascript+css實現俄羅斯方塊小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
俄羅斯方塊，一個很有趣的一個小游戲，此次基于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>
游戲截圖：
源碼可參考：js俄羅斯方塊
更多有趣的經典小游戲實現專題，分享給大家：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了詳解webpack3編譯兼容IE8的正確姿勢，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
本篇文章主要介紹js Function函數的使用方法，應該對初學Js的朋友們會有所幫助,下面就隨小編一起來看下吧2016-11-11
這篇文章主要為大家詳細介紹了微信小程序實現YDUI的ScrollTab組件，滾動選項卡效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-02-02
這篇文章主要介紹了js+HTML5實現canvas多種顏色漸變效果的方法,涉及html5屬性的相關技巧,需要的朋友可以參考下2015-06-06
這篇文章主要為大家詳細介紹了微信小程序實現計算器小功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
JavaScript中的ParseInt("08")和“09”返回0的原因分析及解決辦法
這篇文章主要介紹了JavaScript中ParseInt("08")和“09”返回0的原因分析及解決辦法的相關資料,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了JS通過位運算實現權限加解密的相關知識，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-08-08
這篇文章主要介紹了JS散列表碰撞處理、開鏈法、HashTable散列,結合實例形式分析了散列表碰撞處理、開鏈法、HashTable散列的定義及簡單使用操作技巧,需要的朋友可以參考下2019-02-02
Json對象和字符串互相轉換json數據拼接和JSON使用方式詳細介紹(小結)
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式.這篇文章主要介紹了Json對象和字符串互相轉換json數據拼接和JSON使用方式詳細介紹(小結)的相關資料,需要的朋友可以參考下2016-10-10
javascript中兼容主流瀏覽器的動態(tài)生成iframe方法
這篇文章主要介紹了javascript中兼容主流瀏覽器的動態(tài)生成iframe方法,需要的朋友可以參考下2014-05-05