农场小游戏

最新推荐文章于 2024-05-07 11:34:52 发布

SSWmouse

最新推荐文章于 2024-05-07 11:34:52 发布

阅读量626

点赞数 6

分类专栏：前端文章标签： javascript css html

本文链接：https://blog.csdn.net/SSWmouse/article/details/115734589

版权

前端专栏收录该内容

15 篇文章 4 订阅

订阅专栏

农场小游戏（css+js+html）

html
css
js

初学前端时跟着老师写的，很丑，不好玩；
但是我还是厚着脸皮发布了，没办法老图奇啥优点没有，就是脸皮厚

html

首先建好需要的一些东西，时间太久，

<body>
    <div class="wrap">
        <!-- 显示作物的数量 -->
        <div class="table_top">仓库:
            <div class="table_left">樱桃:0</div>
            <div class="table_zhong1">番茄:0</div>
            <div class="table_zhong2">橘子:0</div>
            <div class="table_right">茄子:0</div>
        </div>
        <!-- 菜地 -->
        <div class="wai" onclick="zzz()"></div>
        <div class="cai" onclick="ccc()"></div>
        <div class="tudi">
        </div>
        <div class="caidan">
        </div>
    </div>
</body>

css

那时候还没学框架，css纯手画，我这个美术细胞有点少，然后你们懂得

    <style>
    @keyframes dong {
        0% {
            transform:scale(1,1);
        }

        50% {
            transform:scale(1.2,1.2);
        }

        100% {
            transform:scale(1,1);
        }
    }

    /* 成熟动画 */
    #chengshu {
        background-size: cover;
        background-position: center;
        animation: dong 2s linear 0s infinite;
    }

    /* 背景 */
    .wrap {
        width: 750px;
        height: 1333px;
        border: 1px solid black;
        margin: 0 auto;
        position: relative;
        background-image: url(./nc/图层\ 41.png);
        background-size: cover;
        background-position: center;
        position: relative;
        top: 50px;
    }

    /* 土地大背景 */
    .tudi {
        width: 300px;
        height: 385px;
        box-sizing: border-box;
        padding: 100px 25px;
        position: absolute;
        top: 95px
    }

    /* 小块土地 */
    .tudi>div {
        width: 217px;
        height: 103px;
        box-sizing: border-box;
        float: left;
        line-height: 80px;
        text-align: center;
        font-size: 20px;
        background-size: cover;
        background-position: center;
        position: absolute;
        /* top: 691px;
        left: 442px; */
        border-radius: 50%;
    }

    /* 菜单背景 */
    .caidan {
        position: absolute;
        width: 300px;
        height: 65px;
        box-sizing: border-box;
        padding: 0px 10px;
        top: 386px;

    }

    /* 菜单小图标 */
    .caidan>div {
        width: 131px;
        height: 122px;
        box-sizing: border-box;
        float: left;
        color: rgb(0, 0, 0, 0);
        line-height: 50px;
        text-align: center;
        background-size: cover;
        background-position: center;
        position: absolute;
        top: 707px;
    }

    /* 选中提示 */
    .xuan {
        transform: scale(1.15, 1.15);
        /* background-color: yellow; */
    }

    /* 挖div */
    .wai {
        position: absolute;
        width: 74px;
        height: 83px;
        display: none;
        background-image: url(./nc/chan.png);
        background-size: cover;
        background-position: center;
        top: 940px;
        right: 70px;
    }

    /* 采摘div */
    .cai {
        position: absolute;
        width: 107px;
        height: 95px;
        left: 35px;
        display: none;
        background-image: url(./nc/cai.png);
        background-size: cover;
        background-position: center;
        top: 940px;
    }

    /* 植物 */
    .zhiwu {
        width: 217px;
        height: 103px;
        background-image: url(./nc/植物.png);
        background-size: 71px 69px;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 50%;
        position: absolute;
        /* top: 10px; */
        /* left: 10px; */

    }
    span{
        width: 100%;
        height: 20%;
        position: absolute;
        top:-10px;
        left: 10px;
        font-size: 20px;
        color: red;
    }
    .table_top{
        width: 100%;
        height: 150px;
        border: 1px solid green;
        /* background-color: white; */
        position: absolute;
        top: 110px;
        border-radius: 30px;
        font-size: 50px;
        line-height: 150px;
    }
    .table_left{
        width: 150px;
        height: 100px;
        /* border: 1px solid red; */
        /* background-color: white; */
        position: absolute;
        top: 25px;
        left: 120px;
        border-radius: 30px;
        font-size: 35px;
        line-height: 100px;
    }
    .table_right{
        width: 150px;
        height: 100px;
        /* border: 1px solid red; */
        /* background-color: white; */
        position: absolute;
        top: 25px;
        right: 10px;
        border-radius: 30px;
        font-size: 35px;
        line-height: 100px;
    }
    .table_zhong1{
        width: 150px;
        height: 100px;
        /* border: 1px solid red; */
        /* background-color: white; */
        position: absolute;
        top: 25px;
        right: 166px;
        border-radius: 30px;
        font-size: 35px;
        line-height: 100px;
    }
    .table_zhong2{
        width: 150px;
        height: 100px;
        /* border: 1px solid red; */
        /* background-color: white; */
        position: absolute;
        top: 25px;
        left: 275px;
        border-radius: 30px;
        font-size: 35px;
        line-height: 100px;
    }
</style>

js

<script>
//获取界面元素，当时不会封装，直接一个一个获取
var tudi = document.querySelector(".tudi")
var caidan = document.querySelector(".caidan")
var shan = document.querySelector(".wai")
var cai = document.querySelector(".cai")
var cang_ku = []

//浪费（忘记干嘛的了）
var table_a = document.querySelector(".table_left")
var table_b = document.querySelector(".table_zhong1")
var table_c = document.querySelector(".table_zhong2")
var table_d = document.querySelector(".table_right")

//土地坐标（对着界面一个一个比划得出来的，现在想想那时候可真逗）
var zuobiao2_list = {
    0: [691, 22],
    1: [790, 240],
    2: [686, 445],
    3: [738, 345], 
    4: [588, 243],
    5: [638, 132],
    6: [636, 340],
    7: [742, 137],
    8: [691, 232],
    
}

//土地用js的方法直接生成，不然就一个一个画
function jia(num) {
    for (var i = 0; i < num; i++) {
        var one_div = document.createElement("div")
        one_div.setAttribute("sx", i)
        one_div.style.backgroundImage = "url(./nc/黑地.png)"
        one_div.style.left = zuobiao2_list[i][1] + "px"
        one_div.style.top = zuobiao2_list[i][0] + "px"
        one_div.setAttribute("onclick", "xxx(this)")
        one_div.status = "kong"
        tudi.append(one_div)
    }
}
jia(9)

//植物列表
var zuobiao_list = [69, 228, 389, 548]
var caidan_list = ['樱桃', '番茄', '橘子', '茄子']
//'0樱桃', '1番茄', '2橘子', '3茄子'

//菜单生成
function jia2(num) {
    for (var i = 0; i < num.length; i++) {
        var one_div = document.createElement("div")
        one_div.setAttribute("zx",i)
        one_div.setAttribute("onclick", "yyy(this,"+i+")")
        one_div.style.left = zuobiao_list[i] + "px"
        one_div.style.backgroundImage = "url(./nc/" + i + ".png)"
        caidan.append(one_div)
    }
}
jia2(caidan_list)

//土地选中 kuai需要在这定义，放在前面会导致土地还未导入 数量为0
var kuai = document.querySelectorAll(".tudi>div")
function xxx(kuai_div) {
    for (var i = 0; i < kuai.length; i++) {
        if (kuai_div == kuai[i]) {
            kuai[i].className = 'xuan'
            if (kuai[i].status == 'kong') {
                shan.style.display = 'none'
                cai.style.display = 'none'
            }
            else if(kuai[i].status == 'zhang') {
                shan.style.display = 'block'
            }else{
                shan.style.display = 'block'
                cai.style.display = 'block'
            }
        }
        else {
            kuai[i].className = ""
        }
    }
}

var str;
//土地种菜
function yyy(n,b) {
    for (var i = 0; i < kuai.length; i++) {
        var one_div = document.createElement("div")
        if (kuai[i].className == "xuan") {
            if (kuai[i].status == "kong") {
                one_div.className = 'zhiwu'
                kuai[i].append(one_div)
                // 元素转换
                str = kuai[i].innerHTML
                // console.log(one_div)
                // console.log(yyy)
                //增加定时器
                kuai[i].all_time = 1000
                // kuai[i].all_time = b*20000+5000
                kuai[i].start_time = 0
                //显示铲除按钮
                shan.style.display = 'block'
                //改变状态
                kuai[i].status = "zhang"
                //改变当前土地的id 用于后面成熟切换图标
                kuai[i].setAttribute('sx',n.getAttribute('zx'))
                //计时器 倒计时
                var dao_time=kuai[i].all_time - 0
                dao_time = time(dao_time)
                kuai[i].innerHTML = str + "<span>"+dao_time+"</span>"
            }
        }
    }
}

// 铲除植物
function zzz() {
    for (var i = 0; i < kuai.length; i++) {
        if (kuai[i].className == "xuan") {
            kuai[i].innerHTML = ''
            kuai[i].status="kong"
            kuai[i].style.backgroundImage = "url(./nc/黑地.png)"
            kuai[i].style.backgroundSize = "cover"
            shan.style.display = 'none'
            cai.style.display = 'none'
        }
    }
}

//采摘
function ccc() {
    for (var i = 0; i < kuai.length; i++) {
        if (kuai[i].status == "chengshu" && kuai[i].className == "xuan") {
            var a = kuai[i].getAttribute("sx")
            caidan_list[a] 
            cang_ku.push(caidan_list[a])
            kuai[i].innerHTML = ''
            kuai[i].style.backgroundImage = "url(./nc/黑地.png)"
            kuai[i].style.backgroundSize = "cover"
            cai.style.display = 'none'
            kuai[i].status = "kong"
            //仓库显示
            
        }
    }
    //产物的数量，当时本地存储都不会，刷新界面直接归零，所以这个游戏没法玩，看看就行了
    var a = 0
    var b = 0
    var c = 0 
    var d = 0 
    for(var j=0;j<cang_ku.length;j++){
        if(cang_ku[j] == "樱桃"){      
            a++
        }else if (cang_ku[j] == "番茄"){
            b++
        }else if (cang_ku[j] == "橘子"){
            c++
        }else if (cang_ku[j] == "茄子"){
            d++
        }
    }
    table_a.innerHTML="樱桃:"+a
    table_b.innerHTML="番茄:"+b
    table_c.innerHTML="橘子:"+c 
    table_d.innerHTML="茄子:"+d 
}

//定时器
var game = setInterval(function () {
    for (var i = 0; i < kuai.length; i++) {
        if (kuai[i].status == "zhang") {
            if (kuai[i].start_time >= kuai[i].all_time) {
                kuai[i].status = "chengshu"
                kuai[i].innerHTML = str + "<span>可采摘</span>"
            } else {
                kuai[i].start_time += 1000
                var  dao_time =kuai[i].all_time - kuai[i].start_time
                dao_time = time(dao_time)
                kuai[i].innerHTML = str+"<span>"+dao_time+"</span>"
            }
        }
    }
}, 1000);

//时间标准化
function time(n) {
    var miao_all = parseInt(n / 1000)
    var fen = parseInt(miao_all / 60)
    var miao = miao_all % 60
    if (fen < 10) {
        fen = "0" + fen
    }
    if (miao < 10) {
        miao = "0" + miao
    }
    var time = fen + ":" + miao
    return time
}
//延时器 
setInterval(function() {
    for (var i = 0; i < kuai.length; i++) {
        if(kuai[i].status=="chengshu"){
            kuai[i].children[1].id="chengshu"
            // var one_div = document.createElement("div")
            // var a = kuai[i].getAttribute("sx")
            // one_div.style.backgroundImage = "url(./nc/" + a + ".png)"
            // one_div.style.width="100px"
            // one_div.style.height="100px"
            // kuai[i].append(one_div)
            // kuai[i].style.backgroundImage = "url(./nc/" + a + ".png)"
        }
    }
}, 100);
</script>

下面是图片：需要按照名称保存在html文件 同级别 下的 nc 文件夹下
名称保存成下面这样：
在这里插入图片描述

在这里插入图片描述

SSWmouse

关注

6
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
农场小游戏

农场小游戏（css+js+html）htmlcssjs初学前端时跟着老师写的，很丑，不好玩；但是我还是厚着脸皮发布了，没办法老图奇啥优点没有，就是脸皮厚html首先建好需要的一些东西，时间太久，<body> <div class="wrap">  <div class="table_top">仓库: <div class="table_left"&
复制链接

扫一扫

专栏目录