プログラミングとイラストレーション » ふたつの球 跳ね返りと衝突 3D|HTML5
プログラミングとイラストレーション > HTML5 > ふたつの球 跳ね返りと衝突 3D|HTML5

ふたつの球 跳ね返りと衝突 3D|HTML5

ふたつの球 跳ね返りと衝突 3D|HTML5

ふたつの球 跳ね返りと衝突 3D|HTML5(HTML5, JavaScript, CSS3) : デモ

ふたつの球 跳ね返りと衝突 3D|HTML5(HTML5, JavaScript, CSS3) : ZIPファイル(9kb)

1.HTML

<!DOCTYPE html>
<html lang="jp">
    <head>
        <meta charset="UTF-8" />
        <title>ふたつの球の跳ね返り3D</title>
        <link href="css/base.css" rel="stylesheet" type="text/css">
        <script src="js/devicecheck.js"></script>
        <script src="js/base.js"></script>
    </head>
    <body>
        <div id="contents">
            <canvas id="canvas" width="275" height="275"></canvas>
        </div>
    </body>
</html>

2.CSS

@charset "utf-8";
 
body
{
    margin: 0;
    padding: 0;
    background-color: #fff;
}
 
#contents
{
    position: absolute;
    top: 0;
    left: 0;
    width: 275px;
    height: 275px;
    border: 1px solid #000;
    overflow:hidden;
}
 
#canvas
{
    position: absolute;
    top: 0;
    left: 0;
    width: 275px;
    height: 275px;
}

3.JavaScript

base.js

window.addEventListener("load", init, false);
 
function init()
{
    var offsetX = 0,
    offsetY = 0,
   	ctx,
   	points0 = [],
    triangles0 = [],
    points1 = [],
    triangles1 = [],
   	balls = [],
	numBalls = 2,
	mouseX = 0,
    mouseY = 0,
    buttonDown,
    buttonMove,
    buttonUp,
	fl = 250,
	vpX = 0,
	vpY = 0,
	top = -150,
	bottom = 150,
	left = -150,
	right = 150,
	front = 150,
	back = -150,
	light,
	ratio = 20,
	radius = 20,
   	theContents;
   	
   	//ボタンタイプ
    if(g_mobiledevice === true)
    {
        buttonDown = 'touchstart';
        buttonMove = 'touchmove';
        buttonUp = 'touchend';
    }
    else
    {
        buttonDown = 'mousedown';
        buttonMove = 'mousemove';
        buttonUp = 'mouseup';
    }
     
    document.getElementById('canvas').addEventListener('touchstart', function() 
    {
        event.preventDefault();
    });
    document.getElementById('canvas').addEventListener('touchmove', function() 
    {
        event.preventDefault();
    });
    document.getElementById('canvas').addEventListener('touchend', function() 
    {
        event.preventDefault();
    });
     
    document.getElementById('canvas').addEventListener(buttonMove, mouseMoveHandler, false);
    
    theContents = document.getElementById("contents");
    offsetX = (theContents.currentStyle || document.defaultView.getComputedStyle(theContents,'')).width;
    offsetX = Number(offsetX.replace('px', ''));
 
    offsetY = (theContents.currentStyle || document.defaultView.getComputedStyle(theContents,'')).height;
    offsetY = Number(offsetY.replace('px', ''));
    
    vpX = offsetX / 2;
    vpY = offsetY / 2;
   	
   	ctx = document.getElementById('canvas').getContext("2d");
   	
   	for(var i = 0; i < numBalls; i++)
	{
		balls[i] = 
		{
			radius : radius,
			vx : Math.random() * 10 - 5,
			vy : Math.random() * 10 - 5,
			vz : 0,//Math.random() * 10 - 5,
			x : 0,
			y : 0,
			xpos : i * 100,
			ypos : i * 100,
			zpos : 0,
			scaleX : 1,
			scaleY : 1,
			mass : radius / 10
		}
	}
   	
   	/*
   	 * 追加 ここから
   	 */
   	/*
     * x, y, z, vpX, vpY, cX, cY, cZ, index
     */
    var vx = balls[0].vx; 
	var vy = balls[0].vy; 
	var vz = balls[0].vz;
	
	//vx = 0;
	//vy = 0;
	vz = 0;
    var points = points0;
    var cX = balls[0].xpos;//-100
    var cY = balls[0].ypos;
    var cZ = balls[0].zpos;
    Point3D(0.723607, 0.447214, -0.525731, vpX, vpY, cX, cY, cZ, 0, points);
	Point3D(0.723607, 0.447214,  0.525731, vpX, vpY, cX, cY, cZ, 1, points);
	Point3D(-0.276393, 0.447214,  0.850651, vpX, vpY, cX, cY, cZ, 2, points);
	Point3D(0, 1, 0, vpX, vpY, cX, cY, cZ, 3, points);
	Point3D(-0.894427, 0.447214,  0, vpX, vpY, cX, cY, cZ, 4, points);
	Point3D(-0.276393, 0.447214, -0.850651, vpX, vpY, cX, cY, cZ, 5, points);
	Point3D(0.850651, 0.525731,  0, vpX, vpY, cX, cY, cZ, 6, points);
	Point3D(0.425325, 0.850651, -0.309017, vpX, vpY, cX, cY, cZ, 7, points);
	Point3D(0.262866, 0.525731, -0.809017, vpX, vpY, cX, cY, cZ, 8, points);
	Point3D(0.587785, 0,        -0.809017, vpX, vpY, cX, cY, cZ, 9, points);
	Point3D(0.951057, 0,        -0.309017, vpX, vpY, cX, cY, cZ, 10, points);
	Point3D(0.262866, 0.525731,  0.809017, vpX, vpY, cX, cY, cZ, 11, points);
	Point3D(0.425325, 0.850651,  0.309017, vpX, vpY, cX, cY, cZ, 12, points);
	Point3D(0.951057, 0,         0.309017, vpX, vpY, cX, cY, cZ, 13, points);
	Point3D(0.587785, 0,         0.809017, vpX, vpY, cX, cY, cZ, 14, points);
	Point3D(-0.16246,  0.850651,  0.5, vpX, vpY, cX, cY, cZ, 15, points);
	Point3D(-0.688191, 0.525731,  0.5, vpX, vpY, cX, cY, cZ, 16, points);
	Point3D(0,        0,         1, vpX, vpY, cX, cY, cZ, 17, points);
	Point3D(-0.587785, 0,         0.809017, vpX, vpY, cX, cY, cZ, 18, points);
	Point3D(-0.525731, 0.850651,  0, vpX, vpY, cX, cY, cZ, 19, points);
	Point3D(-0.16246,  0.850651, -0.5, vpX, vpY, cX, cY, cZ, 20, points);
	Point3D(-0.688191, 0.525731, -0.5, vpX, vpY, cX, cY, cZ, 21, points);
	Point3D(-0.951057, 0,        -0.309017, vpX, vpY, cX, cY, cZ, 22, points);
	Point3D(-0.951057, 0,         0.309017, vpX, vpY, cX, cY, cZ, 23, points);
	Point3D(-0.587785, 0,        -0.809017, vpX, vpY, cX, cY, cZ, 24, points);
	Point3D(0,        0,        -1, vpX, vpY, cX, cY, cZ, 25, points);
	
	Point3D(-0.723607, -0.447214, 0.525731, vpX, vpY, cX, cY, cZ, 26, points);
	Point3D(-0.723607, -0.447214,  -0.525731, vpX, vpY, cX, cY, cZ, 27, points);
	Point3D(0.276393, -0.447214,  -0.850651, vpX, vpY, cX, cY, cZ, 28, points);
	Point3D(0,        -1,         0, vpX, vpY, cX, cY, cZ, 29, points);
	Point3D(0.894427, -0.447214,  0, vpX, vpY, cX, cY, cZ, 30, points);
	Point3D(0.276393, -0.447214, 0.850651, vpX, vpY, cX, cY, cZ, 31, points);
	Point3D(-0.850651, -0.525731,  0, vpX, vpY, cX, cY, cZ, 32, points);
	Point3D(-0.425325, -0.850651, 0.309017, vpX, vpY, cX, cY, cZ, 33, points);
	Point3D(-0.262866, -0.525731, 0.809017, vpX, vpY, cX, cY, cZ, 34, points);
	Point3D(-0.262866, -0.525731,  -0.809017, vpX, vpY, cX, cY, cZ, 35, points);
	Point3D(-0.425325, -0.850651,  -0.309017, vpX, vpY, cX, cY, cZ, 36, points);
	Point3D(0.16246,  -0.850651,  -0.5, vpX, vpY, cX, cY, cZ, 37, points);
	Point3D(0.688191, -0.525731,  -0.5, vpX, vpY, cX, cY, cZ, 38, points);
	Point3D(0.525731, -0.850651,  0, vpX, vpY, cX, cY, cZ, 39, points);
	Point3D(0.16246,  -0.850651, 0.5, vpX, vpY, cX, cY, cZ, 40, points);
	Point3D(0.688191, -0.525731, 0.5, vpX, vpY, cX, cY, cZ, 41, points);
	
	//2
	var vx = balls[1].vx; 
	var vy = balls[1].vy; 
	var vz = balls[1].vz;
	//vx = 0;
	//vy = 0;
	//vz = 0;
	var points = points1;
	var cX = balls[1].xpos;//-100
    var cY = balls[1].ypos;
    var cZ = balls[1].zpos;
    Point3D(0.723607, 0.447214, -0.525731, vpX, vpY, cX, cY, cZ, 0, points);
	Point3D(0.723607, 0.447214,  0.525731, vpX, vpY, cX, cY, cZ, 1, points);
	Point3D(-0.276393, 0.447214,  0.850651, vpX, vpY, cX, cY, cZ, 2, points);
	Point3D(0, 1, 0, vpX, vpY, cX, cY, cZ, 3, points);
	Point3D(-0.894427, 0.447214,  0, vpX, vpY, cX, cY, cZ, 4, points);
	Point3D(-0.276393, 0.447214, -0.850651, vpX, vpY, cX, cY, cZ, 5, points);
	Point3D(0.850651, 0.525731,  0, vpX, vpY, cX, cY, cZ, 6, points);
	Point3D(0.425325, 0.850651, -0.309017, vpX, vpY, cX, cY, cZ, 7, points);
	Point3D(0.262866, 0.525731, -0.809017, vpX, vpY, cX, cY, cZ, 8, points);
	Point3D(0.587785, 0,        -0.809017, vpX, vpY, cX, cY, cZ, 9, points);
	Point3D(0.951057, 0,        -0.309017, vpX, vpY, cX, cY, cZ, 10, points);
	Point3D(0.262866, 0.525731,  0.809017, vpX, vpY, cX, cY, cZ, 11, points);
	Point3D(0.425325, 0.850651,  0.309017, vpX, vpY, cX, cY, cZ, 12, points);
	Point3D(0.951057, 0,         0.309017, vpX, vpY, cX, cY, cZ, 13, points);
	Point3D(0.587785, 0,         0.809017, vpX, vpY, cX, cY, cZ, 14, points);
	Point3D(-0.16246,  0.850651,  0.5, vpX, vpY, cX, cY, cZ, 15, points);
	Point3D(-0.688191, 0.525731,  0.5, vpX, vpY, cX, cY, cZ, 16, points);
	Point3D(0,        0,         1, vpX, vpY, cX, cY, cZ, 17, points);
	Point3D(-0.587785, 0,         0.809017, vpX, vpY, cX, cY, cZ, 18, points);
	Point3D(-0.525731, 0.850651,  0, vpX, vpY, cX, cY, cZ, 19, points);
	Point3D(-0.16246,  0.850651, -0.5, vpX, vpY, cX, cY, cZ, 20, points);
	Point3D(-0.688191, 0.525731, -0.5, vpX, vpY, cX, cY, cZ, 21, points);
	Point3D(-0.951057, 0,        -0.309017, vpX, vpY, cX, cY, cZ, 22, points);
	Point3D(-0.951057, 0,         0.309017, vpX, vpY, cX, cY, cZ, 23, points);
	Point3D(-0.587785, 0,        -0.809017, vpX, vpY, cX, cY, cZ, 24, points);
	Point3D(0,        0,        -1, vpX, vpY, cX, cY, cZ, 25, points);
	
	Point3D(-0.723607, -0.447214, 0.525731, vpX, vpY, cX, cY, cZ, 26, points);
	Point3D(-0.723607, -0.447214,  -0.525731, vpX, vpY, cX, cY, cZ, 27, points);
	Point3D(0.276393, -0.447214,  -0.850651, vpX, vpY, cX, cY, cZ, 28, points);
	Point3D(0,        -1,         0, vpX, vpY, cX, cY, cZ, 29, points);
	Point3D(0.894427, -0.447214,  0, vpX, vpY, cX, cY, cZ, 30, points);
	Point3D(0.276393, -0.447214, 0.850651, vpX, vpY, cX, cY, cZ, 31, points);
	Point3D(-0.850651, -0.525731,  0, vpX, vpY, cX, cY, cZ, 32, points);
	Point3D(-0.425325, -0.850651, 0.309017, vpX, vpY, cX, cY, cZ, 33, points);
	Point3D(-0.262866, -0.525731, 0.809017, vpX, vpY, cX, cY, cZ, 34, points);
	Point3D(-0.262866, -0.525731,  -0.809017, vpX, vpY, cX, cY, cZ, 35, points);
	Point3D(-0.425325, -0.850651,  -0.309017, vpX, vpY, cX, cY, cZ, 36, points);
	Point3D(0.16246,  -0.850651,  -0.5, vpX, vpY, cX, cY, cZ, 37, points);
	Point3D(0.688191, -0.525731,  -0.5, vpX, vpY, cX, cY, cZ, 38, points);
	Point3D(0.525731, -0.850651,  0, vpX, vpY, cX, cY, cZ, 39, points);
	Point3D(0.16246,  -0.850651, 0.5, vpX, vpY, cX, cY, cZ, 40, points);
	Point3D(0.688191, -0.525731, 0.5, vpX, vpY, cX, cY, cZ, 41, points);
	
	/*
	 * pointA, pointB, pointC, color R, color G, color B, index
	 */
	//1
	var points = points0;
	var triangles = triangles0;
	Triangle(points[0], points[6], points[7], 255, 0, 0, 0, triangles);
	Triangle(points[3], points[7], points[12], 255, 0, 0, 1, triangles);
	Triangle(points[1], points[12], points[6], 255, 0, 0, 2, triangles);
	
	Triangle(points[7], points[6], points[12], 255, 0, 0, 3, triangles);
	Triangle(points[0], points[7], points[8], 255, 0, 0, 4, triangles);
	
	Triangle(points[5], points[8], points[20], 255, 0, 0, 5, triangles);
	Triangle(points[3], points[20], points[7], 255, 0, 0, 6, triangles);
	Triangle(points[8], points[7], points[20], 255, 0, 0, 7, triangles);
	Triangle(points[0], points[8], points[9], 255, 0, 0, 8, triangles);
	Triangle(points[5], points[25], points[8], 255, 0, 0, 9, triangles);
	
	Triangle(points[9], points[8], points[25], 255, 0, 0, 10, triangles);
	Triangle(points[0], points[9], points[10], 255, 0, 0, 11, triangles);
	Triangle(points[0], points[10], points[6], 255, 0, 0, 12, triangles);
	Triangle(points[1], points[6], points[13], 255, 0, 0, 13, triangles);
	Triangle(points[6], points[10], points[13], 255, 0, 0, 14, triangles);
	Triangle(points[1], points[11], points[12], 255, 0, 0, 15, triangles);
	Triangle(points[3], points[12], points[15], 255, 0, 0, 16, triangles);
	Triangle(points[2], points[15], points[11], 255, 0, 0, 17, triangles);
	Triangle(points[12], points[11], points[15], 255, 0, 0, 18, triangles);
	Triangle(points[2], points[16], points[15], 255, 0, 0, 19, triangles);
	
	Triangle(points[3], points[15], points[19], 255, 0, 0, 20, triangles);
	Triangle(points[4], points[19], points[16], 255, 0, 0, 21, triangles);
	Triangle(points[15], points[16], points[19], 255, 0, 0, 22, triangles);
	Triangle(points[3], points[19], points[20], 255, 0, 0, 23, triangles);
	Triangle(points[5], points[20], points[21], 255, 0, 0, 24, triangles);
	Triangle(points[4], points[21], points[19], 255, 0, 0, 25, triangles);
	Triangle(points[20], points[19], points[21], 255, 0, 0, 26, triangles);
	Triangle(points[4], points[22], points[21], 255, 0, 0, 27, triangles);
	Triangle(points[5], points[21], points[24], 255, 0, 0, 28, triangles);
	Triangle(points[21], points[22], points[24], 255, 0, 0, 29, triangles);
	
	Triangle(points[5], points[24], points[25], 255, 0, 0, 30, triangles);
	Triangle(points[1], points[13], points[14], 255, 0, 0, 31, triangles);
	Triangle(points[1], points[14], points[11], 255, 0, 0, 32, triangles);
	Triangle(points[2], points[11], points[17], 255, 0, 0, 33, triangles);
	Triangle(points[14], points[17], points[11], 255, 0, 0, 34, triangles);
	Triangle(points[2], points[18], points[16], 255, 0, 0, 35, triangles);
	Triangle(points[4], points[16], points[23], 255, 0, 0, 36, triangles);
	Triangle(points[16], points[18], points[23], 255, 0, 0, 37, triangles);
	Triangle(points[4], points[23], points[22], 255, 0, 0, 38, triangles);
	Triangle(points[2], points[17], points[18], 255, 0, 0, 39, triangles);
	
	Triangle(points[26], points[33], points[32], 255, 0, 0, 40, triangles);
	Triangle(points[29], points[36], points[33], 255, 0, 0, 41, triangles);
	Triangle(points[27], points[32], points[36], 255, 0, 0, 42, triangles);
	Triangle(points[33], points[36], points[32], 255, 0, 0, 43, triangles);
	Triangle(points[26], points[34], points[33], 255, 0, 0, 44, triangles);
	Triangle(points[31], points[40], points[34], 255, 0, 0, 45, triangles);
	Triangle(points[29], points[33], points[40], 255, 0, 0, 46, triangles);
	Triangle(points[34], points[40], points[33], 255, 0, 0, 47, triangles);
	Triangle(points[26], points[18], points[34], 255, 0, 0, 48, triangles);
	Triangle(points[31], points[34], points[17], 255, 0, 0, 49, triangles);
	
	Triangle(points[18], points[17], points[34], 255, 0, 0, 50, triangles);
	Triangle(points[26], points[23], points[18], 255, 0, 0, 51, triangles);
	Triangle(points[26], points[32], points[23], 255, 0, 0, 52, triangles);
	Triangle(points[27], points[22], points[32], 255, 0, 0, 53, triangles);
	Triangle(points[32], points[22], points[23], 255, 0, 0, 54, triangles);
	Triangle(points[27], points[36], points[35], 255, 0, 0, 55, triangles);
	Triangle(points[29], points[37], points[36], 255, 0, 0, 56, triangles);
	Triangle(points[28], points[35], points[37], 255, 0, 0, 57, triangles);
	Triangle(points[36], points[37], points[35], 255, 0, 0, 58, triangles);
	Triangle(points[28], points[37], points[38], 255, 0, 0, 59, triangles);
	
	Triangle(points[29], points[39], points[37], 255, 0, 0, 60, triangles);
	Triangle(points[30], points[38], points[39], 255, 0, 0, 61, triangles);
	Triangle(points[37], points[39], points[38], 255, 0, 0, 62, triangles);
	Triangle(points[29], points[40], points[39], 255, 0, 0, 63, triangles);
	Triangle(points[31], points[41], points[40], 255, 0, 0, 64, triangles);
	Triangle(points[30], points[39], points[41], 255, 0, 0, 65, triangles);
	Triangle(points[40], points[41], points[39], 255, 0, 0, 66, triangles);
	Triangle(points[30], points[41], points[13], 255, 0, 0, 67, triangles);
	Triangle(points[31], points[14], points[41], 255, 0, 0, 68, triangles);
	Triangle(points[41], points[14], points[13], 255, 0, 0, 69, triangles);
	
	Triangle(points[31], points[17], points[14], 255, 0, 0, 70, triangles);
	Triangle(points[27], points[24], points[22], 255, 0, 0, 71, triangles);
	Triangle(points[27], points[35], points[24], 255, 0, 0, 72, triangles);
	Triangle(points[28], points[25], points[35], 255, 0, 0, 73, triangles);
	Triangle(points[24], points[35], points[25], 255, 0, 0, 74, triangles);
	Triangle(points[28], points[38], points[9], 255, 0, 0, 75, triangles);
	Triangle(points[30], points[10], points[38], 255, 0, 0, 76, triangles);
	Triangle(points[38], points[10], points[9], 255, 0, 0, 77, triangles);
	Triangle(points[30], points[13], points[10], 255, 0, 0, 78, triangles);
	Triangle(points[28], points[9], points[25], 255, 0, 0, 79, triangles);
	
	//2
	var points = points1;
	var triangles = triangles1;
	Triangle(points[0], points[6], points[7], 0, 0, 255, 0, triangles);
	Triangle(points[3], points[7], points[12], 0, 0, 255, 1, triangles);
	Triangle(points[1], points[12], points[6], 0, 0, 255, 2, triangles);
	
	Triangle(points[7], points[6], points[12], 0, 0, 255, 3, triangles);
	Triangle(points[0], points[7], points[8], 0, 0, 255, 4, triangles);
	
	Triangle(points[5], points[8], points[20], 0, 0, 255, 5, triangles);
	Triangle(points[3], points[20], points[7], 0, 0, 255, 6, triangles);
	Triangle(points[8], points[7], points[20], 0, 0, 255, 7, triangles);
	Triangle(points[0], points[8], points[9], 0, 0, 255, 8, triangles);
	Triangle(points[5], points[25], points[8], 0, 0, 255, 9, triangles);
	
	Triangle(points[9], points[8], points[25], 0, 0, 255, 10, triangles);
	Triangle(points[0], points[9], points[10], 0, 0, 255, 11, triangles);
	Triangle(points[0], points[10], points[6], 0, 0, 255, 12, triangles);
	Triangle(points[1], points[6], points[13], 0, 0, 255, 13, triangles);
	Triangle(points[6], points[10], points[13], 0, 0, 255, 14, triangles);
	Triangle(points[1], points[11], points[12], 0, 0, 255, 15, triangles);
	Triangle(points[3], points[12], points[15], 0, 0, 255, 16, triangles);
	Triangle(points[2], points[15], points[11], 0, 0, 255, 17, triangles);
	Triangle(points[12], points[11], points[15], 0, 0, 255, 18, triangles);
	Triangle(points[2], points[16], points[15], 0, 0, 255, 19, triangles);
	
	Triangle(points[3], points[15], points[19], 0, 0, 255, 20, triangles);
	Triangle(points[4], points[19], points[16], 0, 0, 255, 21, triangles);
	Triangle(points[15], points[16], points[19], 0, 0, 255, 22, triangles);
	Triangle(points[3], points[19], points[20], 0, 0, 255, 23, triangles);
	Triangle(points[5], points[20], points[21], 0, 0, 255, 24, triangles);
	Triangle(points[4], points[21], points[19], 0, 0, 255, 25, triangles);
	Triangle(points[20], points[19], points[21], 0, 0, 255, 26, triangles);
	Triangle(points[4], points[22], points[21], 0, 0, 255, 27, triangles);
	Triangle(points[5], points[21], points[24], 0, 0, 255, 28, triangles);
	Triangle(points[21], points[22], points[24], 0, 0, 255, 29, triangles);
	
	Triangle(points[5], points[24], points[25], 0, 0, 255, 30, triangles);
	Triangle(points[1], points[13], points[14], 0, 0, 255, 31, triangles);
	Triangle(points[1], points[14], points[11], 0, 0, 255, 32, triangles);
	Triangle(points[2], points[11], points[17], 0, 0, 255, 33, triangles);
	Triangle(points[14], points[17], points[11], 0, 0, 255, 34, triangles);
	Triangle(points[2], points[18], points[16], 0, 0, 255, 35, triangles);
	Triangle(points[4], points[16], points[23], 0, 0, 255, 36, triangles);
	Triangle(points[16], points[18], points[23], 0, 0, 255, 37, triangles);
	Triangle(points[4], points[23], points[22], 0, 0, 255, 38, triangles);
	Triangle(points[2], points[17], points[18], 0, 0, 255, 39, triangles);
	
	Triangle(points[26], points[33], points[32], 0, 0, 255, 40, triangles);
	Triangle(points[29], points[36], points[33], 0, 0, 255, 41, triangles);
	Triangle(points[27], points[32], points[36], 0, 0, 255, 42, triangles);
	Triangle(points[33], points[36], points[32], 0, 0, 255, 43, triangles);
	Triangle(points[26], points[34], points[33], 0, 0, 255, 44, triangles);
	Triangle(points[31], points[40], points[34], 0, 0, 255, 45, triangles);
	Triangle(points[29], points[33], points[40], 0, 0, 255, 46, triangles);
	Triangle(points[34], points[40], points[33], 0, 0, 255, 47, triangles);
	Triangle(points[26], points[18], points[34], 0, 0, 255, 48, triangles);
	Triangle(points[31], points[34], points[17], 0, 0, 255, 49, triangles);
	
	Triangle(points[18], points[17], points[34], 0, 0, 255, 50, triangles);
	Triangle(points[26], points[23], points[18], 0, 0, 255, 51, triangles);
	Triangle(points[26], points[32], points[23], 0, 0, 255, 52, triangles);
	Triangle(points[27], points[22], points[32], 0, 0, 255, 53, triangles);
	Triangle(points[32], points[22], points[23], 0, 0, 255, 54, triangles);
	Triangle(points[27], points[36], points[35], 0, 0, 255, 55, triangles);
	Triangle(points[29], points[37], points[36], 0, 0, 255, 56, triangles);
	Triangle(points[28], points[35], points[37], 0, 0, 255, 57, triangles);
	Triangle(points[36], points[37], points[35], 0, 0, 255, 58, triangles);
	Triangle(points[28], points[37], points[38], 0, 0, 255, 59, triangles);
	
	Triangle(points[29], points[39], points[37], 0, 0, 255, 60, triangles);
	Triangle(points[30], points[38], points[39], 0, 0, 255, 61, triangles);
	Triangle(points[37], points[39], points[38], 0, 0, 255, 62, triangles);
	Triangle(points[29], points[40], points[39], 0, 0, 255, 63, triangles);
	Triangle(points[31], points[41], points[40], 0, 0, 255, 64, triangles);
	Triangle(points[30], points[39], points[41], 0, 0, 255, 65, triangles);
	Triangle(points[40], points[41], points[39], 0, 0, 255, 66, triangles);
	Triangle(points[30], points[41], points[13], 0, 0, 255, 67, triangles);
	Triangle(points[31], points[14], points[41], 0, 0, 255, 68, triangles);
	Triangle(points[41], points[14], points[13], 0, 0, 255, 69, triangles);
	
	Triangle(points[31], points[17], points[14], 0, 0, 255, 70, triangles);
	Triangle(points[27], points[24], points[22], 0, 0, 255, 71, triangles);
	Triangle(points[27], points[35], points[24], 0, 0, 255, 72, triangles);
	Triangle(points[28], points[25], points[35], 0, 0, 255, 73, triangles);
	Triangle(points[24], points[35], points[25], 0, 0, 255, 74, triangles);
	Triangle(points[28], points[38], points[9], 0, 0, 255, 75, triangles);
	Triangle(points[30], points[10], points[38], 0, 0, 255, 76, triangles);
	Triangle(points[38], points[10], points[9], 0, 0, 255, 77, triangles);
	Triangle(points[30], points[13], points[10], 0, 0, 255, 78, triangles);
	Triangle(points[28], points[9], points[25], 0, 0, 255, 79, triangles);
	
	Light();
	setAnimation();
	
    function Point3D(x, y, z, vpX, vpY, cX, cY, cZ, i, points)
    {
    	var points = points;
    	points[i] = 
		{
			x:ratio * x, y:ratio * y, z:ratio * z,
			vx:vx, 
			vy:vy, 
			vz:vz,
			vpX:vpX, vpY:vpY, 
			cX:cX, cY:cY, cZ:cZ,
			radius:ratio,
			mass:ratio,
			angleX:0, angleY:0, angleZ:0,
			screenX:0, screenY:0
		};
    }
    
    function Triangle(pointA, pointB, pointC, r, g, b, i, triangles)
	{
		var triangles = triangles;
		var zpos = depth(pointA, pointB, pointC);
		triangles[i] = {pointA:pointA, pointB:pointB, pointC:pointC, r:r, g:g, b:b, zpos:zpos};
	}
	
	function draw(pointA, pointB, pointC, r, g, b)
	{
		if (isBackFace(pointA, pointB, pointC))
		{
			return;
		}
		
		var colorR = getAdjustedColor(pointA, pointB, pointC, r, g, b).red;
		var colorG = getAdjustedColor(pointA, pointB, pointC, r, g, b).green;
		var colorB = getAdjustedColor(pointA, pointB, pointC, r, g, b).blue;
		
		ctx.fillStyle = "rgba(" + colorR + "," + colorG + "," + colorB + "," + 1 + ")";  
		ctx.strokeStyle = "rgba(" + colorR + "," + colorG + "," + colorB + "," + 1 + ")";
        ctx.lineWidth = 1;
        ctx.beginPath();
		ctx.moveTo(pointA.screenX, pointA.screenY);
		ctx.lineTo(pointB.screenX, pointB.screenY);
		ctx.lineTo(pointC.screenX, pointC.screenY);
		ctx.lineTo(pointA.screenX, pointA.screenY);
		ctx.fill();
		ctx.stroke();
	}
    
    /*
     * 光源設定
     */
    function Light()
	{
		light = {};
		light.x = -100,
		light.y = -100,
		light.z = -100,
		light.brightness = 1;
	}
    
    /*
	 * 面の照明調整
	 */
    function getAdjustedColor(pointA, pointB, pointC, r, g, b)
	{
		var red = r;
		var green = g;
		var blue = b;
		
		var lightFactor = getLightFactor(pointA, pointB, pointC);
		
		red *= lightFactor;
		green *= lightFactor;
		blue *= lightFactor;
		
		red = Math.round(red);
		green = Math.round(green);
		blue = Math.round(blue);
		
		return {red:red, green:green, blue:blue};
	}
	
	/*
	 * 光線の角度
	 */
	function getLightFactor(pointA, pointB, pointC)
	{
		var ab = {};
		ab.x = pointA.x - pointB.x;
		ab.y = pointA.y - pointB.y;
		ab.z = pointA.z - pointB.z;
		
		var bc = {};
		bc.x = pointB.x - pointC.x;
		bc.y = pointB.y - pointC.y;
		bc.z = pointB.z - pointC.z;
		
		var norm = {};
		norm.x = (ab.y * bc.z) - (ab.z * bc.y);
		norm.y = -((ab.x * bc.z) - (ab.z * bc.x));
		norm.z = (ab.x * bc.y) - (ab.y * bc.x);
		
		var dotProd = norm.x * light.x +
		norm.y * light.y +
		norm.z * light.z;
		
		var normMag = Math.sqrt(norm.x * norm.x +
		norm.y * norm.y + norm.z * norm.z);
		
		var lightMag = Math.sqrt(light.x * light.x +
		light.y * light.y +
		light.z * light.z);
		
		return (Math.acos(dotProd/(normMag*lightMag))/Math.PI) * light.brightness;
	}
	
	/*
	 * 隠面消去
	 */
	function isBackFace(pointA, pointB, pointC)
	{
		var cax = pointC.screenX - pointA.screenX;
		var cay = pointC.screenY - pointA.screenY;
		var bcx = pointB.screenX - pointC.screenX;
		var bcy = pointB.screenY - pointC.screenY;
		return cax * bcy > cay * bcx;
	}
   	/*
   	 * 追加 ここまで
   	 */
   	
   	
    function setAnimation()
	{
		animation();
		requestAnimationFrame(setAnimation);
	}
	
	function animation()
    {
    	ctx.clearRect(0, 0, 300, 300);
    	
    	var angleX = 0.1;
        var angleY = 0.1;
        
        move(balls[0]);
		move(balls[1]);
		//checkCollisionX(balls[0], balls[1]);
		//checkCollisionY(balls[0], balls[1]);
		checkCollisionZ(balls[0], balls[1]);
		
        checkWalls(points0, angleX, angleY);
        checkWalls(points1, angleX, angleY);

		for(var i = 0; i < points0.length; i++)
		{
			points0[i].cX = balls[0].xpos;
			points0[i].cY = balls[0].ypos;
			points0[i].cZ = balls[0].zpos;
		
			points0[i].vx = balls[0].vx;
			points0[i].vy = balls[0].vy;
			points0[i].vz = balls[0].vz;
		}
		
		for(var i = 0; i < points1.length; i++)
		{
			points1[i].cX = balls[1].xpos;
			points1[i].cY = balls[1].ypos;
			points1[i].cZ = balls[1].zpos;
		
			points1[i].vx = balls[1].vx;
			points1[i].vy = balls[1].vy;
			points1[i].vz = balls[1].vz;
		}
		
		if(points0[0].cZ > points1[0].cZ)
       	{
       		var d0 = triangles0;
       		var d1 = triangles1;
       	}
		else
       	{
       		d0 = triangles1;
       		d1 = triangles0;
       	}
       	setSphere(d0);
       	setSphere(d1);
    }
    
    function checkCollisionX(ball0, ball1)
    {
    	var dx = ball1.xpos - ball0.xpos;
		var dy = ball1.ypos - ball0.ypos;
		var dz = ball1.zpos - ball0.zpos;
		var dist = Math.sqrt(dx * dx + dy * dy + dz * dz);
		
		if(dist < ball0.radius + ball1.radius)
		{
			// 角度とサイン、コサインの計算
			var angle = Math.atan2(dy, dz);
			var sin = Math.sin(angle);
			var cos = Math.cos(angle);
			
			// ball0の位置の回転
			var pos0 = {zpos:0, ypos:0};
			
			// ball1の位置の回転
			var pos1 = rotateX(dz, dy, sin, cos, true);
			
			// ball0の速度の回転
			var vel0 = rotateX(ball0.vz, ball0.vy, sin, cos, true);
			
			// ball1の速度の回転
			var vel1 = rotateX(ball1.vz, ball1.vy, sin, cos, true);
			
			// 衝突反応
			var vzTotal = vel0.zpos - vel1.zpos;
			vel0.zpos = ((ball0.mass - ball1.mass) * vel0.zpos + 
			       2 * ball1.mass * vel1.zpos) / 
			          (ball0.mass + ball1.mass);
			vel1.zpos = vzTotal + vel0.zpos;

			// 位置の更新
			var absV = Math.abs(vel0.zpos) + Math.abs(vel1.zpos);
			var overlap = (ball0.radius + ball1.radius) 
			                      - Math.abs(pos0.zpos - pos1.zpos);
			pos0.zpos += vel0.zpos / absV * overlap;
			pos1.zpos += vel1.zpos / absV * overlap;
			
			// 座標の回転
			var pos0F = rotateX(pos0.zpos, pos0.ypos, sin, cos, false);
									  
			var pos1F = rotateX(pos1.zpos, pos1.ypos, sin, cos, false);

			// 実際の画面位置への調整
			ball1.zpos = ball0.zpos + pos1F.zpos;
			ball1.ypos = ball0.ypos + pos1F.ypos;
			ball0.zpos = ball0.zpos + pos0F.zpos;
			ball0.ypos = ball0.ypos + pos0F.ypos;
			
			// 速度の回転
			var vel0F = rotateX(vel0.zpos, vel0.ypos, sin, cos, false);
			var vel1F = rotateX(vel1.zpos, vel1.ypos, sin, cos, false);
			ball0.vz = vel0F.zpos;
			ball0.vy = vel0F.ypos;
			ball1.vz = vel1F.zpos;
			ball1.vy = vel1F.ypos;
			
			/*for(var i = 0; i < points0.length; i++)
			{
				points0[i].cY = ball0.ypos;
				points0[i].cZ = ball0.zpos;
				
				points0[i].vz = vel0F.zpos;
				points0[i].vy = vel0F.ypos;
			}
			
			for(var i = 0; i < points1.length; i++)
			{
				points1[i].vz = vel1F.zpos;
				points1[i].vy = vel1F.ypos;
			}*/
		}
    }
    
    function checkCollisionY(ball0, ball1)
    {
    	var dx = ball1.xpos - ball0.xpos;
		var dy = ball1.ypos - ball0.ypos;
		var dz = ball1.zpos - ball0.zpos;
		var dist = Math.sqrt(dx * dx + dy * dy + dz * dz);
		
		if(dist < ball0.radius + ball1.radius)
		{
			// 角度とサイン、コサインの計算
			var angle = Math.atan2(dx, dz);
			var sin = Math.sin(angle);
			var cos = Math.cos(angle);
			
			// ball0の位置の回転
			var pos0 = {zpos:0, xpos:0};
			
			// ball1の位置の回転
			var pos1 = rotateY(dz, dx, sin, cos, true);
			
			// ball0の速度の回転
			var vel0 = rotateY(ball0.vz, ball0.vx, sin, cos, true);
			
			// ball1の速度の回転
			var vel1 = rotateY(ball1.vz, ball1.vx, sin, cos, true);
			
			// 衝突反応
			var vzTotal = vel0.zpos - vel1.zpos;
			vel0.zpos = ((ball0.mass - ball1.mass) * vel0.zpos + 
			       2 * ball1.mass * vel1.zpos) / 
			          (ball0.mass + ball1.mass);
			vel1.zpos = vzTotal + vel0.zpos;

			// 位置の更新
			var absV = Math.abs(vel0.zpos) + Math.abs(vel1.zpos);
			var overlap = (ball0.radius + ball1.radius) 
			                      - Math.abs(pos0.zpos - pos1.zpos);
			pos0.zpos += vel0.zpos / absV * overlap;
			pos1.zpos += vel1.zpos / absV * overlap;
			
			// 座標の回転
			var pos0F = rotateY(pos0.zpos, pos0.xpos, sin, cos, false);
									  
			var pos1F = rotateY(pos1.zpos, pos1.xpos, sin, cos, false);

			// 実際の画面位置への調整
			ball1.zpos = ball0.zpos + pos1F.zpos;
			ball1.xpos = ball0.xpos + pos1F.xpos;
			ball0.zpos = ball0.zpos + pos0F.zpos;
			ball0.xpos = ball0.xpos + pos0F.xpos;
			
			// 速度の回転
			var vel0F = rotateY(vel0.zpos, vel0.xpos, sin, cos, false);
			var vel1F = rotateY(vel1.zpos, vel1.xpos, sin, cos, false);
			ball0.vz = vel0F.zpos;
			ball0.vx = vel0F.xpos;
			ball1.vz = vel1F.zpos;
			ball1.vx = vel1F.xpos;
			
			/*for(var i = 0; i < points0.length; i++)
			{
				points0[i].cX = ball0.xpos;
				points0[i].cZ = ball0.zpos;
				
				points0[i].vz = vel0F.zpos;
				points0[i].vx = vel0F.xpos;
				
			}
			
			for(var i = 0; i < points1.length; i++)
			{
				points1[i].vz = vel1F.zpos;
				points1[i].vx = vel1F.xpos;
			}*/
		}
    }
    
    function checkCollisionZ(ball0, ball1)
    {
    	var dx = ball1.xpos - ball0.xpos;
		var dy = ball1.ypos - ball0.ypos;
		var dz = ball1.zpos - ball0.zpos;
		var dist = Math.sqrt(dx * dx + dy * dy + dz * dz);
		
		if(dist < ball0.radius + ball1.radius)
		{
			// 角度とサイン、コサインの計算
			var angle = Math.atan2(dy, dx);
			var sin = Math.sin(angle);
			var cos = Math.cos(angle);
			
			// ball0の位置の回転
			var pos0 = {xpos:0, ypos:0};
			
			// ball1の位置の回転
			var pos1 = rotateZ(dx, dy, sin, cos, true);
			
			// ball0の速度の回転
			var vel0 = rotateZ(ball0.vx, ball0.vy, sin, cos, true);
			
			// ball1の速度の回転
			var vel1 = rotateZ(ball1.vx, ball1.vy, sin, cos, true);
			
			// 衝突反応
			var vxTotal = vel0.xpos - vel1.xpos;
			vel0.xpos = ((ball0.mass - ball1.mass) * vel0.xpos + 
			       2 * ball1.mass * vel1.xpos) / 
			          (ball0.mass + ball1.mass);
			vel1.xpos = vxTotal + vel0.xpos;

			// 位置の更新
			var absV = Math.abs(vel0.xpos) + Math.abs(vel1.xpos);
			var overlap = (ball0.radius + ball1.radius) 
			                      - Math.abs(pos0.xpos - pos1.xpos);
			pos0.xpos += vel0.xpos / absV * overlap;
			pos1.xpos += vel1.xpos / absV * overlap;
			
			// 座標の回転
			var pos0F = rotateZ(pos0.xpos, pos0.ypos, sin, cos, false);
									  
			var pos1F = rotateZ(pos1.xpos, pos1.ypos, sin, cos, false);

			// 実際の画面位置への調整
			ball1.xpos = ball0.xpos + pos1F.xpos;
			ball1.ypos = ball0.ypos + pos1F.ypos;
			ball0.xpos = ball0.xpos + pos0F.xpos;
			ball0.ypos = ball0.ypos + pos0F.ypos;
			
			// 速度の回転
			var vel0F = rotateZ(vel0.xpos, vel0.ypos, sin, cos, false);
			var vel1F = rotateZ(vel1.xpos, vel1.ypos, sin, cos, false);
			ball0.vx = vel0F.xpos;
			ball0.vy = vel0F.ypos;
			ball1.vx = vel1F.xpos;
			ball1.vy = vel1F.ypos;
			
			for(var i = 0; i < points0.length; i++)
			{
				points0[i].cX = ball0.xpos;
				points0[i].cY = ball0.ypos;
				
				points0[i].vx = vel0F.xpos;
				points0[i].vy = vel0F.ypos;
			}
			
			for(var i = 0; i < points1.length; i++)
			{
				points1[i].vx = vel1F.xpos;
				points1[i].vy = vel1F.ypos;
			}
		}
    }
    
    function rotateX(zpos, ypos, sin, cos, reverse)
	{
		var result = {zpos:0, ypos:0};
		if(reverse)
		{
			result.ypos = ypos * cos - zpos * sin;
			result.zpos = zpos * cos + ypos * sin;
		}
		else
		{
			result.ypos = ypos * cos + zpos * sin;
			result.zpos = zpos * cos - ypos * sin;
		}
		return result;
	}
	
	function rotateY(zpos, xpos, sin, cos, reverse)
	{
		var result = {zpos:0, xpos:0};
		if(reverse)
		{
			result.xpos = xpos * cos - zpos * sin;
			result.zpos = zpos * cos + xpos * sin;
		}
		else
		{
			result.xpos = xpos * cos + zpos * sin;
			result.zpos = zpos * cos - xpos * sin;
		}
		return result;
	}
    
    function rotateZ(xpos, ypos, sin, cos, reverse)
	{
		var result = {xpos:0, ypos:0};
		if(reverse)
		{
			result.xpos = xpos * cos + ypos * sin;
			result.ypos = ypos * cos - xpos * sin;
		}
		else
		{
			result.xpos = xpos * cos - ypos * sin;
			result.ypos = ypos * cos + xpos * sin;
		}
		return result;
	}
    
    function move(ball)
	{
		var radius =  ball.radius;
		
		ball.xpos += ball.vx;
		ball.ypos += ball.vy;
		ball.zpos += ball.vz;
		
		
		if(ball.xpos + radius > right)
		{
			ball.xpos = right - radius;
			ball.vx *= -1;
		}
		else if(ball.xpos - radius < left)
		{
			ball.xpos = left + radius;
			ball.vx *= -1;
		}
		if(ball.ypos + radius > bottom)
		{
			ball.ypos = bottom - radius;
			ball.vy *= -1;
		}
		else if(ball.ypos - radius < top)
		{
			ball.ypos = top + radius;
			ball.vy *= -1;
		}
		if(ball.zpos + radius > front)
		{
			ball.zpos = front - radius;
			ball.vz *= -1;
		}
		else if(ball.zpos - radius < back)
		{
			ball.zpos = back + radius;
			ball.vz *= -1;
		}
		
		if(ball.zpos > -fl)
		{
			var scale = fl / (fl + ball.zpos);
			ball.scaleX = scale;
			ball.scaleY = scale;
			ball.x = vpX + ball.xpos * scale;
			ball.y = vpY + ball.ypos * scale;
		}
	}
	
	/*
	 * 配列の並べ替え: 降順
	 */
	function depth(pointA, pointB, pointC)
	{
		var zpos = Math.min(pointA.z, pointB.z);
		zpos = Math.min(zpos, pointC.z);
		return zpos;
	}
	
	function sortZ(triangles)
	{
		var triangles = triangles;
		triangles.sort(function(a, b) 
		{
			if(a["zpos"] < b["zpos"])
			{
				var v = 1;
			}
			else
			{
				v = -1;
			}
			return v;
		});
	}
	
	function checkWalls(points, angleX, angleY)
    {
    	for(var i = 0; i < points.length; i++)
        {
        	var point = points[i];
        	var radius = point.radius;
        	
        	point.cX += point.vx;
        	point.cY += point.vy;
        	point.cZ += point.vz;
        	
        	if(point.cX + radius > right)
        	{
        		point.cX = right - radius;
        		point.vx *= -1;
        		//var angleX = Math.cos(point.vx);
        	}
        	else
        	if(point.cX - radius < left)
        	{
        		point.cX = left + radius;
        		point.vx *= -1;
        		//angleX = Math.cos(point.vx);
        	}
        	
        	if(point.cY + radius > bottom)
        	{
        		point.cY = bottom - radius;
        		point.vy *= -1;
        		//var angleY = Math.sin(point.vy);
        	}
        	else
        	if(point.cY - radius < top)
        	{
        		point.cY = top + radius;
        		point.vy *= -1;
        		//var angleY = Math.sin(point.vy);
        	}
        	
        	if(point.cZ + radius > front)
        	{
        		point.cZ = front - radius;
        		point.vz *= -1;
        	}
        	else
        	if(point.cZ - radius < back)
        	{
        		point.cZ = back + radius;
        		point.vz *= -1;
        	}
        	
			setRotateX(point, angleX);
			setScreenX(point);
			setRotateY(point, angleY);
			setScreenY(point);
        }
    }
    
    function setSphere(triangles)
    {
    	for(i = 0; i < triangles.length; i++)
		{
			triangles[i].zpos = depth(triangles[i].pointA, triangles[i].pointB, triangles[i].pointC);
			draw(triangles[i].pointA, triangles[i].pointB, triangles[i].pointC, triangles[i].r, triangles[i].g, triangles[i].b);
		}
		sortZ(triangles);
    }
    
    function setScreenX(point)
    {
    	var scale = fl / (fl + point.z + point.cZ);
		point.screenX = point.vpX + (point.cX + point.x) * scale;
    }
    
    function setScreenY(point)
    {
		var scale = fl / (fl + point.z + point.cZ);
		point.screenY = point.vpY + (point.cY + point.y) * scale;
    }
    
    function setRotateX(point, angleX)
    {
		point.angleX = angleX;
		
		var cosX = Math.cos(point.angleX);
		var sinX = Math.sin(point.angleX);
		
		var y1 = point.y * cosX - point.z * sinX;
		var z1 = point.z * cosX + point.y * sinX;
		
		point.y = y1;
		point.z = z1;
    }
    
    function setRotateY(point, angleY)
    {
		point.angleY = angleY;
		
		var cosY = Math.cos(point.angleY);
		var sinY = Math.sin(point.angleY);
		
		var x1 = point.x * cosY - point.z * sinY;
		var z1 = point.z * cosY + point.x * sinY;
		
		point.x = x1;
		point.z = z1;
    }
    
    function setRotateZ(point, angleZ)
    {
    	var cosZ = Math.cos(point.angleZ);
		var sinZ = Math.sin(point.angleZ);
		
		var x1 = point.x * cosZ - point.y * sinZ;
		var y1 = point.y * cosZ + point.x * sinZ;
		
		point.x = x1;
		point.y = y1;
    }
    
    function mouseMoveHandler(e)
    {
        if(g_mobiledevice)
        {
            var rect = event.currentTarget.getBoundingClientRect();
            mouseX = event.touches[0].pageX - rect.left;
            mouseY = event.touches[0].pageY - rect.top;
        }
        else
        if(g_browsername == 'MSIE'||g_browsername == 'Opera')
        {
            rect = document.getElementById("canvas").getBoundingClientRect();
            mouseX = event.clientX - rect.left;
            mouseY = event.clientY - rect.top;
        }
        else
        if(g_browsername == 'Firefox')
        {
            rect = document.getElementById("canvas").getBoundingClientRect();
            mouseX = e.clientX - rect.left;
            mouseY = e.clientY - rect.top;
        }
        else
        {
            rect = event.currentTarget.getBoundingClientRect();
            mouseX = event.clientX - rect.left;
            mouseY = event.clientY - rect.top;
        }
    }
}

// 各ブラウザ対応
window.requestAnimationFrame = (function()
{
	return window.requestAnimationFrame ||
	window.webkitRequestAnimationFrame ||
	window.mozRequestAnimationFrame ||
	window.oRequestAnimationFrame ||
	window.msRequestAnimationFrame ||
	function(callback)
	{
		window.setTimeout(callback, 1000/60);
	};
}());

devicecheck.js

var g_mobiledevice = false;	//iPhone、iPad、Androidのときtrue
var g_browsername = 'unknown';
var g_browserver = -1;

if(checkUserAgent() == false)
{
	window.alert('このブラウザは対象外です');
}

function checkUserAgent()
{
	var ua = navigator.userAgent;

	//iPhoneか?	
	var mstr = ua.match(/iPhone OS \d+/);
	if(mstr != null){
		var vstr = mstr[0].match(/\d+/);
		if(parseInt(vstr[0]) >= 3) 
		{
			g_mobiledevice = true;
			g_browsername = 'iPhone';
			//alert('major-version ' + vstr);
			return true;
		}
	}
	//iPadか?
	if(ua.indexOf('iPad') > -1)
	{
		mstr = ua.match(/CPU OS \d+/);
		if(mstr != null)
		{
			var vstr = mstr[0].match(/\d+/);
			if(parseInt(vstr[0]) >= 3) {
				g_mobiledevice = true;
				g_browsername = 'iPad';
				//alert('major-version ' + vstr);
				return true;
			}		
		}		
	}	
	//Androidか?	
	var mstr = ua.match(/Android \d+\.\d+/);
	if(mstr != null)
	{
		g_browsername = 'Android';
		var vstr = mstr[0].match(/\d+\.\d+/);
		g_browserver = parseFloat(vstr[0]);
		g_mobiledevice = true;
		if(pg_browserver > 2.1) 
		{
			//alert('version ' + vstr);
			return true;
		}
	}
	//Chromeか?
	mstr = ua.match(/Chrome\/\d+/);
	if(mstr != null)
	{
		g_browsername = 'Chrome';
		var vstr = mstr[0].match(/\d+/);
		g_browserver = parseInt(vstr[0]);
		if(g_browserver >= 9) 
		{
			//alert('major-version ' + vstr);
			
			return true;
		}		
	}
	//Safariか?
	if(ua.indexOf('Safari') > -1)
	{
		mstr = ua.match(/Version\/\d+/);
		if(mstr != null){
			var vstr = mstr[0].match(/\d+/);
			if(parseInt(vstr[0]) >= 5) 
			{
				g_browsername = 'Safari';
				//alert('major-version ' + vstr);
				return true;
			}		
		}		
	}
	//Internet Explorerか?
	mstr = ua.match(/MSIE \d+/);
	if(mstr != null)
	{
		var vstr = mstr[0].match(/\d+/);
		if(parseInt(vstr[0]) >= 9) 
		{
			g_browsername = 'MSIE';
			//alert('major-version ' + vstr);
			return true;
		}		
	}
	//Firefoxか?
	mstr = ua.match(/Firefox\/\d+/);
	if(mstr != null){
		var vstr = mstr[0].match(/\d+/);
		if(parseInt(vstr[0]) >= 4) 
		{
			g_browsername = 'Firefox';
			//alert('major-version ' + vstr);
			return true;
		}		
	}
	//Operaか?
	if(ua.indexOf('Opera') > -1)
	{
		mstr = ua.match(/Version\/\d+/);
		if(mstr != null){
			var vstr = mstr[0].match(/\d+/);
			if(parseInt(vstr[0]) >= 11) 
			{
				g_browsername = 'Opera';
				//alert('major-version ' + vstr);
				return true;
			}		
		}		
	}
	
	return false;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメントフィード

トラックバック URL : http://www.htmlcode.jp/%e3%81%b5%e3%81%9f%e3%81%a4%e3%81%ae%e7%90%83-%e8%b7%b3%e3%81%ad%e8%bf%94%e3%82%8a%e3%81%a8%e8%a1%9d%e7%aa%81-3d%ef%bd%9chtml5/trackback/