Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
108 lines (99 sloc) 2.36 KB
<html>
<body style="background:#ffffff;">
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="100" height="100"></canvas>
<canvas id="diceCanvas" width="30" height="30" style="display:none"></canvas>
<script language="javascript">
var roll = 0;
var shift = 0;
var dic = [];
var xp = [];
var yp = [];
var c = document.getElementById('canvas').getContext('2d');
var dc = document.getElementById('diceCanvas').getContext('2d');
var dice = new Image();
var die = new Object;
var heartbeat = null;
function animate()
{
if(shift==0)
{
for(var j=0; j<2; ++j)
{
dic[j] = parseInt(Math.random()*6);
xp[j] = parseInt(Math.random()*16) + j*41;
yp[j] = 30 + parseInt(Math.random()*11);
add(dic[j], xp[j], yp[j]);
}
}
for(j=0; j<2; ++j)
{
fadeDice(j*41, 3, 0.98-shift*0.02);
}
++shift;
if(shift==9)
{
shift = 0;
++roll;
}
heartbeat = setTimeout(animate, 100);
}
function fadeDice(xp, yp, speed)
{
var imgData = c.getImageData(xp, yp, die.xs+16, die.ys+38);
for(var y=0; y<die.ys+37; ++y)
{
for(var x=0; x<die.xs+16; ++x)
{
var green = imgData.data[(x+(y+1)*imgData.width)*4+1];
var col = green*speed + 255*(1-speed);
if(col>255) col=255;
if(col<0) col=0;
imgData.data[(x+y*imgData.width)*4] = col;
imgData.data[(x+y*imgData.width)*4+1] = col;
imgData.data[(x+y*imgData.width)*4+2] = col;
imgData.data[(x+y*imgData.width)*4+3] = 255;
}
}
c.putImageData(imgData, xp, yp);
}
function add(no, xp, yp)
{
dc.drawImage(dice, die.xs*no, 0, die.xs, die.ys, 0, 0, die.xs, die.ys);
var dieData = dc.getImageData(0, 0, die.xs, die.ys);
var imgData = c.getImageData(xp, yp, die.xs, die.ys);
for(var y=0; y<die.ys; ++y)
{
for(var x=0; x<die.xs; ++x)
{
var col = dieData.data[(x+y*die.xs)*4];
if(col>0)
{
for(var i=0; i<3; ++i)
{
var current = imgData.data[(x+y*die.xs)*4+i];
var newCol = current*col/255 + col*(255-col)/255;
if(newCol>255) newCol=255;
if(newCol<0) newCol=0;
imgData.data[(x+y*die.xs)*4+i] = newCol;
}
}
}
}
c.putImageData(imgData, xp, yp);
}
c.rect(0, 0, 100, 100);
c.fillStyle = '#ffffff';
c.fill();
dice.onload = function()
{
die.xs = this.width/6;
die.ys = this.height;
heartbeat = setTimeout(animate, 50);
};
dice.src = "/images/graphics/dice.png";
</script>
</body>
</html>