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

This article will explain in detail how to achieve pot pat Grey Wolf Mini Game with JavaScript. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

1. Project file

2. Use HTML and css for page layout

HTML part

0 pot hit gray wolf to start the rules of the game

Rules of the game:

1. Game time: 60s

two。 Fight for speed, beat Grey Wolf + 10 points

3. Beat Little Grey-10 points

[close] GAME OVER starts again and ends the game pot with Grey Wolf score:

Css part

* {margin: 0; padding: 0;}. Container {width: 320px; height: 480px; background: url (". / images/game_bg.jpg") no-repeat 00; margin: 50px auto; position: relative;} .container > H2 {margin-left: 60px;} .container > .progress {width: 180px; height: 16px; background: url (". / images/progress.png") no-repeat 00; position: absolute; top 66px: Left: 63px;} .container > # start > h3 {margin-top: 180px; color: white; text-align: center;} .container > # start > .start {width: 150px; line-height: 35px; text-align: center; color: white; background: linear-gradient (# E55C3D, # C50000); border-radius: 20px; border: none; font-size: 20px; position: absolute; top: 320px; left: 50% Margin-left:-75px;} .container > .rules {width: 100%; height: 20px; background: # ccc; position: absolute; left: 0; bottom: 0; text-align: center;} .container > .rule {width: 100%; height: 100%; background: rgba (0,0,0,0.5); position: absolute; left: 0; top: 0; padding-top: 100px Box-sizing: border-box; text-align: center; display: none;} .rule > p {line-height: 50px; color: white;} .rule > a {color: red;} .container > .mask {width: 100%; height: 100%; background: rgba (0,0,0,0.5); position: absolute; left: 0; top: 0; padding-top: 200px; box-sizing: border-box Text-align: center; display: none;} .mask > H2 {color: # ff4500; text-shadow: 3px 3px 0 # fff; font-size: 40px;} .mask > button {width: 100px; line-height: 35px; text-align: center; color: white; background: linear-gradient (# 74ACCF, # 007DDC); border-radius: 20px; border: none; font-size: 20px; position: absolute; top: 320px Left: 30%;} .mask > .reStart {margin-left:-50px;} .mask > .mask {margin-left: 80px; float: right;} # finish {color: white; text-align: center; display: none; margin-top: 100px;} # finish h3 {padding: 25px;}

3. Use JavaScript to achieve the effect

Var begin = document.querySelector ('# start'); var h = begin.querySelector ('h3'); var start = document.querySelector (' .start'); / / start button var mask = document.querySelector ('.mask'); / / include restart var rules = document.querySelector ('.rules'); / / rules of the game var rule = document.querySelector ('.rule'); / / detailed rules of the game var reStart = document.querySelector ('.reStart') / / restart the game button var close = document.querySelector ('.close'); / / close var progress = document.querySelector ('.progress'); / / progress bar var container = document.querySelector ('.container'); / / Container var score = document.querySelector ('.score'); / / Game score var finishBtn = document.querySelector ('.score'); / end game button var finish = document.querySelector ('# finish') / / end the game button var scoreEnd = document.querySelector ('.scoreEnd'); / / final score / / Click to start the game start.onclick = function () {/ / console.log (123); / / Hidden button finish.style.display = 'none'; var fadIndex = this [XSS _ clean]; fadIndex.style.display =' none'; / / set progress bar length var progressWidth = 180; progressHandler (progressWidth) Var timer; startAnimation (); / / Animation start}; / / Rule / / console.log (rules); rules.onclick = function () {console.log ('Click the rules of the game'); rule.style.display = 'block';}; / / close close.onclick = function () {console.log (' close'); rule.style.display = 'none';} / / restart the game reStart.onclick = function () {score [XSS _ clean] = 0; mask.style.display = 'none'; / / console.log (score [XSS _ clean]); var progressWidth = 180; progress.style.width =' 180pxmatch; progressHandler (progressWidth); startAnimation ();}; / / end the game button finishBtn.onclick = function () {mask.style.display = 'none' Finish.style.display = 'block'; score end [XSS _ clean] + = score [XSS _ clean]; begin.style.display =' block'; h.style.display = 'none'; progress.style.width = 180 +' px';} / / progress bar function progressHandler (index) {/ / set timer var setProgress = setInterval (function () {index--) Progress.style.width = index+ "px"; if (index {if (index > indexEnd) {imgs.remove (); clearInterval (timer); startAnimation ();} imgs.setAttribute ('src', imgType [index]); index++;}, 400); / / add picture container.appendChild (imgs) / / score scoreEverySum (imgs);} / score Statistics function scoreEverySum (e) {e.onclick = function () {/ / set the content of the picture to the 5th to 9th window.index = 5; window.indexEnd = 9; / / get the path of the currently clicked image var src = this.getAttribute ('src') / / judge by the image address / / increase or decrease the score if (src.indexOf ("h") > = 0) {score [XSS _ clean] = parseInt (score [XSS _ clean]) + 10;} else {score [XSS _ clean] = parseInt (score [XSS _ clean])-10 } e.onclick = null}} / / stop animation function stopAnimation () {var img = document.querySelector ('.wolfImages'); console.log (img); img.remove (); clearInterval (timer);}

4. Effect drawing

Start interface

End interface

This is the end of the article on "how to achieve JavaScript Grey Wolf Mini Game". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

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.