一、前言
不知不觉，距离我上次写博文已经有一个月了，当时说要给你们分享30个代码，那么今天我就给你们分享一下这30个代码。
二、代码分享
vbs类：
1.猜数字
代码：
Randomize
dim a,b,c
c = msgbox ("如果什么也不输入,下一步点击确定键,自动退出游戏,另需要提示随机数吗",1,"提示")
a = int(round (rnd*100))
b = inputbox("请输入一个1~100整数:","猜数字")
mysub a,b,c
sub mysub (a,b,c)
if (c=1) then
msgbox ("随机数："&a&",我输入的："&b)
end if
if not isnumeric(b) then
msgbox "退出游戏"
else
select case sgn(b-a)
case 0
msgbox "恭喜答对"
case 1
msgbox "输入的数值太大了"
b = inputbox("请输入一个1~100整数:","猜数字")
mysub a,b,c
case -1
msgbox "输入的数值太小了"
b = inputbox("请输入一个1~100整数:","猜数字")
mysub a,b,c
end select
end if
end sub
运行结果：
2.无限的故事
代码：
dim result
result=msgbox("给你讲个故事!",vbyesno)
if result=vbyes then
do
msgbox("从前有座山")
msgbox("山上有座庙")
msgbox("庙里有两个和尚")
msgbox("大和尚给小和尚讲故事说")
loop
end if
运行结果：
（会一直循环下去，想关闭请关机或使用任务管理器）
3.会说话的电脑
代码：
CreateObject("SAPI.SpVoice").Speak"欢迎人见人爱，花见花开，车见车爆胎的主人上线"运行结果：电脑会说“欢迎人见人爱，花见花开，车见车爆胎的主人上线”
4.自动按键盘
代码：
set a=createobject ("wscript.shell")
for i=1 to 100
wscript.sleep 100
a.sendkeys"a"
next运行结果：会快速按100个a
5.密码识别器
代码：
dim password
do
password=inputbox("请输入密码","QQ")
if password="140203" then
msgbox ("密码正确")
set WshShell=createobject("wscript.shell")
WshShell.Exec("C:\Program Files (x86)\Tencent\QQ\Bin\QQScLauncher.exe")
exit do
end if
loop
运行结果：
python类
1.冰墩墩
代码：
import turtle
turtle.title('冰墩墩')
turtle.speed(10)
turtle.penup()
turtle.goto(177, 112)
turtle.pencolor("lightgray")
turtle.pensize(3)
turtle.fillcolor("white")
turtle.begin_fill()
turtle.pendown()
turtle.setheading(80)
turtle.circle(-45, 200)
turtle.circle(-300, 23)
turtle.end_fill()
turtle.penup()
turtle.goto(182, 95)
turtle.pencolor("black")
turtle.pensize(1)
turtle.fillcolor("black")
turtle.begin_fill()
turtle.setheading(95)
turtle.pendown()
turtle.circle(-37, 160)
turtle.circle(-20, 50)
turtle.circle(-200, 30)
turtle.end_fill()
turtle.penup()
turtle.goto(-73, 230)
turtle.pencolor("lightgray")
turtle.pensize(3)
turtle.fillcolor("white")
turtle.begin_fill()
turtle.pendown()
turtle.setheading(20)
turtle.circle(-250, 35)
turtle.setheading(50)
turtle.circle(-42, 180)
turtle.setheading(-50)
turtle.circle(-190, 30)
turtle.circle(-320, 45)
turtle.circle(120, 30)
turtle.circle(200, 12)
turtle.circle(-18, 85)
turtle.circle(-180, 23)
turtle.circle(-20, 110)
turtle.circle(15, 115)
turtle.circle(100, 12)
turtle.circle(15, 120)
turtle.circle(-15, 110)
turtle.circle(-150, 30)
turtle.circle(-15, 70)
turtle.circle(-150, 10)
turtle.circle(200, 35)
turtle.circle(-150, 20)
turtle.setheading(-120)
turtle.circle(50, 30)
turtle.circle(-35, 200)
turtle.circle(-300, 23)
turtle.setheading(86)
turtle.circle(-300, 26)
turtle.setheading(122)
turtle.circle(-53, 160)
turtle.end_fill()
turtle.penup()
turtle.goto(-130, 180)
turtle.pencolor("black")
turtle.pensize(1)
turtle.fillcolor("black")
turtle.begin_fill()
turtle.pendown()
turtle.setheading(120)
turtle.circle(-28, 160)
turtle.setheading(210)
turtle.circle(150, 20)
turtle.end_fill()
turtle.penup()
turtle.goto(90, 230)
turtle.setheading(40)
turtle.begin_fill()
turtle.pendown()
turtle.circle(-30, 170)
turtle.setheading(125)
turtle.circle(150, 23)
turtle.end_fill()
turtle.penup()
turtle.goto(-180, -55)
turtle.fillcolor("black")
turtle.begin_fill()
turtle.setheading(-120)
turtle.pendown()
turtle.circle(50, 30)
turtle.circle(-27, 200)
turtle.circle(-300, 20)
turtle.setheading(-90)
turtle.circle(300, 14)
turtle.end_fill()
turtle.penup()
turtle.goto(108, -168)
turtle.fillcolor("black")
turtle.begin_fill()
turtle.pendown()
turtle.setheading(-115)
turtle.circle(110, 15)
turtle.circle(200, 10)
turtle.circle(-18, 80)
turtle.circle(-180, 13)
turtle.circle(-20, 90)
turtle.circle(15, 60)
turtle.setheading(42)
turtle.circle(-200, 29)
turtle.end_fill()
turtle.penup()
turtle.goto(-38, -210)
turtle.fillcolor("black")
turtle.begin_fill()
turtle.pendown()
turtle.setheading(-155)
turtle.circle(15, 100)
turtle.circle(-10, 110)
turtle.circle(-100, 30)
turtle.circle(-15, 65)
turtle.circle(-100, 10)
turtle.circle(200, 15)
turtle.setheading(-14)
turtle.circle(-200, 27)
turtle.end_fill()
turtle.penup()
turtle.goto(-64, 120)
turtle.begin_fill()
turtle.pendown()
turtle.setheading(40)
turtle.circle(-35, 152)
turtle.circle(-100, 50)
turtle.circle(-35, 130)
turtle.circle(-100, 50)
turtle.end_fill()
turtle.penup()
turtle.goto(-47, 55)
turtle.fillcolor("white")
turtle.begin_fill()
turtle.pendown()
turtle.setheading(0)
turtle.circle(25, 360)
turtle.end_fill()
turtle.penup()
turtle.goto(-45, 62)
turtle.pencolor("darkslategray")
turtle.fillcolor("darkslategray")
turtle.begin_fill()
turtle.pendown()
turtle.setheading(0)
turtle.circle(19, 360)
turtle.end_fill()
turtle.penup()
turtle.goto(-45, 68)
turtle.fillcolor("black")
turtle.begin_fill()
turtle.pendown()
turtle.setheading(0)
turtle.circle(10, 360)
turtle.end_fill()
turtle.penup()
turtle.goto(-47, 86)
turtle.pencolor("white")
turtle.fillcolor("white")
turtle.begin_fill()
turtle.pendown()
turtle.setheading(0)
turtle.circle(5, 360)
turtle.end_fill()
turtle.penup()
turtle.goto(51, 82)
turtle.fillcolor("black")
turtle.begin_fill()
turtle.pendown()
turtle.setheading(120)
turtle.circle(-32, 152)
turtle.circle(-100, 55)
turtle.circle(-25, 120)
turtle.circle(-120, 45)
turtle.end_fill()
turtle.penup()
turtle.goto(79, 60)
turtle.fillcolor("white")
turtle.begin_fill()
turtle.pendown()
turtle.setheading(0)
turtle.circle(24, 360)
turtle.end_fill()
turtle.penup()
turtle.goto(79, 64)
turtle.pencolor("darkslategray")
turtle.fillcolor("darkslategray")
turtle.begin_fill()
turtle.pendown()
turtle.setheading(0)
turtle.circle(19, 360)
turtle.end_fill()
turtle.penup()
turtle.goto(79, 70)
turtle.fillcolor("black")
turtle.begin_fill()
turtle.pendown()
turtle.setheading(0)
turtle.circle(10, 360)
turtle.end_fill()
turtle.penup()
turtle.goto(79, 88)
turtle.pencolor("white")
turtle.fillcolor("white")
turtle.begin_fill()
turtle.pendown()
turtle.setheading(0)
turtle.circle(5, 360)
turtle.end_fill()
turtle.penup()
turtle.goto(37, 80)
turtle.fillcolor("black")
turtle.begin_fill()
turtle.pendown()
turtle.circle(-8, 130)
turtle.circle(-22, 100)
turtle.circle(-8, 130)
turtle.end_fill()
turtle.penup()
turtle.goto(-15, 48)
turtle.setheading(-36)
turtle.begin_fill()
turtle.pendown()
turtle.circle(60, 70)
turtle.setheading(-132)
turtle.circle(-45, 100)
turtle.end_fill()
turtle.penup()
turtle.goto(-135, 120)
turtle.pensize(5)
turtle.pencolor("cyan")
turtle.pendown()
turtle.setheading(60)
turtle.circle(-165, 150)
turtle.circle(-130, 78)
turtle.circle(-250, 30)
turtle.circle(-138, 105)
turtle.penup()
turtle.goto(-131, 116)
turtle.pencolor("slateblue")
turtle.pendown()
turtle.setheading(60)
turtle.circle(-160, 144)
turtle.circle(-120, 78)
turtle.circle(-242, 30)
turtle.circle(-135, 105)
turtle.penup()
turtle.goto(-127, 112)
turtle.pencolor("orangered")
turtle.pendown()
turtle.setheading(60)
turtle.circle(-155, 136)
turtle.circle(-116, 86)
turtle.circle(-220, 30)
turtle.circle(-134, 103)
turtle.penup()
turtle.goto(-123, 108)
turtle.pencolor("gold")
turtle.pendown()
turtle.setheading(60)
turtle.circle(-150, 136)
turtle.circle(-104, 86)
turtle.circle(-220, 30)
turtle.circle(-126, 102)
turtle.penup()
turtle.goto(-120, 104)
turtle.pencolor("greenyellow")
turtle.pendown()
turtle.setheading(60)
turtle.circle(-145, 136)
turtle.circle(-90, 83)
turtle.circle(-220, 30)
turtle.circle(-120, 100)
turtle.penup()
turtle.penup()
turtle.goto(220, 115)
turtle.pencolor("brown")
turtle.pensize(1)
turtle.fillcolor("brown")
turtle.begin_fill()
turtle.pendown()
turtle.setheading(36)
turtle.circle(-8, 180)
turtle.circle(-60, 24)
turtle.setheading(110)
turtle.circle(-60, 24)
turtle.circle(-8, 180)
turtle.end_fill()
turtle.penup()
turtle.goto(-5, -170)
turtle.pendown()
turtle.pencolor("blue")
turtle.circle(6)
turtle.penup()
turtle.goto(10, -170)
turtle.pendown()
turtle.pencolor("black")
turtle.circle(6)
turtle.penup()
turtle.goto(25, -170)
turtle.pendown()
turtle.pencolor("brown")
turtle.circle(6)
turtle.penup()
turtle.goto(2, -175)
turtle.pendown()
turtle.pencolor("lightgoldenrod")
turtle.circle(6)
turtle.penup()
turtle.goto(16, -175)
turtle.pendown()
turtle.pencolor("green")
turtle.circle(6)
turtle.penup()
turtle.pencolor("black")
turtle.goto(-16, -160)
turtle.write("BEIJING 2022", font=('Arial', 10, 'bold italic'))
turtle.hideturtle()
turtle.done()
运行结果：
2.成绩等级
代码：
# coding=utf-8
score=int(input("请输入0-100的成绩："))
if score>=60:
if score>=85:
print("您真优秀！")
else:
print("您的成绩还可以，仍需继续努力！")
else:
print("您需要加倍努力！")
运行结果：
3.五角星
代码：
import turtle as t
t.goto(100,0)
for i in range(50):
t.left(80)
t.fd(100)
t.left(135)
t.fd(105)
运行结果：
4.隧道
代码：
import turtle
turtle.speed(10)
a=10
for i in range(20):
for i in range(4):
turtle.forward(a)
turtle.right(90)
a=a+2
运行结果：
5.红色五边形
代码：
import turtle as t
t.color("red")
for i in range(270):
t.fd(i)
t.left(70)
t.done()
运行结果：
6.玫瑰花
代码：
import turtle
# 设置初始位置
turtle.penup()
turtle.left(90)
turtle.fd(200)
turtle.pendown()
turtle.right(90)
# 花蕊
turtle.fillcolor("red")
turtle.begin_fill()
turtle.circle(10, 180)
turtle.circle(25, 110)
turtle.left(50)
turtle.circle(60, 45)
turtle.circle(20, 170)
turtle.right(24)
turtle.fd(30)
turtle.left(10)
turtle.circle(30, 110)
turtle.fd(20)
turtle.left(40)
turtle.circle(90, 70)
turtle.circle(30, 150)
turtle.right(30)
turtle.fd(15)
turtle.circle(80, 90)
turtle.left(15)
turtle.fd(45)
turtle.right(165)
turtle.fd(20)
turtle.left(155)
turtle.circle(150, 80)
turtle.left(50)
turtle.circle(150, 90)
turtle.end_fill()
# 花瓣1
turtle.left(150)
turtle.circle(-90, 70)
turtle.left(20)
turtle.circle(75, 105)
turtle.setheading(60)
turtle.circle(80, 98)
turtle.circle(-90, 40)
# 花瓣2
turtle.left(180)
turtle.circle(90, 40)
turtle.circle(-80, 98)
turtle.setheading(-83)
# 叶子1
turtle.fd(30)
turtle.left(90)
turtle.fd(25)
turtle.left(45)
turtle.fillcolor("green")
turtle.begin_fill()
turtle.circle(-80, 90)
turtle.right(90)
turtle.circle(-80, 90)
turtle.end_fill()
turtle.right(135)
turtle.fd(60)
turtle.left(180)
turtle.fd(85)
turtle.left(90)
turtle.fd(80)
# 叶子2
turtle.right(90)
turtle.right(45)
turtle.fillcolor("green")
turtle.begin_fill()
turtle.circle(80, 90)
turtle.left(90)
turtle.circle(80, 90)
turtle.end_fill()
turtle.left(135)
turtle.fd(60)
turtle.left(180)
turtle.fd(60)
turtle.right(90)
turtle.circle(200, 60)
turtle.pendown()
turtle.done()
运行结果：
7.樱花
代码：
import turtle as T
import random
import time
# 画樱花的躯干(60,t)
def Tree(branch, t):
time.sleep(0.0005)
if branch > 3:
if 8 <= branch <= 12:
if random.randint(0, 2) == 0:
t.color('snow') # 白
else:
t.color('lightcoral') # 淡珊瑚色
t.pensize(branch / 3)
elif branch < 8:
if random.randint(0, 1) == 0:
t.color('snow')
else:
t.color('lightcoral') # 淡珊瑚色
t.pensize(branch / 2)
else:
t.color('sienna') # 赭(zhě)色
t.pensize(branch / 10) # 6
t.forward(branch)
a = 1.5 * random.random()
t.right(20 * a)
b = 1.5 * random.random()
Tree(branch - 10 * b, t)
t.left(40 * a)
Tree(branch - 10 * b, t)
t.right(20 * a)
t.up()
t.backward(branch)
t.down()
# 掉落的花瓣
def Petal(m, t):
for i in range(m):
a = 200 - 400 * random.random()
b = 10 - 20 * random.random()
t.up()
t.forward(b)
t.left(90)
t.forward(a)
t.down()
t.color('lightcoral') # 淡珊瑚色
t.circle(1)
t.up()
t.backward(a)
t.right(90)
t.backward(b)
# 绘图区域
t = T.Turtle()
# 画布大小
w = T.Screen()
t.hideturtle() # 隐藏画笔
t.getscreen().tracer(5, 0)
w.screensize(bg='wheat') # wheat小麦
t.left(90)
t.up()
t.backward(150)
t.down()
t.color('sienna')
# 画樱花的躯干
Tree(60, t)
# 掉落的花瓣
Petal(200, t)
w.exitonclick()
运行结果：
接下来，重头戏来了
8.生日蛋糕
代码：
import turtle as t
import math as m
import random as r
def drawX(a, i):
angle = m.radians(i)
return a * m.cos(angle)
def drawY(b, i):
angle = m.radians(i)
return b * m.sin(angle)
# 设置背景颜色，窗口位置以及大小
t.bgcolor("#d3dae8")
t.setup(1000, 800)
t.penup()
t.goto(150, 0)
t.pendown()
# 1
t.pencolor("white")
t.begin_fill()
for i in range(360):
x = drawX(150, i)
y = drawY(60, i)
t.goto(x, y)
t.fillcolor("#fef5f7")
t.end_fill()
# 2
t.begin_fill()
for i in range(180):
x = drawX(150, -i)
y = drawY(70, -i)
t.goto(x, y)
for i in range(180, 360):
x = drawX(150, i)
y = drawY(60, i)
t.goto(x, y)
t.fillcolor("#f2d7dd")
t.end_fill()
# 3
t.pu()
t.goto(120, 0)
t.pd()
t.begin_fill()
for i in range(360):
x = drawX(120, i)
y = drawY(48, i)
t.goto(x, y)
t.fillcolor("#cbd9f9")
t.end_fill()
# 4
t.begin_fill()
t.pencolor("#fee48c")
for i in range(540):
x = drawX(120, i)
y = drawY(48, i) + 70
t.goto(x, y)
t.goto(-120, 0)
t.fillcolor("#cbd9f9")
t.end_fill()
# 5
t.pu()
t.goto(120, 70)
t.pd()
t.pencolor("#fff0f3")
t.begin_fill()
for i in range(360):
x = drawX(120, i)
y = drawY(48, i) + 70
t.goto(x, y)
t.fillcolor("#fff0f3")
t.end_fill()
# 6
t.pu()
t.goto(110, 70)
t.pd()
t.pencolor("#fff9fb")
t.begin_fill()
for i in range(360):
x = drawX(110, i)
y = drawY(44, i) + 70
t.goto(x, y)
t.fillcolor("#fff9fb")
t.end_fill()
# 7
t.pu()
t.goto(120, 0)
t.pd()
t.begin_fill()
t.pencolor("#ffa79d")
for i in range(180):
x = drawX(120, -i)
y = drawY(48, -i) + 10
t.goto(x, y)
t.goto(-120, 0)
for i in range(180, 360):
x = drawX(120, i)
y = drawY(48, i)
t.goto(x, y)
t.fillcolor("#ffa79d")
t.end_fill()
# 8
t.pu()
t.goto(120, 70)
t.pd()
t.begin_fill()
t.pensize(4)
t.pencolor("#fff0f3")
for i in range(1800):
x = drawX(120, 0.1 * i)
y = drawY(-18, i) + 10
t.goto(x, y)
t.goto(-120, 70)
t.pensize(1)
for i in range(180, 360):
x = drawX(120, i)
y = drawY(48, i) + 70
t.goto(x, y)
t.fillcolor("#fff0f3")
t.end_fill()
# 9
t.pu()
t.goto(80, 70)
t.pd()
t.begin_fill()
t.pencolor("#6f3732")
t.goto(80, 120)
for i in range(180):
x = drawX(80, i)
y = drawY(32, i) + 120
t.goto(x, y)
t.goto(-80, 70)
for i in range(180, 360):
x = drawX(80, i)
y = drawY(32, i) + 70
t.goto(x, y)
t.fillcolor("#6f3732")
t.end_fill()
# 10
t.pu()
t.goto(80, 120)
t.pd()
t.pencolor("#ffaaa0")
t.begin_fill()
for i in range(360):
x = drawX(80, i)
y = drawY(32, i) + 120
t.goto(x, y)
t.fillcolor("#ffaaa0")
t.end_fill()
# 11
t.pu()
t.goto(70, 120)
t.pd()
t.pencolor("#ffc3be")
t.begin_fill()
for i in range(360):
x = drawX(70, i)
y = drawY(28, i) + 120
t.goto(x, y)
t.fillcolor("#ffc3be")
t.end_fill()
# 12
t.pu()
t.goto(80, 120)
t.pd()
t.begin_fill()
t.pensize(3)
t.pencolor("#ffaaa0")
for i in range(1800):
x = drawX(80, 0.1 * i)
y = drawY(-12, i) + 80
t.goto(x, y)
t.goto(-80, 120)
t.pensize(1)
for i in range(180, 360):
x = drawX(80, i)
y = drawY(32, i) + 120
t.goto(x, y)
t.fillcolor("#ffaaa0")
t.end_fill()
# 13
t.pu()
t.goto(64, 120)
t.pd()
t.pencolor("#b1c9e9")
t.begin_fill()
for i in range(360):
x = drawX(4, i) + 60
y = drawY(1, i) + 120
t.goto(x, y)
t.goto(64, 170)
for i in range(540):
x = drawX(4, i) + 60
y = drawY(1, i) + 170
t.goto(x, y)
t.goto(56, 120)
t.fillcolor("#b1c9e9")
t.end_fill()
t.pencolor("white")
t.pensize(2)
for i in range(1, 6):
t.goto(64, 120 + 10 * i)
t.pu()
t.goto(56, 120 + 10 * i)
t.pd()
t.pu()
t.goto(60, 170)
t.pd()
t.goto(60, 180)
t.pensize(1)
#
t.pu()
t.goto(64, 190)
t.pd()
t.pencolor("#f1add1")
t.begin_fill()
for i in range(360):
x = drawX(4, i) + 60
y = drawY(10, i) + 190
t.goto(x, y)
t.fillcolor("#f1add1")
t.end_fill()
# 14
t.pu()
t.goto(-56, 120)
t.pd()
t.pencolor("#b1c9e9")
t.begin_fill()
for i in range(360):
x = drawX(4, i) - 60
y = drawY(1, i) + 120
t.goto(x, y)
t.goto(-56, 170)
for i in range(540):
x = drawX(4, i) - 60
y = drawY(1, i) + 170
t.goto(x, y)
t.goto(-64, 120)
t.fillcolor("#b1c9e9")
t.end_fill()
t.pencolor("white")
t.pensize(2)
for i in range(1, 6):
t.goto(-56, 120 + 10 * i)
t.pu()
t.goto(-64, 120 + 10 * i)
t.pd()
t.pu()
t.goto(-60, 170)
t.pd()
t.goto(-60, 180)
t.pensize(1)
#
t.pu()
t.goto(-56, 190)
t.pd()
t.pencolor("#f1add1")
t.begin_fill()
for i in range(360):
x = drawX(4, i) - 60
y = drawY(10, i) + 190
t.goto(x, y)
t.fillcolor("#f1add1")
t.end_fill()
# 15
t.pu()
t.goto(0, 130)
t.pd()
t.pencolor("#b1c9e9")
t.begin_fill()
for i in range(360):
x = drawX(4, i)
y = drawY(1, i) + 130
t.goto(x, y)
t.goto(4, 180)
for i in range(540):
x = drawX(4, i)
y = drawY(1, i) + 180
t.goto(x, y)
t.goto(-4, 130)
t.fillcolor("#b1c9e9")
t.end_fill()
t.pencolor("white")
t.pensize(2)
for i in range(1, 6):
t.goto(4, 130 + 10 * i)
t.pu()
t.goto(-4, 130 + 10 * i)
t.pd()
t.pu()
t.goto(0, 180)
t.pd()
t.goto(0, 190)
t.pensize(1)
#
t.pu()
t.goto(4, 200)
t.pd()
t.pencolor("#f1add1")
t.begin_fill()
for i in range(360):
x = drawX(4, i)
y = drawY(10, i) + 200
t.goto(x, y)
t.fillcolor("#f1add1")
t.end_fill()
# 16
t.pu()
t.goto(30, 110)
t.pd()
t.pencolor("#b1c9e9")
t.begin_fill()
for i in range(360):
x = drawX(4, i) + 30
y = drawY(1, i) + 110
t.goto(x, y)
t.goto(34, 160)
for i in range(540):
x = drawX(4, i) + 30
y = drawY(1, i) + 160
t.goto(x, y)
t.goto(26, 110)
t.fillcolor("#b1c9e9")
t.end_fill()
t.pencolor("white")
t.pensize(2)
for i in range(1, 6):
t.goto(34, 110 + 10 * i)
t.pu()
t.goto(26, 110 + 10 * i)
t.pd()
t.pu()
t.goto(30, 160)
t.pd()
t.goto(30, 170)
t.pensize(1)
#
t.pu()
t.goto(34, 180)
t.pd()
t.pencolor("#f1add1")
t.begin_fill()
for i in range(360):
x = drawX(4, i) + 30
y = drawY(10, i) + 180
t.goto(x, y)
t.fillcolor("#f1add1")
t.end_fill()
# 17
t.pu()
t.goto(-30, 110)
t.pd()
t.pencolor("#b1c9e9")
t.begin_fill()
for i in range(360):
x = drawX(4, i) - 30
y = drawY(1, i) + 110
t.goto(x, y)
t.goto(-26, 160)
for i in range(540):
x = drawX(4, i) - 30
y = drawY(1, i) + 160
t.goto(x, y)
t.goto(-34, 110)
t.fillcolor("#b1c9e9")
t.end_fill()
t.pencolor("white")
t.pensize(2)
for i in range(1, 6):
t.goto(-26, 110 + 10 * i)
t.pu()
t.goto(-34, 110 + 10 * i)
t.pd()
t.pu()
t.goto(-30, 160)
t.pd()
t.goto(-30, 170)
t.pensize(1)
#
t.pu()
t.goto(-26, 180)
t.pd()
t.pencolor("#f1add1")
t.begin_fill()
for i in range(360):
x = drawX(4, i) - 30
y = drawY(10, i) + 180
t.goto(x, y)
t.fillcolor("#f1add1")
t.end_fill()
###随机
color = ["#e28cb9", "#805a8c", "#eaa989", "#6e90b7", "#b8b68f", "#e174b5", "#cf737c", "#7c8782"]
for i in range(80):
t.pu()
x = r.randint(-120, 120)
y = r.randint(-25, 30)
t.goto(x, y)
t.pd()
t.dot(r.randint(2, 5), color[r.randint(0, 7)])
for i in range(40):
t.pu()
x = r.randint(-90, 90)
y = r.randint(-35, 10)
t.goto(x, y)
t.pd()
t.dot(r.randint(2, 5), color[r.randint(0, 7)])
for i in range(40):
t.pu()
x = r.randint(-80, 80)
y = r.randint(60, 90)
t.goto(x, y)
t.pd()
t.dot(r.randint(2, 5), color[r.randint(0, 7)])
for i in range(30):
t.pu()
x = r.randint(-50, 50)
y = r.randint(45, 70)
t.goto(x, y)
t.pd()
t.dot(r.randint(2, 5), color[r.randint(0, 7)])
for i in range(50):
t.pu()
x = r.randint(-500, 500)
y = r.randint(120, 300)
t.goto(x, y)
t.pd()
t.dot(r.randint(3, 5), color[r.randint(0, 7)])
t.seth(90)
t.pu()
t.goto(0, 0)
t.fd(210)
t.left(90)
t.fd(170)
t.pd()
t.write("Happy Birthday", font=("Curlz MT", 50))
t.done()
运行结果：
HTML类
1.五子棋
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>五子棋</title>
<style type='text/css'>
canvas {
display: block;
margin: 50px auto;
box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9;
cursor: pointer;
}
.btn-wrap {
display: flex;
flex-direction: row;
justify-content:center;
}
.btn-wrap div {
margin: 0 10px;
}
div>span {
display: inline-block;
padding: 10px 20px;
color: #fff;
background-color: #EE82EE;
border-radius: 5px;
cursor: pointer;
}
div.unable span {
background: #D6D6D4;
color: #adacaa;
}
#result-wrap {text-align: center;}
</style>
</head>
<body>
<h3 id="result-wrap">来盘五子棋吧!</h3>
<canvas id="chess" width="450px" height="450px"></canvas>
<div class="btn-wrap">
<div id='restart' class="restart">
<span>重新开始</span>
</div>
<div id='goback' class="goback unable">
<span>悔棋</span>
</div>
<div id='return' class="return unable">
<span>撤销悔棋</span>
</div>
</div>
<script type="text/javascript" charset="utf-8">
var over = false;
var me = true; //我
var _nowi = 0, _nowj = 0; //记录自己下棋的坐标
var _compi = 0, _compj = 0; //记录计算机当前下棋的坐标
var _myWin = [], _compWin = []; //记录我，计算机赢的情况
var backAble = false, returnAble = false;
var resultTxt = document.getElementById('result-wrap');
var chressBord = [];//棋盘
for(var i = 0; i < 15; i++){
chressBord[i] = [];
for(var j = 0; j < 15; j++){
chressBord[i][j] = 0;
}
}
//赢法的统计数组
var myWin = [];
var computerWin = [];
//赢法数组
var wins = [];
for(var i = 0; i < 15; i++){
wins[i] = [];
for(var j = 0; j < 15; j++){
wins[i][j] = [];
}
}
var count = 0; //赢法总数
//横线赢法
for(var i = 0; i < 15; i++){
for(var j = 0; j < 11; j++){
for(var k = 0; k < 5; k++){
wins[i][j+k][count] = true;
}
count++;
}
}
//竖线赢法
for(var i = 0; i < 15; i++){
for(var j = 0; j < 11; j++){
for(var k = 0; k < 5; k++){
wins[j+k][i][count] = true;
}
count++;
}
}
//正斜线赢法
for(var i = 0; i < 11; i++){
for(var j = 0; j < 11; j++){
for(var k = 0; k < 5; k++){
wins[i+k][j+k][count] = true;
}
count++;
}
}
//反斜线赢法
for(var i = 0; i < 11; i++){
for(var j = 14; j > 3; j--){
for(var k = 0; k < 5; k++){
wins[i+k][j-k][count] = true;
}
count++;
}
}
// debugger;
for(var i = 0; i < count; i++){
myWin[i] = 0;
_myWin[i] = 0;
computerWin[i] = 0;
_compWin[i] = 0;
}
var chess = document.getElementById("chess");
var context = chess.getContext('2d');
context.strokeStyle = '#bfbfbf'; //边框颜色
var backbtn = document.getElementById("goback");
var returnbtn = document.getElementById("return");
window.onload = function(){
drawChessBoard(); // 画棋盘
}
document.getElementById("restart").onclick = function(){
window.location.reload();
}
// 我，下棋
chess.onclick = function(e){
if(over){
return;
}
if(!me){
return;
}
// 悔棋功能可用
backbtn.className = backbtn.className.replace( new RegExp( "(\\s|^)unable(\\s|$)" )," " );
var x = e.offsetX;
var y = e.offsetY;
var i = Math.floor(x / 30);
var j = Math.floor(y / 30);
_nowi = i;
_nowj = j;
if(chressBord[i][j] == 0){
oneStep(i,j,me);
chressBord[i][j] = 1; //我，已占位置
for(var k = 0; k < count; k++){ // 将可能赢的情况都加1
if(wins[i][j][k]){
// debugger;
myWin[k]++;
_compWin[k] = computerWin[k];
computerWin[k] = 6;//这个位置对方不可能赢了
if(myWin[k] == 5){
// window.alert('你赢了');
resultTxt.innerHTML = '恭喜，你赢了！';
over = true;
}
}
}
if(!over){
me = !me;
computerAI();
}
}
}
// 悔棋
backbtn.onclick = function(e){
if(!backAble) { return;}
over = false;
me = true;
// resultTxt.innerHTML = 'o(╯□╰)o，悔棋中';
// 撤销悔棋功能可用
returnbtn.className = returnbtn.className.replace( new RegExp( "(\\s|^)unable(\\s|$)" )," " );
// 我，悔棋
chressBord[_nowi][_nowj] = 0; //我，已占位置 还原
minusStep(_nowi, _nowj); //销毁棋子
for(var k = 0; k < count; k++){ // 将可能赢的情况都减1
if(wins[_nowi][_nowj][k]){
myWin[k]--;
computerWin[k] = _compWin[k];//这个位置对方可能赢
}
}
// 计算机相应的悔棋
chressBord[_compi][_compj] = 0; //计算机，已占位置 还原
minusStep(_compi, _compj); //销毁棋子
for(var k = 0; k < count; k++){ // 将可能赢的情况都减1
if(wins[_compi][_compj][k]){
computerWin[k]--;
myWin[k] = _myWin[i];//这个位置对方可能赢
}
}
resultTxt.innerHTML = '--益智五子棋--';
returnAble = true;
backAble = false;
}
// 撤销悔棋
returnbtn.onclick = function(e){
if(!returnAble) { return; }
// 我，撤销悔棋
chressBord[_nowi][_nowj] = 1; //我，已占位置
oneStep(_nowi,_nowj,me);
for(var k = 0; k < count; k++){
if(wins[_nowi][_nowj][k]){
myWin[k]++;
_compWin[k] = computerWin[k];
computerWin[k] = 6;//这个位置对方不可能赢
}
if(myWin[k] == 5){
resultTxt.innerHTML = '恭喜，你赢了！';
over = true;
}
}
// 计算机撤销相应的悔棋
chressBord[_compi][_compj] = 2; //计算机，已占位置
oneStep(_compi,_compj,false);
for(var k = 0; k < count; k++){ // 将可能赢的情况都减1
if(wins[_compi][_compj][k]){
computerWin[k]++;
_myWin[k] = myWin[k];
myWin[k] = 6;//这个位置对方不可能赢
}
if(computerWin[k] == 5){
resultTxt.innerHTML = 'o(╯□╰)o，计算机赢了，继续加油哦！';
over = true;
}
}
returnbtn.className += ' '+ 'unable';
returnAble = false;
backAble = true;
}
// 计算机下棋
var computerAI = function (){
var myScore = [];
var computerScore = [];
var max = 0;
var u = 0, v = 0;
for(var i = 0; i < 15; i++){
myScore[i] = [];
computerScore[i] = [];
for(var j = 0; j < 15; j++){
myScore[i][j] = 0;
computerScore[i][j] = 0;
}
}
for(var i = 0; i < 15; i++){
for(var j = 0; j < 15; j++){
if(chressBord[i][j] == 0){
for(var k = 0; k < count; k++){
if(wins[i][j][k]){
if(myWin[k] == 1){
myScore[i][j] += 200;
}else if(myWin[k] == 2){
myScore[i][j] += 400;
}else if(myWin[k] == 3){
myScore[i][j] += 2000;
}else if(myWin[k] == 4){
myScore[i][j] += 10000;
}
if(computerWin[k] == 1){
computerScore[i][j] += 220;
}else if(computerWin[k] == 2){
computerScore[i][j] += 420;
}else if(computerWin[k] == 3){
computerScore[i][j] += 2100;
}else if(computerWin[k] == 4){
computerScore[i][j] += 20000;
}
}
}
if(myScore[i][j] > max){
max = myScore[i][j];
u = i;
v = j;
}else if(myScore[i][j] == max){
if(computerScore[i][j] > computerScore[u][v]){
u = i;
v = j;
}
}
if(computerScore[i][j] > max){
max = computerScore[i][j];
u = i;
v = j;
}else if(computerScore[i][j] == max){
if(myScore[i][j] > myScore[u][v]){
u = i;
v = j;
}
}
}
}
}
_compi = u;
_compj = v;
oneStep(u,v,false);
chressBord[u][v] = 2; //计算机占据位置
for(var k = 0; k < count; k++){
if(wins[u][v][k]){
computerWin[k]++;
_myWin[k] = myWin[k];
myWin[k] = 6;//这个位置对方不可能赢了
if(computerWin[k] == 5){
resultTxt.innerHTML = 'o(╯□╰)o，计算机赢了，继续加油哦！';
over = true;
}
}
}
if(!over){
me = !me;
}
backAble = true;
returnAble = false;
var hasClass = new RegExp('unable').test(' ' + returnbtn.className + ' ');
if(!hasClass) {
returnbtn.className += ' ' + 'unable';
}
}
//绘画棋盘
var drawChessBoard = function() {
for(var i = 0; i < 15; i++){
context.moveTo(15 + i * 30 , 15);
context.lineTo(15 + i * 30 , 435);
context.stroke();
context.moveTo(15 , 15 + i * 30);
context.lineTo(435 , 15 + i * 30);
context.stroke();
}
}
//画棋子
var oneStep = function(i,j,me) {
context.beginPath();
context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);// 画圆
context.closePath();
//渐变
var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);
if(me){
gradient.addColorStop(0,'#0a0a0a');
gradient.addColorStop(1,'#636766');
}else{
gradient.addColorStop(0,'#d1d1d1');
gradient.addColorStop(1,'#f9f9f9');
}
context.fillStyle = gradient;
context.fill();
}
//销毁棋子
var minusStep = function(i,j) {
//擦除该圆
context.clearRect((i) * 30, (j) * 30, 30, 30);
// 重画该圆周围的格子
context.beginPath();
context.moveTo(15+i*30 , j*30);
context.lineTo(15+i*30 , j*30 + 30);
context.moveTo(i*30, j*30+15);
context.lineTo((i+1)*30 , j*30+15);
context.stroke();
}
</script>
</body>
</html>
运行结果：
2.动态爱心
代码：
爱心.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
background: #000;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</HEAD>
<BODY>
<canvas id="pinkboard"></canvas>
<script>
/*
* Settings
*/
var settings = {
particles: {
length: 500, // maximum amount of particles
duration: 2, // particle duration in sec
velocity: 100, // particle velocity in pixels/sec
effect: -0.75, // play with this for a nice effect
size: 30, // particle size in pixels
},
};
/*
* RequestAnimationFrame polyfill by Erik Möller
*/
(function(){var b=0;var c=["ms","moz","webkit","o"];for(var a=0;a<c.length&&!window.requestAnimationFrame;++a){window.requestAnimationFrame=window[c[a]+"RequestAnimationFrame"];window.cancelAnimationFrame=window[c[a]+"CancelAnimationFrame"]||window[c[a]+"CancelRequestAnimationFrame"]}if(!window.requestAnimationFrame){window.requestAnimationFrame=function(h,e){var d=new Date().getTime();var f=Math.max(0,16-(d-b));var g=window.setTimeout(function(){h(d+f)},f);b=d+f;return g}}if(!window.cancelAnimationFrame){window.cancelAnimationFrame=function(d){clearTimeout(d)}}}());
/*
* Point class
*/
var Point = (function() {
function Point(x, y) {
this.x = (typeof x !== 'undefined') ? x : 0;
this.y = (typeof y !== 'undefined') ? y : 0;
}
Point.prototype.clone = function() {
return new Point(this.x, this.y);
};
Point.prototype.length = function(length) {
if (typeof length == 'undefined')
return Math.sqrt(this.x * this.x + this.y * this.y);
this.normalize();
this.x *= length;
this.y *= length;
return this;
};
Point.prototype.normalize = function() {
var length = this.length();
this.x /= length;
this.y /= length;
return this;
};
return Point;
})();
/*
* Particle class
*/
var Particle = (function() {
function Particle() {
this.position = new Point();
this.velocity = new Point();
this.acceleration = new Point();
this.age = 0;
}
Particle.prototype.initialize = function(x, y, dx, dy) {
this.position.x = x;
this.position.y = y;
this.velocity.x = dx;
this.velocity.y = dy;
this.acceleration.x = dx * settings.particles.effect;
this.acceleration.y = dy * settings.particles.effect;
this.age = 0;
};
Particle.prototype.update = function(deltaTime) {
this.position.x += this.velocity.x * deltaTime;
this.position.y += this.velocity.y * deltaTime;
this.velocity.x += this.acceleration.x * deltaTime;
this.velocity.y += this.acceleration.y * deltaTime;
this.age += deltaTime;
};
Particle.prototype.draw = function(context, image) {
function ease(t) {
return (--t) * t * t + 1;
}
var size = image.width * ease(this.age / settings.particles.duration);
context.globalAlpha = 1 - this.age / settings.particles.duration;
context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);
};
return Particle;
})();
/*
* ParticlePool class
*/
var ParticlePool = (function() {
var particles,
firstActive = 0,
firstFree = 0,
duration = settings.particles.duration;
function ParticlePool(length) {
// create and populate particle pool
particles = new Array(length);
for (var i = 0; i < particles.length; i++)
particles[i] = new Particle();
}
ParticlePool.prototype.add = function(x, y, dx, dy) {
particles[firstFree].initialize(x, y, dx, dy);
// handle circular queue
firstFree++;
if (firstFree == particles.length) firstFree = 0;
if (firstActive == firstFree ) firstActive++;
if (firstActive == particles.length) firstActive = 0;
};
ParticlePool.prototype.update = function(deltaTime) {
var i;
// update active particles
if (firstActive < firstFree) {
for (i = firstActive; i < firstFree; i++)
particles[i].update(deltaTime);
}
if (firstFree < firstActive) {
for (i = firstActive; i < particles.length; i++)
particles[i].update(deltaTime);
for (i = 0; i < firstFree; i++)
particles[i].update(deltaTime);
}
// remove inactive particles
while (particles[firstActive].age >= duration && firstActive != firstFree) {
firstActive++;
if (firstActive == particles.length) firstActive = 0;
}
};
ParticlePool.prototype.draw = function(context, image) {
// draw active particles
if (firstActive < firstFree) {
for (i = firstActive; i < firstFree; i++)
particles[i].draw(context, image);
}
if (firstFree < firstActive) {
for (i = firstActive; i < particles.length; i++)
particles[i].draw(context, image);
for (i = 0; i < firstFree; i++)
particles[i].draw(context, image);
}
};
return ParticlePool;
})();
/*
* Putting it all together
*/
(function(canvas) {
var context = canvas.getContext('2d'),
particles = new ParticlePool(settings.particles.length),
particleRate = settings.particles.length / settings.particles.duration, // particles/sec
time;
// get point on heart with -PI <= t <= PI
function pointOnHeart(t) {
return new Point(
160 * Math.pow(Math.sin(t), 3),
130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25
);
}
// creating the particle image using a dummy canvas
var image = (function() {
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d');
canvas.width = settings.particles.size;
canvas.height = settings.particles.size;
// helper function to create the path
function to(t) {
var point = pointOnHeart(t);
point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;
return point;
}
// create the path
context.beginPath();
var t = -Math.PI;
var point = to(t);
context.moveTo(point.x, point.y);
while (t < Math.PI) {
t += 0.01; // baby steps!
point = to(t);
context.lineTo(point.x, point.y);
}
context.closePath();
// create the fill
context.fillStyle = '#ea80b0';
context.fill();
// create the image
var image = new Image();
image.src = canvas.toDataURL();
return image;
})();
// render that thing!
function render() {
// next animation frame
requestAnimationFrame(render);
// update time
var newTime = new Date().getTime() / 1000,
deltaTime = newTime - (time || newTime);
time = newTime;
// clear canvas
context.clearRect(0, 0, canvas.width, canvas.height);
// create new particles
var amount = particleRate * deltaTime;
for (var i = 0; i < amount; i++) {
var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
var dir = pos.clone().length(settings.particles.velocity);
particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
}
// update and draw particles
particles.update(deltaTime);
particles.draw(context, image);
}
// handle (re-)sizing of the canvas
function onResize() {
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
}
window.onresize = onResize;
// delay rendering bootstrap
setTimeout(function() {
onResize();
render();
}, 10);
})(document.getElementById('pinkboard'));
</script>
</BODY>
</HTML>
运行结果：
3.樱花飘落
代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>body {
padding:0;
margin:0;
overflow:hidden;
height: 600px;
}
canvas {
padding:0;
margin:0;
}
div.btnbg {
position:fixed;
left:0;
top:0;
}</style>
</HEAD>
<BODY>
<canvas id="sakura"></canvas>
<div class="btnbg">
</div>
<!-- sakura shader -->
<script id="sakura_point_vsh" type="x-shader/x_vertex">
uniform mat4 uProjection;
uniform mat4 uModelview;
uniform vec3 uResolution;
uniform vec3 uOffset;
uniform vec3 uDOF; //x:focus distance, y:focus radius, z:max radius
uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start
attribute vec3 aPosition;
attribute vec3 aEuler;
attribute vec2 aMisc; //x:size, y:fade
varying vec3 pposition;
varying float psize;
varying float palpha;
varying float pdist;
//varying mat3 rotMat;
varying vec3 normX;
varying vec3 normY;
varying vec3 normZ;
varying vec3 normal;
varying float diffuse;
varying float specular;
varying float rstop;
varying float distancefade;
void main(void) {
// Projection is based on vertical angle
vec4 pos = uModelview * vec4(aPosition + uOffset, 1.0);
gl_Position = uProjection * pos;
gl_PointSize = aMisc.x * uProjection[1][1] / -pos.z * uResolution.y * 0.5;
pposition = pos.xyz;
psize = aMisc.x;
pdist = length(pos.xyz);
palpha = smoothstep(0.0, 1.0, (pdist - 0.1) / uFade.z);
vec3 elrsn = sin(aEuler);
vec3 elrcs = cos(aEuler);
mat3 rotx = mat3(
1.0, 0.0, 0.0,
0.0, elrcs.x, elrsn.x,
0.0, -elrsn.x, elrcs.x
);
mat3 roty = mat3(
elrcs.y, 0.0, -elrsn.y,
0.0, 1.0, 0.0,
elrsn.y, 0.0, elrcs.y
);
mat3 rotz = mat3(
elrcs.z, elrsn.z, 0.0,
-elrsn.z, elrcs.z, 0.0,
0.0, 0.0, 1.0
);
mat3 rotmat = rotx * roty * rotz;
normal = rotmat[2];
mat3 trrotm = mat3(
rotmat[0][0], rotmat[1][0], rotmat[2][0],
rotmat[0][1], rotmat[1][1], rotmat[2][1],
rotmat[0][2], rotmat[1][2], rotmat[2][2]
);
normX = trrotm[0];
normY = trrotm[1];
normZ = trrotm[2];
const vec3 lit = vec3(0.6917144638660746, 0.6917144638660746, -0.20751433915982237);
float tmpdfs = dot(lit, normal);
if(tmpdfs < 0.0) {
normal = -normal;
tmpdfs = dot(lit, normal);
}
diffuse = 0.4 + tmpdfs;
vec3 eyev = normalize(-pos.xyz);
if(dot(eyev, normal) > 0.0) {
vec3 hv = normalize(eyev + lit);
specular = pow(max(dot(hv, normal), 0.0), 20.0);
}
else {
specular = 0.0;
}
rstop = clamp((abs(pdist - uDOF.x) - uDOF.y) / uDOF.z, 0.0, 1.0);
rstop = pow(rstop, 0.5);
//-0.69315 = ln(0.5)
distancefade = min(1.0, exp((uFade.x - pdist) * 0.69315 / uFade.y));
}
</script>
<script id="sakura_point_fsh" type="x-shader/x_fragment">
#ifdef GL_ES
//precision mediump float;
precision highp float;
#endif
uniform vec3 uDOF; //x:focus distance, y:focus radius, z:max radius
uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start
const vec3 fadeCol = vec3(0.08, 0.03, 0.06);
varying vec3 pposition;
varying float psize;
varying float palpha;
varying float pdist;
//varying mat3 rotMat;
varying vec3 normX;
varying vec3 normY;
varying vec3 normZ;
varying vec3 normal;
varying float diffuse;
varying float specular;
varying float rstop;
varying float distancefade;
float ellipse(vec2 p, vec2 o, vec2 r) {
vec2 lp = (p - o) / r;
return length(lp) - 1.0;
}
void main(void) {
vec3 p = vec3(gl_PointCoord - vec2(0.5, 0.5), 0.0) * 2.0;
vec3 d = vec3(0.0, 0.0, -1.0);
float nd = normZ.z; //dot(-normZ, d);
if(abs(nd) < 0.0001) discard;
float np = dot(normZ, p);
vec3 tp = p + d * np / nd;
vec2 coord = vec2(dot(normX, tp), dot(normY, tp));
//angle = 15 degree
const float flwrsn = 0.258819045102521;
const float flwrcs = 0.965925826289068;
mat2 flwrm = mat2(flwrcs, -flwrsn, flwrsn, flwrcs);
vec2 flwrp = vec2(abs(coord.x), coord.y) * flwrm;
float r;
if(flwrp.x < 0.0) {
r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.36, 0.96) * 0.5);
}
else {
r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.58, 0.96) * 0.5);
}
if(r > rstop) discard;
vec3 col = mix(vec3(1.0, 0.8, 0.75), vec3(1.0, 0.9, 0.87), r);
float grady = mix(0.0, 1.0, pow(coord.y * 0.5 + 0.5, 0.35));
col *= vec3(1.0, grady, grady);
col *= mix(0.8, 1.0, pow(abs(coord.x), 0.3));
col = col * diffuse + specular;
col = mix(fadeCol, col, distancefade);
float alpha = (rstop > 0.001)? (0.5 - r / (rstop * 2.0)) : 1.0;
alpha = smoothstep(0.0, 1.0, alpha) * palpha;
gl_FragColor = vec4(col * 0.5, alpha);
}
</script>
<!-- effects -->
<script id="fx_common_vsh" type="x-shader/x_vertex">
uniform vec3 uResolution;
attribute vec2 aPosition;
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {
gl_Position = vec4(aPosition, 0.0, 1.0);
texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);
screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);
}
</script>
<script id="bg_fsh" type="x-shader/x_fragment">
#ifdef GL_ES
//precision mediump float;
precision highp float;
#endif
uniform vec2 uTimes;
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {
vec3 col;
float c;
vec2 tmpv = texCoord * vec2(0.8, 1.0) - vec2(0.95, 1.0);
c = exp(-pow(length(tmpv) * 1.8, 2.0));
col = mix(vec3(0.02, 0.0, 0.03), vec3(0.96, 0.98, 1.0) * 1.5, c);
gl_FragColor = vec4(col * 0.5, 1.0);
}
</script>
<script id="fx_brightbuf_fsh" type="x-shader/x_fragment">
#ifdef GL_ES
//precision mediump float;
precision highp float;
#endif
uniform sampler2D uSrc;
uniform vec2 uDelta;
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {
vec4 col = texture2D(uSrc, texCoord);
gl_FragColor = vec4(col.rgb * 2.0 - vec3(0.5), 1.0);
}
</script>
<script id="fx_dirblur_r4_fsh" type="x-shader/x_fragment">
#ifdef GL_ES
//precision mediump float;
precision highp float;
#endif
uniform sampler2D uSrc;
uniform vec2 uDelta;
uniform vec4 uBlurDir; //dir(x, y), stride(z, w)
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {
vec4 col = texture2D(uSrc, texCoord);
col = col + texture2D(uSrc, texCoord + uBlurDir.xy * uDelta);
col = col + texture2D(uSrc, texCoord - uBlurDir.xy * uDelta);
col = col + texture2D(uSrc, texCoord + (uBlurDir.xy + uBlurDir.zw) * uDelta);
col = col + texture2D(uSrc, texCoord - (uBlurDir.xy + uBlurDir.zw) * uDelta);
gl_FragColor = col / 5.0;
}
</script>
<!-- effect fragment shader template -->
<script id="fx_common_fsh" type="x-shader/x_fragment">
#ifdef GL_ES
//precision mediump float;
precision highp float;
#endif
uniform sampler2D uSrc;
uniform vec2 uDelta;
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {
gl_FragColor = texture2D(uSrc, texCoord);
}
</script>
<!-- post processing -->
<script id="pp_final_vsh" type="x-shader/x_vertex">
uniform vec3 uResolution;
attribute vec2 aPosition;
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {
gl_Position = vec4(aPosition, 0.0, 1.0);
texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);
screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);
}
</script>
<script id="pp_final_fsh" type="x-shader/x_fragment">
#ifdef GL_ES
//precision mediump float;
precision highp float;
#endif
uniform sampler2D uSrc;
uniform sampler2D uBloom;
uniform vec2 uDelta;
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {
vec4 srccol = texture2D(uSrc, texCoord) * 2.0;
vec4 bloomcol = texture2D(uBloom, texCoord);
vec4 col;
col = srccol + bloomcol * (vec4(1.0) + srccol);
col *= smoothstep(1.0, 0.0, pow(length((texCoord - vec2(0.5)) * 2.0), 1.2) * 0.5);
col = pow(col, vec4(0.45454545454545)); //(1.0 / 2.2)
gl_FragColor = vec4(col.rgb, 1.0);
gl_FragColor.a = 1.0;
}
</script>
<script>
// Utilities
var Vector3 = {};
var Matrix44 = {};
Vector3.create = function(x, y, z) {
return {'x':x, 'y':y, 'z':z};
};
Vector3.dot = function (v0, v1) {
return v0.x * v1.x + v0.y * v1.y + v0.z * v1.z;
};
Vector3.cross = function (v, v0, v1) {
v.x = v0.y * v1.z - v0.z * v1.y;
v.y = v0.z * v1.x - v0.x * v1.z;
v.z = v0.x * v1.y - v0.y * v1.x;
};
Vector3.normalize = function (v) {
var l = v.x * v.x + v.y * v.y + v.z * v.z;
if(l > 0.00001) {
l = 1.0 / Math.sqrt(l);
v.x *= l;
v.y *= l;
v.z *= l;
}
};
Vector3.arrayForm = function(v) {
if(v.array) {
v.array[0] = v.x;
v.array[1] = v.y;
v.array[2] = v.z;
}
else {
v.array = new Float32Array([v.x, v.y, v.z]);
}
return v.array;
};
Matrix44.createIdentity = function () {
return new Float32Array([1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0]);
};
Matrix44.loadProjection = function (m, aspect, vdeg, near, far) {
var h = near * Math.tan(vdeg * Math.PI / 180.0 * 0.5) * 2.0;
var w = h * aspect;
m[0] = 2.0 * near / w;
m[1] = 0.0;
m[2] = 0.0;
m[3] = 0.0;
m[4] = 0.0;
m[5] = 2.0 * near / h;
m[6] = 0.0;
m[7] = 0.0;
m[8] = 0.0;
m[9] = 0.0;
m[10] = -(far + near) / (far - near);
m[11] = -1.0;
m[12] = 0.0;
m[13] = 0.0;
m[14] = -2.0 * far * near / (far - near);
m[15] = 0.0;
};
Matrix44.loadLookAt = function (m, vpos, vlook, vup) {
var frontv = Vector3.create(vpos.x - vlook.x, vpos.y - vlook.y, vpos.z - vlook.z);
Vector3.normalize(frontv);
var sidev = Vector3.create(1.0, 0.0, 0.0);
Vector3.cross(sidev, vup, frontv);
Vector3.normalize(sidev);
var topv = Vector3.create(1.0, 0.0, 0.0);
Vector3.cross(topv, frontv, sidev);
Vector3.normalize(topv);
m[0] = sidev.x;
m[1] = topv.x;
m[2] = frontv.x;
m[3] = 0.0;
m[4] = sidev.y;
m[5] = topv.y;
m[6] = frontv.y;
m[7] = 0.0;
m[8] = sidev.z;
m[9] = topv.z;
m[10] = frontv.z;
m[11] = 0.0;
m[12] = -(vpos.x * m[0] + vpos.y * m[4] + vpos.z * m[8]);
m[13] = -(vpos.x * m[1] + vpos.y * m[5] + vpos.z * m[9]);
m[14] = -(vpos.x * m[2] + vpos.y * m[6] + vpos.z * m[10]);
m[15] = 1.0;
};
//
var timeInfo = {
'start':0, 'prev':0, // Date
'delta':0, 'elapsed':0 // Number(sec)
};
//
var gl;
var renderSpec = {
'width':0,
'height':0,
'aspect':1,
'array':new Float32Array(3),
'halfWidth':0,
'halfHeight':0,
'halfArray':new Float32Array(3)
// and some render targets. see setViewport()
};
renderSpec.setSize = function(w, h) {
renderSpec.width = w;
renderSpec.height = h;
renderSpec.aspect = renderSpec.width / renderSpec.height;
renderSpec.array[0] = renderSpec.width;
renderSpec.array[1] = renderSpec.height;
renderSpec.array[2] = renderSpec.aspect;
renderSpec.halfWidth = Math.floor(w / 2);
renderSpec.halfHeight = Math.floor(h / 2);
renderSpec.halfArray[0] = renderSpec.halfWidth;
renderSpec.halfArray[1] = renderSpec.halfHeight;
renderSpec.halfArray[2] = renderSpec.halfWidth / renderSpec.halfHeight;
};
function deleteRenderTarget(rt) {
gl.deleteFramebuffer(rt.frameBuffer);
gl.deleteRenderbuffer(rt.renderBuffer);
gl.deleteTexture(rt.texture);
}
function createRenderTarget(w, h) {
var ret = {
'width':w,
'height':h,
'sizeArray':new Float32Array([w, h, w / h]),
'dtxArray':new Float32Array([1.0 / w, 1.0 / h])
};
ret.frameBuffer = gl.createFramebuffer();
ret.renderBuffer = gl.createRenderbuffer();
ret.texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, ret.texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.bindFramebuffer(gl.FRAMEBUFFER, ret.frameBuffer);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, ret.texture, 0);
gl.bindRenderbuffer(gl.RENDERBUFFER, ret.renderBuffer);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, w, h);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, ret.renderBuffer);
gl.bindTexture(gl.TEXTURE_2D, null);
gl.bindRenderbuffer(gl.RENDERBUFFER, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
return ret;
}
function compileShader(shtype, shsrc) {
var retsh = gl.createShader(shtype);
gl.shaderSource(retsh, shsrc);
gl.compileShader(retsh);
if(!gl.getShaderParameter(retsh, gl.COMPILE_STATUS)) {
var errlog = gl.getShaderInfoLog(retsh);
gl.deleteShader(retsh);
console.error(errlog);
return null;
}
return retsh;
}
function createShader(vtxsrc, frgsrc, uniformlist, attrlist) {
var vsh = compileShader(gl.VERTEX_SHADER, vtxsrc);
var fsh = compileShader(gl.FRAGMENT_SHADER, frgsrc);
if(vsh == null || fsh == null) {
return null;
}
var prog = gl.createProgram();
gl.attachShader(prog, vsh);
gl.attachShader(prog, fsh);
gl.deleteShader(vsh);
gl.deleteShader(fsh);
gl.linkProgram(prog);
if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
var errlog = gl.getProgramInfoLog(prog);
console.error(errlog);
return null;
}
if(uniformlist) {
prog.uniforms = {};
for(var i = 0; i < uniformlist.length; i++) {
prog.uniforms[uniformlist[i]] = gl.getUniformLocation(prog, uniformlist[i]);
}
}
if(attrlist) {
prog.attributes = {};
for(var i = 0; i < attrlist.length; i++) {
var attr = attrlist[i];
prog.attributes[attr] = gl.getAttribLocation(prog, attr);
}
}
return prog;
}
function useShader(prog) {
gl.useProgram(prog);
for(var attr in prog.attributes) {
gl.enableVertexAttribArray(prog.attributes[attr]);;
}
}
function unuseShader(prog) {
for(var attr in prog.attributes) {
gl.disableVertexAttribArray(prog.attributes[attr]);;
}
gl.useProgram(null);
}
var projection = {
'angle':60,
'nearfar':new Float32Array([0.1, 100.0]),
'matrix':Matrix44.createIdentity()
};
var camera = {
'position':Vector3.create(0, 0, 100),
'lookat':Vector3.create(0, 0, 0),
'up':Vector3.create(0, 1, 0),
'dof':Vector3.create(10.0, 4.0, 8.0),
'matrix':Matrix44.createIdentity()
};
var pointFlower = {};
var meshFlower = {};
var sceneStandBy = false;
var BlossomParticle = function () {
this.velocity = new Array(3);
this.rotation = new Array(3);
this.position = new Array(3);
this.euler = new Array(3);
this.size = 1.0;
this.alpha = 1.0;
this.zkey = 0.0;
};
BlossomParticle.prototype.setVelocity = function (vx, vy, vz) {
this.velocity[0] = vx;
this.velocity[1] = vy;
this.velocity[2] = vz;
};
BlossomParticle.prototype.setRotation = function (rx, ry, rz) {
this.rotation[0] = rx;
this.rotation[1] = ry;
this.rotation[2] = rz;
};
BlossomParticle.prototype.setPosition = function (nx, ny, nz) {
this.position[0] = nx;
this.position[1] = ny;
this.position[2] = nz;
};
BlossomParticle.prototype.setEulerAngles = function (rx, ry, rz) {
this.euler[0] = rx;
this.euler[1] = ry;
this.euler[2] = rz;
};
BlossomParticle.prototype.setSize = function (s) {
this.size = s;
};
BlossomParticle.prototype.update = function (dt, et) {
this.position[0] += this.velocity[0] * dt;
this.position[1] += this.velocity[1] * dt;
this.position[2] += this.velocity[2] * dt;
this.euler[0] += this.rotation[0] * dt;
this.euler[1] += this.rotation[1] * dt;
this.euler[2] += this.rotation[2] * dt;
};
function createPointFlowers() {
// get point sizes
var prm = gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE);
renderSpec.pointSize = {'min':prm[0], 'max':prm[1]};
var vtxsrc = document.getElementById("sakura_point_vsh").textContent;
var frgsrc = document.getElementById("sakura_point_fsh").textContent;
pointFlower.program = createShader(
vtxsrc, frgsrc,
['uProjection', 'uModelview', 'uResolution', 'uOffset', 'uDOF', 'uFade'],
['aPosition', 'aEuler', 'aMisc']
);
useShader(pointFlower.program);
pointFlower.offset = new Float32Array([0.0, 0.0, 0.0]);
pointFlower.fader = Vector3.create(0.0, 10.0, 0.0);
// paramerters: velocity[3], rotate[3]
pointFlower.numFlowers = 1600;
pointFlower.particles = new Array(pointFlower.numFlowers);
// vertex attributes {position[3], euler_xyz[3], size[1]}
pointFlower.dataArray = new Float32Array(pointFlower.numFlowers * (3 + 3 + 2));
pointFlower.positionArrayOffset = 0;
pointFlower.eulerArrayOffset = pointFlower.numFlowers * 3;
pointFlower.miscArrayOffset = pointFlower.numFlowers * 6;
pointFlower.buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, pointFlower.buffer);
gl.bufferData(gl.ARRAY_BUFFER, pointFlower.dataArray, gl.DYNAMIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
unuseShader(pointFlower.program);
for(var i = 0; i < pointFlower.numFlowers; i++) {
pointFlower.particles[i] = new BlossomParticle();
}
}
function initPointFlowers() {
//area
pointFlower.area = Vector3.create(20.0, 20.0, 20.0);
pointFlower.area.x = pointFlower.area.y * renderSpec.aspect;
pointFlower.fader.x = 10.0; //env fade start
pointFlower.fader.y = pointFlower.area.z; //env fade half
pointFlower.fader.z = 0.1; //near fade start
//particles
var PI2 = Math.PI * 2.0;
var tmpv3 = Vector3.create(0, 0, 0);
var tmpv = 0;
var symmetryrand = function() {return (Math.random() * 2.0 - 1.0);};
for(var i = 0; i < pointFlower.numFlowers; i++) {
var tmpprtcl = pointFlower.particles[i];
//velocity
tmpv3.x = symmetryrand() * 0.3 + 0.8;
tmpv3.y = symmetryrand() * 0.2 - 1.0;
tmpv3.z = symmetryrand() * 0.3 + 0.5;
Vector3.normalize(tmpv3);
tmpv = 2.0 + Math.random() * 1.0;
tmpprtcl.setVelocity(tmpv3.x * tmpv, tmpv3.y * tmpv, tmpv3.z * tmpv);
//rotation
tmpprtcl.setRotation(
symmetryrand() * PI2 * 0.5,
symmetryrand() * PI2 * 0.5,
symmetryrand() * PI2 * 0.5
);
//position
tmpprtcl.setPosition(
symmetryrand() * pointFlower.area.x,
symmetryrand() * pointFlower.area.y,
symmetryrand() * pointFlower.area.z
);
//euler
tmpprtcl.setEulerAngles(
Math.random() * Math.PI * 2.0,
Math.random() * Math.PI * 2.0,
Math.random() * Math.PI * 2.0
);
//size
tmpprtcl.setSize(0.9 + Math.random() * 0.1);
}
}
function renderPointFlowers() {
//update
var PI2 = Math.PI * 2.0;
var limit = [pointFlower.area.x, pointFlower.area.y, pointFlower.area.z];
var repeatPos = function (prt, cmp, limit) {
if(Math.abs(prt.position[cmp]) - prt.size * 0.5 > limit) {
//out of area
if(prt.position[cmp] > 0) {
prt.position[cmp] -= limit * 2.0;
}
else {
prt.position[cmp] += limit * 2.0;
}
}
};
var repeatEuler = function (prt, cmp) {
prt.euler[cmp] = prt.euler[cmp] % PI2;
if(prt.euler[cmp] < 0.0) {
prt.euler[cmp] += PI2;
}
};
for(var i = 0; i < pointFlower.numFlowers; i++) {
var prtcl = pointFlower.particles[i];
prtcl.update(timeInfo.delta, timeInfo.elapsed);
repeatPos(prtcl, 0, pointFlower.area.x);
repeatPos(prtcl, 1, pointFlower.area.y);
repeatPos(prtcl, 2, pointFlower.area.z);
repeatEuler(prtcl, 0);
repeatEuler(prtcl, 1);
repeatEuler(prtcl, 2);
prtcl.alpha = 1.0;//(pointFlower.area.z - prtcl.position[2]) * 0.5;
prtcl.zkey = (camera.matrix[2] * prtcl.position[0]
+ camera.matrix[6] * prtcl.position[1]
+ camera.matrix[10] * prtcl.position[2]
+ camera.matrix[14]);
}
// sort
pointFlower.particles.sort(function(p0, p1){return p0.zkey - p1.zkey;});
// update data
var ipos = pointFlower.positionArrayOffset;
var ieuler = pointFlower.eulerArrayOffset;
var imisc = pointFlower.miscArrayOffset;
for(var i = 0; i < pointFlower.numFlowers; i++) {
var prtcl = pointFlower.particles[i];
pointFlower.dataArray[ipos] = prtcl.position[0];
pointFlower.dataArray[ipos + 1] = prtcl.position[1];
pointFlower.dataArray[ipos + 2] = prtcl.position[2];
ipos += 3;
pointFlower.dataArray[ieuler] = prtcl.euler[0];
pointFlower.dataArray[ieuler + 1] = prtcl.euler[1];
pointFlower.dataArray[ieuler + 2] = prtcl.euler[2];
ieuler += 3;
pointFlower.dataArray[imisc] = prtcl.size;
pointFlower.dataArray[imisc + 1] = prtcl.alpha;
imisc += 2;
}
//draw
gl.enable(gl.BLEND);
//gl.disable(gl.DEPTH_TEST);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
var prog = pointFlower.program;
useShader(prog);
gl.uniformMatrix4fv(prog.uniforms.uProjection, false, projection.matrix);
gl.uniformMatrix4fv(prog.uniforms.uModelview, false, camera.matrix);
gl.uniform3fv(prog.uniforms.uResolution, renderSpec.array);
gl.uniform3fv(prog.uniforms.uDOF, Vector3.arrayForm(camera.dof));
gl.uniform3fv(prog.uniforms.uFade, Vector3.arrayForm(pointFlower.fader));
gl.bindBuffer(gl.ARRAY_BUFFER, pointFlower.buffer);
gl.bufferData(gl.ARRAY_BUFFER, pointFlower.dataArray, gl.DYNAMIC_DRAW);
gl.vertexAttribPointer(prog.attributes.aPosition, 3, gl.FLOAT, false, 0, pointFlower.positionArrayOffset * Float32Array.BYTES_PER_ELEMENT);
gl.vertexAttribPointer(prog.attributes.aEuler, 3, gl.FLOAT, false, 0, pointFlower.eulerArrayOffset * Float32Array.BYTES_PER_ELEMENT);
gl.vertexAttribPointer(prog.attributes.aMisc, 2, gl.FLOAT, false, 0, pointFlower.miscArrayOffset * Float32Array.BYTES_PER_ELEMENT);
// doubler
for(var i = 1; i < 2; i++) {
var zpos = i * -2.0;
pointFlower.offset[0] = pointFlower.area.x * -1.0;
pointFlower.offset[1] = pointFlower.area.y * -1.0;
pointFlower.offset[2] = pointFlower.area.z * zpos;
gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
pointFlower.offset[0] = pointFlower.area.x * -1.0;
pointFlower.offset[1] = pointFlower.area.y * 1.0;
pointFlower.offset[2] = pointFlower.area.z * zpos;
gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
pointFlower.offset[0] = pointFlower.area.x * 1.0;
pointFlower.offset[1] = pointFlower.area.y * -1.0;
pointFlower.offset[2] = pointFlower.area.z * zpos;
gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
pointFlower.offset[0] = pointFlower.area.x * 1.0;
pointFlower.offset[1] = pointFlower.area.y * 1.0;
pointFlower.offset[2] = pointFlower.area.z * zpos;
gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
}
//main
pointFlower.offset[0] = 0.0;
pointFlower.offset[1] = 0.0;
pointFlower.offset[2] = 0.0;
gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
unuseShader(prog);
gl.enable(gl.DEPTH_TEST);
gl.disable(gl.BLEND);
}
// effects
//common util
function createEffectProgram(vtxsrc, frgsrc, exunifs, exattrs) {
var ret = {};
var unifs = ['uResolution', 'uSrc', 'uDelta'];
if(exunifs) {
unifs = unifs.concat(exunifs);
}
var attrs = ['aPosition'];
if(exattrs) {
attrs = attrs.concat(exattrs);
}
ret.program = createShader(vtxsrc, frgsrc, unifs, attrs);
useShader(ret.program);
ret.dataArray = new Float32Array([
-1.0, -1.0,
1.0, -1.0,
-1.0, 1.0,
1.0, 1.0
]);
ret.buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, ret.buffer);
gl.bufferData(gl.ARRAY_BUFFER, ret.dataArray, gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
unuseShader(ret.program);
return ret;
}
// basic usage
// useEffect(prog, srctex({'texture':texid, 'dtxArray':(f32)[dtx, dty]})); //basic initialize
// gl.uniform**(...); //additional uniforms
// drawEffect()
// unuseEffect(prog)
// TEXTURE0 makes src
function useEffect(fxobj, srctex) {
var prog = fxobj.program;
useShader(prog);
gl.uniform3fv(prog.uniforms.uResolution, renderSpec.array);
if(srctex != null) {
gl.uniform2fv(prog.uniforms.uDelta, srctex.dtxArray);
gl.uniform1i(prog.uniforms.uSrc, 0);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, srctex.texture);
}
}
function drawEffect(fxobj) {
gl.bindBuffer(gl.ARRAY_BUFFER, fxobj.buffer);
gl.vertexAttribPointer(fxobj.program.attributes.aPosition, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}
function unuseEffect(fxobj) {
unuseShader(fxobj.program);
}
var effectLib = {};
function createEffectLib() {
var vtxsrc, frgsrc;
//common
var cmnvtxsrc = document.getElementById("fx_common_vsh").textContent;
//background
frgsrc = document.getElementById("bg_fsh").textContent;
effectLib.sceneBg = createEffectProgram(cmnvtxsrc, frgsrc, ['uTimes'], null);
// make brightpixels buffer
frgsrc = document.getElementById("fx_brightbuf_fsh").textContent;
effectLib.mkBrightBuf = createEffectProgram(cmnvtxsrc, frgsrc, null, null);
// direction blur
frgsrc = document.getElementById("fx_dirblur_r4_fsh").textContent;
effectLib.dirBlur = createEffectProgram(cmnvtxsrc, frgsrc, ['uBlurDir'], null);
//final composite
vtxsrc = document.getElementById("pp_final_vsh").textContent;
frgsrc = document.getElementById("pp_final_fsh").textContent;
effectLib.finalComp = createEffectProgram(vtxsrc, frgsrc, ['uBloom'], null);
}
// background
function createBackground() {
//console.log("create background");
}
function initBackground() {
//console.log("init background");
}
function renderBackground() {
gl.disable(gl.DEPTH_TEST);
useEffect(effectLib.sceneBg, null);
gl.uniform2f(effectLib.sceneBg.program.uniforms.uTimes, timeInfo.elapsed, timeInfo.delta);
drawEffect(effectLib.sceneBg);
unuseEffect(effectLib.sceneBg);
gl.enable(gl.DEPTH_TEST);
}
// post process
var postProcess = {};
function createPostProcess() {
//console.log("create post process");
}
function initPostProcess() {
//console.log("init post process");
}
function renderPostProcess() {
gl.enable(gl.TEXTURE_2D);
gl.disable(gl.DEPTH_TEST);
var bindRT = function (rt, isclear) {
gl.bindFramebuffer(gl.FRAMEBUFFER, rt.frameBuffer);
gl.viewport(0, 0, rt.width, rt.height);
if(isclear) {
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
}
};
//make bright buff
bindRT(renderSpec.wHalfRT0, true);
useEffect(effectLib.mkBrightBuf, renderSpec.mainRT);
drawEffect(effectLib.mkBrightBuf);
unuseEffect(effectLib.mkBrightBuf);
// make bloom
for(var i = 0; i < 2; i++) {
var p = 1.5 + 1 * i;
var s = 2.0 + 1 * i;
bindRT(renderSpec.wHalfRT1, true);
useEffect(effectLib.dirBlur, renderSpec.wHalfRT0);
gl.uniform4f(effectLib.dirBlur.program.uniforms.uBlurDir, p, 0.0, s, 0.0);
drawEffect(effectLib.dirBlur);
unuseEffect(effectLib.dirBlur);
bindRT(renderSpec.wHalfRT0, true);
useEffect(effectLib.dirBlur, renderSpec.wHalfRT1);
gl.uniform4f(effectLib.dirBlur.program.uniforms.uBlurDir, 0.0, p, 0.0, s);
drawEffect(effectLib.dirBlur);
unuseEffect(effectLib.dirBlur);
}
//display
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.viewport(0, 0, renderSpec.width, renderSpec.height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
useEffect(effectLib.finalComp, renderSpec.mainRT);
gl.uniform1i(effectLib.finalComp.program.uniforms.uBloom, 1);
gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, renderSpec.wHalfRT0.texture);
drawEffect(effectLib.finalComp);
unuseEffect(effectLib.finalComp);
gl.enable(gl.DEPTH_TEST);
}
var SceneEnv = {};
function createScene() {
createEffectLib();
createBackground();
createPointFlowers();
createPostProcess();
sceneStandBy = true;
}
function initScene() {
initBackground();
initPointFlowers();
initPostProcess();
//camera.position.z = 17.320508;
camera.position.z = pointFlower.area.z + projection.nearfar[0];
projection.angle = Math.atan2(pointFlower.area.y, camera.position.z + pointFlower.area.z) * 180.0 / Math.PI * 2.0;
Matrix44.loadProjection(projection.matrix, renderSpec.aspect, projection.angle, projection.nearfar[0], projection.nearfar[1]);
}
function renderScene() {
//draw
Matrix44.loadLookAt(camera.matrix, camera.position, camera.lookat, camera.up);
gl.enable(gl.DEPTH_TEST);
//gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, renderSpec.mainRT.frameBuffer);
gl.viewport(0, 0, renderSpec.mainRT.width, renderSpec.mainRT.height);
gl.clearColor(0.005, 0, 0.05, 0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
renderBackground();
renderPointFlowers();
renderPostProcess();
}
function onResize(e) {
makeCanvasFullScreen(document.getElementById("sakura"));
setViewports();
if(sceneStandBy) {
initScene();
}
}
function setViewports() {
renderSpec.setSize(gl.canvas.width, gl.canvas.height);
gl.clearColor(0.2, 0.2, 0.5, 1.0);
gl.viewport(0, 0, renderSpec.width, renderSpec.height);
var rtfunc = function (rtname, rtw, rth) {
var rt = renderSpec[rtname];
if(rt) deleteRenderTarget(rt);
renderSpec[rtname] = createRenderTarget(rtw, rth);
};
rtfunc('mainRT', renderSpec.width, renderSpec.height);
rtfunc('wFullRT0', renderSpec.width, renderSpec.height);
rtfunc('wFullRT1', renderSpec.width, renderSpec.height);
rtfunc('wHalfRT0', renderSpec.halfWidth, renderSpec.halfHeight);
rtfunc('wHalfRT1', renderSpec.halfWidth, renderSpec.halfHeight);
}
function render() {
renderScene();
}
var animating = true;
function toggleAnimation(elm) {
animating ^= true;
if(animating) animate();
if(elm) {
elm.innerHTML = animating? "Stop":"Start";
}
}
function stepAnimation() {
if(!animating) animate();
}
function animate() {
var curdate = new Date();
timeInfo.elapsed = (curdate - timeInfo.start) / 1000.0;
timeInfo.delta = (curdate - timeInfo.prev) / 1000.0;
timeInfo.prev = curdate;
if(animating) requestAnimationFrame(animate);
render();
}
function makeCanvasFullScreen(canvas) {
var b = document.body;
var d = document.documentElement;
fullw = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth);
fullh = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight, d.clientHeight);
canvas.width = fullw;
canvas.height = fullh;
}
window.addEventListener('load', function(e) {
var canvas = document.getElementById("sakura");
try {
makeCanvasFullScreen(canvas);
gl = canvas.getContext('experimental-webgl');
} catch(e) {
alert("WebGL not supported." + e);
console.error(e);
return;
}
window.addEventListener('resize', onResize);
setViewports();
createScene();
initScene();
timeInfo.start = new Date();
timeInfo.prev = timeInfo.start;
animate();
});
//set window.requestAnimationFrame
(function (w, r) {
w['r'+r] = w['r'+r] || w['webkitR'+r] || w['mozR'+r] || w['msR'+r] || w['oR'+r] || function(c){ w.setTimeout(c, 1000 / 60); };
})(window, 'equestAnimationFrame');
</script>
</BODY>
</HTML>
运行结果：
4.粒子漩涡特效
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>粒子漩涡特效</title>
<style>
html,body{
margin:0px;
width:100%;
height:100%;
overflow:hidden;
background:#000;
}
#canvas{
position:absolute;
width:100%;
height:100%;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
function project3D(x,y,z,vars){
var p,d;
x-=vars.camX;
y-=vars.camY-8;
z-=vars.camZ;
p=Math.atan2(x,z);
d=Math.sqrt(x*x+z*z);
x=Math.sin(p-vars.yaw)*d;
z=Math.cos(p-vars.yaw)*d;
p=Math.atan2(y,z);
d=Math.sqrt(y*y+z*z);
y=Math.sin(p-vars.pitch)*d;
z=Math.cos(p-vars.pitch)*d;
var rx1=-1000;
var ry1=1;
var rx2=1000;
var ry2=1;
var rx3=0;
var ry3=0;
var rx4=x;
var ry4=z;
var uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1);
var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc;
var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;
if(!z)z=0.000000001;
if(ua>0&&ua<1&&ub>0&&ub<1){
return {
x:vars.cx+(rx1+ua*(rx2-rx1))*vars.scale,
y:vars.cy+y/z*vars.scale,
d:(x*x+y*y+z*z)
};
}else{
return { d:-1 };
}
}
function elevation(x,y,z){
var dist = Math.sqrt(x*x+y*y+z*z);
if(dist && z/dist>=-1 && z/dist <=1) return Math.acos(z / dist);
return 0.00000001;
}
function rgb(col){
col += 0.000001;
var r = parseInt((0.5+Math.sin(col)*0.5)*16);
var g = parseInt((0.5+Math.cos(col)*0.5)*16);
var b = parseInt((0.5-Math.sin(col)*0.5)*16);
return "#"+r.toString(16)+g.toString(16)+b.toString(16);
}
function interpolateColors(RGB1,RGB2,degree){
var w2=degree;
var w1=1-w2;
return [w1*RGB1[0]+w2*RGB2[0],w1*RGB1[1]+w2*RGB2[1],w1*RGB1[2]+w2*RGB2[2]];
}
function rgbArray(col){
col += 0.000001;
var r = parseInt((0.5+Math.sin(col)*0.5)*256);
var g = parseInt((0.5+Math.cos(col)*0.5)*256);
var b = parseInt((0.5-Math.sin(col)*0.5)*256);
return [r, g, b];
}
function colorString(arr){
var r = parseInt(arr[0]);
var g = parseInt(arr[1]);
var b = parseInt(arr[2]);
return "#"+("0" + r.toString(16) ).slice (-2)+("0" + g.toString(16) ).slice (-2)+("0" + b.toString(16) ).slice (-2);
}
function process(vars){
if(vars.points.length<vars.initParticles) for(var i=0;i<5;++i) spawnParticle(vars);
var p,d,t;
p = Math.atan2(vars.camX, vars.camZ);
d = Math.sqrt(vars.camX * vars.camX + vars.camZ * vars.camZ);
d -= Math.sin(vars.frameNo / 80) / 25;
t = Math.cos(vars.frameNo / 300) / 165;
vars.camX = Math.sin(p + t) * d;
vars.camZ = Math.cos(p + t) * d;
vars.camY = -Math.sin(vars.frameNo / 220) * 15;
vars.yaw = Math.PI + p + t;
vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;
var t;
for(var i=0;i<vars.points.length;++i){
x=vars.points[i].x;
y=vars.points[i].y;
z=vars.points[i].z;
d=Math.sqrt(x*x+z*z)/1.0075;
t=.1/(1+d*d/5);
p=Math.atan2(x,z)+t;
vars.points[i].x=Math.sin(p)*d;
vars.points[i].z=Math.cos(p)*d;
vars.points[i].y+=vars.points[i].vy*t*((Math.sqrt(vars.distributionRadius)-d)*2);
if(vars.points[i].y>vars.vortexHeight/2 || d<.25){
vars.points.splice(i,1);
spawnParticle(vars);
}
}
}
function drawFloor(vars){
var x,y,z,d,point,a;
for (var i = -25; i <= 25; i += 1) {
for (var j = -25; j <= 25; j += 1) {
x = i*2;
z = j*2;
y = vars.floor;
d = Math.sqrt(x * x + z * z);
point = project3D(x, y-d*d/85, z, vars);
if (point.d != -1) {
size = 1 + 15000 / (1 + point.d);
a = 0.15 - Math.pow(d / 50, 4) * 0.15;
if (a > 0) {
vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(d/26-vars.frameNo/40),[0,128,32],.5+Math.sin(d/6-vars.frameNo/8)/2));
vars.ctx.globalAlpha = a;
vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
}
}
}
}
vars.ctx.fillStyle = "#82f";
for (var i = -25; i <= 25; i += 1) {
for (var j = -25; j <= 25; j += 1) {
x = i*2;
z = j*2;
y = -vars.floor;
d = Math.sqrt(x * x + z * z);
point = project3D(x, y+d*d/85, z, vars);
if (point.d != -1) {
size = 1 + 15000 / (1 + point.d);
a = 0.15 - Math.pow(d / 50, 4) * 0.15;
if (a > 0) {
vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(-d/26-vars.frameNo/40),[32,0,128],.5+Math.sin(-d/6-vars.frameNo/8)/2));
vars.ctx.globalAlpha = a;
vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
}
}
}
}
}
function sortFunction(a,b){
return b.dist-a.dist;
}
function draw(vars){
vars.ctx.globalAlpha=.15;
vars.ctx.fillStyle="#000";
vars.ctx.fillRect(0, 0, canvas.width, canvas.height);
drawFloor(vars);
var point,x,y,z,a;
for(var i=0;i<vars.points.length;++i){
x=vars.points[i].x;
y=vars.points[i].y;
z=vars.points[i].z;
point=project3D(x,y,z,vars);
if(point.d != -1){
vars.points[i].dist=point.d;
size=1+vars.points[i].radius/(1+point.d);
d=Math.abs(vars.points[i].y);
a = .8 - Math.pow(d / (vars.vortexHeight/2), 1000) * .8;
vars.ctx.globalAlpha=a>=0&&a<=1?a:0;
vars.ctx.fillStyle=rgb(vars.points[i].color);
if(point.x>-1&&point.x<vars.canvas.width&&point.y>-1&&point.y<vars.canvas.height)vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
}
}
vars.points.sort(sortFunction);
}
function spawnParticle(vars){
var p,ls;
pt={};
p=Math.PI*2*Math.random();
ls=Math.sqrt(Math.random()*vars.distributionRadius);
pt.x=Math.sin(p)*ls;
pt.y=-vars.vortexHeight/2;
pt.vy=vars.initV/20+Math.random()*vars.initV;
pt.z=Math.cos(p)*ls;
pt.radius=200+800*Math.random();
pt.color=pt.radius/1000+vars.frameNo/250;
vars.points.push(pt);
}
function frame(vars) {
if(vars === undefined){
var vars={};
vars.canvas = document.querySelector("canvas");
vars.ctx = vars.canvas.getContext("2d");
vars.canvas.width = document.body.clientWidth;
vars.canvas.height = document.body.clientHeight;
window.addEventListener("resize", function(){
vars.canvas.width = document.body.clientWidth;
vars.canvas.height = document.body.clientHeight;
vars.cx=vars.canvas.width/2;
vars.cy=vars.canvas.height/2;
}, true);
vars.frameNo=0;
vars.camX = 0;
vars.camY = 0;
vars.camZ = -14;
vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;
vars.yaw = 0;
vars.cx=vars.canvas.width/2;
vars.cy=vars.canvas.height/2;
vars.bounding=10;
vars.scale=500;
vars.floor=26.5;
vars.points=[];
vars.initParticles=700;
vars.initV=.01;
vars.distributionRadius=800;
vars.vortexHeight=25;
}
vars.frameNo++;
requestAnimationFrame(function() {
frame(vars);
});
process(vars);
draw(vars);
}
frame();
</script>
</body>
</html>
运行结果：
5.烟花
代码：
烟花.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>烟花动画特效</title>
<style>
html,body{
margin:0px;
width:100%;
height:100%;
overflow:hidden;
background:#000;
}
#canvas{
width:100%;
height:100%;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas><script>
function initVars(){
pi=Math.PI;
ctx=canvas.getContext("2d");
canvas.width=canvas.clientWidth;
canvas.height=canvas.clientHeight;
cx=canvas.width/2;
cy=canvas.height/2;
playerZ=-25;
playerX=playerY=playerVX=playerVY=playerVZ=pitch=yaw=pitchV=yawV=0;
scale=600;
seedTimer=0;seedInterval=5,seedLife=100;gravity=.02;
seeds=new Array();
sparkPics=new Array();
s="https://cantelope.org/NYE/";
for(i=1;i<=10;++i){
sparkPic=new Image();
sparkPic.src=s+"spark"+i+".png";
sparkPics.push(sparkPic);
}
sparks=new Array();
pow1=new Audio(s+"pow1.ogg");
pow2=new Audio(s+"pow2.ogg");
pow3=new Audio(s+"pow3.ogg");
pow4=new Audio(s+"pow4.ogg");
frames = 0;
}
function rasterizePoint(x,y,z){
var p,d;
x-=playerX;
y-=playerY;
z-=playerZ;
p=Math.atan2(x,z);
d=Math.sqrt(x*x+z*z);
x=Math.sin(p-yaw)*d;
z=Math.cos(p-yaw)*d;
p=Math.atan2(y,z);
d=Math.sqrt(y*y+z*z);
y=Math.sin(p-pitch)*d;
z=Math.cos(p-pitch)*d;
var rx1=-1000,ry1=1,rx2=1000,ry2=1,rx3=0,ry3=0,rx4=x,ry4=z,uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1);
if(!uc) return {x:0,y:0,d:-1};
var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc;
var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;
if(!z)z=.000000001;
if(ua>0&&ua<1&&ub>0&&ub<1){
return {
x:cx+(rx1+ua*(rx2-rx1))*scale,
y:cy+y/z*scale,
d:Math.sqrt(x*x+y*y+z*z)
};
}else{
return {
x:cx+(rx1+ua*(rx2-rx1))*scale,
y:cy+y/z*scale,
d:-1
};
}
}
function spawnSeed(){
seed=new Object();
seed.x=-50+Math.random()*100;
seed.y=25;
seed.z=-50+Math.random()*100;
seed.vx=.1-Math.random()*.2;
seed.vy=-1.5;//*(1+Math.random()/2);
seed.vz=.1-Math.random()*.2;
seed.born=frames;
seeds.push(seed);
}
function splode(x,y,z){
t=5+parseInt(Math.random()*150);
sparkV=1+Math.random()*2.5;
type=parseInt(Math.random()*3);
switch(type){
case 0:
pic1=parseInt(Math.random()*10);
break;
case 1:
pic1=parseInt(Math.random()*10);
do{ pic2=parseInt(Math.random()*10); }while(pic2==pic1);
break;
case 2:
pic1=parseInt(Math.random()*10);
do{ pic2=parseInt(Math.random()*10); }while(pic2==pic1);
do{ pic3=parseInt(Math.random()*10); }while(pic3==pic1 || pic3==pic2);
break;
}
for(m=1;m<t;++m){
spark=new Object();
spark.x=x; spark.y=y; spark.z=z;
p1=pi*2*Math.random();
p2=pi*Math.random();
v=sparkV*(1+Math.random()/6)
spark.vx=Math.sin(p1)*Math.sin(p2)*v;
spark.vz=Math.cos(p1)*Math.sin(p2)*v;
spark.vy=Math.cos(p2)*v;
switch(type){
case 0: spark.img=sparkPics[pic1]; break;
case 1:
spark.img=sparkPics[parseInt(Math.random()*2)?pic1:pic2];
break;
case 2:
switch(parseInt(Math.random()*3)){
case 0: spark.img=sparkPics[pic1]; break;
case 1: spark.img=sparkPics[pic2]; break;
case 2: spark.img=sparkPics[pic3]; break;
}
break;
}
spark.radius=25+Math.random()*50;
spark.alpha=1;
spark.trail=new Array();
sparks.push(spark);
}
switch(parseInt(Math.random()*4)){
case 0: pow=new Audio(s+"pow1.ogg"); break;
case 1: pow=new Audio(s+"pow2.ogg"); break;
case 2: pow=new Audio(s+"pow3.ogg"); break;
case 3: pow=new Audio(s+"pow4.ogg"); break;
}
d=Math.sqrt((x-playerX)*(x-playerX)+(y-playerY)*(y-playerY)+(z-playerZ)*(z-playerZ));
pow.volume=1.5/(1+d/10);
pow.play();
}
function doLogic(){
if(seedTimer<frames){
seedTimer=frames+seedInterval*Math.random()*10;
spawnSeed();
}
for(i=0;i<seeds.length;++i){
seeds[i].vy+=gravity;
seeds[i].x+=seeds[i].vx;
seeds[i].y+=seeds[i].vy;
seeds[i].z+=seeds[i].vz;
if(frames-seeds[i].born>seedLife){
splode(seeds[i].x,seeds[i].y,seeds[i].z);
seeds.splice(i,1);
}
}
for(i=0;i<sparks.length;++i){
if(sparks[i].alpha>0 && sparks[i].radius>5){
sparks[i].alpha-=.01;
sparks[i].radius/=1.02;
sparks[i].vy+=gravity;
point=new Object();
point.x=sparks[i].x;
point.y=sparks[i].y;
point.z=sparks[i].z;
if(sparks[i].trail.length){
x=sparks[i].trail[sparks[i].trail.length-1].x;
y=sparks[i].trail[sparks[i].trail.length-1].y;
z=sparks[i].trail[sparks[i].trail.length-1].z;
d=((point.x-x)*(point.x-x)+(point.y-y)*(point.y-y)+(point.z-z)*(point.z-z));
if(d>9){
sparks[i].trail.push(point);
}
}else{
sparks[i].trail.push(point);
}
if(sparks[i].trail.length>5)sparks[i].trail.splice(0,1);
sparks[i].x+=sparks[i].vx;
sparks[i].y+=sparks[i].vy;
sparks[i].z+=sparks[i].vz;
sparks[i].vx/=1.075;
sparks[i].vy/=1.075;
sparks[i].vz/=1.075;
}else{
sparks.splice(i,1);
}
}
p=Math.atan2(playerX,playerZ);
d=Math.sqrt(playerX*playerX+playerZ*playerZ);
d+=Math.sin(frames/80)/1.25;
t=Math.sin(frames/200)/40;
playerX=Math.sin(p+t)*d;
playerZ=Math.cos(p+t)*d;
yaw=pi+p+t;
}
function rgb(col){
var r = parseInt((.5+Math.sin(col)*.5)*16);
var g = parseInt((.5+Math.cos(col)*.5)*16);
var b = parseInt((.5-Math.sin(col)*.5)*16);
return "#"+r.toString(16)+g.toString(16)+b.toString(16);
}
function draw(){
ctx.clearRect(0,0,cx*2,cy*2);
ctx.fillStyle="#ff8";
for(i=-100;i<100;i+=3){
for(j=-100;j<100;j+=4){
x=i;z=j;y=25;
point=rasterizePoint(x,y,z);
if(point.d!=-1){
size=250/(1+point.d);
d = Math.sqrt(x * x + z * z);
a = 0.75 - Math.pow(d / 100, 6) * 0.75;
if(a>0){
ctx.globalAlpha = a;
ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
}
}
}
}
ctx.globalAlpha=1;
for(i=0;i<seeds.length;++i){
point=rasterizePoint(seeds[i].x,seeds[i].y,seeds[i].z);
if(point.d!=-1){
size=200/(1+point.d);
ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
}
}
point1=new Object();
for(i=0;i<sparks.length;++i){
point=rasterizePoint(sparks[i].x,sparks[i].y,sparks[i].z);
if(point.d!=-1){
size=sparks[i].radius*200/(1+point.d);
if(sparks[i].alpha<0)sparks[i].alpha=0;
if(sparks[i].trail.length){
point1.x=point.x;
point1.y=point.y;
switch(sparks[i].img){
case sparkPics[0]:ctx.strokeStyle="#f84";break;
case sparkPics[1]:ctx.strokeStyle="#84f";break;
case sparkPics[2]:ctx.strokeStyle="#8ff";break;
case sparkPics[3]:ctx.strokeStyle="#fff";break;
case sparkPics[4]:ctx.strokeStyle="#4f8";break;
case sparkPics[5]:ctx.strokeStyle="#f44";break;
case sparkPics[6]:ctx.strokeStyle="#f84";break;
case sparkPics[7]:ctx.strokeStyle="#84f";break;
case sparkPics[8]:ctx.strokeStyle="#fff";break;
case sparkPics[9]:ctx.strokeStyle="#44f";break;
}
for(j=sparks[i].trail.length-1;j>=0;--j){
point2=rasterizePoint(sparks[i].trail[j].x,sparks[i].trail[j].y,sparks[i].trail[j].z);
if(point2.d!=-1){
ctx.globalAlpha=j/sparks[i].trail.length*sparks[i].alpha/2;
ctx.beginPath();
ctx.moveTo(point1.x,point1.y);
ctx.lineWidth=1+sparks[i].radius*10/(sparks[i].trail.length-j)/(1+point2.d);
ctx.lineTo(point2.x,point2.y);
ctx.stroke();
point1.x=point2.x;
point1.y=point2.y;
}
}
}
ctx.globalAlpha=sparks[i].alpha;
ctx.drawImage(sparks[i].img,point.x-size/2,point.y-size/2,size,size);
}
}
}
function frame(){
if(frames>100000){
seedTimer=0;
frames=0;
}
frames++;
draw();
doLogic();
requestAnimationFrame(frame);
}
window.addEventListener("resize",()=>{
canvas.width=canvas.clientWidth;
canvas.height=canvas.clientHeight;
cx=canvas.width/2;
cy=canvas.height/2;
});
initVars();
frame();
</script>
</body>
</html>
运行结果：
hta类
迷宫
代码：
<HTML>
<HEAD>
<TITLE>勇闯迷宫</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY>
<BASEFONT face=verdana size=2>
<SCRIPT>
function ShowMenu(bMenu) {
document.all.idFinder.style.display = (bMenu) ? "none" : "block"
document.all.idMenu.style.display = (bMenu) ? "block" : "none"
idML.className = (bMenu) ? "cOn" : "cOff"
idRL.className = (bMenu) ? "cOff" : "cOn"
return false
}
</SCRIPT>
<STYLE>A.cOn {
FONT-WEIGHT: bolder; TEXT-DECORATION: none
}
#article {
PADDING-RIGHT: 15pt; PADDING-LEFT: 5pt; BACKGROUND: white; PADDING-BOTTOM: 0px; FONT: 12pt Verdana, geneva, arial, sans-serif; COLOR: black; PADDING-TOP: 10pt
}
#article P.start {
TEXT-INDENT: 0pt
}
#article P {
MARGIN-TOP: 0pt; FONT-SIZE: 10pt; TEXT-INDENT: 12pt
}
#article #author {
MARGIN-BOTTOM: 5pt; TEXT-INDENT: 0pt; FONT-STYLE: italic
}
#pageList P {
PADDING-TOP: 10pt
}
#article H3 {
FONT-WEIGHT: bold
}
#article DL {
FONT-SIZE: 10pt
}
UL {
FONT-SIZE: 10pt
}
OL {
FONT-SIZE: 10pt
}
</STYLE>
<SCRIPT>
<!--
function addList(url,desc) {
if ((navigator.appName=="Netscape") || (parseInt(navigator.appVersion)>=4)) {
var w=window.open("","_IDHTML_LIST_","top=0,left=0,width=475,height=150,history=no,menubar=no,status=no,resizable=no")
var d=w.document
if (!w._init) {
d.open()
d.write("<TITLE>Loading...</TITLE><EM>Loading...</EM>")
d.close()
w.opener=self
window.status="Personal Assistant (Adding): " + desc
} else {
window.status=w.addOption(url,desc)
w.focus()
}
}
else
alert("Your browser does not support the personal assistant.")
return false
}
</SCRIPT>
<STYLE type=text/css>#board TD {
FONT-SIZE: 2pt; WIDTH: 15pt; HEIGHT: 15pt
}
TD.foot {
FONT-SIZE: 10pt
}
#board TD.start {
BORDER-TOP: black 2px solid; FONT-SIZE: 8pt; BACKGROUND: yellow; BORDER-LEFT: black 2px solid; COLOR: red; TEXT-ALIGN: center
}
#board TD.end {
FONT-SIZE: 8pt; COLOR: green; TEXT-ALIGN: center
}
#message {
PADDING-RIGHT: 0pt; PADDING-LEFT: 0pt; PADDING-BOTTOM: 0pt; MARGIN: 0pt; PADDING-TOP: 0pt; TEXT-ALIGN: center
}
</STYLE>
<SCRIPT language=JavaScript>
var maze = new Array()
var sides = new Array("Border-Top", "Border-Right")
for (var rows=0; rows<13; rows++)
maze[rows] = new Array()
maze[0][0] = new Array(1,1,1,1,1,1,1,1,1,1,1,1)
maze[0][1] = new Array(0,0,1,0,1,0,0,0,0,1,0,1)
maze[1][0] = new Array(1,0,0,0,1,0,1,1,1,0,1,1)
maze[1][1] = new Array(0,1,1,0,0,1,1,0,0,1,0,1)
maze[2][0] = new Array(1,0,1,0,1,0,0,1,1,0,1,1)
maze[2][1] = new Array(0,0,0,0,1,1,1,0,0,0,0,1)
maze[3][0] = new Array(0,1,1,1,1,1,0,0,0,0,1,1)
maze[3][1] = new Array(1,0,0,1,0,0,0,1,1,0,0,1)
maze[4][0] = new Array(0,0,0,0,0,0,1,1,1,1,1,1)
maze[4][1] = new Array(1,1,1,1,1,0,0,0,0,0,1,1)
maze[5][0] = new Array(0,0,0,0,1,0,1,1,1,1,0,0)
maze[5][1] = new Array(1,1,1,1,1,1,0,0,0,1,0,1)
maze[6][0] = new Array(0,0,0,0,0,0,1,1,0,1,0,1)
maze[6][1] = new Array(1,1,1,1,1,1,0,0,0,1,0,1)
maze[7][0] = new Array(1,0,1,0,0,0,1,0,1,1,0,1)
maze[7][1] = new Array(1,1,1,0,1,0,0,1,0,1,1,1)
maze[8][0] = new Array(0,0,0,1,0,0,1,1,0,0,0,0)
maze[8][1] = new Array(0,1,0,1,1,0,0,0,1,1,0,1)
maze[9][0] = new Array(0,0,0,0,0,1,1,1,1,0,1,1)
maze[9][1] = new Array(1,1,1,1,0,0,0,0,0,1,1,1)
maze[10][0] = new Array(0,0,0,0,0,1,1,1,1,1,0,0)
maze[10][1] = new Array(1,1,1,0,1,0,0,0,0,1,0,1)
maze[11][0] = new Array(0,0,1,1,1,1,1,1,1,0,0,0)
maze[11][1] = new Array(1,0,1,0,0,0,0,0,0,0,1,1)
maze[12][0] = new Array(0,0,0,0,0,1,1,1,1,0,1,0)
maze[12][1] = new Array(1,1,0,1,0,0,0,1,0,0,1,1)
function testNext(nxt) {
if ((board.rows[start.rows].cells[start.cols].style.backgroundColor=="blue") && (nxt.style.backgroundColor=='blue')) {
message.innerText="I see you changed your mind."
board.rows[start.rows].cells[start.cols].style.backgroundColor=""
return false
}
return true
}
function moveIt() {
if (!progress) return
switch (event.keyCode) {
case 37: // left
if (maze[start.rows][1][start.cols-1]==0) {
if (testNext(board.rows[start.rows].cells[start.cols-1]))
message.innerText="Going west..."
start.cols--
document.all.board.rows[start.rows].cells[start.cols].style.backgroundColor="blue"
} else
message.innerText="Ouch... you can't go west."
break;
case 38: // up
if (maze[start.rows][0][start.cols]==0) {
if (testNext(board.rows[start.rows-1].cells[start.cols]))
message.innerText="Going north..."
start.rows--
document.all.board.rows[start.rows].cells[start.cols].style.backgroundColor="blue"
} else
message.innerText="Ouch... you can't go north."
break;
case 39: // right
if (maze[start.rows][1][start.cols]==0) {
if (testNext(board.rows[start.rows].cells[start.cols+1]))
message.innerText="Going east..."
start.cols++
document.all.board.rows[start.rows].cells[start.cols].style.backgroundColor="blue"
}
else
message.innerText="Ouch... you can't go east."
break;
case 40: //down
if (maze[start.rows+1]==null) return
if (maze[start.rows+1][0][start.cols]==0) {
if (testNext(board.rows[start.rows+1].cells[start.cols]))
message.innerText="Going south..."
start.rows++
document.all.board.rows[start.rows].cells[start.cols].style.backgroundColor="blue"
} else
message.innerText="Ouch... you can't go south."
break;
}
if (document.all.board.rows[start.rows].cells[start.cols].innerText=="end") {
message.innerText="You Win!"
progress=false
}
}
</SCRIPT>
<P align=center>请使用键盘上的→←↑↓键进行游戏</P><BR>
<P>
<TABLE id=board cellSpacing=0 cellPadding=0 align=center>
<SCRIPT language=JavaScript>
for (var row = 0; row<maze.length; row++) {
document.write("<TR>")
for (var col = 0; col<maze[row][0].length; col++) {
document.write("<TD STYLE='")
for (var cell = 0; cell<2; cell++) {
if (maze[row][cell][col]==1)
document.write(sides[cell]+": 2px black solid;")
}
if ((0==col) && (0!=row))
document.write("border-left: 2px black solid;")
if (row==maze.length-1)
document.write("border-bottom: 2px black solid;")
if ((0==row) && (0==col))
document.write(" background-color:yellow;' class=start>start</TD>")
else
if ((row==maze.length-1) && (col==maze[row][0].length-1))
document.write("' class=end>end</TD>")
else
document.write("'> </TD>")
}
document.write("</TR>")
}
var start = new Object
start.rows = 0
start.cols = 0
progress=true
document.onkeydown = moveIt;
</SCRIPT>
<TBODY></TBODY></TABLE>
<P id=message>
</P></BASEFONT>
</BODY>
</HTML>
运行结果：
bat类
石头剪刀布
代码：
@echo off&setlocal enabledelayedexpansion
mode con cols=30 lines=20
set s1=剪刀&set s2=石头&set s3=布
set y=赢！&set n=你&set d=电脑
:start
echo ………………%s1%………………1
echo ………………%s2%………………2
echo ………………%s3%………………3
set /p s=请输入：
set /a c=!random!%%3&set /a c+=1
if !s!==!c! echo 你们是平局！
if !s!==1 if !c!==3 echo !n!!e799bee5baa6e997aee7ad94e78988e69d8331333433623836s%s%!，!d!!s%c%!，!n!!y!
if !s!==2 if !c!==1 echo !n!!s%s%!，!d!!s%c%!，!n!!y!
if !s!==3 if !c!==2 echo !n!!s%s%!，!d!!s%c%!，!n!!y!
if !s!==1 if !c!==2 echo !n!!s%s%!，!d!!s%c%!，!d!!y!
if !s!==2 if !c!==3 echo !n!!s%s%!，!d!!s%c%!，!d!!y!
if !s!==3 if !c!==1 echo !n!!s%s%!，!d!!s%c%!，!d!!y!
pause&cls&goto :start
运行结果：
这次代码分享就到这里，剩下的10个代码3个星期后我再和大家分享。有错误的地方欢迎大家在评论区里纠正。再见！