Difference between revisions of "Snake - the game"

From JSXGraph Wiki
Jump to navigationJump to search
 
(4 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
After starting the game the "snake" can be controlled with the arrow up/down/left/right keys.
 
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/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 21: Line 20:
 
         }
 
         }
 
     }
 
     }
     var curve = board.createElement('curve', snake.points , {strokeColor:'#B71313',strokeWidth:20,strokeOpacity:0.7});
+
     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:'#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:'28px'});
+
     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 83: Line 82:
 
         crawl();
 
         crawl();
 
     }
 
     }
</script>
+
</jsxgraph>
</html>
 
  
 
<source lang="xml">
 
<source lang="xml">
Line 91: Line 89:
 
<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>
 
</source>
 +
 
<source lang="javascript">
 
<source lang="javascript">
     var board = JXG.JSXGraph.initBoard('box',{originX:0,originY:600,unitX:30,unitY:30,grid:true});
+
     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 108: Line 106:
 
         }
 
         }
 
     }
 
     }
     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:'#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:'28px'});
+
     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 170: Line 168:
 
         crawl();
 
         crawl();
 
     }
 
     }
</source>
 
<source lang="xml">
 
</script>
 
 
</source>
 
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]

Latest revision as of 10: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();
    }