WebGL implements HTML5 Snake 3D game

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.