當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript实战 别踩白块（钢琴块）游戏制作（一）
生活随笔
收集整理的這篇文章主要介紹了
JavaScript实战 别踩白块（钢琴块）游戏制作（一）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
今天給大家帶來的是JavaScript項目實戰，包含一些HTML、css內容
過程中涉及到的就不再詳細講解，主要講解的是JavaScript的相關知識游戲“別踩白塊”教程分布講解，本節實現大體框架，用HTML和css創建一個4×4的長方形大盒子，用來模擬黑白塊。
Html代碼：
<!DOCTYPE html><head><meta charset="utf-8"><title>別踩白塊</title><meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-scale=1.0"><link rel="stylesheet" href="style.css"> </head><body><p>分數：0</p><div class="box"><div class="row"><div class="column"></div><div class="column"></div><div class="column"></div><div class="column"></div></div><div class="row"><div class="column"></div><div class="column"></div><div class="column"></div><div class="column"></div></div><div class="row"><div class="column"></div><div class="column"></div><div class="column"></div><div class="column"></div></div><div class="row"><div class="column"></div><div class="column"></div><div class="column"></div><div class="column"></div></div></div><input type="button" id="btn" value="開始"> </body>css代碼：
body{background-color: rgba(82, 87, 81, .5); } .box{float: left;width: 360px;height: 440px;margin-left: 50%;margin-top: 50px;transform: translateX(-50%);border: 1px solid rgba(255, 255, 255, .5); } .row{width:100%;height: 110px; } .column{float: left;width: 25%;height: 100%;box-sizing: border-box;border: 1px solid rgba(255, 255, 255, .5); } p{float: left;margin-left: 50%;margin-top: 100px;transform: translateX(-50%);font-size:40px; } input{float: left;margin-left: 50%;margin-top: 50px;transform: translateX(-50%);font-size: 20px; }效果圖：
持續更新中！！！
總結
以上是生活随笔為你收集整理的JavaScript实战 别踩白块（钢琴块）游戏制作（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 到处都是天马
- 下一篇： 2022年法定节假日JSON格式文件