Home » » Membuat Ular-ularan Dengan HTML5

Membuat Ular-ularan Dengan HTML5

Written By Nether Blog on Tuesday, July 24, 2012 | 4:40:00 PM



Dan Berikut adalah Source Code-nya :

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <style>
            body {
                margin: 0px;
                padding: 0px;
            }
           
            #myCanvas {
                border: 1px solid #9C9898;
            }
        </style>
        <script>
            window.requestAnimFrame = (function(callback){
                return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function(callback){
                    window.setTimeout(callback, 1000 / 60);
                };
            })();
           
            function getRandTheta(){
                return Math.random() * 2 * Math.PI;
            }
           
            function updateSnake(canvas, snake){
                var maxVariance = 0.2;
                var snakeSpeed = 200; //px / s
                var segmentsPerSecond = snakeSpeed / snake.segmentLength;
                var segments = snake.segments;
                var date = new Date();
                var time = date.getTime();
                var timeDiff = (time - snake.lastUpdateTime);
                if (timeDiff > 1000 / segmentsPerSecond) {
                    var head = segments[segments.length - 1];
                    var neck = segments[segments.length - 2];
                   
                    var direction = snake.direction;
                    var newHeadX = head.x + direction.x * snake.segmentLength;
                    var newHeadY = head.y + direction.y * snake.segmentLength;
                   
                    // change direction if collision occurs
                    if (newHeadX > canvas.width || newHeadX < 0) {
                        direction.x *= -1;
                    }
                    if (newHeadY > canvas.height || newHeadY < 0) {
                        direction.y *= -1;
                    }
                   
                    // add new segment
                    segments.push({
                        x: newHeadX,
                        y: newHeadY
                    });
                   
                    if (segments.length > snake.numSegments) {
                        segments.shift();
                    }
                   
                    var variance = ((maxVariance / 2) - Math.random() * maxVariance);
                   
                    direction.x += variance;
                    direction.y -= variance;
                   
                    // update direction vector
                    if (direction.x > 1) {
                        direction.x = 1;
                    }
                    if (direction.x < -1) {
                        direction.x = -1;
                    }
                   
                    // dampering - try to keep direction vectors around -0.5 and +0.5
                    direction.x *= Math.abs(direction.x) > 0.5 ? (1 - 0.01) : (1 + 0.01);
                    direction.y *= Math.abs(direction.y) > 0.5 ? (1 - 0.01) : (1 + 0.01);
                   
                    snake.lastUpdateTime = time;
                }
            }
           
            function animate(canvas, snake){
                var context = canvas.getContext("2d");
               
                // update
                updateSnake(canvas, snake);
               
                // clear
                context.clearRect(0, 0, canvas.width, canvas.height);
               
                // draw
                drawSnake(context, snake);
               
                // request new frame
                requestAnimFrame(function(){
                    animate(canvas, snake);
                });
            }
           
            function drawSnake(context, snake){
                var segments = snake.segments;
                var tail = segments[0];
                context.beginPath();
                context.moveTo(tail.x, tail.y);
               
                for (var n = 1; n < segments.length; n++) {
                    var segment = segments[n];
                    context.lineTo(segment.x, segment.y);
                }
               
                context.lineWidth = 10;
                context.lineCap = "round";
                context.lineJoin = "round";
                context.strokeStyle = "green";
                context.stroke();
            }
           
            window.onload = function(){
                var canvas = document.getElementById("myCanvas");
                var segmentLength = 2; // px
                var headX = canvas.width / 2;
                var headY = canvas.height / 2;
               
                snake = {
                    segmentLength: 2,
                    lastUpdateTime: 0,
                    numSegments: 50,
                    // moving to the right
                    direction: {
                        x: 1,
                        y: 0
                    },
                    segments: [{
                        // tail
                        x: headX + segmentLength,
                        y: headY
                    }, {
                        // head
                        x: headX,
                        y: headY
                    }]
                };
               
                animate(canvas, snake);
            };
        </script>
    </head>
    <body onmousedown="return false;">
        <canvas id="myCanvas" width="578" height="300">
        </canvas>
   

</body></html>

0 komentar:

Post a Comment

Silahkan berikan komentar anda yang baik.