JS原生小游戏介绍

注：本文内容的代码只包括javascript的内容，甚至缺少着变量的定义，不建议拷贝操作

本文介绍的最终效果展示

项目展示

需求分析

类型偏向

休闲娱乐类型
偏向：儿童、娱乐

创作目的

能够使人放松心情、心情愉悦、释放压力

核心功能

落地弹幕

乘舟将欲行的背景配合着从天而降的古诗词弹幕弹幕缓慢落下，能够使人紧绷的神经放松下来

落地弹幕

雪景背景

缓慢飘落的雪花以及积雪的树和亭子，缓慢的节奏让人深陷其中

雪花飘落

调色板

随心所欲的调色板，不仅适合孩子的益智，也适合着大人们的童趣

调色板

抽签

不知结果的抽签，承载着美好的幻想（所以没有坏签），满足美好愿望的同时，激励着人们继续前行

抽签

实现技术

落地弹幕

改变着寻常弹幕的从左往右或从右往左
新奇的思路从上而下，给人以诗词铺天盖地的视觉感受
配合着淡灰色的俊秀字体，淡灰色不嫌单调抑郁，俊秀的字体不显娇弱

danmu=setInterval(function(){
            var shiju=document.createElement('span')
            fu.appendChild(shiju)
            shiju.innerHTML=arrshiju[Math.floor(Math.random()*arrshiju.length)]
            shiju.style.left=(Math.random()*1300)+'px'
            var speed=-800
            var timer=setInterval(function(){
                speed+=0.5
                shiju.style.top=speed+'px'
                if(shiju.style.top>=800){
                    clearInterval(timer)
                    fu.removeChild(shiju)
                }
            },5)
 },1000)

雪景背景

大小不一的雪花块从左上缓慢飘落到右下
利用着随机数的特性，给人随风飘落的视觉感受
同时雪花块不显臃肿，模糊的边缘给人以远观的视觉错觉

利用画布的特殊特性，在画布上画上绝美的雪花
在每次加载的同时给雪花以不同的大小，符合着现实的特点
与此同时，利用随机数赋予下和左的移动大小，给人以雪花随风飘落的视觉感官

let canvas=document.querySelector('canvas')
        let context=canvas.getContext('2d')
        let w=window.innerWidth
        let h=window.innerHeight
        canvas.height=h
        canvas.width=w

        let num=200//雪花数量，可以让雪下小点或者大点
        let snows=[]
        for(let i=0;i<num;i++){//给雪花属性
            snows.push({
                x:Math.random()*w,
                y:Math.random()*h,
                r:Math.random()*10+1
            })
        }
        //雪花下降动画
        let move =()=>{
            for(let i=0;i<num;i++){
                let snow=snows[i]
                snow.x+=Math.random()*2+1
                snow.y+=Math.random()*2+1
                //超过范围消失重新开始
                if(snow.x>w){
                    snow.x=0
                }
                if(snow.y>h){
                    snow.y=0
                }
            }
        }
        let draw=() => {
            context.clearRect(0,0,w,h)
            context.beginPath()
            context.fillStyle='rgb(255,255,255)';
            context.shadowColor='rgb(255,255,255)'
            context.shadowBlur=10

            for(let i=0;i<num;i++){
                let snow=snows[i]
                context.moveTo(snow.x,snow.y)
                context.arc(snow.x,snow.y,snow.r,0,Math.PI*2)
            }
            context.fill()
            context.closePath()
            move()
        }
        draw();
        setInterval(draw,30)//关键帧动画b

调色板

酒罐的移动小按钮给略显枯燥的雪景带来一丝的温度
使得雪景不再是雪景，酒罐也不再是单调孤独的酒罐

酒罐的移动采用了多个鼠标事件，在移动的同时也框定了移动的范围

var slider = document.querySelectorAll('#slider');
        var block = document.querySelectorAll('#block');
        var se=document.querySelector('.se')
        var arr=[]
        for(let i=0;i<3;i++){
            arr[i]=0
        }
        for(let i=0;i<slider.length;i++){
            block[i].onmouseover = function () {
                block[i].onmousedown = function (ev) {
                    let myEvent = ev || event;
                    // 计算鼠标相对滑块上的位置
                    let disX = myEvent.clientX - block[i].offsetLeft;

                    document.onmousemove = function (ev) {

                        let myEvent = ev || event;

                        // 计算滑块的动态left值
                        let l = myEvent.clientX - disX;

                        // 限制拖拽范围
                        if (l < 0) {

                            l = 0;

                        } else if (l > slider[i].offsetWidth - block[i].offsetWidth) {

                            l = slider[i].offsetWidth - block[i].offsetWidth;
                        }

                        block[i].style.left = l + 'px';

                        // 计算拖拽移动距离与可拖动总范围的比例
                        let scale = l / (slider[i].offsetWidth - block[i].offsetWidth);
                        arr[i]=scale*255
                        console.log(arr[i])
                        se.style.background='rgb(' + arr[0] + ',' + arr[1] + ',' + arr[2] + ')'
                    };

                    document.onmouseup = function () {
                        document.onmousemove = null;
                        document.onmouseup = null;
                    };
                };
            };
            console.log(arr[i])
        }

抽签

不同于雪白与淡灰，满目的红色给人以喜庆欢愉的感受
在感受到喜庆心情的同时，对下面抽签到来的期许与紧张

各个场景的切换采用着淡入淡出的效果
不仅减缓着人们的紧张感受，各个页面的效果也使人眼前一亮

抽签的旋转效果采用着css的3d六边形旋转动画

var needclick=document.querySelector('.needclick')
        var wenzi=document.querySelector('.wenzi')
        var sheng=document.querySelector('.sheng')
        var cssdong=document.querySelector('.cssdong')
        var cssdiv=document.querySelectorAll('.cssdong div')
        var btn=document.querySelector('.btnn')
        var qianzi=["好运签","桃花签","空签","大吉","吉吉吉"]
        var fin=document.querySelector('.fin')
        var finp=document.querySelector('.finp')
        let i=0,b=0,i2=0;
        let f=30,r=0;
        let move=0,sec=0,time=0,timeset,sec2=0;

        bigger=setInterval(function(){
            if(sec2>=1000){
                needclick.style.display="block"
                if(sec<=1200){
                    needclick.style.opacity=(sec2-1000)/200
                }
                if(b==0){
                    wenzi.style.fontSize=f+"px";
                    f=f+0.2
                    if(f>=50){
                        b=1
                    }
                }
                if(b==1){
                    wenzi.style.fontSize=f+"px"
                    f=f-0.2
                    if(f<=30){
                        b=0
                    }
                }
            }
            sec2++
        },5)
        needclick.onclick=function(){
            clearInterval(bigger)
            needclick.style.display="none"
        }
        window.onload=function(){
            timeset=Math.floor(Math.random()*5+5)
        }
        sheng.onclick=function(){
            needclick.style.display="none"
            clearInterval(bigger)
            time++;
            if(time==timeset){
                cssdong.style.display="block"
                btn.style.display="block"
                danchu=setInterval(function(){
                    if(i<500){
                        sheng.style.opacity=(500-i)/500
                        for(let m=0;m<cssdiv.length;m++){
                            cssdiv[m].style.opacity=i/500
                        }
                        btn.style.opacity=i/500
                    }
                    else if(i>=500){
                        sheng.style.display="none"
                        clearInterval(danchu)
                    }
                    i++
                },10)
            }
            if(move==0){
                move=1
                ro=setInterval(function(){
                    if(sec<=25){
                        sheng.style.transform='rotate(' + r + 'deg)'
                        r-=0.2
                    }
                    else if(sec<=75&&sec>=25){
                        sheng.style.transform='rotate(' + r + 'deg)'
                        r+=0.2
                    }
                    else if(75<=sec&&sec<=100){
                        sheng.style.transform='rotate(' + r + 'deg)'
                        r-=0.2
                    }
                    else if(sec>=100){
                        clearInterval(ro)
                        sec=0
                        move=0
                    }
                    sec++
                },1)
            }
        }
        btn.onclick=function(){
            fin.style.display="block"
            finp.style.display="block"
            let yourqian=Math.floor(Math.random()*qianzi.length)
            finp.innerHTML=qianzi[yourqian]
            chouqianzi=setInterval(function(){
                if(i2<500){
                    for(let m=0;m<cssdiv.length;m++){
                        cssdiv[m].style.opacity=(500-i2)/500
                    }
                    btn.style.opacity=(500-i2)/500
                    fin.style.opacity=i2/500
                    finp.style.opacity=i2/500
                }
                else if(i2>=500){
                    clearInterval(chouqianzi)
                }
                i2++
            },10)
        }

项目总结

面对困难

各个场景的切换

为了使各个页面的出现即不显突兀也能使人感觉顺滑
以及综合着自己的技术，最终选择了淡入淡出效果

小游戏的选择

本想做个小游戏的集合，但是不知什么小游戏配合着雪景才不显突兀
最后是先想定元素酒罐，雪、年和酒相关联不显突兀
孤寂的雪景不能配合充满欢乐的游戏，最后选定了调色板
静态的调色板与稍显孤寂的雪景相照应，而移动的酒罐又给这静态的页面带来温度

抽签的动画

想起各个抽签页面的抽签效果，朴实的同时稍显华丽
但是目前的技术还做不出绚丽的3D动画，最终选择了平滑的旋转效果

后续规划

继续完善游戏的集合，不同的游戏配合着不同的背景

增添登录效果，以及引入未成年人不得长时间游玩的规定

落地弹幕由于随机数的原因极大概率出现重叠又重叠，以及有部分地方出现大面积空缺
后续将完善弹幕的落地效果和展示效果

整体总结

实际的规划网站让我看见了自己技术上的大面空白以及应用能力，但是也让我看见自己的底子和前行方向
3d的动画效果虽不显突兀，但是自己加入时强烈感觉不合，却又无可奈何，无法实现单独元素的动画效果
制作时间虽不长，利用了五天的时间从无到有，除去灵感的寻找，有过多的时间花在代码的编写与查询以及排版

虽然问题逐渐暴露，但是也让我对自己有着清晰的认知，以及对html、css的领悟和熟悉程度
路漫漫其修远兮，吾将上下而求索