WebGL implements HTML5 's 3D snake 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

functionInit () {w = n; m = +; d = w * M/2; food = null; DM = newHt.                        Datamodel (); G3d = newHt.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.gethitposition (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); } functionStart () {dm.clear (); snake = []; score = 0; direction = ' up '; isrunning = True; Shape = newHt. Shape (); Shape.setpoints (NewHt. 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 (); } functionCreateNode (x, y) {var node = newHt. 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); ReturnNode } functionGetrandom () {return parseint (Math.random () *m); } functionCreatefood () {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(Touchfoo D (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 's 3D snake game