First, a rendering:
To develop a game, first you need to know the rules.
The game is called “Smash Big Big Wolf”.
Rules:
Game time: 60 s Game characters: Grey Wolf, small Grey Wolf, Fast beating Grey Wolf, small Grey Wolf + 10 points, beating small Grey – 10 points development technology
HTML CSS JQ implementation ideas
1. Use HTML + CSS to layout the game interface 2. Import JQ library 3. Achieve the core logic of the game logic
Encapsulate 60 s progress bar method encapsulate processing grey Wolf animation method game button click monitor
The HTML code
<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> <link rel=" heet" 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">0</h1> <div class="progress"></div> <button class="start" Class = "rules" > the rules of the game < / div > < div class = "rule" > < p > the rules of the game: < / p > < p > 1. Game time :60s</p> <p>2. Spell hand speed, beating grey Wolf +10 points </p> <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 >Copy the codeCSS 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; }Copy the codeJq 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 progressHandler(); StartWolfAnimation (); }); / / 4. Listening to the reStart button click $(". ReStart "). Click (function () {$(" mask "). The stop (). The fadeOut (100); // Call progressHandler(); StartWolfAnimation (); }); Function progressHandler() {// Resets the progress bar width $(".progress").css({width: 180}); Var timer = setInterval(function () {var progressWidth = $(".progress").width(); // Reduce the current width progressWidth -= 1; $(".progress").css({width: progressWidth}); If (progressWidth <= 0){// Stop the timer clearInterval(timer); $(".mask").stop().fadein (100); // stopWolfAnimation(); }}, 100); } var wolfTimer; Function startWolfAnimation() {// 1. Define two arrays to hold all picture var of grey Wolf and small grey Wolf 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"}, {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; // 5. Set the contents of the image 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); // 7. Call the gameRules method gameRules($wolfImage); } function gameRules($wolfImage) {$wolfImage. One ("click",function () { window.wolfIndexEnd = 9; Var $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); }});Copy the codeThe final result
The basic production process is not difficult, the core is to understand the business logic.