CANVAS 随机生成代码圈圈小游戏

使用鼠标在画布上点击拖拉生成一个圆圈，圆圈中包含随机代码字符串，碰撞后会掉落。

CANVAS, game

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4278
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

myTexts = ["I PLAY", "WITH", "CODE"];
myTextIncrement = 0;
myColors = ["#DEDEDE", "#5783FC", "#DEDEDE"];
myColorIncrement = 0;

canvas.style.cursor = "crosshair";

initDraw(document.getElementById('canvas'));

var mouse = {
        x: 0,
        y: 0,
        startX: 0,
        startY: 0
    };
    var element = null;

canvas.onmousemove = function(e) {
        setMousePosition(e);
        if (element !== null) {
            element.style.width = Math.abs(mouse.x - mouse.startX) * 2 + 'px';
            element.style.height = Math.abs(mouse.y - mouse.startY) * 2 + 'px';
            element.style.lineHeight = element.style.height
            element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
            element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
        }
    }

canvas.onclick = function(e) {
        console.log("0");
        if (element !== null) {
            /*The buuble is made*/

element.style.borderColor = "white";
            element.className = 'rectangle fly'
            element = null;
            console.log("finsihed.");

} else {
            console.log("begun.");
            mouse.startX = mouse.x;
            mouse.startY = mouse.y;
            element = document.createElement('div');
            element.className = 'rectangle'
            element.style.left = mouse.x + 'px';
            element.style.top = mouse.y + 'px';
            element.textContent = myTexts[myTextIncrement];
            element.style.color = myColors[myTextIncrement];
            myTextIncrement = (myTextIncrement + 1) % 3;

canvas.appendChild(element)

}
    }
}

编译

CSS

html,
body {
    width: 99%;
    height: 99%;
    background: #1d1d1d;
    font-family: 'Lato', sans-serif;
}
#canvas {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid white;
}
.rectangle {
    border-width: 5px;
    border-style: dotted;
    /* dashed ? */
    
    border-color: #5783FC;
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    font-size: 2.5em;
    overflow: hidden;
}
.fly {
    -webkit-animation: moveup 5s linear forwards, sideWays 2s ease-in-out 4 alternate;
    -moz-animation: moveup 5s linear forwards, sideWays 2s ease-in-out 4 alternate;
    -o-animation: moveup 5s linear forwards, sideWays 2s ease-in-out 4 alternate;
}
@-webkit-keyframes moveup {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
    }
    1% {
        transform: translate(-49%, -50%) scale(1.2);
    }
    2% {
        transform: translate(-48%, -50%) scale(0.9);
    }
    3% {
        transform: translate(-50%, -50%) scale(1.0);
    }
    80% {
        top: 20%;
        transform: translate(-50%, -50%) scale(1.0);
    }
    81% {
        transform: translate(-49%, -50%) scale(1.6);
        border-color: #DEDEDE;
    }
    82% {
        top: 20%;
        transform: translate(-48%, -50%) scale(0.9);
        border-color: transparent;
    }
    99.99% {
        opacity: 1;
        top: 110%;
        transform: translate(-50%, -50%) rotate(90deg);
        border-color: transparent;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes sideWays {
    0% {
        margin-left: 0px;
    }
    100% {
        margin-left: 100px;
    }
}

HTML

使用鼠标在画布上点击拖拉生成一个圆圈，圆圈中包含随机代码字符串，碰撞后会掉落。

CANVAS, game

编辑器支持Emmet

快捷键

使用鼠标在画布上点击拖拉生成一个圆圈，圆圈中包含随机代码字符串，碰撞后会掉落。

CANVAS, game

CANVAS 随机产生碎玻璃块动画

HTML5 CANVAS 重力（粒子引力）小游戏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：