Snake - the game: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(23 intermediate revisions by 2 users not shown)
Line 1: Line 1:
This simple version of the old C64 game "snake" is realized completely in JavaScript with [http://jsxgraph.org JSXGraph].
After starting the game the "snake" can be controlled with the arrow up/down/left/right keys.
<html>
<html>
<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>
<form><input type="button" onClick="startGame()" value="start game"></form>
<div id="box" class="jxgbox" style="width:600px; height:600px; overflow:hidden;"></div>
</html>
<script type="text/javascript">
 
     var board = JXG.JSXGraph.initBoard('box',{originX:0,originY:600,unitX:30,unitY:30,grid:true});
<jsxgraph box="box" width="600" height="600">
     var board = JXG.JSXGraph.initBoard('box',{boundingbox: [0, 20, 20, 0]});
     var snake = {
     var snake = {
         points : [[10,11],[10,10]],
         points : [[10,11],[10,10]],
Line 15: Line 15:
         hitSelf: function(x,y) {
         hitSelf: function(x,y) {
             for (var i=0;i<this.size-1;i++) {
             for (var i=0;i<this.size-1;i++) {
                 if (x==this.points[0][i]) if (y==this.points[1][i]) {
                 if (x==this.points[0][i]) if (y==this.points[1][i]) { return true; }
                    return true;
                }
             }
             }
             return false;
             return false;
         }
         }
     }
     }
     var curve = board.createElement('curve', snake.points , {strokeWidth:20,strokeOpacity:0.5});
     var curve = board.create('curve', snake.points , {strokeColor:'#B71313',strokeWidth:20,strokeOpacity:0.7});
     var point = board.createElement('point', [
     var point = board.create('point', [
         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:'#ff0000',strokeWidth:10,name:' '});
         {strokeColor:'#4CADD4',fillColor:'#4CADD4',strokeWidth:10,name:' '});
     var t = board.createElement('text', [2,1,function() { return snake.size; }]);
     var t = board.create('text', [2,1,function() { return snake.size; }], {fontSize:28});


     var setRandomPosition = function()  {
     var setRandomPosition = function()  {
         point.setPositionDirectly(JXG.COORDS_BY_USER,
         point.setPositionDirectly(JXG.COORDS_BY_USER,
             Math.round(Math.random()*18)+1,
             [Math.round(Math.random()*18)+1,
             Math.round(Math.random()*18)+1);
             Math.round(Math.random()*18)+1]);
     }
     }
     var keyDown = function (Evt) {
     var keyDown = function (Evt) {
Line 39: Line 37:
             code = Evt.which;
             code = Evt.which;
         } else if (Evt.keyCode) {
         } else if (Evt.keyCode) {
             code = Ereignis.keyCode;
             code = Evt.keyCode;
         }
         }
         // 37: left,  38: up,  39: right,  40: down
         // 37: left,  38: up,  39: right,  40: down
Line 82: Line 80:
         snake.speed = 300;
         snake.speed = 300;
         setRandomPosition();
         setRandomPosition();
    crawl();
        crawl();
     }
     }
</script>
</jsxgraph>
</html>


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


     var setRandomPosition = function()  {
     var setRandomPosition = function()  {
         point.setPositionDirectly(JXG.COORDS_BY_USER,
         point.setPositionDirectly(JXG.COORDS_BY_USER,
             Math.round(Math.random()*18)+1,
             [Math.round(Math.random()*18)+1,
             Math.round(Math.random()*18)+1);
             Math.round(Math.random()*18)+1]);
     }
     }
     var keyDown = function (Evt) {
     var keyDown = function (Evt) {
Line 127: Line 123:
             code = Evt.which;
             code = Evt.which;
         } else if (Evt.keyCode) {
         } else if (Evt.keyCode) {
             code = Ereignis.keyCode;
             code = Evt.keyCode;
         }
         }
         // 37: left,  38: up,  39: right,  40: down
         // 37: left,  38: up,  39: right,  40: down
         if (code==37) { snake.dir = [-1,0]; }
         if (code==37) { snake.dir = [-1,0]; return false;}
         else if (code==38) { snake.dir = [0,1]; }
         else if (code==38) { snake.dir = [0,1]; return false;}
         else if (code==39) { snake.dir = [1,0]; }
         else if (code==39) { snake.dir = [1,0]; return false;}
         else if (code==40) { snake.dir = [0,-1]; }
         else if (code==40) { snake.dir = [0,-1]; return false;}
         return false;
         return true;
     }
     }
     document.onkeydown = keyDown;
     document.onkeydown = keyDown;
Line 170: Line 166:
         snake.speed = 300;
         snake.speed = 300;
         setRandomPosition();
         setRandomPosition();
    crawl();
        crawl();
     }
     }
</script>
</source>
</source>


[[Category:Examples]]
[[Category:Examples]]

Latest revision as of 09:36, 21 February 2013

This simple version of the old C64 game "snake" is realized completely in JavaScript with 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/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>
    var board = JXG.JSXGraph.initBoard('box',{boundingbox: [0, 20, 20, 0],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.create('curve', snake.points , {strokeWidth:20,strokeOpacity:0.5});
    var point = board.create('point', [
        Math.round(Math.random()*18)+1,Math.round(Math.random()*18)+1], 
        {strokeColor:'#4CADD4',fillColor:'#4CADD4',strokeWidth:10,name:' '});
    var t = board.create('text', [2,1,function() { return snake.size; }], {fontSize:28});

    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();
    }