Snake - the game: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 26: Line 26:
         Math.round(Math.random()*18)+1,Math.round(Math.random()*18)+1],  
         Math.round(Math.random()*18)+1,Math.round(Math.random()*18)+1],  
         {strokeColor:'#4CADD4',fillColor:'#4CADD4',strokeWidth:10,name:' '});
         {strokeColor:'#4CADD4',fillColor:'#4CADD4',strokeWidth:10,name:' '});
     var t = board.createElement('text', [2,1,function() { return snake.size; }], {fontSize:'32px'});
     var t = board.createElement('text', [2,1,function() { return snake.size; }], {fontSize:'28px'});


     var setRandomPosition = function()  {
     var setRandomPosition = function()  {
Line 114: Line 114:
         Math.round(Math.random()*18)+1,Math.round(Math.random()*18)+1],  
         Math.round(Math.random()*18)+1,Math.round(Math.random()*18)+1],  
         {strokeColor:'#4CADD4',fillColor:'#4CADD4',strokeWidth:10,name:' '});
         {strokeColor:'#4CADD4',fillColor:'#4CADD4',strokeWidth:10,name:' '});
     var t = board.createElement('text', [2,1,function() { return snake.size; }]);
     var t = board.createElement('text', [2,1,function() { return snake.size; }], {fontSize:'28px'});


     var setRandomPosition = function()  {
     var setRandomPosition = function()  {

Revision as of 14:48, 8 February 2009

This simple version of the old C64 game "snake" is realized completely in JavaScript with jQuery and JSXGraph. After starting the game the "snake" can be controlled with the arrow up/down/left/right keys.

<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jquery.min.js"></script>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<form><input type="button" onClick="startGame()" value="start game"></form>
<div id="box" class="jxgbox" style="width:600px; height:600px; overflow:hidden; "></div>
<script type="text/javascript">
    var board = JXG.JSXGraph.initBoard('box',{originX:0,originY:600,unitX:30,unitY:30,grid:true});
    var snake = {
        points : [[10,11],[10,10]],
        dir : [1,0],
        size: 2,
        newSize: 2,
        speed: 300,
        hitSelf: function(x,y) {
            for (var i=0;i<this.size-1;i++) {
                if (x==this.points[0][i]) if (y==this.points[1][i]) { return true; }
            }
            return false;
        }
    }
    var curve = board.createElement('curve', snake.points , {strokeWidth:20,strokeOpacity:0.5});
    var point = board.createElement('point', [
        Math.round(Math.random()*18)+1,Math.round(Math.random()*18)+1], 
        {strokeColor:'#4CADD4',fillColor:'#4CADD4',strokeWidth:10,name:' '});
    var t = board.createElement('text', [2,1,function() { return snake.size; }], {fontSize:'28px'});

    var setRandomPosition = function()  {
        point.setPositionDirectly(JXG.COORDS_BY_USER,
            Math.round(Math.random()*18)+1,
            Math.round(Math.random()*18)+1);
    }
    var keyDown = function (Evt) {
        var code;
        if (!Evt) Evt = window.event;
        if (Evt.which) {
            code = Evt.which;
        } else if (Evt.keyCode) {
            code = Evt.keyCode;
        }
        // 37: left,  38: up,  39: right,  40: down
        if (code==37) { snake.dir = [-1,0]; return false;}
        else if (code==38) { snake.dir = [0,1]; return false;}
        else if (code==39) { snake.dir = [1,0]; return false;}
        else if (code==40) { snake.dir = [0,-1]; return false;}
        return true;
    }
    document.onkeydown = keyDown;

    var crawl = function() {
        if (snake.size>=snake.newSize) {
            snake.points[0].shift();
            snake.points[1].shift();
        }
        var x = snake.points[0][snake.points[0].length-1]+snake.dir[0];
        snake.points[0].push(x);
        var y = snake.points[1][snake.points[1].length-1]+snake.dir[1];
        snake.points[1].push(y);
        snake.size = snake.points[0].length;
        board.update();
        if (x>=20 || x<=0 || y>=20 || y<=0 || snake.hitSelf(x,y)) {
            alert('Game over');
        } else {
            if (x==point.X()) if (y==point.Y()) {
                snake.newSize += 5;
                snake.speed -= 10;
                setRandomPosition();
                board.update();
            }
            setTimeout(crawl,snake.speed);
        }
    }
    
    var startGame = function () {
        snake.points[0].splice(0,snake.size,10,11);
        snake.points[1].splice(0,snake.size,10,10);
        snake.dir = [1,0];
        snake.size = 2;
        snake.newSize = 2;
        snake.speed = 300;
        setRandomPosition();
        crawl();
    }
</script>