javascript+css實現(xiàn)俄羅斯方塊小游戲

更新時間：2020年06月28日 14:07:02 作者：YUN♛

這篇文章主要為大家詳細(xì)介紹了javascript+css實現(xiàn)俄羅斯方塊小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

俄羅斯方塊，一個很有趣的一個小游戲，此次基于html+css+javaScript實現(xiàn)，包含在一個方塊落地后自動生成方塊、操控方塊的移動以及方塊變形等。

部分代碼：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>俄羅斯方塊 — 經(jīng)典版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俄羅斯方塊

更多有趣的經(jīng)典小游戲?qū)崿F(xiàn)專題，分享給大家：

C++經(jīng)典小游戲匯總

python經(jīng)典小游戲匯總

python俄羅斯方塊游戲集合

JavaScript經(jīng)典游戲玩不停

javascript經(jīng)典小游戲匯總

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Jquery 切換不同圖片示例代碼
切換不同圖片的方法有很多，在本文為大家介紹下使用jquery是如何做到的
2013-12-12
js字符編碼函數(shù)區(qū)別分析
js對文字編碼有3個函數(shù)： escape,encodeURI,encodeURIComponent，對應(yīng)的解碼函數(shù)：unescape,decodeURI,decodeURIComponent
2011-12-12
用js實現(xiàn)的一個根據(jù)內(nèi)容自動生成表格的函數(shù)
用js實現(xiàn)的一個根據(jù)內(nèi)容自動生成表格的函數(shù)...
2007-08-08
JS定義函數(shù)的幾種常用方法小結(jié)
這篇文章主要介紹了JS定義函數(shù)的幾種常用方法,結(jié)合實例形式總結(jié)分析了javascript函數(shù)表達(dá)式、Lambda 表達(dá)式、對象方法等常見函數(shù)定義操作技巧,需要的朋友可以參考下
2019-05-05
javascript圖片滑動效果實現(xiàn)
這篇文章主要介紹了超實用的javascript圖片滑動效果實現(xiàn)方法,實例分析了javascript通過對頁面元素與相關(guān)屬性的操作實現(xiàn)滑動菜單效果的相關(guān)技巧，具有一定參考借鑒價值，需要的朋友可以參考下
2015-11-11
ES6與CommonJS中的模塊處理的區(qū)別
ES6和CommonJS都有自己的一套處理模塊化代碼的措施，這篇文章主要介紹了ES6與CommonJS中的模塊處理的區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06
詳解Document.Cookie
這篇文章主要介紹了詳解Document.Cookie的相關(guān)資料,需要的朋友可以參考下
2015-12-12
JavaScript幾種彈窗事件的使用
這篇文章主要介紹了JavaScript幾種彈窗事件的使用,彈窗事件就是在我們執(zhí)行某操作的時候,彈出信息框給出提示?；蚴占瘮?shù)據(jù)的時候,彈出窗口收集信息,不想收集可以取消隱藏,下文介紹需要的朋友可以參考一下
2022-02-02
Ionic實現(xiàn)頁面下拉刷新(ion-refresher）功能代碼
這篇文章主要介紹了使用Ionic實現(xiàn)頁面下拉刷新(ion-refresher）功能的代碼，感興趣的朋友一起看看吧
2016-06-06
JavaScript與ActionScript3兩者的同性與差異性
接觸JavaScript和ActionScript3也有近5年的時間了，它們都是應(yīng)用比較廣泛的腳本語言.接下來通過本文給大家介紹JavaScript與ActionScript3兩者的同性與差異性，感興趣的朋友一起學(xué)習(xí)吧
2016-09-09