Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to use JavaScript to achieve gopher game". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use JavaScript to achieve gopher game".

Game description:

Click on the "start the game" button, randomly generate mice in the picture, the mouse disappeared before clicking the mouse to hit, hit once can get 100 points, did not hit the mouse, deducted 100 points

Css module

# div0 {text-align: center; width: 1360px; height: 600px; margin: 60px auto; background-image: url ("images/bg.jpg"); position: relative;} # div_top {text-align: left; color:brown; width: 360px; height: 100px; position: absolute; left: 500px;} # div_left {width: 350px; height: 320px; position: absolute Left: 300px; top: 150px;} # tab_data {width:350px; height:320px;} # div_right {width:350px; height:320px; position: absolute; right: 380px; top: 150px;} # tab {width:320px; height:320px;} # tab td {background-image:url ("images/00.jpg"); background-repeat:no-repeat Background-position:center;}

Html module

Game description: click on the "start the game" button, randomly generate mice in the following picture, the mouse disappears before clicking the mouse to hit, hit once can get 100 points, did not hit the mouse, withholding 100 points Act quickly to test your reaction and eyesight! Game time: minute countdown: second occurrence interval: second stay time: second score:

Js module

Var collTd= []; / record all td var oTdMouse;// records selected td / / define variable record page tag element var oButStart,oButEnd; var oTextTime,oTextHide,oTimeShow,oTimeCD; var oSpanScore; / / define variable record time parameter: var iAll,iCD,iShow,iHide,iCount,iGet; var iCDId,iRandomId,iShow,iChangeId; _ window.onload=function () {/ / create table createTable () / / assign init () to tag element variables; / / register event oButStart.onclick=startGame; oButEnd.onclick=endGame;} / / start the game function startGame () {iAll=parseInt (oTextTime.value) * 60; iCD=iAll; / / perform a countdown to iCDId=window.setInterval (setCD,1000) every second; iShow=parseInt (oTextShow.value); iHide=parseInt (oTextHide.value); iCount=0; iGet=0 / / Random one td randomId () every iShow+Hide; iRandomId=window.setInterval (randomId, (iShow+iHide) * 1000); oButStart.disabled= "disabled"; oButEnd.disabled= "";} / / Random td function randomId () {iCount++; var index=parseInt (Math.random () * collTd.length); oTdMouse=collTd [index]; / / change the background image oTdMouse.style.backgroundImage= "url ('images/01.jpg')" / / set the background picture back to iShowId=window.setTimeout ("oTdMouse.style.backgroundImage='url (images/00.jpg)';", iShow*1000);} / set the countdown function setCD () {iCD--; oTextCD.value=iCD; / / record the score var message= "Total" + iCount+ "only, hit" + iGet+ "only" every other second after waiting for the end of the iCD--; oTextCD.value=iCD; time! ; oSpanScore [XSS _ clean] = message.fontcolor ("blue"). Bold (); if (iCD)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.