螺旋效果

最新推荐文章于 2023-07-07 12:00:00 发布

Anwhere_jin

最新推荐文章于 2023-07-07 12:00:00 发布

阅读量1k

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/Anwhere_jin/article/details/51822070

版权

本文详细介绍了如何使用CSS和JavaScript实现一个引人注目的3D螺旋动画效果，包括关键帧动画、变换属性和事件交互的运用。

摘要由CSDN通过智能技术生成

这里写图片描述

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>.</title>
</head>
<style type="text/css">
    #stage{
        display:block;
        float:left;
        width:400px;
        height:300px;
        box-shadow:
            -2px -2px 4px rgba(0, 0, 0, 0.3),
            2px 2px 4px rgba(0, 0, 0, 0.6);
    }
    #hitck{
        display:block;
        float:left;
        width:400px;
        height:300px;
        box-shadow:
            -2px -2px 4px rgba(0, 0, 0, 0.3),
            2px 2px 4px rgba(0, 0, 0, 0.6);
    }
    #plane{
        display:block;
        float:left;
        width:48px;
        height:48px;
        box-shadow:
            -2px -2px 4px rgba(0, 0, 0, 0.3),
            2px 2px 4px rgba(0, 0, 0, 0.6);
    }
    #ammo{
        display:block;
        float:left;
        width:12px;
        height:12px;
        box-shadow:
            -2px -2px 4px rgba(0, 0, 0, 0.3),
            2px 2px 4px rgba(0, 0, 0, 0.6);
    }
</style>
<body>
    <canvas id="stage"></canvas>
    <canvas id="hitck"></canvas>
    <canvas id="plane"></canvas>
    <canvas id="ammo"></canvas>
</body>
<script type="text/javascript">

/*
 * 碰撞检测 & 弹幕实例
 * lxrmido@lxrmido.com
 * 2013-8-26  
 */

    /**
     * 键盘状态
     * @type {Object}
     */
    var Keyboard = {
        UP    : 87,
        DOWN  : 83,
        LEFT  : 65,
        RIGHT : 68,

        up    : false,
        down  : false,
        left  : false,
        right : false
    }

    /**
     * 鼠标状态
     * @type {Object}
     */
    var Mouse = {
        downX : 0,
        downY : 0
    }

    /**
     * 游戏状态
     * @type {Object}
     */
    var Game = {
        playing : true
    }

    /**
     * 工具库
     * @type {Object}
     */
    var Util = {
        /**
         * 是否在画板范围内
         * @param  {canvas}   canvas 
         * @param  {float}    x      
         * @param  {float}    y      
         * @return {bool}     
         */
        canvasInScope : function(canvas, x, y){
            x = x || Mouse.downX;
            y = y || Mouse.downY;
            return (
                x > canvas.offsetLeft && 
                x < canvas.offsetLeft + canvas.clientWidth &&
                y > canvas.offsetTop &&
                y < canvas.offsetTop + canvas.clientHeight
            );
        },
        /**
         * 位置在画板上的坐标偏移
         * @param  {canvas} canvas 
         * @param  {float}  x      
         * @param  {float}  y      
         * @return {Vect}        
         */
        offsetOnCanvas : function(canvas, x, y){
            x = x || Mouse.downX;
            y = y || Mouse.downY;
            var ratioX = canvas.width  / canvas.clientWidth;
            var ratioY = canvas.height / canvas.clientHeight;
            var offsetX = (x - canvas.offsetLeft) * ratioX;
            var offsetY = (y - canvas.offsetTop)  * ratioY;
            return new Vect(offsetX, offsetY);
        }
    }

    /**
     * 自机
     * @type {Object}
     */
    var plane = {
        x : 0,
        y : 0,

        speed : 2,

        map_data : []
    }

    /**
     * 绘制队列
     * @type {Object}
     */
    var Queue = {
        ammo : [],
        initAmmo : function(maxAmmoCount){
            maxAmmoCount = maxAmmoCount || 512;
            for(var i = 0; i < maxAmmoCount; i ++){
                Queue.ammo[i] = null;
            }
        },
        init : function(){
            Queue.initAmmo();
        }
    }
    Queue.init();

    /**
     * 碰撞检测矩阵
     * @type {Object}
     */
    var Matrix = {

最低0.47元/天解锁文章

Anwhere_jin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
螺旋效果

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>.</title></head><style type="text/css"> #stage{ display:block; float:left; width:400px;
复制链接

扫一扫