Source&Script
3月22日(土)21時18分
#!/usr/bin/perl
use CGI qw/:standard/;
$CGI::POST_MAX=1024 * 10;
use Jcode;
use Fcntl qw(:DEFAULT :flock :seek);
my $q = new CGI;
my $baseUrl = 'http://localhost/';
my $qus = $baseUrl.'gif/qus.gif';
my $ans = $baseUrl.'gif/grp.gif';
my $cssstyle = $baseUrl.'css/this.css';
my $datafile = 'dat/this.log';
my $title = 'This CGI';
print $q->header(-charset=>'shift_jis');
print $q->start_html(-title=>$title，-style=>{src=>$cssstyle});
print $q->h5('One Word Board');
print $q->img({src=>$qus，-hspace=>'8'，alt=>'*'})，"<small>How are you ?</small>";
&do_print($q);
&data_form($q);
print $q->end_html;
sub do_print {
my($q) = @_;
my(@values，$key);
my $ans = $q->img({src=>$ans，-hspace=>'4'，alt=>'□'});
print "<div class='pnl'>\n";
foreach $key ($q->param) {
@values = $q->param($key);
print $ans . "@values<br />\n";
}
print "</div>\n";
sysopen(OUT， $datafile， O_WRONLY|O_TRUNC|O_CREAT， 0600);
flock(OUT， LOCK_EX);
seek(OUT， 0， SEEK_SET);
print OUT @values;
flock(OUT， LOCK_NB);
close(OUT);
}
sub data_form {
my ($q) = @_;
print $q->start_form;
print $q->textfield(-name=>'comment'，-maxlength=>'45'，-size=>'30');
print $q->submit(-value=>'ok');
print $q->reset(-value=>'no');
print $q->endform;
}
/ * This CSS for One Word This */
h5 { margin:10px 0px 32px 0px;
border:1px solid #ccc;
padding:2px;
width:230px;
text-align:center;
background:#fff;
}
small{ margin-left:2px;
font-size:11px;
font-family:Georgia，Times，sans-serif;
}
input{ margin-left:2px;
font-size:11px;
font-family:Georgia，Times，sans-serif;
border:1px solid #ccc;
}
.pnl { margin:10px 0px 10px 20px;
border:0px solid #ccc;
padding:4px;
width:220px;
height:110px;
font-size:12px;
}
.line{ margin:10px 0px 10px 0px;
font-size:11px;
font-family:Georgia，Times，sans-serif;
}
http://artopix.net/
Source&Script
<title>Artopix / Moving Object</title>
<style type="text/css"><!--
body{color:#000;margin:0px 0px 0px 0px;}
.hidimg{position:absolute;visibility:hidden;}
form{position:absolute;top:200px;left:120px;}
--></style>
<img id="sb1" src="1obj.gif" class="hidimg" alt="Img1" />
<img id="sb2" src="2obj.gif" class="hidimg" alt="Img2" />
<img id="sb3" src="3obj.gif" class="hidimg" alt="Img3" />
<img id="sb4" src="4obj.gif" class="hidimg" alt="Img4" />
<form name="myForm" action="#">
<input type="button" value="Start" name="myFormButton" onclick="objCtrl(0)" />
</form>
<script type="text/javascript">
//pathy=4;//
clkbtn=0;
obid=0;
pathr=0;
rengx=180;
objangle=-0.8;
pathangle=0;
rotorangle=0;
rollangle=0;
midx=0;
midy=0;
vpz=1000;
aryObj=23;
parts=new Array(aryObj);
isx=new Array( 0，-15，-29，-43，-57，-70， 15， 29， 43， 57， 70，-30， 0， 23， 41， 59， 77， 87， 95， 85， 0，-10，-10);
isy=new Array(-30，-30，-30，-30，-30，-30，-30，-30，-30，-30，-30， 40， 0， 0， 0， 0， 50，80，-15， 8，-15， 64， 64);
isz=new Array( 0， 0， 0， 0， 0， 0， 0， 0， 0， 0， 0， 0， 0， 0， 0， 0， 0， 0， 0， 0， 0， 20，-20);
isr=new Array( 12， 16， 16， 16， 16， 16， 16， 16， 16， 16， 16， 32， 30， 20， 20， 20， 18， 16， 10， 10， 20， 16， 16);//img-size
isc=new Array( 2， 1， 1， 1， 1， 1， 1， 1， 1， 1， 1， 2， 4， 3， 4， 3， 4， 3， 4， 3， 3， 4， 4);
function objCtrl(n){
if (clkbtn==0){
clkbtn = 1;
document.myForm.myFormButton.value = "Stop ";
intervalID=setInterval("frame(3);"，30);
} else {
if (n==0){
clkbtn = 0;
document.myForm.myFormButton.value = "Start";
clearInterval(intervalID);
}
}
}
resize();
for(i=0;i<aryObj;i++){
parts[i]=new objPrt(isx[i]，isy[i]，isz[i]，isr[i]，isc[i]);
parts[i].createparts();
}
function frame(action){
rotorangle+=0.8;
if(rotorangle>=Math.PI)rotorangle-=2*Math.PI;
sp=Math.sin(rotorangle);
cp=Math.cos(rotorangle);
for(i=0;i<11;i++){
with(parts[i]){
ix=sx*cp-sz*sp;
iy=sy;
iz=sz*cp+sx*sp;
}
}
for(i=11;i<aryObj;i++){
with(parts[i]){
ix=sx;
iy=sy;
iz=sz;
}
}
rollangle=action;
if(rollangle>=Math.PI)rollangle-=2*Math.PI;
sp=Math.sin(rollangle);
cp=Math.cos(rollangle);
for(i=0;i<aryObj;i++){
with(parts[i]){
ty=iy;
tz=iz;
iy=ty*cp+tz*sp;
iz=tz*cp-ty*sp;
}
}
pathangle+=0.02;
if(pathangle>=Math.PI)pathangle-=2*Math.PI;
sp=Math.sin(pathangle);
cp=Math.cos(pathangle);
for(i=0;i<aryObj;i++){
with(parts[i]){
tx=ix;
tz=iz;
ix=tx*cp-tz*sp;
iz=tz*cp+tx*sp;
ix-=pathr*sp;
iz+=pathr*cp;
}
}
for(i=0;i<aryObj;i++){
with(parts[i]){
k=vpz/(vpz-iz);
x=ix*k;
y=(iy)*k;
z=iz;
d=sd*k;
}
}
render();
}
function resize(){
midx=document.body.clientWidth/2;
midy=document.body.clientHeight/2;
pathr=midx-rengx;
}
function createparts(){
newimg="<img id='b"+this.obid+"' style='position:absolute;left:"+this.x+";top:"+this.y+";z-index:"+this.z+";width:"+this.d+";height:"+this.d+";'>";
document.write(newimg);
document.images["b"+this.obid].src=document.images["sb"+this.c].src;
}
function render(){
for(i=0;i<aryObj;i++){
with(parts[i]){
DS=document.images["b"+obid].style;
DS.left=midx+x-d/2;
DS.top=midy+y-d/2;
DS.zIndex=z*100;
DS.width=d;
DS.height=d;
}
}
}
function objPrt(sx，sy，sz，d，c){
this.obid=obid++;
this.sx=sx;
this.sy=sy;
this.sz=sz;
this.sd=d;
this.ix=sx;
this.iy=sy;
this.iz=sz;
this.x=sx;
this.y=sy;
this.z=sz;
this.d=d;
this.c=c;
this.createparts=createparts;
}
</script>