تصف هذه المقالة طريقة JS لتحقيق تأثيرات الرسوم المتحركة للألعاب النارية على شبكة الإنترنت الرائعة. شاركه للرجوع إليه. التحليل المحدد هو كما يلي:
يعد تأثير الرسوم المتحركة للألعاب النارية التي يتم تنفيذها باستخدام JS رائعة للغاية ، والتي يمكن أن تتكيف مع JS لإنشاء مثل هذه الرسوم المتحركة.
انسخ الرمز على النحو التالي: <! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Super Cool Web Golwork Effect </title>
</head>
<type type = "text/css">
.fire {display: block ؛ الفائض: مخفي. حجم الخط: 12 بكسل ؛ الموقف: مطلق} ؛
الجسم {overflow: Hidden ؛ الخلفية:#000}
html {overflow: Hidden ؛ الخلفية:#000}
</style>
<body>
</body>
<script type = "text/javaScript">
var fire = function (r ، color) {
this.radius = r || 12 ؛
this.color = اللون ؛
this.xpos = 0 ؛
this.ypos = 0 ؛
this.zpos = 0 ؛
this.vx = 0 ؛
this.vy = 0 ؛
this.vz = 0 ؛
this.mass = 1 ؛
this.x = 0 ؛
this.y = 0 ؛
this.p = document.createElement ("span") ؛
this.p.className = "Fire" ؛
this.p.innerhtml = "*" ؛
this.p.style.fontsize = this.radius + "px" ؛
this.p.style.color = "#" + this.color ؛
}
fire.prototype = {
إلحاق: الوظيفة (الوالد) {
parent.appendchild (this.p) ؛
} ،
SetSize: Function (Scale) {
this.p.style.fontsize = this.radius * scale + "px" ؛
} ،
setPosition: function (x ، y) {
this.p.style.left = x + "px" ؛
this.p.style.top = y + "px" ؛
} ،
setVisible: Function (b) {
this.p.style.display = b؟ "كتلة": "لا شيء" ؛
}
}
var fireworks = function () {
var fires = new array () ؛
var count = 150 ؛
var fl = 250 ؛
var vpx = 500 ؛
var vpy = 300 ؛
var gravity = .5 ؛
var floor = 200 ؛
var bounce = -.8 ؛
var timer ؛
var wind = ((Math.Floor (Math.Random ()*3) + 3)/10)*(Math.Random ()*2 - 1> 0؟ 1: -1)*. 25 ؛
var wpos = 0 ؛
var wcount ؛
يعود {
init: function () {
wcount = 50 + math.floor (Math.Random () * 100) ؛
لـ (var i = 0 ؛ i <count ؛ i ++) {
var color = 0xFF0000 ؛
color = (Math.Random () * 0xffffff) .ToString (16) .ToString (). split (".") [0] ؛
بينما (color.length <6) {
اللون = "0" + اللون ؛
}
var fire = new Fire (12 ، color) ؛
FIRES.PUSH (FIRE) ؛
fire.ypos = -100 ؛
Fire.vz = Math.Random () * 6 - 3 ؛
Fire.vx = (Math.Random ()*2 - 1)*2 ؛
Fire.vy = Math.Random ()* - 15 - 15 ؛
fire.x = 500
fire.y = 600 ؛
fire.append (document.body) ؛
}
var that = هذا ؛
Timer = setInterval (function () {
WPOS ++ ؛
if (wpos> = wcount) {
wpos = 0 ؛
wcount = 50 + math.floor (Math.Random () * 100) ؛
Wind = ((Math.floor (Math.Random ()*3) + 3)/10)*(Math.Random ()*2 - 1> 0؟ 1: -1)*. 25 ؛
}
لـ (var i = 0 ؛ i <count ؛ i ++) {
that.move (الحرائق [i]) ؛
}
} ، 30) ؛
} ،
نقل: وظيفة (النار) {
fire.vy += الجاذبية ؛
fire.x += fire.vx ؛
fire.y += fire.vy ؛
Fire.vx += Wind ؛
fire.setposition (fire.x ، fire.y) ؛
if (fire.x <0 || fire.x> 1000 || fire.y <0 || fire.y> 600) {
Fire.vx = (Math.Random ()*2 - 1)*2 ؛
Fire.vy = Math.Random ()* - 15 - 15 ؛
fire.x = 500 ؛
fire.y = 600 ؛
fire.setposition (fire.x ، fire.y) ؛
}
}
}
}
الألعاب النارية (). init () ؛
</script>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.