Snake - the game: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(One intermediate revision by one other user not shown)
Line 28: Line 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 92: Line 92:


<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 114: Line 114:
     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) {

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