Line 3 JS implements HTML5 3D snake games

Js1k.com collects small javascript examples of less than 1 K, including many cool games and special effects. This year, new patterns have been added to the Rules, and the WebGL type has been added to the traditional classic type, and the type of ++ that can be increased to 2 K. I tried to submit a small game many times, but I couldn't write it to make myself satisfied and can still control it in such a small byte range.

I can't write it myself. I always have a chance to stand on the shoulders of giants. I think of threejs mentioned in HTML5-based telecommunications network management 3D data center monitoring application, several WebGL-based 3D engines of babylonjs and Hightopo suddenly wanted to challenge themselves to implement a 3D Game of 100 lines of JS, and finally used Hightopo to create a 3D Snake game, I have only 90 lines of JS code, and I have finally satisfied my little wish to finish writing this article to go to bed.

The following describes the interactive video effect of the last 3D game on the tablet:

Traditional 2D snake games generally control the forward direction of snakes through the keyboard. At the beginning, I wanted to locate Touch interactions that can run on a tablet, so I did not consider the keyboard operation interaction mode, it is controlled completely by clicking, through HT g3d. using the getHitPosition (e) function, I can get the position of the plane where the mouse clicks are located, so that I can compare it with the position of the Snake Head to determine a new forward direction, if the click position is beyond the running matrix of the greedy snake, I will not process it. At this time, the standard orbit rotation operation for HT will be implemented through ht. default. isDoubleClick (e) listens to double-click events to restart the game. There is not much design to consider in terms of portability. You only need to consider the touch situation when adding a click. view. addEventListener (ht. Default. isTouchable? 'Touchstart': 'mouseunder ',

The source code of all JavaScript codes in the 90 s is as follows. Do not spray me on the game experts. Many people may write more refined code, but I just want to play 3D, HTML5, and WebGL through this, this includes changing your mind to think about new elements for enterprise applications all day long.

       = 40; m = 20; d = w * m / 2; food = = = '#29B098'== 'main''resize',  (e) {  g3d.invalidate(); }, 'none'? 'touchstart' : 'mousedown',  p =(Math.abs(p[0]) < d && Math.abs(p[2]) <(direction === 'up' || direction === 'down'= p[0] > snake[0].p3()[0] ? 'right' : 'left' (direction === 'left' || direction === 'right'= p[2] > snake[0].p3()[2] ? 'down' : 'up' (){ (isRunning){ isRunning = next(); } }, 200= []; score = 0; direction = 'up'; isRunning = = ---d, y: --4/2);            shape.s({'all.color': 'rgba(20, 120, 120, 0.5)', 'all.transparent': , 'all.reverse.cull': ( i=0; i<m/2; i++) { snake.push(createNode(m/2 + i, m/2)); }             node = *0.9, w*0.9, w*0.9-w*m/2+w*x+w/2, w/2, -w*m/2+w*y+w/2); parseInt(Math.random() * x = getRandom(), y =(touchFood(x, y) || touchSnake(x, y)){ x = getRandom(); y =='shape3d': 'sphere',  'shape3d.color': 'red'( i=0; i<snake.length; i++(snake[i].a('x') === x && snake[i].a('y') === y){    food && food.a('x') === x && food.a('y') === node = snake[0], x = node.a('x'), y = node.a('y'(direction === 'up') y--(direction === 'down') y++(direction === 'left') x--(direction === 'right') x++(x < 0 || x >= m || y < 0 || y >= m || touchSnake(x, y)){  ++0, 00, 0