.q563nquj

Đặt hàng thất bại

Địa chỉ: 213/38 Khuông Việt, Phường Tân Phú, TP. Hồ Chí Minh

Thông tin sản phẩm

Thông tin giao hàng

Xác nhận đặt hàng thành công

Cảm ơn bạn đã mua sắm tại cửa hàng

.r63nrhof

order_popup.order_info_fields.order_id

order_popup.order_info_fields.date

order_popup.order_info_fields.price

order_popup.order_info_fields.payment_method

Double click vào đây để chỉnh sửa thông tin lưu ý

order_popup.payment_info_fields.qr_code

order_popup.payment_info_fields.bank_name

order_popup.payment_info_fields.account_holder_name

order_popup.payment_info_fields.account_number

order_popup.payment_info_fields.transfer_description

SearchOutlined

Thông tin thanh toán của bạn sẽ luôn được bảo mật

Phương thức thanh toán

Đặt hàng

name

phone

address

note

ORDER_POPUP

email

facebook

youtube

zalo

ĐĂNG KÝ NHẬN TIN

DirectionAlternativeOutlined

Gửi

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>10 Shape Fireworks</title>

<style>
html,body{
 margin:0;
 padding:0;
 background:transparent;
 overflow:auto;
}
canvas{
 position:fixed;
 inset:0;
 pointer-events:none;
 z-index:9999;
}
</style>
</head>
<body>

<canvas id="fw"></canvas>

<script>
const canvas = document.getElementById("fw");
const ctx = canvas.getContext("2d");

function resize(){
 canvas.width = innerWidth;
 canvas.height = innerHeight;
}
resize();
addEventListener("resize", resize);

const rand=(a,b)=>Math.random()*(b-a)+a;
const gravity=0.03;

/* ================= ROCKET ================= */
class Rocket{
 constructor(x){
 this.x=x;
 this.y=canvas.height;
 this.vy=rand(-9.5,-11.5);
 this.explodeY=rand(canvas.height*0.25,canvas.height*0.42);
 this.hue=rand(0,360);
 this.type=Math.floor(rand(0,10));
 }
 update(){
 this.y+=this.vy;
 this.vy+=gravity*0.12;
 }
 draw(){
 ctx.save();
 ctx.strokeStyle=`hsl(${this.hue},100%,45%)`;
 ctx.lineWidth=3;
 ctx.shadowBlur=16;
 ctx.shadowColor=`hsl(${this.hue},100%,45%)`;
 ctx.beginPath();
 ctx.moveTo(this.x,this.y);
 ctx.lineTo(this.x,this.y+18);
 ctx.stroke();
 ctx.restore();
 }
}

/* ================= SPARK ================= */
class Spark{
 constructor(x,y,vx,vy,hue){
 this.x=x; this.y=y;
 this.px=x; this.py=y;
 this.vx=vx; this.vy=vy;
 this.life=1;
 this.hue=hue;
 }
 update(){
 this.px=this.x; this.py=this.y;
 this.x+=this.vx;
 this.y+=this.vy;
 this.vy+=gravity;
 this.life-=0.016;
 }
 draw(){
 ctx.save();
 ctx.globalAlpha=this.life;
 ctx.strokeStyle=`hsl(${this.hue},100%,38%)`;
 ctx.lineWidth=3.2;
 ctx.shadowBlur=14;
 ctx.shadowColor=`hsl(${this.hue},100%,40%)`;
 ctx.beginPath();
 ctx.moveTo(this.px,this.py);
 ctx.lineTo(this.x,this.y);
 ctx.stroke();
 ctx.restore();

 ctx.save();
 ctx.globalAlpha=this.life*0.4;
 ctx.strokeStyle=`hsl(${this.hue},100%,60%)`;
 ctx.lineWidth=7;
 ctx.shadowBlur=30;
 ctx.shadowColor=`hsl(${this.hue},100%,60%)`;
 ctx.beginPath();
 ctx.moveTo(this.px,this.py);
 ctx.lineTo(this.x,this.y);
 ctx.stroke();
 ctx.restore();
 }
}

let rockets=[], sparks=[];

/* ================= 10 KIỂU NỔ ================= */
function explode(x,y,hue,type){
 const add=(a,s)=>sparks.push(new Spark(x,y,Math.cos(a)*s,Math.sin(a)*s,hue));

 switch(type){

 case 0: // TRÒN
 for(let i=0;i<24;i++) add(Math.PI*2/24*i,rand(3.5,4.5));
 break;

 case 1: // TRÁI TIM
 for(let t=0;t<Math.PI*2;t+=0.2){
 let r=2*(1-Math.sin(t));
 add(t,r*2);
 }
 break;

 case 2: // XOẮN ỐC
 for(let i=0;i<30;i++){
 let a=i*0.35;
 add(a,0.2*i);
 }
 break;

 case 3: // HOA
 for(let i=0;i<20;i++){
 let a=Math.PI*2/20*i;
 add(a,4+Math.sin(i)*1.5);
 }
 break;

 case 4: // LUXURY
 for(let i=0;i<10;i++) add(Math.PI*2/10*i,5);
 break;

 case 5: // SAO
 for(let i=0;i<10;i++){
 let a=Math.PI*2/10*i;
 add(a,i%2?5:2.5);
 }
 break;

 case 6: // SÓNG
 for(let i=0;i<26;i++){
 let a=Math.PI*2/26*i;
 add(a,4+Math.sin(a*6));
 }
 break;

 case 7: // LỐC XOÁY
 for(let i=0;i<28;i++){
 let a=i*0.25;
 add(a,3+Math.cos(i)*2);
 }
 break;

 case 8: // MẶT TRỜI
 for(let i=0;i<16;i++){
 let a=Math.PI*2/16*i;
 add(a,6);
 add(a+0.1,3);
 }
 break;

 case 9: // DOUBLE RING
 for(let i=0;i<14;i++){
 let a=Math.PI*2/14*i;
 add(a,3);
 add(a,5.5);
 }
 break;
 }
}

/* ================= LOOP ================= */
function animate(){
 ctx.clearRect(0,0,canvas.width,canvas.height);

 rockets.forEach((r,i)=>{
 r.update(); r.draw();
 if(r.y<=r.explodeY){
 explode(r.x,r.y,r.hue,r.type);
 rockets.splice(i,1);
 }
 });

 sparks=sparks.filter(s=>s.life>0);
 sparks.forEach(s=>{s.update(); s.draw();});

 requestAnimationFrame(animate);
}
animate();

/* ================= AUTO ================= */
setInterval(()=>{
 rockets.push(new Rocket(rand(canvas.width*0.2,canvas.width*0.8)));
},2600);

addEventListener("click",e=>{
 rockets.push(new Rocket(e.clientX));
});
</script>

</body>
</html>

TechSpace cung cấp thiết bị mạng Aruba, Cisco chính hãng: switch, wifi, giải pháp mạng doanh nghiệp, tư vấn triển khai chuyên nghiệp toàn quốc.