: This is the home page, there is a simple mode and hell mode modes are selected
This is the game interface after finished selecting mode: 30 seconds countdown to a game, hit a rat per minute plus one, minus one point did not hit, did not hit without diminished
First, prepare a few pictures
html code:
1 <!-- 初始界面 --> 2 <div class="cover"> 3 <input type="button" value="简单模式" id="easy"> 4 <input type="button" value="地狱模式" id="hard"> 5 </div> 6 7 8 <div id="content"> 9 10 <div class="data-box"> 11 <label>分数</label><input type="text" value="0" id="txtScore"> 12 <label>分数</label><input type="text" value="30" id="txtRemtime"> 13 </div> 14 15 <!-- 快捷写法：(tr>td*4)*5 表示4行5列 --> 16 <table id="tb"> 17 <tr> 18 <tr> 19 <td></td> 20 <td></td> 21 <td></td> 22 <td></td> 23 <td></td> 24 </tr> 25 <tr> 26 <td></td> 27 <td></td> 28 <td></td> 29 <td></td> 30 <td></td> 31 </tr> 32 <tr> 33 <td></td> 34 <td></td> 35 <td></td> 36 <td></td> 37 <td></td> 38 </tr> 39 <tr> 40 <td></td> 41 <td></td> 42 <td></td> 43 <td></td> 44 <td></td> 45 </tr> 46 <tr> 47 <td></td> 48 <td></td> 49 <td></td> 50 <td></td> 51 <td></td> 52 </tr> 53 </tr> 54 </table> 55 </div>
css code:
1 <style> 2 html, 3 body { 4 height: 100%; 5 } 6 7 body { 8 margin: 0px; 9 background: url(img/bj.jpg) no-repeat center / cover; 10 } 11 12 .data-box { 13 text-align: center; 14 /* margin-top: 0px; */ 15 } 16 . 17 Table { 18 is margin : 20px Auto ; . 19 / * change the mouse pointer * / 20 is Cursor : URL (IMG / favicon1.ico), Auto ; 21 is } 22 is 23 is TD { 24 width : 100px ; 25 height : 100px ; 26 is 27 background : URL (IMG / RAT-hole.png) NO-REPEAT Center / Cover ; 28 border-radius: 50%; 29 /* 透明度 */ 30 opacity:0.9; 31 text-align: center; 32 } 33 34 img { 35 width: 70px; 36 height: 70px; 37 } 38 39 .cover { 40 width: 100%; 41 height: 100%; 42 background-color: rgba(0, 0, 0, 0.5); 43 } 44 45 .cover>input { 46 width: 180px; 47 height: 60px; 48 position: absolute; 49 left: 50%; 50 top: 50%; 51 margin-left: -90px; 52 margin-top: -100px; 53 border-radius: 20px; 54 border: none; 55 outline: none; 56 57 background-image: linear-gradient(45deg, green, yellowgreen); 58 font-size: 18px; 59 60 } 61 62 .cover>#hard { 63 margin-top: 0px; 64 } 65 66 #content{ 67 display: none; 68 } 69 </style>
js code: the main content in this, and very detailed comments
. 1 <Script> 2 // Find all TD . 3 var tdList = document.getElementsByTagName ( 'TD' ); . 4 . 5 // find countdown text box . 6 var txtRemtime = document.getElementById ( "txtRemtime" ); . 7 // prepare a variable countdown . 8 var Time = txtRemtime.value; . 9 // find the table to modify his hammer 10 var TB = document.getElementById ( "TB" ); . 11 // find the text box fraction 12 is var txtScore = document.getElementById ( "txtScore" ); 13 //Preparing a variable 14 var Score = 0 ; 15 16 // find the mask layer . 17 var Cover document.querySelector = ( 'Cover.' ); 18 is // Find games content . 19 var Content = document.getElementById ( 'Content' ); 20 is 21 is 22 is 23 is for ( var I = 0; I <tdList.length; I ++ ) { 24 // mouse down event 25 tdList [I] .onmousedown = function () { 26 is // modified table hammer 27 = tb.style.cursor "URL (IMG / the favicon.ico), Auto" ; 28 } 29 30 tdList [I] .onmouseup = function () { 31 is // restore the hammer 32 tb.style.cursor = "URL (IMG /favicon1.ico), Auto " ; 33 is 34 is // determines how that inside there is no img td, there becomes img took a hit 35 IF ( the this .children.length = 0! ) { 36 // score +1 37 [ Score ++ ; 38 is 39 // this image img replaced cry image 40 the this.children [0] = .src "IMG / mouse2.png" ; 41 is } the else { 42 is // score -1 43 is score-- ; 44 is } 45 // The point value assigned to the text box 46 is txtScore.value = Score; 47 } 48 } 49 50 51 is // find a simple model to his home click event 52 is document.getElementById ( 'easy') the onclick =. function () { 53 is startGame (1500, 1000 ); 54 is } 55 56 is // find to his home hell mode click event 57 is document.getElementById ( 'Hard') the onclick =. Function () { 58 startGame (600, 500 ); 59 } 60 61 is // Play 62 is function startGame (creaTime, DISTIME) { 63 is // hide large mask layer 64 cover.style.display = "none" ; 65 // Games 66 content.style.display = "Block" ; 67 68 // generate random mouse 69 var mouseID = setInterval (function () { 70 // generates a random number subscript Maximum 0- 71 is var IDX = the parseInt (Math.random () * tdList.length); 72 // add a random number corresponding to the id td mice generated image 73 is tdList [IDX] = .innerHTML '<IMG the src = "IMG / mouse1.png">' ; 74 75 // clear mice 76 the setTimeout ( function () { 77 tdList [IDX] .innerHTML = '' ; 78 } , DISTIME); 79 }, creaTime) 80 81 82 // countdown game time 83 var= the setInterval timerId ( function () { 84 TIME - ; 85 txtRemtime.value = Time; 86 87 IF (Time == 0 ) { 88 // stop the countdown 89 the clearInterval (timerId); 90 // stop the generation of random mouse 91 the clearInterval (mouseID); 92 Alert ( "gAME OVER!" ); 93 } 94 95 // timer once every second 96 97 }, 1000 ); 98 } 99 </script>