<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>益智类游戏别踩白块小游戏</title> <style type="text/css"> * { margin: 0; padding: 0; } .box { margin: 50px auto 0 auto; width: 400px; height: auto; border: solid 1px #222; } #cont { width: 400px; height: 600px; position: relative; overflow: hidden; } #go { width: 100%; height: 600px; position: absolute; top: 0; font: 500 30px 'Microsoft YaHei', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif; text-align: center; z-index: 99; } #go span { cursor: pointer; background-color: #fff; border-bottom: solid 1px #222; } #main { width: 400px; height: 600px; position: relative; top: -150px; } .row { width: 400px; height: 150px; } .row div { width: 99px; height: 149px; border: solid 1px #222; float: left; border-top-width: 0; border-left-width: 0; cursor: pointer; } #count { border-top: solid 1px #222; width: 400px; height: 50px; font: 500 30px/40px 'Microsoft YaHei', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif; text-align: center; } h3 { text-align: center } </style> </head> <body> <h3>千万别踩小白块哦</h3> <div class="box"> <div id="cont"> <div id="go"> <div the above mentioned id = "main"> </ div> </ div> <span> Play </ span> </div> <div id="count"></div> </div> </body> <script> //得当前样式 function getStyle(obj, arrt) { //兼容IE return obj.currentStyle ? obj.currentStyle[arrt] : getComputedStyle(obj, null)[arrt]; } var main = document.getElementById('main'); var go = document.getElementById('go'); var count = document.getElementById('count'); var cols = ['#1AAB8A', '#E15650', '#121B39', '#80A84E']; //动态创建div function cDiv(classname) { //创建div var oDiv = document.createElement('div'); var index = Math.floor (Math.random () // random value // add the corresponding row class Class oDiv.className = classname; then dynamically create four hours after // div created and added to the row lines inside for (var J = 0; J <4; J ++) { var iDiv = document.createElement ( 'div'); oDiv .appendChild (iDiv); } @ then add to the main line inside // need to add a position determination IF (main.children.length == 0) { main.appendChild (oDiv); } the else { main.insertBefore (oDiv , main.children [0]); } // random to a certain line inside div add a background color oDiv.children [index] .style.backgroundColor cols = [index]; // color marker boxes oDiv.children [index] = .className "I"; } // move div function move (obj) { // Close a timer clearInterval (obj.timer); // default speed and scoring var Speed =. 5, NUM = 0; // start a timer with the timer management obj.timer = the setInterval (function () { // speed var step = parseInt (getStyle (obj , 'top' )) + Speed; // mobile box obj.style.top + = STEP 'PX'; // Create a new cassette Analyzing and IF (the parseInt (the getStyle (obj, 'Top'))> = 0) { CDIV ( ' Row '); obj.style.top = -150 +' PX '; } // remove the box outside boundary if (obj.children.length == 6) { // before deleting, if there is no clicking the box end of the game for (var I = 0; I <. 4; I ++) { IF (obj.children [obj.children.length -. 1] .children [I] .className == 'I') { // game ends obj.style. top = '-150px'; count.innerHTML = 'end of the game, the highest score:' + NUM; / / Off timer the clearInterval (obj.timer); // start the game display go.children [0] .innerHTML = 'restart'; go.style.display = "Block" ; } } obj.removeChild (obj.children [obj.children.length -. 1]); } // clicks and scoring obj.onmousedown = function (Event) { // not click white box // compatibility IEs Event = || the window.event Event; IF ((event.target event.target:? event.srcElement) .className == 'I') { case // color after clicking ? (event.target event.target: event.srcElement ) .style.backgroundColor = "#bbb"; // Clear the box labeled (? event.target event.target: event.srcElement) .className = ''; // score NUM ++; // score is displayed count.innerHTML = 'Current Score:' + NUM; bgm.play (); } the else { // end game obj.style.top = 0; count.innerHTML = 'end of the game, the highest score:' + NUM; // timer off the clearInterval (obj.timer); // start the game display go.children [0] .innerHTML = 'restart'; go.style.display = "Block"; } // box acceleration IF (NUM% 10 == 0) { Speed ++; } } }, 20 is) } // play go.children [0] .onclick = function () { // start is determined whether the front inside main case, there are all delete if (main.children.length) { // clear main force inside all boxes main.innerHTML = ''; } // Empty scoring count.innerHTML = 'Game Start'; // hide the Start box this.parentNode.style.display = "none"; // call timer Move (main); } </ Script> </ HTML>