javascript+css實現俄羅斯方塊小遊戲
阿新 • • 發佈:2020-06-29
俄羅斯方塊,一個很有趣的一個小遊戲,此次基於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俄羅斯方塊
更多有趣的經典小遊戲實現專題,分享給大家:
C++經典小遊戲彙總
python經典小遊戲彙總
python俄羅斯方塊遊戲集合
JavaScript經典遊戲 玩不停
javascript經典小遊戲彙總
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。