登录页面及账号密码验证
开篇（请大家看完）：此网站写给挚爱，后续页面还会慢慢更新，大家敬请期待~ ~ ~
此前端框架，主要侧重于前端页面的视觉效果和交互体验。通过运用各种前端技术和创意，精心打造了一系列引人入胜的页面特效，会为大家带来全新的浏览体验。
同时，我非常支持和鼓励大家对这个框架进行二次创作或修改。您可以根据自己的需求和喜好，对框架进行个性化的定制和扩展，以打造出更符合自己品味的页面效果。
但请注意，如果您打算将这个框架转发给其他人或用于其他场合，请务必注明原创来源。让我们一起维护一个良好的创作环境。
最后，轻舟会继续更新和完善这个前端页面特效框架，为大家带来更多有趣、实用的功能和效果。感谢您的支持和关注！
页面效果：页面背景动态是烟花和文字特效与缓缓下落的雪花相结合，在登录表单的旁边还有五个白色光圈以不规则的方式环绕，当鼠标靠近时，会发出彩色的光芒
一：index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>111</title>
<link rel="stylesheet" href="CSS/style.css">
<script>
function valid() {
var pwd1 = document.getElementById("pwd").value;
var pwd2 ="20240621";
var acc1 = document.getElementById("acc").value;
var acc2 = "wenqingzhou";
if(pwd1 == pwd2&&acc2==acc1)
{
document.location.href = "caidan.html";
document.getElementById("tishi").innerHTML = "<font color='green'>登陆成功</font>";
document.getElementById("submit").disabled = false;
}
else {
document.getElementById("tishi").innerHTML = "<font color='red'>登录失败</font>";
document.getElementById("submit").disabled = true;
}
}
</script>
</head>
<body>
<script src="JS/game.js"></script>
<script src="JS/script2.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
</script>
<canvas width="1777" height="841" style="
position: fixed;
left: 0px;
top: 0px;
z-index: 2147483647;
pointer-events: none;
"></canvas>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" />
<meting-js id="2829883282" lrc-type="0" server="netease" order="random" type="playlist" fixed="true" autoplay="false"
list-olded="true">
</meting-js>
<!-- 随机线条 -->
<script>
!(function () {
function n(n, e, t) {
return n.getAttribute(e) || t;
}
function e(n) {
return document.getElementsByTagName(n);
}
function t() {
var t = e("script"),
o = t.length,
i = t[o - 1];
return {
l: o,
z: n(i, "zIndex", -1),
o: n(i, "opacity", 0.6),
c: n(i, "color", "148,0,211"),
n: n(i, "count", 99),
};
}
function o() {
(a = m.width =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth),
(c = m.height =
window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight);
}
function i() {
r.clearRect(0, 0, a, c);
var n, e, t, o, m, l;
s.forEach(function (i, x) {
for (
i.x += i.xa,
i.y += i.ya,
i.xa *= i.x > a || i.x < 0 ? -1 : 1,
i.ya *= i.y > c || i.y < 0 ? -1 : 1,
r.fillRect(i.x - 0.5, i.y - 0.5, 1, 1),
e = x + 1;
e < u.length;
e++
)
(n = u[e]),
null !== n.x &&
null !== n.y &&
((o = i.x - n.x),
(m = i.y - n.y),
(l = o * o + m * m),
l < n.max &&
(n === y &&
l >= n.max / 2 &&
((i.x -= 0.03 * o), (i.y -= 0.03 * m)),
(t = (n.max - l) / n.max),
r.beginPath(),
(r.lineWidth = t / 2),
(r.strokeStyle = "rgba(" + d.c + "," + (t + 0.2) + ")"),
r.moveTo(i.x, i.y),
r.lineTo(n.x, n.y),
r.stroke()));
}),
x(i);
}
var a,
c,
u,
m = document.createElement("canvas"),
d = t(),
l = "c_n" + d.l,
r = m.getContext("2d"),
x =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (n) {
window.setTimeout(n, 1e3 / 45);
},
w = Math.random,
y = {
x: null, y: null, max: 2e4 };
(m.id = l),
(m.style.cssText =
"position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o),
e("body")[0].appendChild(m),
o(),
(window.onresize = o),
(window.onmousemove = function (n) {
(n = n || window.event), (y.x = n.clientX), (y.y = n.clientY);
}),
(window.onmouseout = function () {
(y.x = null), (y.y = null);
});
for (var s = [], f = 0; d.n > f; f++) {
var h = w() * a,
g = w() * c,
v = 2 * w() - 1,
p = 2 * w() - 1;
s.push({
x: h, y: g, xa: v, ya: p, max: 6e3 });
}
(u = s.concat([y])),
setTimeout(function () {
i();
}, 100);
})();
</script>
<!-- 雪花特效 -->
<script type="text/javascript">
(function ($) {
$.fn.snow = function (options) {
var $flake = $('<div id="snowbox" />')
.css({
position: "absolute", "z-index": "9999", top: "-50px" })
.html("❄"),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize: 10,
maxSize: 20,
newOn: 1000,
flakeColor:
"#FFFFFF",
},
options = $.extend({
}, defaults, options);
var interval = setInterval(function () {
var startPositionLeft = Math.random() * documentWidth - 100,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionTop = documentHeight - 200,
endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
durationFall = documentHeight * 10 + Math.random() * 5000;
$flake
.clone()
.appendTo("body")
.css({
left: startPositionLeft,
opacity: startOpacity,
"font-size": sizeFlake,
color: options.flakeColor,
})
.animate(
{
top: endPositionTop,
left: endPositionLeft,
opacity: 0.2,
},
durationFall,
"linear",
function () {
$(this).remove();
}
);
}, options.newOn);
};
})(jQuery);
$(function () {
$.fn.snow({
minSize: 5
maxSize: 80
newOn: 170
});
});
</script>
<div class="ring">
<i style="--clr:#3beab2;"></i>
<i style="--clr:#00ccff;"></i>
<i style="--clr:#2f61d5;"></i>
<i style="--clr:#3e22bf;"></i>
<i style="--clr:#0d39e2;"></i>
<div class="login">
<h2>常"温"</h2>
<div class="inputBx">
<input type="text" class="from_1" name="acc" id="acc" placeholder="用户名">
</div>
<div class="inputBx">
<input type="password" class="from_1" name="pwd" id="pwd" placeholder="密码">
</div>
<div class="inputBx">
<input type="submit" value="登录" onclick="valid()">
<p id="tishi"></p>
</div>
<div class="links">
<a href="caidan.html">忘记密码</a>
</div>
</div>
</div>
</body>
</html>
二：CSS文件包
（1）style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Quicksand", sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #111;
width: 100%;
overflow: hidden;
}
.ring {
position: relative;
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
.ring i {
position: absolute;
inset: 0;
border: 2px solid #f5f4f4;
transition: 0.5s;
}
.ring i:nth-child(1) {
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
animation: animate 6s linear infinite;
}
.ring i:nth-child(2) {
border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
animation: animate 4s linear infinite;
}
.ring i:nth-child(3) {
border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
animation: animate2 10s linear infinite;
}
.ring i:nth-child(4) {
border-radius: 44% 47% 73% 50%/33% 52% 64% 30%;
animation: animate2 3s linear infinite;
}
.ring i:nth-child(5) {
border-radius: 50% 40% 30% 35%/40% 47% 50% 41%;
animation: animate2 1s linear infinite;
}
.ring:hover i {
border: 6px solid var(--clr);
filter: drop-shadow(0 0 20px var(--clr));
}
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes animate2 {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
.login {
position: absolute;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 20px;
}
.login h2 {
font-size: 2em;
color: #fff;
}
.login .inputBx {
position: relative;
width: 100%;
}
.login .inputBx input {
position: relative;
width: 100%;
padding: 12px 20px;
background: transparent;
border: 2px solid #fff;
border-radius: 40px;
font-size: 1.2em;
color: #fff;
box-shadow: none;
outline: none;
}
.login .inputBx input[type="submit"] {
width: 100%;
background: #0078ff;
background: linear-gradient(45deg, #35ffee, #fff172);
border: none;
cursor: pointer;
}
.login .inputBx input::placeholder {
color: rgba(255, 255, 255, 0.75);
}
.login .links {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
font-family: "新宋体";
font-weight: bold;
font-style: italic;
}
.login .links a {
}
a:link{
color:blue;
}
a:hover{
color: red;
}
三：JS文件包
（1）game.js
function GameCanvas(settings) {
let top = this;
this.functions = [];
this.keys = [];
this.images = [];
this.spheres = [];
this.font = "Arial";
this.imageData = undefined;
this.imageDataData = undefined;
this.lastLoop = performance.now();
this.calculateFPS = true;
this.fps = -1;
this.deltaTime = 1;
let mouseLookupTable = [
"left",
"middle",
"right"
];
this.contextMenuDisabled = false;
this.disableScrollOnMobile = false;
this.eventFunctions = {
"mousedown": typeof OnMouseDown !== "undefined",
"mouseup": typeof OnMouseUp !== "undefined",
"mousemove": typeof OnMouseMove !== "undefined",
"contextmenu": typeof OnContextMenu !== "undefined",
"touchstart": typeof OnTouchStart !== "undefined",
"touchend": typeof OnTouchEnd !== "undefined",
"touchmove": typeof OnTouchMove !== "undefined",
};
this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
this.createCanvas = function () {
let canvas = document.createElement("canvas");
document.body.appendChild(canvas);
return canvas;
}
this.setSize = function (width, height) {
if (top.canvas) {
top.canvas.width = top.width = width;
top.canvas.height = top.height = height;
window.width = this.width;
window.height = this.height;
}
else {
console.error("There is no canvas!");
}
}
this.fillPageWithCanvas = function () {
top.canvas.style.position = "fixed";
top.canvas.style.top = "0px";
top.canvas.style.left = "0px";
top.setSize(window.innerWidth, window.innerHeight);
top.disableScrollOnMobile = true;
top.contextMenuDisabled = true;
this.updateSizeOnResize = true;
}
this.requestFullscreen = function () {
if (top.canvas.requestFullscreen)
top.canvas.requestFullscreen();
else if (top.canvas.mozRequestFullScreen)
top.canvas.mozRequestFullScreen();
else if (top.canvas.webkitRequestFullscreen)
top.canvas.webkitRequestFullscreen();
else if (top.canvas.msRequestFullscreen)
top.canvas.msRequestFullscreen();
}
this.exitFullscreen = function () {
if (document.exitFullscreen)
document.exitFullscreen();
else if (document.mozCancelFullScreen)
document.mozCancelFullScreen();
else if (document.webkitExitFullscreen)
document.webkitExitFullscreen();
else if (document.msExitFullscreen)
document.msExitFullscreen();
}
this.lockPointer = function () {
top.canvas.requestPointerLock = top.canvas.requestPointerLock || top.canvas.mozRequestPointerLock;
top.canvas.requestPointerLock();
}
this.unlockPointer = function () {
document.exitPointerLock = document.exitPointerLock || document.mozExitPointerLock;
document.exitPointerLock();
}
this.disableContextMenu = function () {
top.contextMenuDisabled = true;
}
this.enableContextMenu = function () {
top.contextMenuDisabled = false;
}
this.key = function (key) {
return top.keys[key];
}
this.update = function () {
if (top.calculateFPS) {
var thisLoop = performance.now();
top.fps = 1000 / (thisLoop - top.lastLoop);
top.deltaTime = 60 / top.fps;
top.lastLoop = thisLoop;
if (top.globalFunctions) {
window.fps = top.fps;
window.deltaTime = top.deltaTime;
}
}
top.mouse.movementX = 0;
top.mouse.movementY = 0;
top.mouse.lastX = top.mouse.x;
top.mouse.lastY = top.mouse.y;
}
this.clearScreen = function () {
top.ctx.clearRect(0, 0, top.width, top.height);
}
this.background = function (color) {
top.ctx.fillStyle = color;
top.ctx.fillRect(0, 0, top.width, top.height);
}
this.circle = function (x, y, radius, color, strokeColor, lineWidth) {
top.ctx.beginPath();
top.ctx.arc(x, y, radius, 0, Math.PI * 2);
top.ctx.fillStyle = color;
if (strokeColor) top.ctx.strokeStyle = strokeColor;
if (lineWidth) top.ctx.lineWidth = lineWidth;
top.ctx.fill();
if (strokeColor) top.ctx.stroke();
}
this.ring = function (x, y, radius, color, lineWidth) {
top.ctx.beginPath();
top.ctx.arc(x, y, radius, 0, Math.PI * 2);
top.ctx.strokeStyle = color;
if (lineWidth) top.ctx.lineWidth = lineWidth;
top.ctx.stroke();
}
this.ellipse = function (x, y, radiusX, radiusY, color, rotation = 0, strokeColor, lineWidth) {
top.ctx.beginPath();
top.ctx.ellipse(x, y, radiusX, radiusY, rotation, 0, Math.PI * 2);
top.ctx.fillStyle = color;
if (strokeColor) top.ctx.strokeStyle = strokeColor;
if (lineWidth) top.ctx.lineWidth = lineWidth;
top.ctx.fill();
if (strokeColor) top.ctx.stroke();
}
this.rectangle = function (x, y, width, height, color, strokeColor, lineWidth) {
top.ctx.fillStyle = color;
if (lineWidth) top.ctx.lineWidth = lineWidth;
if (strokeColor) {
top.ctx.beginPath();
top.ctx.strokeStyle = strokeColor;
top.ctx.rect(x, y, width, height);
top.ctx.fill();
top.ctx.stroke();
}
else
top.ctx.fillRect(x, y, width, height);
}
this.triangle = function (x1, y1, x2, y2, x3, y3, color, strokeColor, lineWidth) {
top.ctx.beginPath();
top.ctx.moveTo(x1, y1);
top.ctx.lineTo(x2, y2);
top.ctx.lineTo(x3, y3);
top.ctx.closePath();
top.ctx.fillStyle = color;
if (lineWidth) top.ctx.lineWidth = lineWidth;
top.ctx.fill();
if (strokeColor) {
top.ctx.strokeStyle = strokeColor;
top.ctx.stroke();
}
}
this.setLineCap = function (lineCap) {
top.ctx.lineCap = lineCap;
}
this.resetLineCap = function () {
top.ctx.lineCap = "butt";
}
this.line = function (x1, y1, x2, y2, strokeWeight, color) {
top.ctx.beginPath();
top.ctx.moveTo(x1, y1);
top.ctx.lineTo(x2, y2);
if (color) top.ctx.strokeStyle = color;
if (strokeWeight) top.ctx.lineWidth = strokeWeight;
top.ctx.stroke();
}
this.picture = function (url, x, y, width, height) {
var imageElement = top.images[url];
if (!imageElement) {
var img = new Image();
img.src = url;
img.onload = function () {
top.ctx.drawImage(img, x, y, width, height);
}
top.images[url] = img;
}
else if (imageElement.complete) {
top.ctx.drawImage(imageElement, x, y, width, height);
}
}
this.setFont = function (font) {
top.font = font;
}
this.setTextAlign = function (align) {
top.ctx.textAlign = align;
}
this.setTextXAlign = function (align) {
top.ctx.textAlign = align;
}
this.setTextYAlign = function (align) {
top.ctx.textBaseline = align;
}
this.resetTextXAlign = function () {
top.ctx.textAlign = "left";
}
this.resetTextYAlign = function () {
top.ctx.textBaseline = "alphabetic";
}
this.text = function (textString, x, y, fontSize, color, strokeColor, lineWidth) {
top.ctx.beginPath();
top.ctx.font = fontSize + "px " + top.font;
top.ctx.fillStyle = color;
if (lineWidth) top.ctx.lineWidth = lineWidth;
top.ctx.fillText(textString, x, y);
if (strokeColor) {
top.ctx.strokeStyle = strokeColor;
top.ctx.strokeText(textString, x, y);
}
}
this.getPixelData = function () {
top.imageData = top.ctx.getImageData(0, 0, top.width, top.height);
top.imageDataData = top.imageData.data;
}
this.updatePixel = function (x, y, r, g, b, a = 255) {
let i = (x + y * top.width) * 4;
top.imageDataData[i] = r;
top.imageDataData[i + 1] = g;
top.imageDataData[i + 2] = b;
top.imageDataData[i + 3] = a;
}
this.updatePixelIndex = function (index, r, g, b, a = 255) {
var i = index * 4;
top.imageDataData[i] = r;
top.imageDataData[i + 1] = g;
top.imageDataData[i + 2] = b;
top.imageDataData[i + 3] = a;
}
this.getPixel = function (x, y) {
let i = (x + y * top.width) * 4;
return [
top.imageDataData[i],
top.imageDataData[i + 1],
top.imageDataData[i + 2],
top.imageDataData[i + 3]
];
}
this.getPixelIndex = function (index) {
let i = index * 4;
return [
top.imageDataData[i],
top.imageDataData[i + 1],
top.imageDataData[i + 2],
top.imageDataData[i + 3]
];
}
this.renderPixelData = function () {
top.ctx.putImageData(top.imageData, 0, 0);
}
this.save = function () {
top.ctx.save();
}
this.restore = function () {
top.ctx.restore();
}
this.rotate = function (angle) {
top.ctx.rotate(angle);
}
this.translate = function (x, y) {
top.ctx.translate(x, y);
}
this.beginPath = function () {
top.ctx.beginPath();
}
this.closePath = function () {
top.ctx.closePath();
}
this.moveTo = function (x, y) {
top.ctx.moveTo(x, y);
}
this.lineTo = function (x, y) {
top.ctx.lineTo(x, y);
}
this.fill = function () {
top.ctx.fill();
}
this.stroke = function () {
top.ctx.stroke();
}
this.fillStyle = function (color) {
top.ctx.fillStyle = color;
}
this.strokeStyle = function (color) {
top.ctx.strokeStyle = color;
}
this.setLineWidth = function (lineWidth) {
top.ctx.lineWidth = lineWidth;
}
this.drawSphere = function (screenX, screenY, radius, color, lightDir = {
x: 0, y: 0, z: 1 }) {
var id = (screenX + screenY) * radius * (color[0] + 1) * (color[1] + 1) * (color[2] + 1) * (lightDir.x + 1) * (lightDir.y + 1) * (lightDir.z + 1);
if (top.spheres[id]) {
if (top.spheres[id].imageData)
top.ctx.putImageData(top.spheres[id].imageData, screenX - radius, screenY - radius);
else if (top.spheres[id].image)
top.ctx.drawImage(top.spheres[id].image, screenX - radius, screenY - radius);
}
else {
var imageData = top.ctx.createImageData(radius * 2, radius * 2);
for (var y = 0; y < radius * 2; y++) {
for (var x = 0; x < radius * 2; x++) {
var line = {
origin: {
x: x, y: y, z: 0 },
direction: {
x: 0, y: 0, z: 1 }
};
var o = {
position: {
x: radius, y: radius, z: radius * 2 }
}
var oc = {
x: line.origin.x - o.position.x,
y: line.origin.y - o.position.y,
z: line.origin.z - o.position.z
};
var loc = top.dot3D(line.direction, oc);
var ocLength = top.getLength(oc.x, oc.y, oc.z);
var underSqrt = loc * loc - (ocLength * ocLength - radius * radius);
if (underSqrt >= 0) {
var d = -loc - Math.sqrt(underSqrt);
if (d > 0) {
var hitPoint = {
x: line.origin.x + line.direction.x * d,
y: line.origin.y + line.direction.y * d,
z: line.origin.z + line.direction.z * d
};
var surfaceNormal = top.normalize3DVector({
x: o.position.x - hitPoint.x,
y: o.position.y - hitPoint.y,
z: o.position.z - hitPoint.z
});
var diffuse = top.dot3D(lightDir, surfaceNormal);
var index = (x + y * radius * 2) * 4;
imageData.data[index] = color[0] * diffuse;
imageData.data[index + 1] = color[1] * diffuse;
imageData.data[index + 2] = color[2] * diffuse;
imageData.data[index + 3] = 255;
}
}
}
}
if (window.createImageBitmap) {
top.spheres[id] = {
imageData: undefined, image: undefined };
createImageBitmap(imageData).then(function (imgBitmap) {
top.ctx.drawImage(imgBitmap, screenX - radius, screenY - radius);
top.spheres[id] = {
imageData: undefined, image: imgBitmap };
});
}
else {
top.ctx.putImageData(imageData, screenX - radius, screenY - radius);
top.spheres[id] = {
imageData, image: undefined };
}
}
}
this.createSound = function (url, volume = 1, startTime = 0, looping = false) {
var audio = new Audio(url);
audio.loop = looping;
audio.currentTime = startTime;
audio.volume = volume;
return {
volume,
startTime,
audio
};
}
this.playSound = function (sound) {
sound.audio.currentTime = sound.startTime;
sound.audio.volume = sound.volume;
sound.audio.play();
}
this.stopSound = function (sound) {
sound.audio.stop();
}
this.pauseSound = function (sound) {
sound.audio.pause();
}
this.backgroundMusic = function (url) {
var audio = new Audio(url);
audio.loop = true;
audio.play();
return audio;
}
this.fadeOutSound = function (sound, time = 1) {
var startVolume = sound.volume;
var count = 0;
var interv = setInterval(() => {
sound.audio.volume = (startVolume / (time * 20)) * (time * 20 - count);
count++;
if (count > time * 20) {
sound.audio.pause();
clearInterval(interv);
}
}, 50);
}
this.playTone = function (freq = 440, time = 1, volume = 1, type = "sine") {
var oscillator = top.audioContext.createOscillator();
var gainNode = top.audioContext.createGain()
gainNode.gain.value = volume;
gainNode.connect(top.audioContext.destination);
oscillator.type = type;
oscillator.frequency.value = freq;
oscillator.connect(gainNode);
oscillator.start();
setTimeout(() => {
oscillator.stop();
}, time * 1000);
}
this.DegToRad = Math.PI / 180;
this.RadToDeg = 180 / Math.PI;
this.PI = Math.PI;
this.TWO_PI = Math.PI * 2;
this.TAU = this.TWO_PI;
this.getDistanceSqr = function (x1, y1, x2, y2) {
var a = x1 - x2;
var b = y1 - y2;
return a * a + b * b;
}
this.getDistanceSqr3D = function (x1, y1, x2, y2, z1, z2) {
var a = x1 - x2;
var b = y1 - y2;
var c = z1 - z2;
return a * a + b * b + c * c;
}
this.getDistance = function (x1, y1, x2, y2) {
return Math.sqrt(top.getDistanceSqr(x1, y1, x2, y2));
}
this.getDistance3D = function (x1, y1, x2, y2, z1, z2) {
return Math.sqrt(top.getDistanceSqr3D(x1, y1, x2, y2, z1, z2));
}
this.getAngle = function (x1, y1, x2, y2) {
return Math.atan2(y2 - y1, x2 - x1);
}
this.normalize = function (x, y) {
var len = Math.sqrt(x * x + y * y);
return {
x: x / len,
y: y / len
};
}
this.normalize3D = function (x, y, z) {
var len = Math.sqrt(x * x + y * y + z * z);
return {
x: x / len,
y: y / len,
z: z / len
};
}
this.normalize3DVector = function (x) {
var len = Math.sqrt(x.x * x.x + x.y * x.y + x.z * x.z);
return {
x: x.x / len,
y: x.y / len,
z: x.z / len
};
}
this.lengthVector = function (v) {
return Math.sqrt(v.x * v.x + v.y * v.y);
}
this.length3DVector = function (v) {
return Math.sqrt(v.x * v.x + v.y * v.y + v.z * v.z);
}
this.getLength = function () {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
sum += arg * arg;
}
return Math.sqrt(sum);
}
this.dot = function (a, b) {
return a.x * b.x + a.y * b.y;
}
this.dot3D = function (a, b) {
return a.x * b.x + a.y * b.y + a.z * b.z;
}
this.crossProduct3D = function (v1, v2) {
return {
x: v1.y * v2.z - v1.z * v2.y,
y: v1.z * v2.x - v1.x * v2.z,
z: v1.x * v2.y - v1.y * v2.x
}
}
this.rectanglesIntersect = function (x1, y1, w1, h1, x2, y2, w2, h2) {
return x1 + w1 > x2 && x1 < x2 + w2 && y1 + h1 > y2 && y1 < y2 + h2;
}
this.circlesIntersect = function (x1, y1, r1, x2, y2, r2) {
return top.getDistance(x1, y1, x2, y2) < r1 + r2;
}
this.circleRectangleIntersect = function (x1, y1, r1, x2, y2, w2, h2) {
var circleDistanceX = Math.abs(x1 - (x2 + w2 / 2));
var circleDistanceY = Math.abs(y1 - (y2 + h2 / 2));
if (circleDistanceX > (w2 / 2 + r1)) return false;
if (circleDistanceY > (h2 / 2 + r1)) return false;
if (circleDistanceX <= (w2 / 2)) return true;
if (circleDistanceY <= (h2 / 2)) return true;
var a = circleDistanceX - w2 / 2;
var b = circleDistanceY - h2 / 2;
var cornerDistance_sq = a * a + b * b;
return cornerDistance_sq <= (r1 * r1);
}
this.random = function (max) {
return Math.random() * max;
}
this.randomInt = function (max) {
return Math.random() * max >> 0;
}
this.randomArray = function (array) {
return array[Math.random() * array.length >> 0];
}
this.randomColor = function (colorDepth) {
if (colorDepth) {
var colorStep = 256 / colorDepth;
var r = Math.ceil((Math.random() * 256 >> 0) / colorStep) * colorStep;
var g = Math.ceil((Math.random() * 256 >> 0) / colorStep) * colorStep;
var b = Math.ceil((Math.random() * 256 >> 0) / colorStep) * colorStep;
return "rgb(" + r + "," + g + "," + b + ")";
}
else {
return "rgb(" + (Math.random() * 256 >> 0) + "," + (Math.random() * 256 >> 0) + "," + (Math.random() * 256 >> 0) + ")";
}
}
this.create2DArray = function (w, h, value = () => 0) {
var array = new Array(w);
for (var i = 0; i < w; i++) {
array[i] = new Array(h);
for (var j = 0; j < h; j++) {
array[i][j] = value(i, j);
}
}
return array;
}
this.canvasToURL = function () {
return top.canvas.toDataURL();
}
this.canvasToImage = function () {
var img = new Image();
img.src = top.canvas.toDataURL();
return img;
}
this.saveToFile = function (filename = "canvas.png") {
var a = document.createElement("a");
a.download = filename;
a.href = top.canvas.toDataURL();
a.click();
}
this.setCookie = function (name, value, expireDays = 36500) {
let d = new Date();
d.setTime(d.getTime() + (expireDays * 24 * 60 * 60 * 1000));
let expires = "expires=" + d.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/";
}
this.getCookie = function (name) {
if (name.length == 0)
return false;
var cname = name + "=";
var split = document.cookie.split(";");
for (let i = 0; i < split.length; i++) {
let s = split[i];
var index = s.indexOf(cname);
if (index > 0) {
return s.substr(index + cname.length);
}
}
return false;
}
this.deleteCookie = function (name) {
document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/";
}
if (navigator.getBattery) {
navigator.getBattery().then(function (battery) {
battery.addEventListener('levelchange', function () {
top.batteryLevel = battery.level * 100;
});
top.batteryLevel = battery.level * 100;
});
}
this.getBatteryLevel = function () {
return top.batteryLevel;
}
this.functions = [
{
func: this.createCanvas, name: "createCanvas" },
{
func: this.setSize, name: "setSize" },
{
func: this.fillPageWithCanvas, name: "fillPageWithCanvas" },
{
func: this.requestFullscreen, name: "requestFullscreen" },
{
func: this.exitFullscreen, name: "exitFullscreen" },
{
func: this.lockPointer, name: "lockPointer" },
{
func: this.unlockPointer, name: "unlockPointer" },
{
func: this.disableContextMenu, name: "disableContextMenu" },
{
func: this.enableContextMenu, name: "enableContextMenu" },
{
func: this.key, name: "key" },
{
func: this.update, name: "update" },
{
func: this.clearScreen, name: "clearScreen" },
{
func: this.background, name: "background" },
{
func: this.circle, name: "circle" },
{
func: this.ring, name: "ring" },
{
func: this.ellipse, name: "ellipse" },
{
func: this.rectangle, name: "rectangle" },
{
func: this.triangle, name: "triangle" },
{
func: this.picture, name: "picture" },
{
func: this.setLineCap, name: "setLineCap" },
{
func: this.resetLineCap, name: "resetLineCap" },
{
func: this.line, name: "line" },
{
func: this.setFont, name: "setFont" },
{
func: this.setTextAlign, name: "setTextAlign" },
{
func: this.setTextXAlign, name: "setTextXAlign" },
{
func: this.setTextYAlign, name: "setTextYAlign" },
{
func: this.resetTextXAlign, name: "resetTextXAlign" },
{
func: this.resetTextYAlign, name: "resetTextYAlign" },
{
func: this.text, name: "text" },
{
func: this.getPixelData, name: "getPixelData" },
{
func: this.updatePixel, name: "updatePixel" },
{
func: this.updatePixelIndex, name: "updatePixelIndex" },
{
func: this.getPixel, name: "getPixel" },
{
func: this.getPixelIndex, name: "getPixelIndex" },
{
func: this.renderPixelData, name: "renderPixelData" },
{
func: this.save, name: "save" },
{
func: this.restore, name: "restore" },
{
func: this.rotate, name: "rotate" },
{
func: this.translate, name: "translate" },
{
func: this.beginPath, name: "beginPath" },
{
func: this.closePath, name: "closePath" },
{
func: this.moveTo, name: "moveTo" },
{
func: this.lineTo, name: "lineTo" },
{
func: this.fill, name: "fill" },
{
func: this.stroke, name: "stroke" },
{
func: this.fillStyle, name: "fillStyle" },
{
func: this.strokeStyle, name: "strokeStyle" },
{
func: this.setLineWidth, name: "setLineWidth" },
{
func: this.drawSphere, name: "drawSphere" },
{
func: this.createSound, name: "createSound" },
{
func: this.playSound, name: "playSound" },
{
func: this.stopSound, name: "stopSound" },
{
func: this.pauseSound, name: "pauseSound" },
{
func: this.fadeOutSound, name: "fadeOutSound" },
{
func: this.playTone, name: "playTone" },
{
func: this.getDistanceSqr, name: "getDistanceSqr" },
{
func: this.getDistance, name: "getDistance" },
{
func: this.getDistanceSqr3D, name: "getDistanceSqr3D" },
{
func: this.getDistance3D, name: "getDistance3D" },
{
func: this.getAngle, name: "getAngle" },
{
func: this.normalize, name: "normalize" },
{
func: this.normalize3D, name: "normalize3D" },
{
func: this.normalize3D, name: "normalize3DVector" },
{
func: this.getLength, name: "getLength" },
{
func: this.dot, name: "dot" },
{
func: this.dot3D, name: "dot3D" },
{
func: this.crossProduct3D, name: "crossProduct3D" },
{
func: this.lengthVector, name: "lengthVector" },
{
func: this.length3DVector, name: "length3DVector" },
{
func: this.rectanglesIntersect, name: "rectanglesIntersect" },
{
func: this.circlesIntersect, name: "circlesIntersect" },
{
func: this.circleRectangleIntersect, name: "circleRectangleIntersect" },
{
func: this.random, name: "random" },
{
func: this.randomInt, name: "randomInt" },
{
func: this.randomArray, name: "randomArray" },
{
func: this.randomColor, name: "randomColor" },
{
func: this.create2DArray, name: "create2DArray" },
{
func: this.canvasToURL, name: "canvasToURL" },
{
func: this.canvasToImage, name: "canvasToImage" },
{
func: this.saveToFile, name: "saveToFile" },
{
func: this.setCookie, name: "setCookie" },
{
func: this.getCookie, name: "getCookie" },
{
func: this.deleteCookie, name: "deleteCookie" },
{
func: this.getBatteryLevel, name: "getBatteryLevel" }
];
this.variables = [
{
variable: this.RadToDeg, name: "RadToDeg" },
{
variable: this.DegToRad, name: "DegToRad" },
{
variable: this.PI, name: "PI" },
{
variable: this.TWO_PI, name: "TWO_PI" },
{
variable: this.TAU, name: "TAU" }
];
this.makeFunctionsGlobal = function () {
this.globalFunctions = true;
this.functions.forEach(item => {
window[item.name] = item.func;
});
this.variables.forEach(item => {
window[item.name] = item.variable;
});
window.fps = this.fps;
window.deltaTime = this.deltaTime;
}
this.settings = settings;
if (typeof this.settings === 'undefined') {
//Create a canvas and make it fullscreen
this.canvas = this.createCanvas();
this.fillPageWithCanvas();
this.makeFunctionsGlobal();
}
else {
if (typeof this.settings.canvas !== "undefined")
this.canvas = this.settings.canvas;
else {
this.canvas = this.createCanvas();
if (typeof this.settings.width === "undefined" &&
typeof this.settings.height === "undefined")
this.fillPageWithCanvas();
if (typeof this.settings.globalFunctions === "undefined" || (typeof this.settings.globalFunctions !== "undefined" && this.settings.globalFunctions))
this.makeFunctionsGlobal();
}
if (typeof this.settings.width !== "undefined") {
this.width = this.settings.width;
this.canvas.width = window.width = this.width;
}
if (typeof this.settings.height !== "undefined") {
this.height = this.settings.height;
this.canvas.height = window.height = this.height;
}
if (typeof this.settings.updateSizeOnResize !== "undefined") {
this.updateSizeOnResize = this.settings.updateSizeOnResize;
}
}
document.addEventListener("keydown", event => {
this.keys[event.key] = this.keys[event.keyCode] = true;
});
document.addEventListener("keyup", event => {
this.keys[event.key] = this.keys[event.keyCode] = false;
});
if (this.canvas) {
this.ctx = this.canvas.getContext("2d");
if (this.updateSizeOnResize) {
window.addEventListener("resize", () => {
this.setSize(window.innerWidth, window.innerHeight);
});
}
this.mouse = {
x: 0, y: 0, lastX: 0, lastY: 0, movementX: 0, movementY: 0, left: false, middle: false, right: false, down: false };
this.touches = [];
if (this.globalFunctions) {
window.mouse = this.mouse;
window.touches = this.touches;
}
this.canvas.addEventListener("mousemove", event => {
let br = this.canvas.getBoundingClientRect();
this.mouse.x = (event.clientX - br.left) / (br.width / this.width);
this.mouse.y = (event.clientY - br.top) / (br.height / this.height);
this.mouse.movementX = event.movementX;
this.mouse.movementY = event.movementY;
this.eventFunctions["mousemove"] && OnMouseMove(event);
});
this.canvas.addEventListener("mousedown", event => {
let button = event.button;
if (button < 3)
this.mouse[mouseLookupTable[button]] = true;
if (!this.audioContext)
this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
this.eventFunctions["mousedown"] && OnMouseDown(event);
});
this.canvas.addEventListener("mouseup", event => {
let button = event.button;
if (button < 3)
this.mouse[mouseLookupTable[button]] = false;
this.eventFunctions["mouseup"] && OnMouseUp(event);
});
this.canvas.addEventListener("contextmenu", event => {
this.eventFunctions["contextmenu"] && OnContextMenu(event);
if (this.contextMenuDisabled) {
event.preventDefault();
return false;
}
return true;
});
this.updateTouches = function () {
let br = this.canvas.getBoundingClientRect();
this.touches = [];
for (let i = 0; i < event.touches.length; i++) {
var e = event.touches[i];
var x = (e.pageX - br.left) / (br.width / this.width);
var y = (e.pageY - br.top) / (br.height / this.height);
this.touches[i] = {
x, y, id: e.identifier, force: e.force };
}
if (this.globalFunctions)
window.touches = this.touches;
}
this.canvas.addEventListener("touchmove", event => {
if (this.disableScrollOnMobile)
event.preventDefault();
this.updateTouches();
this.mouse.x = this.touches[0].x;
this.mouse.y = this.touches[0].y;
this.eventFunctions["touchmove"] && OnTouchMove(event);
});
this.canvas.addEventListener("touchend", event => {
if (this.disableScrollOnMobile)
event.preventDefault();
this.touches = [];
if (this.globalFunctions)
window.touches = this.touches;
this.mouse.left = false;
this.eventFunctions["touchend"] && OnTouchEnd(event);
});
this.canvas.addEventListener("touchstart", event => {
if (this.disableScrollOnMobile)
event.preventDefault();
this.updateTouches();
this.mouse.x = this.touches[0].x;
this.mouse.y = this.touches[0].y;
this.mouse.left = true;
if (!this.audioContext)
this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
this.eventFunctions["touchstart"] && OnTouchStart(event);
});
}
}
（2）script2.js
var gc = new GameCanvas();
var points = textToPoints("我爱你❤某某", 20, "Anton");
var titleParticles = [];
var fireworks = [];
var particles = [];
var gravity = 0.1;
setTimeout(function () {
setInterval(function () {
fireworks.push(new Firework(Math.random() * width, height, Math.random() - 0.5, -(Math.random() * 7 + 5)));
}, 200);
}, 2000);
fireworks.push(new Firework(width / 2, height, 0, -9.5, 10, "gold", true));
setInterval(function () {
fireworks.push(new Firework(width / 2, height, 0, -9.5, 10, "gold", true));
}, 5000);
for (var i = 0; i < 250; i++) {
circle(
Math.random() * width,
Math.random() * height,
1,
"rgb(200, 200, 200)"
);
}
var starImage = canvasToImage();
background("black");
loop();
function loop() {
gc.ctx.globalCompositeOperation = "source-over";
background("rgba(0, 0, 0, 0.1)");
gc.ctx.drawImage(starImage, 0, 0);
gc.ctx.globalCompositeOperation = "lighter";
for (var i = 0; i < fireworks.length; i++) {
var firework = fireworks[i];
firework.update();
firework.render();
}
for (var i = 0; i < particles.length; i++) {
var particle = particles[i];
particle.update();
particle.render();
}
for (var i = 0; i < titleParticles.length; i++) {
var p = titleParticles[i];
p.update();
p.render();
}
requestAnimationFrame(loop);
}
function TitleParticle(x, y, vx, vy) {
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
this.ay = 0.2;
this.radius = 4;
this.maxHealth = 200;
this.health = 200;
this.update = function () {
this.x += this.vx;
this.y += this.vy;
this.vx *= 0.95;
this.vy *= 0.95;
this.vy += this.ay;
this.ay *= 0.95;
this.radius = (this.health / this.maxHealth) * 4;
this.health--;
if (this.health <= 0) {
titleParticles.splice(titleParticles.indexOf(this), 1);
}
}
this.render = function () {
circle(this.x, this.y, this.radius, "rgba(255, 255, 255, " + (this.health / this.maxHealth) + ")");
}
}
function Firework(x, y, vx, vy, radius = 5, color = "white", title = false) {
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
this.radius = radius;
this.title = title;
this.color = color;
this.update = function () {
this.x += this.vx;
this.y += this.vy;
this.vy += gravity;
if (this.vy >= 0) {
fireworks.splice(fireworks.indexOf(this), 1);
if (this.title) {
var scale = 0.3;
for (var i = 0; i < points.length; i++) {
var p = points[i];
var v = {
x: (p.x - 60) * scale + (Math.random() - 0.5) * 0.1,
y: (p.y - 20) * scale + (Math.random() - 0.5) * 0.1
}
var particle = new TitleParticle(this.x, this.y, v.x, v.y);
titleParticles.push(particle);
}
}
else {
var color = [Math.random() * 256 >> 0, Math.random() * 256 >> 0, Math.random() * 256 >> 0];
for (var i = 0; i < Math.PI * 2; i += 0.1) {
var power = (Math.random() + 0.5) * 4;
var vx = Math.cos(i) * power;
var vy = Math.sin(i) * power;
particles.push(new Particle(this.x, this.y, vx, vy, Math.random() + 3, color));
}
}
}
}
this.render = function () {
circle(this.x, this.y, this.radius, this.color);
}
}
function Particle(x, y, vx, vy, radius, color) {
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
this.life = 100;
this.color = color;
this.radius = radius;
this.update = function () {
this.x += this.vx;
this.y += this.vy;
this.vy += gravity;
this.vx *= 0.95;
this.vy *= 0.95;
this.life--;
if (this.life <= 0) {
particles.splice(particles.indexOf(this), 1);
}
}
this.render = function () {
circle(this.x, this.y, 3 * (this.life / 100), "rgba(" + this.color[0] + ", " + this.color[1] + ", " + this.color[2] + ", " + (this.life / 100) + ")");
}
}
function textToPoints(text, textSize, font) {
var canvas = document.createElement("canvas");
canvas.width = 1024;
canvas.height = textSize * 1.3;
var ctx = canvas.getContext("2d");
ctx.textBaseline = "middle";
ctx.font = textSize + "px " + font;
ctx.fillText(text, 0, canvas.height / 2);
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;
var points = [];
var index = (x, y) => (x + canvas.width * y) * 4;
var threshold = 50;
for (var i = 0; i < data.length; i += 4) {
if (data[i + 3] > threshold) {
var p = {
x: (i / 4) % canvas.width,
y: (i / 4) / canvas.width >> 0
};
if (data[index(p.x + 1, p.y) + 3] < threshold ||
data[index(p.x - 1, p.y) + 3] < threshold ||
data[index(p.x, p.y + 1) + 3] < threshold ||
data[index(p.x, p.y - 1) + 3] < threshold) {
points.push({
x: (i / 4) % canvas.width,
y: (i / 4) / canvas.width >> 0
});
}
}
}
return points;
}
注意：
在实际生产环境中，这样的账号密码验证方式是非常不安全的，因为密码是编码在JavaScript中的，任何查看页面源代码的人都可以看到密码。应该使用后端服务器进行验证，并确保密码在存储和传输过程中都是加密的。
