文档章节

无聊的产物--仿说剑中的一个小游戏

Kong777
 Kong777
发布于 2017/02/19 22:21
字数 617
阅读 26
收藏 0

都是BUG 不过勉强玩玩可以啦 

1.复制下面的代码

2.把图片保存到同一目录下(文件名修改成 'IMG_0124.JPG')

3.可以分享一下怎么BUG 补上 比如说第一次点击会跳的问题...

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            perspective: 1000px;
        }

        .father {
            width: 1000px;
            height: 773px;
            background: url('IMG_0124.JPG') no-repeat;
            position: absolute;
            transform-style: preserve-3d;
            transition: all 5s;
            opacity: .8;
        }

        .son {
            height: 50px;
            width: 50px;
            background-color: white;
            position: absolute;
            left: 500px;
            top: 300px;
            border-radius: 50%;
            background: radial-gradient(rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 50%);
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
<div class="father">
    <div class="son"></div>
</div>
<div class="father">
    <div class="son"></div>
</div>
<div class="father">
    <div class="son"></div>
</div>
<div class="father">
    <div class="son"></div>
</div>
<div class="father">
    <div class="son"></div>
</div>
<div class="father">
    <div class="son"></div>
</div>
<div class="father">
    <div class="son"></div>
</div>
<div class="father">
    <div class="son"></div>
</div>
<div class="father">
    <div class="son"></div>
</div>
<div class="father">
    <div class="son"></div>
</div>
<div class="father">
    <div class="son"></div>
</div>
<div class="father">
    <div class="son"></div>
</div>
<div class="father">
    <div class="son"></div>
</div>
<div class="father">
    <div class="son"></div>
</div>
<script>
//用DOM设置body的perspectiveOrigin
//第一次点击会有BUG
    document.body.style.perspectiveOrigin = '50% 50%'
    var tar = document.querySelectorAll('.son')
    //注册点击事件
    for(var i=0;i<tar.length;i++){
    tar[i].onclick = clickHandle
    }
    //记录点击次数
    var clickCount=0
    function clickHandle() {
    	//计算perspectiveOrigin位置
        var x2 = this.offsetWidth / 2 + this.offsetLeft
        var y2 = this.offsetHeight / 2 + this.offsetTop
        //用动画改变perspectiveOrigin位置
        animate(x2, y2)
        clickCount++
    }
    function animate(x2, y2) {
        tar[0].timer = setInterval(function () {
            var arr = document.body.style.perspectiveOrigin.split(' ');
            console.log(arr);
            var x = parseFloat(arr[0])
            var y = parseFloat(arr[1])
            var step1 = ( x2 - x ) / 10;
            var step2 = ( y2 - y ) / 10;
            step1 = step1 > 0 ? Math.ceil(step1) : Math.floor(step1);
            step2 = step2 > 0 ? Math.ceil(step2) : Math.floor(step2);
            document.body.style.perspectiveOrigin = (x + step1) + 'px ' + (y + step2) + 'px'
            if (x == x2 && y == y2) {
                clearInterval(tar[0].timer)
            }
        }, 15)
    }
    //获取墨迹和入口
    var moji = document.getElementsByClassName('father');
    var enter =document.querySelectorAll('.son')
    //随机入口位置,给墨迹3D定位
    for (var i = 0; i < moji.length; i++) {
        moji[i].style.transform = 'translateZ(' + (i*2 - 30) * 1000 + 'px)'
        enter[i].style.top=parseInt(Math.random()*300)+200+"px"
        enter[i].style.left=parseInt(Math.random()*500)+234+"px"
    }
    //记数还有初始化步长 用来增加速度
    var step = 50
    var count =1
    function move() {
        tar[1].timer=setInterval(function () {
        	//让墨迹不断向屏幕(自己)过来的动画
            for (var i = 0; i < moji.length; i++) {
                var num = (parseFloat(moji[i].style.transform.split('(')[1]) + step)
                moji[i].style.transform = 'translateZ(' + num + 'px)'
                //当计数一定时 增加墨迹过来的速度
                if(i==1){
                    count++
                    if(count>200){
                        count=count-200;
                        step=step+50
                    }
                }
            }
            //当第一个墨迹大于27000 认为游戏结束 获取得分
            if(parseFloat(moji[0].style.transform.split('(')[1])>27000){
                clearInterval(tar[1].timer)
                alert('得分:'+clickCount/15*100)
            }
        }, 50)
    }
    move()
</script>
</body>
</html>

© 著作权归作者所有

Kong777
粉丝 0
博文 18
码字总数 10953
作品 0
私信 提问
联想 Mirage 体验:一款可以让你化身「星战」绝地武士的 AR 设备

摘要 除了可以让你化身绝地武士,和真人大小的反派西斯战士一决高下,Mirage 本身也颇具收藏价值。 在漫长的电影史上,能够拥有长久生命力的影片系列并不多,但《星球大战》是一个例外。 也许...

豆腐店店长丶
2017/12/20
0
0
基于eui的白鹭引擎H5小游戏入门总结

前言 由于实习公司要人做 H5游戏,使用白鹭引擎开发,语言是。本着想学习ts的心态,就开始学习一波H5小游戏开发。几天时间看了下egret, eui, typescript的文档,花了3天半的时间,导师让仿一...

芝士君
2018/12/14
0
0
Win32游戏制作之---致我们曾经怀念的仙剑一

曾今有一个游戏是一代人的回忆,曾今有一部电视剧让很多人都落下了感动的泪! 好久没有写博客了,前段时间准备考试,这段时间又忙着有事,所以博客很久没写了,这两天闲着,因此写一个小小的...

loving_forever_
2016/07/14
0
0
时间和注意力价值--NeoWorld

话说,你的时间很宝贵,你的注意力很有价值。不要浪费时间,不要浪费你的注意力。这些对个人来说,是稀缺资源,失去了就买不回来了,所以好好珍惜时间等等。 最近玩NeoWorld,在这个游戏中,...

玩火的猴子
2018/08/21
0
0
仿微信

最近无聊~~~做了一个微信的应用~~~~实现了大体的功能~~~~话不多说上图为证~~~嘿嘿 是用第三方平台bmob后端云做的,刚用这个平台,觉得也还不错

太阳bb
2015/06/08
166
2

没有更多内容

加载失败,请刷新页面

加载更多

Spring使用ThreadPoolTaskExecutor自定义线程池及实现异步调用

多线程一直是工作或面试过程中的高频知识点,今天给大家分享一下使用 ThreadPoolTaskExecutor 来自定义线程池和实现异步调用多线程。 一、ThreadPoolTaskExecutor 本文采用 Executors 的工厂...

CREATE_17
今天
5
0
CSS盒子模型

CSS盒子模型 组成: content --> padding --> border --> margin 像现实生活中的快递: 物品 --> 填充物 --> 包装盒 --> 盒子与盒子之间的间距 content :width、height组成的 内容区域 padd......

studywin
今天
7
0
修复Win10下开始菜单、设置等系统软件无法打开的问题

因为各种各样的原因导致系统文件丢失、损坏、被修改,而造成win10的开始菜单、设置等系统软件无法打开的情况,可以尝试如下方法解决 此方法只在部分情况下有效,但值得一试 用Windows键+R打开...

locbytes
昨天
8
0
jquery 添加和删除节点

本文转载于:专业的前端网站➺jquery 添加和删除节点 // 增加一个三和一节点function addPanel() { // var newPanel = $('.my-panel').clone(true) var newPanel = $(".triple-panel-con......

前端老手
昨天
8
0
一、Django基础

一、web框架分类和wsgiref模块使用介绍 web框架的本质 socket服务端 与 浏览器的通信 socket服务端功能划分: 负责与浏览器收发消息(socket通信) --> wsgiref/uWsgi/gunicorn... 根据用户访问...

ZeroBit
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部