日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

别踩白块小游戏

發布時間：2025/3/12 编程问答 28 豆豆
生活随笔 收集整理的這篇文章主要介紹了 别踩白块小游戏 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

用H5新特性實現別踩白塊小游戲。

功能分析：
1.游戲開始按鈕
2.每點中一個記一分
3.分數達到二十彈出鼓勵彈框
4.點擊錯誤則游戲結束

效果演示

看了效果有沒有急迫的心情呢？

代碼演示

  • body內容
    • <body><h2>本次得分</h2><h2 id="score">0</h2><div id="main"><div id="con"><div class="row"><div class="fang"></div><div class="fang one"></div><div class="fang"></div><div class="fang"></div></div><div class="row"><div class="fang"></div><div class="fang one"></div><div class="fang"></div><div class="fang"></div></div><div class="row"><div class="fang"></div><div class="fang"></div><div class="fang one"></div><div class="fang"></div></div><div class="row"><div class="fang one"></div><div class="fang"></div><div class="fang"></div><div class="fang"></div></div></div></div><div class="start">開始游戲</div></body>
  • CSS演示
    • <style type="text/css">#score {text-align: center;}h2 {text-align: center;}div {margin: 0 auto;width: 100px;height: 100px;}#main {width: 400px;height: 600px;background: blanchedalmond;border: 2px solid gray;margin: 0 auto;position: relative;overflow: hidden;}#con {width: 100%;height: 400px;position: relative;top: -100px;/*隱藏最上層一行*/border-collapse: collapse;}.row {height: 100px;width: 100%;}.fang {height: 100px;width: 100px;float: left;}.one {background: blueviolet;}.start {margin-top: 20px;width: 150px;height: 50px;border-radius: 10px;background: yellowgreen;line-height: 50px;text-align: center;color: #fff;}</style>
  • JavaScript內容
    • <script>//根據id獲取元素function $(id) {return document.getElementById(id);}var clock = null;var state = 0;var speed = 4;/** 初始化 init*/function init() {for (var i = 0; i < 4; i++) {createrow();}//添加onclick事件$('main').onclick = function(ev) {ev = ev || eventjudge(ev);}//定時器 每30毫秒調用一次move()clock = window.setInterval('move()', 50);}//判斷是否點擊紫塊function judge(ev) {if (state == 3) {alert('請刷新此頁面，重新開始游戲')return;}if (ev.target.className.indexOf('one') == -1) {fail();} else {//點擊目標元素ev.target.className = 'fang';ev.target.parentNode.pass = 1;score();}}//游戲結束function fail() {clearInterval(clock);state = 3;confirm('你的最終得分為' + parseInt($('score').innerHTML));}//創建divfunction creatediv(className) {var div = document.createElement('div');div.className = className;return div;}function createrow() {var con = $('con');var row = creatediv('row');var arr = createcell();con.appendChild(row);for (var i = 0; i < 4; i++) {row.appendChild(creatediv(arr[i]));}if (con.firstChild == null) {con.appendChild(row);} else {con.insertBefore(row, con.firstChild);}}//創建一個類名的數組function createcell() {var temp = ['fang', 'fang', 'fang', ];var i = Math.floor(Math.random() * 4);temp[i] = 'fang one';return temp;}//移動黑色塊function move() {var con = $('con');var top = parseInt(window.getComputedStyle(con, null)['top']);if (speed + top > 0) {top = 0;} else {top += speed;}con.style.top = top + 'px';if (top == 0) {createrow();con.style.top = '-100px';delrow();} else if (top == (-100 + speed)) {var rows = con.childNodes;if ((rows.lenth == 5) && (rows[rows.length - 1].pass !== 1)) {fail();}}}//加快速度function speedup() {speed += 2;if (speed == 20) {alert('你真厲害，繼續加油呦！');}}//刪除行function delrow() {var con = $('con');if (con.childNodes.length == 6) {con.removeChild(con.lastChild);}}//計算得分function score() {var newscore = parseInt($('score').innerHTML) + 1;$('score').innerHTML = newscore;if (newscore % 10 == 0) {speedup();}}document.querySelector('.start').addEventListener('click', init)</script>

    總結

    以上是生活随笔為你收集整理的别踩白块小游戏的全部內容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。