First on a renderings:
The development train of thought
To develop a game, first you need to know the rules.
The game is called Wolffy.
Rules:
Game time: 60 s Game characters: Wolffy, Wolffy, Wolffy + 10 points, Wolffy-10 points
HTML CSS JQ implementation ideas
1. Use HTML + CSS to layout the game interface 2. Import JQ library 3. Realize crazy beat Wolffy game logic core logic
Encapsulated 60 S progress bar method encapsulation processing Wolffy animation method game button click listening
The HTML code
<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset=" utf-8 "> <title> <link rel="stylesheet" Href =" CSS /index.css"> <script SRC ="js/jquery-1.12.4.js"></script> <script SRC ="js/index.js"></script> </head> <body> <div class="container"> <h1 class="score"> </h1> <div class="progress"></div> <div class="start"> </div> <div Class = "rules" > the rules of the game < / div > < div class = "rule" > < p > the rules of the game: < / p > < p > 1. Play time: 60S </p> <p>2. Play speed: 60S </p> 3. Beat the little gray - 10 < / p > < a href = "#" class = "close" > [closed] < / a > < / div > < div class = "mask" > < h1 > GAME OVER < / h1 > < button "Class =" reStart > start < / button > < / div > < / div > < / body > < / HTML >CSS code
*{ margin: 0; padding: 0; } .container{ width: 320px; height: 480px; background: url(".. /images/game_bg.jpg") no-repeat 0 0; margin: 50px auto; position: relative; } .container>h1{ color: white; margin-left: 60px; } .container>.progress{ width: 180px; height: 16px; background: url(".. /images/progress.png") no-repeat 0 0; position: absolute; top: 66px; left: 63px; } .container>.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>h1{ color: #ff4500; text-shadow: 3px 3px 0 #fff; font-size: 40px; } .mask>button{ width: 150px; 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: 50%; margin-left: -75px; }Jq code
$(function () {/ / 1. Listen to the rules of the game click $(" rules "). Click (function () {$(" rule "). The stop (). FadeIn (100); }); / / 2. Listen close button click $(" close "). Click (function () {$(" rule "). The stop (). The fadeOut (100); }); / / 3. Listen to start the game button click $(" start "). Click (function () {$(this). The stop (). The fadeOut (100); // Call the progressHandler() method that handles the progress bar; // Call the method startwolfAnimation () that handles Wolffy animations; }); / / 4. Listening to the reStart button click $(". ReStart "). Click (function () {$(" mask "). The stop (). The fadeOut (100); // Call the progressHandler() method that handles the progress bar; // Call the method startwolfAnimation () that handles Wolffy animations; }); $(".progress").css({width: 180}); $(".progress").css; Var progressWidth = $(".progress").width(); var progressWidth = $(".progress").width(); // Reduces the current width progresWidth -= 1; $(".progress").css({width: ProgressWidth}); If (ProgressWidth <= 0){// disable the timer clearInterval(Timer); // Display restart interface $(".mask").stop().fadeIn(100); // StopWolfAnimation (); }}, 100); } var wolfTimer; Function startwolfAnimation () {// 1. Define two arrays to hold all Wolffy and small grayish image var wolf_1=['./images/h0.png','./images/h1.png','./images/h2.png','./images/h3.png','./images/h4.png','./images/h5.png','./i mages/h6.png','./images/h7.png','./images/h8.png','./images/h9.png']; var wolf_2=['./images/x0.png','./images/x1.png','./images/x2.png','./images/x3.png','./images/x4.png','./images/x5.png','./i mages/x6.png','./images/x7.png','./images/x8.png','./images/x9.png']; Var arrPos = [{left:"100px",top:"115px"}, {left:"20px",top:"160px"}, arrPos = [{left:"100px",top:"115px"}, {left:"190px",top:"142px"}, {left:"105px",top:"193px"}, {left:"19px",top:"221px"}, {left:"202px",top:"212px"}, {left:"120px",top:"275px"}, {left:"30px",top:"295px"}, {left:"209px",top:"297px"} ]; Var $wolfImage = $("<images SRC =' class='wolfImage'>"); Var posIndex = Math.Round (Math.random() * 8); $wolfimage.css ({position: "absolute", left:arrPos[posIndex]. Left, top:arrPos[posIndex]. Top}); Var wolfType = Math.Round (Math.random()) == 0? wolf_1 : wolf_2; Window.wolfindex = 0; window.wolfIndexEnd = 5; wolfTimer = setInterval(function () { if(wolfIndex > wolfIndexEnd){ $wolfImage.remove(); clearInterval(wolfTimer); startWolfAnimation(); } $wolfImage.attr("src", wolfType[wolfIndex]); wolfIndex++; }, 300); $(".container"). Append ($wolfImage); $(".container"). // 7. Call the method gameRules($wolfImage); } function gameRules($wolfImage) {$wolfImage.one("click",function ()) {window.wolfindex = 5; window.wolfIndexEnd = 9; Var $SRC = $(this).attr(" SRC "); $(this).attr(" SRC "); Var flag = $src.indexOf("h") >= 0; / / depending on the type of image click score increase or decrease the if (flag) {/ / + 10 $(" score "). The text (parseInt ($(" score "). The text ()) + 10); }else{ // -10 $(".score").text(parseInt($(".score").text()) - 10); }}); } function stopWolfAnimation() { $(".wolfImage").remove(); clearInterval(wolfTimer); }});The final result
The basic production process is not very difficult, the core is to understand the business logic.
