JavaScript如何实现锅拍灰太狼小游戏

这篇文章将为大家详细讲解有关JavaScript如何实现锅拍灰太狼小游戏，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

1、项目文件

2、使用HTML及css进行页面布局

HTML部分

        
0
        
        
            
锅打灰太狼
            开始游戏
        
游戏规则
        
            
游戏规则:
            
1.游戏时间:60s
            
2.拼手速,殴打灰太狼+10分
            
3.殴打小灰灰-10分
            [关闭]        
        
            
GAME OVER
            重新开始            结束游戏        
        
            
锅打灰太狼
            
得分： 
        
    

css部分

* {    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>h2 {    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>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>.finish {    margin-left: 80px;    float: right;}#finish {    color: white;    text-align: center;    display: none;    margin-top: 100px;}#finish h3 {    padding: 25px;}

3、使用JavaScript来实现效果

var begin = document.querySelector('#start');var h = begin.querySelector('h3');var start = document.querySelector('.start'); //开始游戏按钮var mask = document.querySelector('.mask'); //包含重新开始var rules = document.querySelector('.rules'); //游戏规则var rule = document.querySelector('.rule'); //游戏规则详细var reStart = document.querySelector('.reStart'); //重新开始游戏按钮var close = document.querySelector('.close'); //关闭var progress = document.querySelector('.progress'); //进度条var container = document.querySelector('.container'); //容器var score = document.querySelector('.score'); //游戏分数var finishBtn = document.querySelector('.finish'); // 结束游戏按钮var finish = document.querySelector('#finish'); //结束游戏按钮var scoreEnd = document.querySelector('.scoreEnd'); //最后得分//点击开始游戏start.onclick = function() {    // console.log(123);    // 隐藏按钮    finish.style.display = 'none';    var fadIndex = this[xss_clean];    fadIndex.style.display = 'none';    // 设置进度条长度    var progressWidth = 180;    progressHandler(progressWidth);    var timer;    startAnimation(); //动画开始};// 规则// console.log(rules);rules.onclick = function() {    console.log('点击游戏规则');    rule.style.display = 'block';};// 关闭close.onclick = function() {    console.log('关闭');    rule.style.display = 'none';};// 重新开始游戏reStart.onclick = function() {    score[xss_clean] = 0;    mask.style.display = 'none';    // console.log(score[xss_clean]);    var progressWidth = 180;    progress.style.width = '180px';    progressHandler(progressWidth);    startAnimation();};// 结束游戏按钮finishBtn.onclick = function() {        mask.style.display = 'none';        finish.style.display = 'block';        scoreEnd[xss_clean] += score[xss_clean];        begin.style.display = 'block';        h.style.display = 'none';        progress.style.width = 180 + 'px';    }    //进度条function progressHandler(index) {    // 设置计时器    var setProgress = setInterval(function() {        index--;        progress.style.width = index + "px";        if (index <= 0) {            clearInterval(setProgress); //清除计时器            mask.style.display = 'block';            stopAnimation(); //停止动画        }    }, 100);}//开始动画function startAnimation() {    //定义两个数组存放图片    var imgArr = ['./images/h0.png', './images/h2.png', './images/h3.png',        './images/h4.png', './images/h5.png', './images/h6.png', './images/h7.png',        './images/h7.png', './images/h8.png', './images/h9.png'    ];    var imgArr2 = ['./images/x0.png', './images/x1.png', './images/x2.png',        './images/x3.png', './images/x4.png', './images/x5.png', './images/x6.png',        './images/x7.png', './images/x8.png', './images/x9.png'    ];    // 定义一个数组保存所有可能出现的位置    var arrPos = [{        left: "98px",        top: "115px"    }, {        left: "17px",        top: "160px"    }, {        left: "15px",        top: "220px"    }, {        left: "30px",        top: "293px"    }, {        left: "122px",        top: "273px"    }, {        left: "207px",        top: "295px"    }, {        left: "200px",        top: "211px"    }, {        left: "187px",        top: "141px"    }, {        left: "100px",        top: "185px"    }];    // 创建一个图片    var imgs = document.createElement('img');    imgs.setAttribute('class', 'wolfImages');    //图片随机出现的位置    var posIndex = Math.round(Math.random() * 8);    //设置图片显示位置     imgs.style.position = 'absolute';    imgs.style.left = arrPos[posIndex].left;    imgs.style.top = arrPos[posIndex].top;    // console.log(img.style.left);    // 随机获取数组类型    var imgType = Math.round(Math.random()) == 0 ? imgArr : imgArr2;    // 设置图片的内容 限定为第0张到第5张    window.index = 0;    window.indexEnd = 5;    timer = setInterval(() => {        if (index > indexEnd) {            imgs.remove();            clearInterval(timer);            startAnimation();        }        imgs.setAttribute('src', imgType[index]);        index++;    }, 400);    //添加图片    container.appendChild(imgs);    //分数    scoreEverySum(imgs);}// 分数统计function scoreEverySum(e) {    e.onclick = function() {        // 设置图片的内容 限定为第5张到第9张        window.index = 5;        window.indexEnd = 9;        // 拿到当前点击图片的路径        var src = this.getAttribute('src');        // 根据图片地址判断        // 根据点击的图片类型增减分数        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    }}//停止动画function stopAnimation() {    var img = document.querySelector('.wolfImages');    console.log(img);    img.remove();    clearInterval(timer);}

4、效果图

开始界面

结束界面

关于"JavaScript如何实现锅拍灰太狼小游戏"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。