[HTML5][OS] Snake + LIVE Demo

**DMW007** · 14.05.2012, 21:37

Spoiler:

PHP-Code:


<!DOCTYPE HTML>
<html>
<head>
    <title>HTML5 Snake by DMW007</title>
    <script type="text/javascript">

var snake = Array();
var cookie;
var way = 'r';
var squareSize = 10;
var canvas;
var field;
var intervalID;

function move() {
    var newPos = calculateNewPos(way);

    if(hasLost(newPos)) {
        document.getElementById('points').innerHTML = "Verloren mit " + (snake.length - 2) + " Punkten!";
        clearInterval(intervalID);
    }else {
        snake.push(newPos);
        if(pointsEquals(newPos, cookie)) {
            newCookie();
        }else {
            var toRemove = snake.shift();
            canvas.clearRect(toRemove.x, toRemove.y, 10, 10);
        }

        for(var i = 0; i < snake.length; i++) {
            canvas.fillRect(snake[i].x, snake[i].y, 9, 9);
        }
        document.getElementById('points').innerHTML = "Punkte: " + (snake.length - 2);
    }
}

function newCookie() {
    if(cookie) {
        var old = cookie.clone();
        canvas.clearRect(old.x, old,y, 10 + 1, 10 + 1);
    }

    var x = 0, y = 0;
    do {
        x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
        y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
        cookie = new Point(x, y);
    }while(pointInSnake(cookie));
    
    canvas.strokeRect(cookie.x + 1, cookie.y + 1, 8, 8);
}

function start(interval, canvasID) {
    field = document.getElementById(canvasID);
    canvas = field.getContext('2d');
    snake.push(new Point(0, 0));
    snake.push(new Point(10, 0));
    setFieldSize(400, 200);
    newCookie();
    intervalID = window.setInterval("move()", interval);
}

function Point(x, y) {
    this.x = x;
    this.y = y;
}

function calculateNewPos(key) {
    var newPos = snake[snake.length - 1].clone();
    newPos.x += (key == 'r' ? squareSize : (key == 'l' ? -squareSize : 0));
    newPos.y += (key == 'd' ? squareSize : (key == 'u' ? -squareSize : 0));
    return newPos;
}

function pointInSnake(point) {
    for(var i = 0; i < snake.length; i++) {
        if(snake[i].x == point.x && snake[i].y == point.y)
            return true;
    }
    return false;
}

function pointsEquals(p1, p2) {
    return p1.x == p2.x && p1.y == p2.y;
}

function hasLost(newPos) {
    return (newPos.x == canvas.width || newPos.y == canvas.height || newPos.x < 0 || newPos.y < 0) || pointInSnake(newPos);
}

function setFieldSize(width, height) {
    canvas.width = field.width = width;
    canvas.height = field.height = height;
}

Object.prototype.clone = function() {  
    var newObj = (this instanceof Array) ? [] : {};  
    for (item in this) {  
        if (item == 'clone') continue;  
            if (this[item] && typeof this[item] == "object") {  
                newObj[item] = this[item].clone();  
        } else newObj[item] = this[item]  
    } return newObj;  
};

window.onkeydown = function(e) {
    var keys = { 37:'l', 38:'u', 39:'r', 40:'d' };
    var key = keys[e.keyCode.toString()];
    var newPos = calculateNewPos(key);

    if(!pointInSnake(newPos)) {
        way = key;
    }
}

window.onload = function() {
    start(100, "field");
}
    </script>
    <style type="text/css">
body {
    text-align:center;
    font-family:Verdana;
}
#field {
    border: 1px solid #9C9898;
}
#points {
    width:800px;
    font-size:20pt;
    font-weight:bold;
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
}
footer {
    font-size:8pt;
    margin: 10px 0 10px 0;
}
    </style>
</head>
<body>
<pre>   _____             __      
  / ___/____  ____ _/ /_____ 
  \__ \/ __ \/ __ `/ //_/ _ \
 ___/ / / / / /_/ / ,&lt; /  __/
/____/_/ /_/\__,_/_/|_|\___/ 
                             
</pre>

    <canvas id="field"></canvas><br>
    <div id="points">0</div>
    <footer>
    © DMW007<br>
    <a href="http://u-hacks.net">Visit U-Hacks.net!</a>
    </footer>
</body>
</html>

Ist natürlich erstmal die klassische Basisversion, heißt: Mit jedem Quadrat, das die Schlange frisst bekommt man 1 Punkt und die Schlange verlängert sich entsprechend um ein Quadrat, wenn man versucht sich selbst oder die Wand zu fressen bekommt das der Schlange gar nicht gut und man hat verloren.
Kann man natürlich noch stark erweitern, was ich auch noch machen werde (Level, Punktebringer, Schwierigkeits- und Geschwindigkeitsstufen bis hin zum Multiplayer-Mode).
Für die finale Version kann man auch noch ein bisschen aufräumen, werde ich jetzt aber nicht machen, da ich noch dran weitercode und sich die Version sowieso hauptsächlich an Entwickler und solche die es werden wollen richtet.

Von mir aus dürft ihr dran weiterarbeiten und das ganze auch veröffentlichen, Vorraussetzung ist ein Verweis auf mich und UH.
Und nein, 2 Zeilen Code dazuschreiben, FG/HG Farbe ändern und solche Spielereien zählt für mich nicht als weiterarbeiten!

Wen Webentwicklung nicht interessiert, der kann das ganze auch direkt in der Praxis testen und eine Runde zocken:

PLAY SNAKE

HINWEIS:
Das gesamte Snake-Feld basiert auf HTML5 Canvas. Der Internet Explorer kommt damit nicht klar (logisch, der braucht ja mal wieder seine Extrawurst...)
Daher funktioniert das Spiel NICHT mit dem Internet Explorer!
Wenn ihr zocken wollt sucht euch einen ordentlichen Browser. Soweit ich weiß unterstützen alle halbwegs verbreiteten Browser (Firefox, Chrome, Opera) HTML5 inklusive Canvas, vorrausgesetzt ihr nutzt eine halbwegs aktuelle Version.

Ich will hier in dem Thread auch keine Posts wie 'Ich hab 1337 Punkte' sehen, dafür wird es noch eine Highscore-Liste geben.

**Chrissy** · 05.11.2014, 19:23

Kurze Frage , Könnt ihr dafür in naher Zukunft einen eigenen Bereich Einfügen ? Ich finde das ganze Thema Html5 Spiele sehr Interessant .

Bleibt es bei der Version oder wird es auch Map Anbindung geben ? (Einen Bereich von den man von A nach B kommt ) Und ab einer bestimmten Punktezahl einen Map wechsel

Das ist jetzt eventuell etwas weit gedacht aber wird es Eventuell Touch-Support geben (

sorry aber Snake ist wohl Das mega Game )

Und es fehlt der Neustart Knopf wenn man verliert .

Oh gerade gesehen von 2012 ^^ Ist das dann überhaupt noch Aktuell ?

**Sky.NET** · 05.11.2014, 20:54

Wenn du Bock hast kannst du das gern selbst erweitern, Source ist da, und von mir aus kann man deine Version dann auch hier auf U-Labs erreichbar machen.
Ich vermute mal stark, dass Daniel keine Zeit haben wird das in nächster Zeit zu "DEM UBER-Snake" zu coden xD da gibt es weitaus wichtigeres auf unserer Agenda xD

U-Labs

Account-Boerse

U-IMG

Thema: [HTML5][OS] Snake + LIVE Demo

[HTML5][OS] Snake + LIVE Demo

The Following 10 Users Say Thank You to DMW007 For This Useful Post:

AW: [HTML5][OS] Snake + LIVE Demo

AW: [HTML5][OS] Snake + LIVE Demo

Ähnliche Themen

FIFA 13 Demo

Fifa 13 Demo stürzt ab

[MSN Fake] Mappe < Demo

Stichworte