草庐IT

50 Projects（大抵会不足50个，毕竟目的是了解语法构造去制作游戏）

HoldPark 2023-03-28 原文

50 Projects

01 Expanding Cards(附带新手菜鸡注释)

Live Demo

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Expanding cards</title>
    <link rel="stylesheet" href="/static/css/Expanding-cards.css">
</head>
<body>
    <div class="container">
        <div class="panel active" style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
            <h3>Explore World</h3>
        </div>
        <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
            <h3>Wild Forest</h3>
          </div>
          <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80')">
            <h3>Sunny Beach</h3>
          </div>
          <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')">
            <h3>City on Winter</h3>
          </div>
          <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
            <h3>Mountains - Clouds</h3>
          </div>
    </div>
    <script type="module" src="/js/Expanding-cards.js"></script>
</body>
</html>

CSS

* {
    box-sizing: border-box;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

.container {
    display: flex;
    width: 90vw;
}

.panel {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 80vh;
    border-radius: 50px;
    color: #fff;
    cursor:  pointer;
    /* 增长系数,这样会使图片有竖条感觉 */
    flex: 0.5;
    margin: 10px;
    position: relative;
    /* 过渡方式，好多动画用到这个，看来着重要学一下，不过这个all好像去掉不影响大局？ */
    transition: all 700ms ease-in;
    /* 时间影响展示时间，感觉调节时间匹配更好 */
}

.panel h3 {
    font-size: 24px;
    position: absolute;
    /* 定义说明文字位置 */
    bottom: 20px;
    left: 20px;
    margin: 0;
    /* 文字透明度 */
    opacity: 0;
}

.active {
    /* 这个MDN上说是增长系数，就是比值可以这样说吧，按我来讲 */
    flex: 5;
}

.active h3 {
    /* 如果有active属性，就将说明文字显现 */
    opacity: 1;
    transition: opacity 0.3s ease-in 0.4s;
}

@media (max-width: 480px) {
    /* 一般而言这种都是电脑展示吧，所以很鸡肋？当然依然不可或缺，可以不用，但不能没有 */
    .container {
        width: 100vh;
    }
}
/* 下面这个真的不知道为什么有啊 */
/* .panel:nth-of-type(4),
.panel:nth-of-type(5) {
    display: none;
} */

JS

const panels = document.querySelectorAll('.panel');
// 找到pnael标签，这应该是列；
// console.log(panels);


// 遍历所有的元素，查看谁被点击了，找到之后将其他元素的active全部清除，并为当前属性添加active
panels.forEach(function(panel) { //遍历 panels 序列
    panel.addEventListener('click', function(){
        removeActiveClasses(); //移除 active标签
        panel.classList.add('active');
    });
});

function removeActiveClasses () {
    panels.forEach(function (panel) {
        panel.classList.remove('active');
    })
}

Live Demo

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hidden-search</title>
    <link rel="stylesheet" href="/static/css/hidden-search.css">
    <link rel="stylesheet" href="/third-part/font-awesome-4.7.0/css/font-awesome.min.css">
    
</head>
<body>
    <div class="search">
        <input type="text" class="input" placeholder="Search...">
        <button class="btn">
            <i class="fa fa-search" aria-hidden="true"></i>
        </button>
    </div>
    <script type="module" src="/js/hidden-search.js"></script>
</body>
</html>

CSS

* {
    box-sizing: border-box;
}

 body {
     /* 背景图片为渐变色 */
    background-image: linear-gradient(90deg,#7d5fff,#7158e2);
    /* flex布局 */
    display: flex;
    /* 竖直居中 */
    align-items: center;
    /* 水平居中 */
    justify-content: center;
    /* 非常奇怪啊，有100vh可以居中，100%不成 */
    height: 100vh;
    overflow: hidden;
    margin: 0;
}  

.search {
    position: relative;
    height: 50px;
}

.search .input {
    background-color: #fff;
    border: 0;
    font-size: 18px;
    padding: 15px;
    height: 50px;
    width: 50px;
    /* 转变属性width */
    transition : width 0.3s ease;

}

.btn {
    background-color: #fff;
    border: 0;
    cursor: pointer;
    font-size: 24px;
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
    width: 50px;
    /* 平滑移动 */
    transition : transform 0.3s ease;
}
.btn:focus,
.input:focus {
    outline: none
}

.active .input {
    width: 200px;
  }

.active .btn {
    /* 向X轴偏移198px */
    transform: translateX(198px);
  }

JS

let search = document.querySelector('.search');
let btn = document.querySelector('.btn');
let input = document.querySelector('.input');

// 添加监听函数
btn.addEventListener('click',function(e) {
    // 如果active已经存在，则移除它，否则添加属性
    search.classList.toggle('active');
    // 效果：<div class="search active"></div>
    console.log(search);
    // input.focus();
});
大抵ProjectsgtltclassJavaScript

有关50 Projects（大抵会不足50个，毕竟目的是了解语法构造去制作游戏）的更多相关文章

  1. Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2

    Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u

  2. 动漫制作技巧如何制作动漫视频 - 2

    动漫制作技巧是很多新人想了解的问题，今天小编就来解答与大家分享一下动漫制作流程，为了帮助有兴趣的同学理解，大多数人会选择动漫培训机构，那么今天小编就带大家来看看动漫制作要掌握哪些技巧？一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性，以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料，可以是手绘也可以是3d软件创建。在此步骤中，要注意的问题是色彩和平面布局。三、动漫制作制作完成后，加工成型。完成不同的表现形式后，就要对设计稿进行加工处理，使加工的难易度降低，并得到一些基本准确的概念，以便于后续的大样、准确的尺寸制定。四、

  3. ruby - 我需要从 facebook 游戏中抓取数据——使用 ruby - 2

    修改(澄清问题)我已经花了几天时间试图弄清楚如何从Facebook游戏中抓取特定信息；但是，我遇到了一堵又一堵砖墙。据我所知，主要问题如下。我可以使用Chrome的检查元素工具手动查找我需要的html-它似乎位于iframe中。但是，当我尝试抓取该iframe时，它​​是空的(属性除外):如果我使用浏览器的“查看页面源代码”工具，这与我看到的输出相同。我不明白为什么我看不到iframe中的数据。答案不是它是由AJAX之后添加的。(我知道这既是因为“查看页面源代码”可以读取Ajax添加的数据，也是因为我有b/c我一直等到我可以看到数据页面之后才抓取它，但它仍然不存在)。发生这种情况是因为

  4. ruby - 了解在 Ruby 中与 lambda 一起使用的 inject 行为 - 2

    我经常将预配置的lambda插入可枚举的方法中，例如“map”、“select”等。但是“注入(inject)”的行为似乎有所不同。例如与mult4=lambda{|item|item*4}然后(5..10).map&mult4给我[20,24,28,32,36,40]但是，如果我制作一个2参数lambda用于像这样的注入(inject)，multL=lambda{|product,n|product*n}我想说(5..10).inject(2)&multL因为“inject”有一个可选的单个初始值参数，但这给了我......irb(main):027:0>(5..10).inject

  5. ruby-on-rails - 如何测试自己对 Ruby/ROR 的了解？ - 2

    是否有self验证的问题列表。看着那个，我可以确定我知道。我应该复习一下。在学习的过程中，我列了一个这样的list，但它只包含我在某处听说过的项目。我需要一段时间才能找到新的东西。 最佳答案 以下是针对ruby​​和Rails的一些测试列表。证书名称:RubyonRails谁提供:oDeskIncorporation认证费用:免费网站:https://www.odesk.com/tests/985?pos=0证书名称:RubyonRails提供者:Techgig.com(TimesBusinessSolutionsLimited(T

  6. ruby-on-rails - 了解 "attribute_will_change!"方法 - 2

    我想覆盖store_accessor的getter。可以查到here.代码在这里:#Fileactiverecord/lib/active_record/store.rb,line74defstore_accessor(store_attribute,*keys)keys=keys.flatten_store_accessors_module.module_evaldokeys.eachdo|key|define_method("#{key}=")do|value|write_store_attribute(store_attribute,key,value)enddefine_met

  7. ruby - 我怎样才能更好地了解/了解更多关于 Ruby 的知识？ - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭9年前。我最近开始学习Ruby，这是我的第一门编程语言。我对语法感到满意，并且我已经完成了许多只教授相同基础知识的教程。我已经写了一些小程序(包括我自己的数组排序方法，在有人告诉我谷歌“冒泡排序”之前我认为它非常聪明)，但我觉得我需要尝试更大更难的东西来理解更多关于Ruby.关于如何执行此操作的任何想法？

  8. python - Ruby 或 Python 的 3d 游戏引擎？ - 2

    关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于StackOverflow来说是偏离主题的，因为它们往往会吸引自以为是的答案和垃圾邮件。相反，describetheproblem以及迄今为止为解决该问题所做的工作。关闭9年前。Improvethisquestion是否有适用于这些的3d游戏引擎？

  9. ruby-on-rails - 正确了解 Rails 框架的最佳方式是什么？ - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭10年前。我一直在Rails上做两个项目，它们运行良好，但在这个过程中重新发明了轮子，自来水(和热水)和止痛药，正如我随后了解到的那样，这些已经存在于框架中。那么基本上，正确了解框架中所有智能部分的最佳方法是什么，这将节省时间而不是自己构建已经实现的功能？从第1页开始阅读文档？是否有公开所有内容的特定示例应用程序？一个特定的开源项目？所有的rails交通？还是完全

  10. ruby - 如何在ruby中制作动态多维数组？ - 2

    我有一个关于多维数组的初学者ruby​​问题。我想按年份和月份对条目进行排序。所以我想创建一个包含年->月->月条目的多维数组所以数组应该是这样的:2009->08->Entry1->Entry209->Entry32007->10->Entry5现在我有:@years=[]@entries.eachdo|entry|timeobj=Time.parse(entry.created_at.to_s)year=timeobj.strftime("%Y").to_imonth=timeobj.strftime("%m").to_itmparr=[]tmparrentry}@years.pu

随机推荐