网页编程（小猴编程）

taozhenJ

已于 2024-06-22 08:48:56 修改

阅读量244

点赞数 8

文章标签： html5 开发语言

于 2024-06-22 08:42:57 首次发布

本文链接：https://blog.csdn.net/taozhenJ/article/details/139873869

版权

圈圈复圈圈

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>star</title>
<script type="text/javascript">
window.onload = function () {
C = Math.cos; // cache Math objects
S = Math.sin;
U = 0;
w = window;
j = document;
d = j.getElementById("c");
c = d.getContext("2d");
W = d.width = w.innerWidth;
H = d.height = w.innerHeight;
c.fillRect(0, 0, W, H); // resize <canvas> and draw black rect (default)
c.globalCompositeOperation = "lighter";  // switch to additive color application
c.lineWidth = 0.2;
c.lineCap = "round";
var bool = 0, 
t = 0; // theta
d.onmousemove = function (e) {
if(window.T) {
if(D==9) { D=Math.random()*15; f(1); }
clearTimeout(T);
}
X = e.pageX; // grab mouse pixel coords
Y = e.pageY;
a=0; // previous coord.x
b=0; // previous coord.y 
A = X, // original coord.x
B = Y; // original coord.y
R=(e.pageX/W * 999>>0)/999;
r=(e.pageY/H * 999>>0)/999;
U=e.pageX/H * 360 >>0;
D=9;
g = 360 * Math.PI / 180;
T = setInterval(f = function (e) { // start looping spectrum
c.save();
c.globalCompositeOperation = "source-over"; // switch to additive color application
if(e!=1) {
c.fillStyle = "rgba(0,0,0,0.02)";
c.fillRect(0, 0, W, H); // resize <canvas> and draw black rect (default)
}
c.restore();
i = 25; while(i --) {
c.beginPath();
if(D > 450 || bool) { // decrease diameter
if(!bool) { // has hit maximum
bool = 1;
}
if(D < 0.1) { // has hit minimum
bool = 0;
}
t -= g; // decrease theta
D -= 0.1; // decrease size
}
if(!bool) {
t += g; // increase theta
D += 0.1; // increase size
}
q = (R / r - 1) * t; // create hypotrochoid from current mouse position, and setup variables (see: http://en.wikipedia.org/wiki/Hypotrochoid)
x = (R - r) * C(t) + D * C(q) + (A + (X - A) * (i / 25)) + (r - R); // center on xy coords
y = (R - r) * S(t) - D * S(q) + (B + (Y - B) * (i / 25));
if (a) { // draw once two points are set
c.moveTo(a, b);
c.lineTo(x, y)
}
c.strokeStyle = "hsla(" + (U % 360) + ",100%,50%,0.75)"; // draw rainbow hypotrochoid
c.stroke();
a = x; // set previous coord.x
b = y; // set previous coord.y
}
U -= 0.5; // increment hue
A = X; // set original coord.x
B = Y; // set original coord.y
}, 16);
}
j.onkeydown = function(e) { a=b=0; R += 0.05 }
d.onmousemove({pageX:300, pageY:290})
}


</script>
</head>

<body style="margin:0px;padding:0px;width:100%;height:100%;overflow:hidden;">
<canvas id="c"></canvas>
</body>
</html>

放烟花

<!DOCTYPE html>
<html lang="en" >

<head>

    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-title" content="CodePen">

    <title>2024新年快乐（午夜放映，点击观看烟花）</title>
    <link rel="stylesheet" href="css/style.css">



    <style>
        html, body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: #000;
            font-family: Montserrat, sans-serif;
            background-image: url(img/pexels-photo-219692.jpeg);
            background-size: cover;
            background-position: center;
        }

        canvas {
            mix-blend-mode: lighten;
            cursor: pointer;
        }

        #hero {
            display: inline;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            mix-blend-mode: color-dodge;
        }

        #year {
            font-size: 30vw;
            color: #d0d0d0;
            font-weight: bold;
        }

        #timeleft {
            color: #fbfbfb;
            font-size: 2.5vw;
            text-align: center;
            font-family: Lora, serif;
        }
    </style>

    <script>
        window.console = window.console || function(t) {};
    </script>



    <script>
        if (document.location.search.match(/type=embed/gi)) {
            window.parent.postMessage("resize", "*");
        }
    </script>


</head>

<body translate="no" >
<div id="hero">
    <div id="year">2022</div>
    <div id="timeleft"></div>
</div>
<script src="js/style.js"></script>

<script src='js/eevREZ.js'></script>
<script id="rendered-js" >
    const canvas = document.createElement('canvas'),
        context = canvas.getContext('2d'),
        width = canvas.width = window.innerWidth,
        height = canvas.height = window.innerHeight,
        HalfPI = Math.PI / 2,
        gravity = vector.create(0, 0.35),
        year = document.getElementById('year'),
        timeleft = document.getElementById('timeleft'),
        newyear = new Date('01/01/2020');

    let objects = [],
        startFireworks = false,
        newYearAlready = false;

    function renderTimeLeft() {
        let date = new Date();

        let delta = Math.abs(newyear - date) / 1000;

        let hours = Math.floor(delta / 3600) % 24;
        delta -= hours * 3600;

        let minutes = Math.floor(delta / 60) % 60;
        delta -= minutes * 60;

        let seconds = Math.floor(delta % 60) + 1;

        let string = '';

        let DaysLeft = Math.floor((newyear - date) / (1000 * 60 * 60 * 24)),
            HoursLeft = `${hours} ${hours > 1 ? 'hours' : 'hour'}`,
            MinutesLeft = `${minutes} ${minutes > 1 ? 'minutes' : 'minute'}`,
            SecondsLeft = `${seconds} ${seconds > 1 ? 'seconds' : 'second'}`;

        if (hours > 0) string = `${HoursLeft} &amp; ${MinutesLeft}`;else
        if (minutes > 0) string = `${MinutesLeft} &amp; ${SecondsLeft}`;else
            string = `${SecondsLeft}`;

        if (DaysLeft > 0) string = DaysLeft + ' days, ' + string;
        string += ' until 2020';

        timeleft.innerHTML = string;
    }

    renderTimeLeft();

    setInterval(function () {
        let date = new Date();
        if (date >= newyear) {
            if (!newYearAlready) {
                year.innerHTML = '2022';
                startFireworks = true;
                timeleft.innerHTML = 'Happy New Year!';
            }

            newYearAlready = true;
        } else renderTimeLeft();
    }, 500);


    document.body.appendChild(canvas);

    function random255() {
        return Math.floor(Math.random() * 100 + 155);
    }

    function randomColor() {
        let r = random255(),
            g = random255(),
            b = random255();
        return `rgb(${r}, ${g}, ${b})`;
    }

    class PhysicsBody {
        constructor() {
            objects.push(this);
        }
        PhysicsUpdate() {
            this.lastPosition = this.position.duplicate();
            this.position.addTo(this.velocity);
            this.velocity.addTo(gravity);
        }
        deleteObject() {
            objects[objects.indexOf(this)] = undefined;
        }}


    class firework extends PhysicsBody {
        constructor() {
            super();
            this.position = vector.create(Math.random() * width, height);

            let Velocity = vector.create(0, 0);
            Velocity.setLength(Math.random() * 10 + 15);
            Velocity.setAngle(Math.PI * 1.35 + Math.random() * Math.PI * 0.30);
            this.velocity = Velocity;

            this.trail = Math.floor(Math.random() * 4) != 1;
            this.trailColor = this.trail ? randomColor() : undefined;
            this.trailWidth = 2;

            this.TimeCreated = new Date().getTime();
            this.TimeExpired = this.TimeCreated + (Math.random() * 5 + 7) * 100;

            this.BlastParticleCount = Math.floor(Math.random() * 50) + 25;
            this.funky = Math.floor(Math.random() * 5) == 1;

            this.exposionColor = randomColor();
        }

        draw() {
            context.strokeStyle = this.trailColor;
            context.lineWidth = this.trailWidth;

            let p = this.position,
                lp = this.lastPosition;

            context.beginPath();
            context.moveTo(lp.getX(), lp.getY());
            context.lineTo(p.getX(), p.getY());
            context.stroke();
        }

        funkyfire() {
            var funky = this.funky;
            for (var i = 0; i < Math.floor(Math.random() * 10); i++) {
                new BlastParticle({ firework: this, funky });
            }
        }

        explode() {
            var funky = this.funky;
            for (var i = 0; i < this.BlastParticleCount; i++) {
                new BlastParticle({ firework: this, funky });
            }
            this.deleteObject();
        }

        checkExpire() {
            let now = new Date().getTime();
            if (now >= this.TimeExpired) this.explode();
        }

        render() {
            if (this.trail) this.draw();
            if (this.funky) this.funkyfire();
            this.checkExpire();
        }}


    class BlastParticle extends PhysicsBody {
        constructor({ firework, funky }) {
            super();
            this.position = firework.position.duplicate();

            let Velocity = vector.create(0, 0);
            if (!this.funky) {
                Velocity.setLength(Math.random() * 6 + 2);
                Velocity.setAngle(Math.random() * Math.PI * 2);
            } else {
                Velocity.setLength(Math.random() * 3 + 1);
                Velocity.setAngle(firework.getAngle + Math.PI / 2 - Math.PI * 0.25 + Math.PI * .5);
            }

            this.velocity = Velocity;

            this.color = firework.exposionColor;

            this.particleSize = Math.random() * 4;

            this.TimeCreated = new Date().getTime();
            this.TimeExpired = this.TimeCreated + (Math.random() * 4 + 3.5) * 100;
        }

        draw() {
            context.strokeStyle = this.color;
            context.lineWidth = this.particleSize;
            let p = this.position,
                lp = this.lastPosition;

            context.beginPath();
            context.moveTo(lp.getX(), lp.getY());
            context.lineTo(p.getX(), p.getY());
            context.stroke();
        }

        checkExpire() {
            let now = new Date().getTime();
            if (now >= this.TimeExpired) this.deleteObject();
        }

        render() {
            this.draw();
            this.checkExpire();
        }}


    document.body.addEventListener('mousedown', function (e) {
        let color = randomColor();
        for (var i = 0; i < Math.floor(Math.random() * 20) + 25; i++) {
            new BlastParticle({
                firework: {
                    position: vector.create(e.pageX, e.pageY),
                    velocity: vector.create(0, 0),
                    exposionColor: color },

                funky: false });

        }
    });

    setInterval(function () {
        if (!startFireworks) return;
        for (var i = 0; i < Math.floor(Math.random() * 4); i++) {
            new firework();
        }
    }, 500);

    function cleanupObjects() {
        objects = objects.filter(o => o != undefined);
    }

    function loop() {
        context.fillStyle = 'rgba(0,0,0,0.085)';
        context.fillRect(0, 0, width, height);

        let unusedObjectCount = 0;
        objects.map(o => {
            if (!o) {unusedObjectCount++;return;}
            o.PhysicsUpdate();
            o.render();
        });
        if (unusedObjectCount > 100) cleanupObjects();

        requestAnimationFrame(loop);
    }

    loop();
    //# sourceURL=pen.js
</script>



</body>

</html>

卡牌大对决

欢迎来到卡牌对决！
你可以创建自己的卡牌，组成牌库，和其他人进行 1v1 对决。

1）设置左侧的数据，创建卡牌，构建卡牌库。

2）点击开始游戏。
3）开始对决！

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="http://bcy-xiaohoucodeh5.oss-cn-zhangjiakou.aliyuncs.com/packages/dataPost/index.js"></script>
        <title>水、火、草属性卡牌</title>
        <script src="http://bcy-xiaohoucodeh5.oss-cn-zhangjiakou.aliyuncs.com/stage4/class4/packages/utils/fetchUtil.js"></script>
        <script src="http://bcy-xiaohoucodeh5.oss-cn-zhangjiakou.aliyuncs.com/stage4/class4/src/js/formAxios.js"></script>
        <link rel="stylesheet" href="http://bcy-xiaohoucodeh5.oss-cn-zhangjiakou.aliyuncs.com/stage4/class4/src/style/common.css" />
        <link rel="stylesheet" href="http://bcy-xiaohoucodeh5.oss-cn-zhangjiakou.aliyuncs.com/stage4/class4/src/style/index.css" />
        <link rel="stylesheet" href="http://bcy-xiaohoucodeh5.oss-cn-zhangjiakou.aliyuncs.com/stage4/class4/src/style/4.css" />
        <script src="http://bcy-xiaohoucodeh5.oss-cn-zhangjiakou.aliyuncs.com/stage4/class4/src/js/first.js"></script>
    </head>
    <body>
        <form action="create_card">
            卡牌名字
            <input name="name" required />
            <br />
            卡牌等级
            <input type="number" name="level" min="1" max="100" />

            <br />
            属性系
            <select name="type">
                <option value="草">草</option>
                <option value="水">水</option>
                <option value="火">火</option>
            </select>
            （<span style="color: green">草</span> 克制 <span style="color: blue">水</span> 克制 <span style="color: red">火</span>）
            <br />
            卡牌图片:
            <input name="image" placeholder="（http 开头的网络图片）" />
            <br />
            <button>创建卡牌</button>
        </form>
        <button id="start-game">开始游戏</button>
        <div class="card-container player-card-collection"></div>
    </body>
    <script src="http://bcy-xiaohoucodeh5.oss-cn-zhangjiakou.aliyuncs.com/stage4/class4/src/js/last.js"></script>
    <script src="http://bcy-xiaohoucodeh5.oss-cn-zhangjiakou.aliyuncs.com/stage4/class4/src/js/30.js"></script>
</html>