html 做王者荣耀

最新推荐文章于 2024-06-06 14:40:17 发布
最新推荐文章于 2024-06-06 14:40:17 发布
阅读量2.7k 收藏 7
点赞数 1
文章标签： html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67782151/article/details/124932563
版权

        相信大家都玩过王者荣耀吧，那么王者荣耀在html中要怎么实现呢？

话不多说，上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>王者地图</title>
    <script src="./three.min.js"></script>
    <script src="./MOBAControls.js"></script>
    <script src="./DRACOLoader.min.js"></script>
    <script src="./GLTFLoader.min.js"></script>
    <script src="./nipplejs.min.js"></script>
    <script src="./vconsole.min.js"></script>
    <script src="https://cdn.bootcss.com/tween.js/r14/Tween.min.js"></script>
</head>
<style>
    html, body, #output{
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }

    #layer{
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: rgba(211, 226, 226, 0.4);
        top: 0;
        left: 0;
    }

    .loading{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            z-index: 10;
            width: 60px;
            height: 40px;
            margin: 0 auto;
        }
        .loading span{
            display: inline-block;
            width: 8px;
            height: 100%;
            border-radius: 4px;
            background: lightgreen;
            -webkit-animation: load 1s ease infinite;
        }
        @-webkit-keyframes load{
            0%,100%{
                height: 40px;
                background: lightgreen;
            }
            50%{
                height: 70px;
                margin: -15px 0;
                background: lightblue;
            }
        }
        .loading span:nth-child(2){
            -webkit-animation-delay:0.2s;
        }
        .loading span:nth-child(3){
            -webkit-animation-delay:0.4s;
        }
        .loading span:nth-child(4){
            -webkit-animation-delay:0.6s;
        }
        .loading span:nth-child(5){
            -webkit-animation-delay:0.8s;
        }

        .tip{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            z-index: 10;
        }
        .tip span{
            color: #0ff
        }
</style>
<body>
    <div id="layer">
            <div class="loading">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
            </div>
            <div class='tip'>
                <span>开启屏幕旋转可以横置屏幕</span>
            </div>
    </div>
    <div id="output">

    </div>
</body>
<script>

    // 'dev' / 'prod'
    // const evirenment = 'dev'
    const evirenment = 'prod'

    if(evirenment == 'dev'){new VConsole()}

    window.onload = () => {
        let name = evirenment == 'dev'? '汤圆skr狠人': prompt('请给自己角色取个名字，碰撞检测已暂时被注释', '如: 王xx')
        name = name || '王xx'
        let scene
        let camera
        let renderer
        const init = (dom) => {
            scene = new THREE.Scene()
            
            let ambientLight = new THREE.AmbientLight( 0xffffff)
            scene.add(ambientLight)

            let light = new THREE.DirectionalLight( 0xffffff)
            light.castShadow = true
            light.shadow.camera.left = light.shadow.camera.bottom = -300
            light.shadow.camera.right = light.shadow.camera.top = 300
            light.position.set(10, -50, 100)
            scene.add(light)

            size = {
                width: dom.offsetWidth,
                height: dom.offsetHeight
            }
            camera = new THREE.PerspectiveCamera(45, size.width / size.height, 0.5, 20000)
            evirenment == 'dev'? camera.position.set(30, 30, 30): camera.position.set(30, 30, 30)
            camera.up.set(0, 0, 1)

            renderer = new THREE.WebGLRenderer({
                antialias: true,
                alpha: true
            })
            renderer.setSize(size.width, size.height)
            renderer.setClearColor(0x000000)
            renderer.setPixelRatio(window.devicePixelRatio)
            dom.appendChild(renderer.domElement)

            renderer.gammaFactor = 2
            renderer.gammaOutput = true
            renderer.shadowMap.enabled = true
        }
        var dom = document.querySelector('#output')
        init(dom)

        let controls

        let loader = new THREE.GLTFLoader().setPath( evirenment == 'dev' ? './model/': 'https://xiongtongzi.oss-cn-shanghai.aliyuncs.com/model/');
        THREE.DRACOLoader.setDecoderPath(  evirenment == 'dev' ? './model/': 'https://xiongtongzi.oss-cn-shanghai.aliyuncs.com/model/' );
        loader.setDRACOLoader( new THREE.DRACOLoader() )

        class LevelBlood{

            constructor(name, options){
                this.color = options.color || 0x0000ff // 血条颜色
                this.totalBlood = options.totalBlood|| 500// 总血量
                this.currentBlood = options.currentBlood || 500 //即时血量
                this.totalBlue = options.totalBlue|| 100// 总蓝量
                this.currentBlue = options.currentBlue || 100 //即时蓝量
                this.level = options.level || 1//初始等级
                this.bloodCellNumber = options.cellNumber || 100//单刻度值
                this.backgroundColor = options.backgroundColor || '#001'//整个背景色
                this.bloodColor = options.bloodColor || '#0f0' //血条颜色
                this.blueColor = options.blueColor || '#00f' //蓝条颜色
                this.totalInLevel = options.totalInLevel || 100 //级内总进度
                this.inLevel = options.inLevel || 0 //级内进度
                this.name = name

                this.init()
                this.draw()
            }

            init(){
                this.canvas = document.createElement('canvas')
                this.canvas.width = 512
                this.canvas.height = 128

                this.ctx = this.canvas.getContext('2d')
            }

            config(options){
                this.color = options.color || this.color// 血条颜色
                this.totalBlood = options.totalBlood|| this.totalBlood// 总血量
                this.currentBlood = options.currentBlood || this.currentBlood //即时血量
                this.totalBlue = options.totalBlue|| this.totalBlue// 总蓝量
                this.currentBlue = options.currentBlue || this.currentBlue //即时蓝量
                this.level = options.level || this.level//初始等级
                this.bloodCellNumber = options.cellNumber || this.bloodCellNumber//单刻度值
                this.backgroundColor = options.backgroundColor || this.backgroundColor//整个背景色
                this.bloodColor = options.bloodColor || this.bloodColor //血条颜色
                this.blueColor = options.blueColor || this.blueColor //蓝条颜色
                this.totalInLevel = options.totalInLevel || this.totalInLevel //级内总进度
                this.inLevel = options.inLevel || this.inLevel //级内进度
                
                this.draw()
            }

            draw(){
                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)

                // 绘圆
                this.ctx.fillStyle = this.backgroundColor
                let halfHeight = this.canvas.height / 2
                let r = halfHeight * .8

                this.ctx.arc(halfHeight, halfHeight, r, 0, Math.PI * 2)
                this.ctx.fill()

                // 绘矩形
                let rectHeight = 50
                let marginTop = (this.canvas.height - rectHeight) * .5
                let marginBottom = (this.canvas.height + rectHeight) * .5

                this.ctx.fillStyle = this.backgroundColor
                this.ctx.beginPath()
                this.ctx.moveTo(halfHeight, marginTop)
                this.ctx.lineTo(this.canvas.width, marginTop)
                this.ctx.lineTo(this.canvas.width, marginBottom)
                this.ctx.lineTo(halfHeight, marginBottom)
                this.ctx.lineTo(halfHeight, marginTop)
                this.ctx.fill()
                this.ctx.closePath()

                //级内经验占位
                this.ctx.strokeStyle = '#000'
                this.ctx.lineWidth = 5
                this.ctx.beginPath()
                this.ctx.arc(halfHeight, halfHeight, r * 0.8, 0, Math.PI * 2)
                this.ctx.stroke()
                this.ctx.closePath()


                //级内经验
                this.ctx.strokeStyle = '#ff7f00'
                this.ctx.lineWidth = 5
                this.ctx.beginPath()
                this.ctx.arc(halfHeight, halfHeight, r * 0.8, - Math.PI * .5, this.inLevel / this.totalInLevel * Math.PI * 2 - Math.PI * .5)
                this.ctx.stroke()
                this.ctx.closePath()

                // 绘制等级
                this.ctx.font = 'bold 40px Arial'
                this.ctx.textAlign = 'center'
                this.ctx.fillStyle = '#fff'
                this.ctx.textBaseline ="middle"

                this.ctx.fillText(this.level, halfHeight, halfHeight)

                //绘制名称
                this.ctx.font = 'bold 40px Arial'
                this.ctx.textAlign = 'center'
                this.ctx.fillStyle = '#fff'
                this.ctx.textBaseline ="top"

                this.ctx.fillText(this.name, (this.canvas.width - this.canvas.height) * .5 + this.canvas.height, 0)

                let offsetY = 8
                let offsetX = 8
                let totalHeight = rectHeight - offsetY * 3
                let blueBloodStart = halfHeight + r
                let bloodBlueTotalLength = this.canvas.width - offsetX - blueBloodStart

                //绘制蓝条
                let blueCurrentLength = blueBloodStart + this.currentBlue / this.totalBlue * bloodBlueTotalLength
                this.ctx.fillStyle = this.blueColor
                this.ctx.beginPath()
                this.ctx.moveTo(blueBloodStart, marginBottom - totalHeight * .2 - offsetY)
                this.ctx.lineTo(blueCurrentLength, marginBottom - totalHeight * .2 - offsetY)
                this.ctx.lineTo(blueCurrentLength, marginBottom - offsetY)
                this.ctx.lineTo(blueBloodStart, marginBottom - offsetY)
                this.ctx.lineTo(blueBloodStart, marginBottom - totalHeight * .2 - offsetY)
                this.ctx.fill()
                this.ctx.closePath()

                //绘制血条
                let bloodCurrentLength = blueBloodStart + this.currentBlood / this.totalBlood * bloodBlueTotalLength
                this.ctx.fillStyle = this.bloodColor
                this.ctx.beginPath()
                this.ctx.moveTo(blueBloodStart, marginTop + offsetY)
                this.ctx.lineTo(bloodCurrentLength, marginTop + offsetY)
                this.ctx.lineTo(bloodCurrentLength, marginTop + totalHeight * .8 + offsetY)
                this.ctx.lineTo(blueBloodStart, marginTop + totalHeight * .8 + offsetY)
                this.ctx.lineTo(blueBloodStart, marginTop + offsetY)
                this.ctx.fill()
                this.ctx.closePath()

                //血量刻度
                this.ctx.strokeStyle = this.backgroundColor
                this.ctx.lineWidth = 6

                let splitNumber = this.totalBlood / this.bloodCellNumber
                let step = (this.canvas.width - offsetX - blueBloodStart) / splitNumber
                for(let i = 0; i < splitNumber; i ++){
                    let length = 12
                    if(i % 5 == 0){
                        length = 20
                    }
                    this.ctx.beginPath()
                    this.ctx.moveTo(blueBloodStart + i * step, marginTop + offsetY)
                    this.ctx.lineTo(blueBloodStart + i * step, marginTop + offsetY + length)
                    this.ctx.stroke()
                    this.ctx.closePath()
                }
            }

            test(id){// 测试输出用
                let dom = document.querySelector(id)
                dom.appendChild(this.canvas)
            }

        }
        
        var mixer, action;
        let ssxObject, ssxOriginRotation
        let clock = new THREE.Clock()
        let delta
        let sprite
        let levelBlood

        const speedNumber = evirenment == 'dev' ? 1 : 0.2
        let speed = new THREE.Vector2()


        //设置站立
        const setStand = () => {
            speed.set(0, 0)
            action && action.stop()
        }

        const go = (x, y) => {
            speed.set(x, y)
            action && action.play()
        }

        loader.load( 'model.gltf', function ( gltf ) {
            gltf.scene.rotation.x = Math.PI * .5
            gltf.scene.rotation.y = -Math.PI * .25

            gltf.scene.traverse((item) => {
                if(item.material){
                        item.material = new THREE.MeshBasicMaterial({map: item.material.map, transparent: true, alphaTest: 0.9})
                }

                if(item.children.length > 0 && (item.name.includes('地') || item.name.includes('路'))){
                    item.traverse((child) => {
                        child.receiveShadow = true
                    })
                }

            })

            scene.add(gltf.scene)

            let tl = new THREE.TextureLoader()
            tl.setPath( evirenment == 'dev' ? './model/': 'https://xiongtongzi.oss-cn-shanghai.aliyuncs.com/model/')
            loader.load('ssx.gltf', (ssx) => {
                ssx.scene.rotation.x = Math.PI * .5
                ssx.scene.rotation.y = Math.PI * 1.5

                ssxOriginRotation = ssx.scene.rotation.clone()

                ssx.scene.scale.set(4, 4, 4)
                ssx.scene.position.set(218.27291759843078, -4.683324102610722, 0)


                ssx.scene.traverse((obj) => {
                    if(obj.material){
                        let name = obj.name
                        obj.material.map = tl.load(name + '.png')

                        obj.castShadow = true
                    }
                })

                scene.add(ssx.scene)

                ssxObject = ssx.scene

                controls = new MOBAControls( camera, {
                    dom: renderer.domElement,
                    target: ssxObject
                })

                mixer = new THREE.AnimationMixer(ssx.scene)
                action = mixer.clipAction(ssx.animations[0])

                levelBlood = new LevelBlood(name + '', {inLevel: 49})
                levelBlood.test('#output')
                sprite = new THREE.Sprite(new THREE.SpriteMaterial({
                    map: new THREE.CanvasTexture(levelBlood.canvas),
                    transparent: true,
                    alphaTest: 0.6
                }))
                sprite.scale.set(8, 2, 1)
                scene.add(sprite)

                document.querySelector('#layer').style.display = 'none'

                let manager = nipplejs.create({
                    zone: dom,
                    multitouch: true,
                    maxNumberOfNipples: 1,
                    color: 'black'
                })

                let position = new THREE.Vector2()
                manager.on('start', (evt, data) => {
                    let {x, y} = data.position
                    position.set(x, y)
                })

                let pointerRaycaster = new THREE.Raycaster()
                manager.on('move', (evt, data) => {
                    let {x, y} = data.position

                    let offset = position.clone()
                    let length = offset.sub(new THREE.Vector2(x, y)).length()

                    // 限制最小响应
                    if(length < 20){
                        setStand()
                        return
                    }
                    if(data.angle){
                        let degree = data.angle.radian - Math.PI * .25
                        let {x, y, z} = ssxOriginRotation
                        ssxObject.rotation.set(x, y + degree, z)
                        go(- Math.cos(degree), - Math.sin(degree))

                        // let {x: posx, y: posy} = ssxObject.position

                        // // 射线判断
                        // pointerRaycaster.set(new THREE.Vector3(posx, posy, 1), new THREE.Vector3(- Math.cos(degree), - Math.sin(degree), 0).normalize())

                        // let raycasterGet = pointerRaycaster.intersectObjects(gltf.scene.children, true)
                        // // console.log(raycasterGet)
                        // if(raycasterGet.length > 0){
                        //     let one = raycasterGet[0]
                        //     if(one.distance < 1){
                        //         speed.set(0, 0)
                        //         console.log('停止')
                        //     }
                        // }
                    }else{
                        setStand()
                    }
                })

                manager.on('end', (evt, data) => {
                    setStand()
                    position.set(0, 0)
                }
                )
            })

        })

    //  nipple.js全面替代键盘操作
        // const keyDown = (e) => {
        //     e.preventDefault()
        //     let keyCode = e.keyCode
        //     if(!ssxObject) return
        //     if(keyCode == 87 || keyCode == 38){//w
        //         speed.y = -1
        //     }

        //     if(keyCode == 65 || keyCode == 37){//a
        //         speed.x = 1
        //     }

        //     if(keyCode == 83 || keyCode == 40){//s
        //         speed.y = 1
        //     }

        //     if(keyCode == 68 || keyCode == 39){//d
        //         speed.x = -1
        //     }
        // }

        // const keyUp = (e) => {
        //     e.preventDefault()
        //     let keyCode = e.keyCode
        //     if(!ssxObject) return
        //     if(keyCode == 87 || keyCode == 38){
        //         speed.y = 0
        //     }

        //     if(keyCode == 65 || keyCode == 37){
        //         speed.x = 0
        //     }

        //     if(keyCode == 83 || keyCode == 40){
        //         speed.y = 0
        //     }

        //     if(keyCode == 68 || keyCode == 39){
        //         speed.x = 0
        //     }
        // }
        const render = () => {
            controls && controls.update()
            delta = clock.getDelta()

            if(ssxObject){
                if(speed.length() > 0){
                    let {x, y} = speed.clone().normalize().multiplyScalar(speedNumber)
                    ssxObject.position.y += y
                    ssxObject.position.x += x
                    levelBlood.currentBlue > 0 && levelBlood.config({currentBlue: levelBlood.currentBlue - 0.2})
                    levelBlood.currentBlood > 0 && levelBlood.config({currentBlood: levelBlood.currentBlood - 0.1})
                }else{
                    levelBlood.currentBlue < levelBlood.totalBlue && levelBlood.config({currentBlue: levelBlood.currentBlue + 0.1})
                    levelBlood.currentBlood < levelBlood.totalBlood && levelBlood.config({currentBlood: levelBlood.currentBlood + 0.05})
                }

                sprite.material.map.image = levelBlood.canvas
                sprite.material.map.needsUpdate = true
            }
                

            sprite && sprite.position.copy(ssxObject.position).add(new THREE.Vector3(0, 0, 9))

            mixer && mixer.update( delta );

            renderer.render(scene, camera)
            requestAnimationFrame(render)
        }
        render()


        let mouse = new THREE.Vector2()
        let raycaster = new THREE.Raycaster()

        const move = (e) => {
            mouse.x = ((e.clientX - dom.getBoundingClientRect().left) / dom.offsetWidth) * 2 - 1
            mouse.y = -((e.clientY - dom.getBoundingClientRect().top) / dom.offsetHeight) * 2 + 1
            raycaster.setFromCamera( mouse, camera )

            let intersects = raycaster.intersectObjects(scene.children, true)
            if(intersects.length > 0){
                console.log(intersects[0])
            }
        }

        dom.addEventListener('click', move, false)

        const resize = () => {
            var size = {
                width: dom.offsetWidth,
                height: dom.offsetHeight
            }
            renderer.setSize(size.width, size.height)
            camera.aspect = size.width / size.height
            camera.updateProjectionMatrix()
        }

        window.addEventListener('resize', resize, false)

        // const FullScreen = () => {
        //     let isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen
        //     if(!isFullscreen){//进入全屏,多重短路表达式
        //         (document.requestFullscreen && document.requestFullscreen())||
        //         (document.mozRequestFullScreen && document.mozRequestFullScreen())||
        //         (document.webkitRequestFullscreen && document.webkitRequestFullscreen())||
        //         (document.msRequestFullscreen && document.msRequestFullscreen());
        //     }else{	//退出全屏,三目运算符
        //         document.exitFullscreen ? document.exitFullscreen():
        //         document.mozCancelFullScreen ? document.mozCancelFullScreen():
        //         document.webkitExitFullscreen ? document.webkitExitFullscreen():'';
        //     }
        // }
        const orientationchange = () => {
            if(window.innerHeight < window.innerWidth){
                console.log('full')
                // document.body.requestFullscreen && document.body.requestFullscreen()
            }else{
                console.log('exist')
                // document.exitFullscreen && document.exitFullscreen()
            }
            resize()
        }

        // window.addEventListener('orientationchange', orientationchange, false);


        // window.addEventListener('keydown', keyDown, false)
        // window.addEventListener('keyup', keyUp, false)
    }

</script>
</html>

代码片段不全

全部代码加我VX ：lingyuwuhongyuan领取

黑I客I零
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
仿王者荣耀官网(HTML+CSS).rar
02-03
实训的项目,用了HTML+CSS做的,适合学校要求
web前端期末大作业——HTML+CSS+JavaScript仿王者荣耀游戏网站设计与制作
wx___BJ050106的博客
01-01 883
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保...
HTML5期末考核大作业 基于HTML+CSS+JavaScript仿王者荣耀首页 游戏网站开发 游戏官网设计与实现
最新发布
VX_WJ88950106的博客
06-06 675
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保
web前端-王者荣耀官网
m0_61214373的博客
08-12 5512
王者荣耀官网
HTML+CSS王者荣耀静态网页.zip
04-07
一个模仿王者荣耀官网的静态网页，下载完直接浏览器运行即可，无需修改。
web前端-html网页案例-王者荣耀
互联网知识分享
04-02 305
代码文件比较多，这里不好粘贴。需要的话可以在下放评论或私信我，会发给你的。
仿王者荣耀HTML示例代码
jasmyn518的博客
12-10 7157
由于写这段代码时间比较长了，中间的一些图片信息之类的都有更新了，下面把对应的图片也上传，可以对照更换图片。同时之前也上传过资源，觉得麻烦的也可以直接下载。 资源链接： 仿王者荣耀https://download.csdn.net/download/jasmyn518/13195508 HTML代码如下： <!DOCTYPE html> <html> <head> <title>王者荣耀</title> <meta charset="u
HTML5期末考核大作业 简单的学生网页作业源码 基于html css javascript仿王者荣耀首页 游戏网站开发 游戏官网设计与实现
HTML网页设计 专注大学生网页设计
09-06 1900
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。 🎁更多干货 1.如果我的博客对你有帮助、如果你喜欢我的博客内容，一键三连哦！2.带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端...
我要写王者荣耀类游戏的网页代码
weixin_42594419的博客
02-13 1258
写网页代码需要掌握前端开发技能，如 HTML、CSS 和 JavaScript。以下是一个简单的示例代码： <!DOCTYPE html> <html> <head> <title>王者荣耀游戏</title> </head> <body> <header> &l...
王者荣耀官方网站静态页面css+html
07-26
本主题聚焦于"王者荣耀官方网站静态页面css+html"，这是一个关于如何利用CSS（层叠样式表）和HTML（超文本标记语言）来构建游戏官网页面的实例。 首先，HTML是网页内容的基础结构，它定义了网页的各个元素，如标题...
王者荣耀官网页面源码.zip
01-21
《王者荣耀官网页面源码》是针对游戏《王者荣耀》的官方网站前端设计进行的代码解析，主要涉及的技术栈包括HTML5、CSS以及JavaScript。这份压缩包包含了构成网页的基本元素，分别是CSS文件、图片资源、JavaScript...
王者荣耀官网web端代码
10-23
网站是pc版本的，web官网，前端代码
王者荣耀网站源码111
06-06
【王者荣耀网站源码111】是一个包含HTML和CSS的静态网页项目，旨在构建一个以热门游戏《王者荣耀》为主题的网站。这个源码可能是为游戏爱好者、网页设计师或开发者提供的资源，让他们可以学习、参考或者直接使用来...
html简单网页代码：仿王者荣耀首页 游戏网站开发 游戏官网设计与实现
12-17 1470
👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 📂文章目
王者荣耀前端模仿
weixin_44047927的博客
10-21 4387
作品初衷 因为想着要写答辩，网页这东西展现的会更直观一点，刚好也复习一下自己基础我牢固的前端知识，也想着提升一下自己前端网页排版能力和逻辑能力 作品简介 编辑器：sublime 语言：html+css+js 代码量：6000行 编辑时长：30天 基本结构 主页面 主页面应该是框架结构最完善的，因为这个页面是最开始写的，也因为布局的原因修改过很多次。因为页面元素多，比较复杂，所以到后边就难免会造成布...
大二学生web期末大作业 在线电影网站 HTML+CSS+JS
热门推荐
HTML网页设计 专注大学生网页设计
09-18 6万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
HTML5期末大作业：美食甜品网站设计——餐饮咖啡(11页)HTML+CSS+JavaScript 使用dreamweaver制作采用DIV+CSS进行布局 HTML5网页设计成品...
qq_365392777
11-13 1334
常见网页设计作业题材有 ​​个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他​​ 等网页设计题目, ​​A+水平作...
王者荣耀静态页面头部代码设计（2）
qq_55928824的博客
12-28 1008
王者荣耀静态页面头部代码设计（2）
html版王者荣耀下载
06-28
首先，需要注意的是，目前并没有官方推出的html版王者荣耀，因此如果你在网上看到某个网站声称可以直接下载html版的王者荣耀，应该保持警惕。 但是，如果你非常想在电脑上玩王者荣耀，其实也有一些替代方式可以尝试...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

黑I客I零

你的鼓励是我最大的动力

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

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

打赏作者

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

抵扣说明：

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

余额充值