Snake - the game: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
Line 4: | Line 4: | ||
<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 id="box" class="jxgbox" style="width:600px; height:600px; overflow:hidden;"></div> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
var board = JXG.JSXGraph.initBoard('box',{originX:0,originY:600,unitX:30,unitY:30,grid:true}); | var board = JXG.JSXGraph.initBoard('box',{originX:0,originY:600,unitX:30,unitY:30,grid:true}); | ||
Line 48: | Line 48: | ||
return false; | return false; | ||
} | } | ||
document.getElementById('box').onkeydown = keyDown; | |||
var crawl = function() { | var crawl = function() { |
Revision as of 14:15, 8 February 2009
<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:'#ff0000',strokeWidth:10,name:' '});
var t = board.createElement('text', [2,1,function() { return snake.size; }]);
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 = Ereignis.keyCode;
}
// 37: left, 38: up, 39: right, 40: down
if (code==37) { snake.dir = [-1,0]; }
else if (code==38) { snake.dir = [0,1]; }
else if (code==39) { snake.dir = [1,0]; }
else if (code==40) { snake.dir = [0,-1]; }
return false;
}
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>