js原生之锅打灰太狼

作者: 旧丶时候 | 来源:发表于2017-02-01 09:03 被阅读1362次

0. 前言

现在网上的小游戏太多了，4399啊，7k7k啊什么的，就有这锅打灰太狼的游戏，觉得挺有意思，就做一个看看，哈哈！！！

timg.jpg

1. 简介

锅打灰太狼是一款老少通吃，男女皆宜的益智游戏，哈哈！

2. 思路

把静态页面做出来
找到每个洞穴
随机出现灰太狼和小灰灰让它们随机从洞穴出现
点击事件：打灰太狼加分，打小灰灰减分
添加时间，时间到了停止游戏
最终结果

3. 代码实现

3.1 静态页面

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>灰太狼</title>
    <link rel="stylesheet" type="text/css" href="灰太狼.css">
</head>
<body>
    <div id="outer">
        <audio id="music" src="网络歌手猫咪宝贝.mp3"></audio>
        <div id="fraction">0</div>
        <div id="time"></div>
        <div id="wolfs"></div>
        <div id="startMenu">
            <a href="#" id="start">Start</a>
        </div>
        <div id="endMenu"></div>
        <a href="#" id="reload">重新开始</a>
    </div>
    <script type="text/javascript" src="Base.js"></script>
    <script type="text/javascript" src="灰太狼.js"></script>
</body>
</html>

CSS样式

*{
    margin: 0;
    padding: 0;
    font-family: "微软雅黑";
}

#outer{
    background:url(game_bg.jpg) 0 0 no-repeat;
    position: relative;
    width: 320px;
    height: 480px;
    margin: 0 auto;
}

#fraction{
    position: absolute;
    left: 65px;
    top: 13px;
    color: white;
}

#time{
    position: absolute;
    width: 180px;
    height: 16px;
    left: 63px;
    top: 66px;
    background: url(progress.png) 0 0 no-repeat;
}
#wolfs{
    position: absolute;
}
#wolfs img{ 
    position:absolute;
}

#startMenu{
    position: absolute; 
    width: 320px; 
    text-align: center; 
    left: 0; 
    top: 200px;
}

#start,#endMenu,#reload{
    line-height:50px; 
    font-size:30px; 
    font-weight:bold; 
    color:#F00; 
    display:block; 
    text-decoration:none;
}

#endMenu{
    position: absolute; 
    width: 320px; 
    text-align: center; 
    top: 200px; 
    left: 0; 
    display: none;
}

#reload{
    position: absolute;
    bottom: 0px;
    left: 0px;
    display: none;
}

图片.png

3.2 找到洞穴

//洞穴坐标
arrPos = [["98px","115px"],["17px","160px"],["15px","221px"],["30px","294px"],["122px","274px"],["207px","296px"],["200px","212px"],["187px","142px"],["100px","192px"]];

3.3 随机出现灰太狼和小灰灰让它们随机从洞穴出现

function creatWolf() {
    wolfHouse.onclick = null;
    //创建img显示狼
    var wolfImg = document.createElement("img");
    //设置狼的种类
    var wolfType = randomNum(0, 10) > 3 ? "h" : "x";
    //随机获取狼窝的位置
    var a = randomNum(0, 9);
    var position = arrPos[a];
    //设置初始图片编号
    wolfHouse.index = 0;
    //设置未被点击
    wolfHouse.clicked = false;
    //设置img的src属性
    wolfImg.src = wolfType + wolfHouse.index + ".png";
    //将狼添加到页面
    wolfHouse.appendChild(wolfImg);
    //设置位置
    wolfHouse.style.left = position[0];
    wolfHouse.style.top = position[1];
    // 让狼动起来
    var tmp = -1;
    var showTime = setInterval(function(){
        tmp++;
        if(tmp < liftCircle.length){
            wolfHouse.index = liftCircle[tmp];
            wolfImg.src = wolfType + wolfHouse.index + ".png";
        }else{
            clearInterval(showTime);
            wolfHouse.removeChild(wolfImg);
        }
    },80);

3.4 点击事件：打灰太狼加分，打小灰灰减分

wolfHouse.onclick = function() {
        clearInterval(timer);
        //如果执行了点击就不要在点击了
        if (this.clicked) {
            return;
        }
        //分数
        if (wolfType == "h") {
            fraction.innerHTML = parseInt(fraction.innerHTML) + 10;
        } else {
            fraction.innerHTML = parseInt(fraction.innerHTML) - 10;
        }

        //关掉动画
        wolfHouse.index = 5;
        clearInterval(showTime);
        var hitWolf = setInterval(function(){
            if(wolfHouse.index < 10){
                console.log(wolfHouse.index);
                wolfImg.src = wolfType + wolfHouse.index + ".png";
                wolfHouse.index++;
            }else{
                clearInterval(hitWolf);
                wolfHouse.removeChild(wolfImg);
                timer = setInterval(func, 1000)
            }
        }, 100);

        this.clicked = true;
    }
}

GIF.gif

3.5 添加时间

function timeLineRun(){
    var timeLineTimer = setInterval(function(){
        if(timeLine.offsetWidth > 0) {
            timeLine.style.width = timeLine.offsetWidth - 1 + "px";
        } else {
            //清除计时器
            clearInterval(timeLineTimer);
            clearInterval(timer);
            //关闭背景音乐
            jsMusic.pause();
            //出现结束语
            endMenu.innerHTML = "game over!<br/>你的得分是:" + fraction.innerHTML
            endMenu.style.display = "block";
            //出现重新开始
            reloadBtn.style.display = "block";
        }
    }, 200);
}

3.6 最终结果

//进度条
var timeLine = document.getElementById("time");
//开始按钮
var startBtn = document.getElementById("start");
//开始菜单
var startMenu = document.getElementById("startMenu");
//结束菜单
var endMenu = document.getElementById("endMenu");
//分数
var fraction = document.getElementById("fraction");
//重新开始按钮
var reloadBtn = document.getElementById("reload");
//狼窝
var wolfHouse = document.getElementById("wolfs");
//背景音乐
var jsMusic = document.getElementById("music");
//动画周期
var liftCircle = [0,1,2,3,4,5,4,3,2,1,0],

//洞穴坐标
arrPos = [["98px","115px"],["17px","160px"],["15px","221px"],["30px","294px"],["122px","274px"],["207px","296px"],["200px","212px"],["187px","142px"],["100px","192px"]];

var timer = 0;
//点击开始
startBtn.onclick = function() {
    startMenu.style.display = "none";
    //进度条开始读条
    timeLineRun();
    //背景音乐
    // jsMusic.play();
    timer = setInterval(func, 1000);
};
function func() {
    if (timeLine.offsetWidth > 0) {
        //创建灰太狼
        creatWolf();
    } else {
        clearInterval(timer);
    }
}

function timeLineRun(){
    var timeLineTimer = setInterval(function(){
        if(timeLine.offsetWidth > 0) {
            timeLine.style.width = timeLine.offsetWidth - 1 + "px";
        } else {
            //清除计时器
            clearInterval(timeLineTimer);
            clearInterval(timer);
            //关闭背景音乐
            jsMusic.pause();
            //出现结束语
            endMenu.innerHTML = "game over!<br/>你的得分是:" + fraction.innerHTML
            endMenu.style.display = "block";
            //出现重新开始
            reloadBtn.style.display = "block";
        }
    }, 200);
}


//重新开始
reloadBtn.onclick = function() {
    window.location.reload();
}

function creatWolf() {
    wolfHouse.onclick = null;
    //创建img显示狼
    var wolfImg = document.createElement("img");
    //设置狼的种类
    var wolfType = randomNum(0, 10) > 3 ? "h" : "x";
    //随机获取狼窝的位置
    var a = randomNum(0, 9);
    var position = arrPos[a];
    //设置初始图片编号
    wolfHouse.index = 0;
    //设置未被点击
    wolfHouse.clicked = false;
    //设置img的src属性
    wolfImg.src = wolfType + wolfHouse.index + ".png";
    //将狼添加到页面
    wolfHouse.appendChild(wolfImg);
    //设置位置
    wolfHouse.style.left = position[0];
    wolfHouse.style.top = position[1];
    // 让狼动起来
    var tmp = -1;
    var showTime = setInterval(function(){
        tmp++;
        if(tmp < liftCircle.length){
            wolfHouse.index = liftCircle[tmp];
            wolfImg.src = wolfType + wolfHouse.index + ".png";
        }else{
            clearInterval(showTime);
            wolfHouse.removeChild(wolfImg);
        }
    },80);

    //给狼设置点击事件
    wolfHouse.onclick = function() {
        clearInterval(timer);
        //如果执行了点击就不要在点击了
        if (this.clicked) {
            return;
        }
        //分数
        if (wolfType == "h") {
            fraction.innerHTML = parseInt(fraction.innerHTML) + 10;
        } else {
            fraction.innerHTML = parseInt(fraction.innerHTML) - 10;
        }

        //关掉动画
        wolfHouse.index = 5;
        clearInterval(showTime);
        var hitWolf = setInterval(function(){
            if(wolfHouse.index < 10){
                wolfImg.src = wolfType + wolfHouse.index + ".png";
                wolfHouse.index++;
            }else{
                clearInterval(hitWolf);
                wolfHouse.removeChild(wolfImg);
                timer = setInterval(func, 1000)
            }
        }, 100);
        this.clicked = true;
    }
}

GIF.gif

4. 结束语

最后的效果也就是这样了，如果你觉得哪里写的不够好，有什么好的建议，可以给我留言告诉我，谢谢，三克油！！！

js原生之锅打灰太狼

0. 前言

1. 简介

2. 思路

3. 代码实现

3.1 静态页面

HTML结构

CSS样式

3.2 找到洞穴

3.3 随机出现灰太狼和小灰灰让它们随机从洞穴出现

3.4 点击事件：打灰太狼加分，打小灰灰减分

3.5 添加时间

3.6 最终结果

4. 结束语

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

JavaScript

JavaScript

今日看点

程序员

首页投稿（暂停使用，暂停投稿）

WEB前端程序开发