WebGL implements HTML5 Snake 3D game

Js1k.com collected a small example of less than 1k JavaScript, there are a lot of cool games and special effects, this year the rules added a twist, the traditional classic type based on the addition of the WebGL type, and allowed to increase to 2K + + type, Many times want to try to submit a small game, but always can not write to let their satisfaction and control in such a small byte range.

Can't write, stand on the shoulders of giants always have a chance, think of "based on the HTML5 Telecom network management 3D computer room monitoring Application" mentioned in Threejs,babylonjs and Hightopo several WebGL-based 3D engine, Suddenly want to challenge yourself to achieve a 100 line JS 3D small game, toss a final use hightopo made a 3D snake game, calculate JS Code also only 90来 line, finally satisfied their little wish to write this article can be satisfied to go to bed.

Http://www.hightopo.com/demo/snake_20151106/GreedySnake.html

Http://www.hightopo.com/demo/snake_20151106/GreedySnake.html

The following is a final 3D game on the tablet running interactive video effect:

Traditional 2D snake game generally through the direction of the keyboard to control the direction of the snake, I initially wanted to locate the touch can run on the tablet, so do not consider the operation of the keyboard interaction, the use of a full click to control, through the G3d.gethitposition (e) HT function I can get the mouse click on the plane position, so with the position of the snake head can be judged a new direction, if the click position beyond the snake's running matrix range I do not do processing, this time left to HT standard Orbit rotary operation mode, through HT. Default.isdoubleclick (e) Monitor double-click event Restart game. There is not much design to consider in the so-called mobility aspect, only the case of touch when adding a click View.addeventlistener (HT. Default.istouchable? ' Touchstart ': ' MouseDown ',

90来 line all JS source code as follows, you game Master do not spray me, certainly a lot of people can write more refined, but I just want to play a play with 3D,HTML5 and WebGL, including for the whole day to engage in enterprise application of their own brain to think about some new elements.

Http://www.hightopo.com/demo/snake_20151106/GreedySnake.html

       function init () {w = n; m = +; d = w * M/2; food = null; DM = new HT.                        Datamodel ();                            G3d = new Ht.graph3d.Graph3dView (DM);            G3d.setgridvisible (TRUE);            G3d.setgridcolor (' #29B098 ');            G3d.setgridsize (m);                        G3d.setgridgap (w);                        view = G3d.getview ();            View.classname = ' main ';                Document.body.appendChild (view);                                                                                                        Window.addeventlistener (' Resize ', function (e) {g3d.invalidate ();}, False);            G3d.sm (). Setselectionmode (' none '); View.addeventlistener (HT. Default.istouchable? ' Touchstart ': ' MouseDown ', function (e) {if (isrunning) {var p = G3d.geth                    Itposition (e); if (Math.Abs (p[0) < D && Math.Abs (p[2]) < D){if (direction = = = "Up" | | direction = = = ' down ') {direction = p[0] > SNAKE[0].P3 () [0]?                                               ' Right ': ' Left '; } else if (direction = = = ' Left ' | | direction = = ' right ') {direction = p[ 2] > Snake[0].p3 () [2]?                                                                     ' Down ': ' Up '; }}}else if (HT.                    Default.isdoubleclick (e)) {start ();                                    }}, False);                        Start ();        SetInterval (function () {if (isrunning) {isrunning = next ();}}, 200); } function Start () {dm.clear (); snake = []; score = 0; direction = ' up '; isrunning = Tru            E Shape = new HT.            Shape (); Shape.setpoints (New HT. List ([{x:-D, Y:d},               {x:d, y:d}, {x:d, Y:-D}, {x:-D, y:-D}, {x:-D, y:d}            ]));            Shape.setthickness (4);            Shape.settall (w);            Shape.setelevation (W/2);            SHAPE.S ({' All.color ': ' Rgba (+, +, +, 0.5) ', ' all.transparent ': true, ' All.reverse.cull ': true});                                     Dm.add (Shape);                        for (var i=0; i<m/2; i++) {Snake.push (CreateNode (M/2 + i, M/2));}                                Createfood (); } function CreateNode (x, y) {var node = new ht.            Node ();            Node.a ({x:x, y:y});            NODE.S3 (w*0.9, w*0.9, w*0.9);            NODE.P3 (-W*M/2+W*X+W/2, W/2,-W*M/2+W*Y+W/2);            Dm.add (node);        return node;        } function Getrandom () {return parseint (Math.random () * m); } function Createfood () {var x = Getrandom (), y = Getrandom ();           while (Touchfood (x, y) | | touchsnake (x, y)) {x = Getrandom (); y = Getrandom ();}                        if (food) dm.remove (food);             Food = CreateNode (x, y);        Food.s ({' Shape3d ': ' Sphere ', ' shape3d.color ': ' Red '});                                } function Touchsnake (x, y) {for (var i=0; i<snake.length; i++) {            if (snake[i].a (' x ') = = = x && snake[i].a (' y ') = = = y) {return true;}        } return false; } function Touchfood (x, y) {return food && food.a (' x ') = = = x && food.a (' y ') = = =        Y            } function Next () {var node = snake[0], x = Node.a (' x '), y = node.a (' y ');            if (Direction = = = ' up ') y--;                   if (Direction = = = ' down ') y++;            if (Direction = = = ' left ') x--;            if (Direction = = = ' right ') x + +;     if (x < 0 | | x >= m | | y < 0 | | y >= m | | touchsnake (x, y)) {return false;}                               if (Touchfood (x, y)) {score++;                                Snake.splice (0, 0, createnode (x, y));            Createfood ();                }else{snake.splice (0, 0, createnode (x, y));                            Dm.remove (Snake.pop ());        } return true;         }

WebGL implements HTML5 Snake 3D game