javaScirpt小项目-----英雄联盟游戏登录界面

最新推荐文章于 2023-03-04 23:44:37 发布
最新推荐文章于 2023-03-04 23:44:37 发布
阅读量3.8k 收藏 9
点赞数 3
分类专栏： javaScript 文章标签： javascript 英雄联盟 游戏 界面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dexing07/article/details/52410709
版权
  • 最近一直在练习JavaScript的知识点和DOM编程，正好之前碰到有个朋友做过这个，就想自己临摹一下。
  • 完成的过程中，布局部分花的时间比较多，js部分还没完整，望多见谅
  • 素材还在不断收集中，所以画面感还不是很好看
  • 还会不断完善，望多支持
    效果图：初始页面。

这里写图片描述

最后是登陆后英雄选择页面：
这里写图片描述

这是主内容部分代码：

<!doctype html>
<html>
<meta charset="utf-8">
<title>英雄联盟登录界面</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">

</script>
 <head>
</head>

<body>
    <div class="container" id="container">
        <div class="left_top">
            <p>你的队伍</p>
                <ul>
                    <li id="left_id1">
                        <div>
                            <div class="left_img" id="left_img01"></div>
                            召唤师1
                        </div>

                    </li>
                    <li id="left_id2">
                        <div>
                            <div class="left_img" id="left_img02"></div>
                            召唤师2
                        </div>
                    </li>
                </ul>
        </div>

        <div class="center_top">
            <p>现在轮到你选择英雄</p>
            <ul class="center_nav">
                <li>英雄</li>
                <li>皮肤</li>
            </ul>
            <div class="center_img">
                <ul class="img_ul" id="img_ul">





                </ul>
            </div>


        </div>



        <div class="right_top">
            <p>敌方的队伍</p>
                <ul>
                    <li>

                        <div>
                            <div class="right_img" ></div>
                            召唤师1
                        </div>

                    </li>
                    <li>
                        <div>
                            <div class="right_img" ></div>
                            召唤师2
                        </div>
                    </li>
                </ul>


        </div>
        <div class="left_bottom">
            <p class="left_bottom_head">详细信息</p>
            <div>地图：召唤师峡谷</div>
            <div>队伍规模：5×5</div>
            <div>对战模式：经典对战模式</div>
            <div>选择模式：自选模式</div>
            <div>游戏类型：匹配类型</div>
        </div>

        <div class="center_center">
            <div class="center_center_l">
                符文天赋：
                <div>
                    <select style="width: 180px">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                    </select>
                </div>
            </div>
            <div class="center_center_c">
            <p style="float: left">技能：</p>
                <div style="background-image: url(img/shanxian.png)"></div>
                <div style="background-image: url(img/yinran.png)"></div>
            </div>
            <div class="center_center_r">
                <button id="comfim">确认</button>
            </div>
        </div>
        <div class="center_bottom">
            <p class="center_bottom_head">队伍聊天</p>
            <div>小强进入 房间</div>
            <div>熊明进入 房间</div>
            <div>clearLove 退出房间</div>
            <div>fake 退出房间</div>
            <div>游戏准备开始</div>
        </div>

        <div class="right_bottom">
            <p class="right_bottom_head">召唤师峡谷</p>
            <div class="right_bottom_img"></div>
        </div>







    </div>

<div class="back" id="back" style="display: none;">
        <ul class="back_top">
            <li class="back_not">
            </li>
            <li class="back_not"></li>
            <li style="background-color:#000000">
               <div class="back_img" ></div>
                <div class="back_name">敌方英雄</div>
                <div class="back_jineng">艾希</div>
            </li>
            <li  style="background-color:#000000">
                <div class="back_img"></div>
                <div class="back_name">敌方英雄</div>
                <div class="back_jineng">艾希</div>
            </li>
            <li class="back_not"></li>
        </ul>
        <ul class="back_center"></ul>
        <ul class="back_bottpm">
            <li class="back_not"></li>
            <li class="back_not"></li>
            <li style="background-color:#212121">
               <div class="back_img" id="img_back1" ></div>
                <div class="back_name" >我方英雄</div>
                <div class="back_jineng" id="back_jineng1"></div>
            </li>
            <li  style="background-color:#212121">
                <div class="back_img" id="img_back2" ></div>
                <div class="back_name">我方英雄</div>
                <div class="back_jineng" id="back_jineng2"></div>
            </li>
            <li class="back_not"></li>
        </ul>
</div>


<script type="text/javascript">
var img=document.getElementById("img_ul");
var imgCon=['hero_1.png','hero_2.png','hero_3.png','hero_4.png','hero_5.png','hero_6.png','hero_7.png','hero_8.png','hero_9.png','hero_10.png','hero_11.png','hero_12.png','hero_13.png','hero_14.png','hero_15.png','hero_16.png','hero_17.png','hero_18.png','hero_19.png','hero_20.png','hero_21.png','hero_22.png','hero_23.png','hero_24.png'];
var imgName=['安妮','艾希','皎月','布隆','冒险家EZ','德玛西亚',
              '妖姬','飞机','盲僧','瑞文','剑圣','深海泰坦','蜘蛛女王',
              '机器人','酒桶','船长','剑姬','小鱼人','风女','光辉女郎',
              '锤子','猪女','战争女神','小炮']
var imgfunction=new Array();
var imgNameArr=new Array();
var left_img01=document.getElementById("left_img01");
var left_img02=document.getElementById("left_img02");
for(var i=0;i<imgCon.length;i++){
    var li=document.createElement("li");
    li.className="img_li";
    li.style.background="url(img/"+imgCon[i]+")";
    li.style.backgroundSize="100%";
    imgfunction[i]=li;
    li.value=i;
    imgfunction[i].onclick=function(){
        left_img01.value=this.value;
        left_img01.style.background=this.style.background;
    }
    img.appendChild(li);
     // console.log(img.getElementsByTagName("li")[i]);
}
var num=0;
var miao=10;
var backImg=new Array();
var comfim=document.getElementById("comfim");
comfim.onclick=function(){
    console.log(left_img01.style.background);
    if(left_img01.style.background!=""&&left_img02.style.background==""&&num==0){
        var left_id1=document.getElementById("left_id1");

        left_id1.style.backgroundColor="#CE681E";
            for(var i=0;i<imgCon.length;i++){
                imgfunction[i].onclick=function(){
                left_img02.value=this.value;
                left_img02.style.background=this.style.background;
                }
            }   
            num=num+1;
    }else if(left_img01.style.background!=""&&left_img02.style.background!=""&num==1){
        var left_id2=document.getElementById("left_id2");
        left_id2.style.backgroundColor="#CE681E";
        console.log("进入第二个界面");
        this.innerText="点击进入游戏";
        num=num+1;
        console.log(num);
        //  alert("请选择英雄！");
        // }
    }
    else if(left_img01.style.background!=""&&left_img02.style.background!=""&&num==2){
        console.log("进入函数");
        var setTime=setInterval(function(){
            var comfim=document.getElementById("comfim");
                if(miao>1){
                    console.log(miao);
                        miao=miao-1;
                        comfim.innerText="还有"+miao+"秒开始游戏";
                }else{
                    comfim.innerText="还有"+0+"秒开始游戏";
                    clearInterval(setTime);
                    tiao();
                }
        },300);
    }
}



function tiao(){
    var container=document.getElementById("container");
    container.style.display="none";
    var back=document.getElementById("back");
    var img_back1=document.getElementById("img_back1");
    var img_back2=document.getElementById("img_back2");
    var back_jineng1=document.getElementById("back_jineng1");
    var back_jineng2=document.getElementById("back_jineng2");
    img_back1.style.background=left_img01.style.background;
    img_back2.style.background=left_img02.style.background;
    back_jineng1.innerText=imgName[left_img01.value];
    back_jineng2.innerText=imgName[left_img02.value];
    back.style.display="block";
}

</script>
 </body>
</html>

地址：我的LOL界面Github
CSS代码，可能不够完善，可以到我的github上面下载噢。..

谢谢支持。

阿冰介
关注
专栏目录
某腾LOL开发负责人教你如何用Java实现一把 LOL 案例，学会模板设计模式！
weixin_55932015的博客
03-31 633
前言 假如开一把lol，必须要做哪些事呢？可以简化位这三个步骤。选择英雄，开始游戏，投降。这三个步骤必须按照顺序执行。映射到代码中可以想到socket信息传输，建立连接，传输数据，关闭连接。 [这就是模板模式了大概的样子，在模板模式中，一个抽象类公开定义了执行它的方法的方式模板，它的子类可以按需要重写方法实现，但调用将以抽象类中定义的方式进行。] [比如玩一把lol,选择什么英雄都可以，开始游戏后，每个人也有自己的发育路线，最后是15分钟投降，还是20分钟投降，每一局也都不一定（赢了暂时不算）不管谁来玩，
JavaScirpt-30days-master:30天JavaScript挑战
04-04
【描述】"JavaScirpt-30days-master"的描述简洁，可能意味着该项目包含了一系列基于JavaScript的练习或教程，这些内容可能按照30天的学习计划进行组织，每天都有特定的主题或任务，让学习者逐步深入JavaScript的世界...
LOL网站登陆界面(jsp)
03-12
LOL网站登陆界面(jsp)
英雄联盟LOL JAVA版
dizaoshen1316的博客
04-23 1978
public class Hero{ public static void main(String[] args) { String need = "设计英雄类 他们都有名字，hp，护甲，移动速度等"; // create Hero Heros 剑圣 = new Heros(); 剑圣.se...
java游戏登陆界面
06-25
我自己弄的Java登录的界面，对Java初学者挺有用的，大家可以看看啊
HTML+CSS+JS+JQ实现LOL官网界面
08-19
HTML+CSS+JS+JQ实现LOL官网界面,大部分都实现了，比较逼真,课余时间做的，课余时间做的
sql-formatter npm打包后文件
12-14
1、本资源已经对源码NPM工程打包为sql-formatter.min.js 文件可直接引入使用 2、具体说明可见下载后压缩包中的 说明.text 文件 3、相关博客文章 https://blog.csdn.net/guzuoi/article/details/111151290
eclipse spket-1.6.23 javascirpt提示插件
03-04
安装spket1.6.23的eclipse插件，直接覆盖同名jar包即可。 重新打开eclipse即可看到显示信息已经破解为commercial 商业版
react-best-practics：全面的参考指南，可开始您的React架构师职业！
02-05
在React开发领域，掌握最佳实践是提升项目质量和效率的关键。"react-best-practics"是一个针对React的全面参考指南，旨在帮助开发者，特别是那些希望成为React架构师的人，深入理解和应用React的最佳实践。以下是对...
slide-ruler::straight_ruler: Slide Ruler 滑尺数值选择器
04-28
SlideRuler 特征 使用本机javascript开发，不依赖任何框架和库。 可自定义的颜色，大小，精度等 支持刷卡的惯性和回弹。 友好的API，易于使用。 道具类型 财产 类型 默认 描述 handleValue ...35
JAVA简单的游戏登录界面
03-11
简单的游戏登录系统JAVA源代码，学生试用~~~~快来啊啊啊
英雄联盟LOL风格程序登录界面-易语言
06-12
英雄联盟LOL风格程序登录界面
HTML/CSS/JS仿英雄联盟网站.zip
12-21
有十一个游戏相关的网页，主页使用了js实现了轮播图效果和视频弹出播放的效果，登录部分使用js来验证用户和密码是否匹配（具体信息见js），其余部分的网页大部分都是网页布局的使用，对图片和文字的排版，大部分为网页外观的展示。
易语言的lol登录窗口UI界面
07-25
易语言lol登录窗口风格，高仿，界面也是很不错的。
英雄联盟
02-26
下一个Tailwind打字稿示例 与create-next-app ： npx create-next-app -e https://github.com/wwsalmon/next-tailwind-typescript-example 与默认的create-next-app ，此示例： 预先配置了Typescript和TailwindCSS 具有默认的index.js ， Home.module.css ， pages/api/和public/剥离 预先配置了_document.tsx 将.env添加到.gitignore
JAVA窗口登录界面
weixin_43116971的博客
04-12 1445
java笔记
超酷模仿LOL界面用Qt实现连接mysql数据库登陆，并记住账号——附代码下载、mysql驱动
韩江雪de 小屋
04-20 2476
文章目录1 效果2 核心代码3 代码下载 1 效果 有背景音乐，登陆成功背景音乐消失，返回登陆，又有背景音乐。登陆账号和密码为空都会报错，并且重设焦点。 圆角化了边框（后补）： 2 核心代码 连接数据库： static bool createConnection(){ //连接第一个数据库 //QMYSQL QSqlDatabase db2 = QSqlDat...
如何用Python写一个模拟的英雄联盟登陆系统！！！（详解）
qq_54934861的博客
10-24 2477
while True: print("\t\t\t英雄联盟登陆界面\n") print("~*"*38) print("\t\t\t1.用户登陆\n") print("\t\t\t2.用户注册\n") print("\t\t\t3.退出系统\n") print("~*"*38) xuan_zhe = input("请输入你的选择：") if xuan_zhe == "1": user_name = input("请输入你的用户名称：") passwd = input(...
打印英雄联盟登录界面
weixin_73871736的博客
03-04 161
用python打印英雄联盟登录界面
javascirpt注册登录界面
最新发布
01-11
注册登录界面 body { font-family: Arial, sans-serif; background-color: #f2f2f2; } .container { max-width: 400px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 5px...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿冰介

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值