文档章节

WebGL实现HTML5的3D贪吃蛇游戏

xhload3d
 xhload3d
发布于 2015/11/25 00:39
字数 1096
阅读 683
收藏 7

js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型,多次想尝试提交个小游戏但总无法写出让自己满意还能控制在这么小的字节范围。

自己写不出来,站在巨人肩膀总是有机会吧,想起《基于HTML5的电信网管3D机房监控应用》这篇提到的threejsbabylonjsHightopo的几种基于WebGL的3D引擎,突然想挑战下自己实现个100行JS的3D小游戏,折腾了一番最终采用Hightopo搞了个3D贪吃蛇游戏,算了算JS代码还只有90来行,终于满足了自己的小小心愿写完这篇可以满意去睡觉了。

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

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

以下先上一段最终3D游戏在平板上的运行交互视频效果

http://v.youku.com/v_show/id_XNjgxMzIxOTcy.html

传统2D的贪吃蛇游戏一般通过方向键盘控制蛇的前进方向,我一开始就想定位可运行在平板上的Touch交互,所以不考虑键盘的操作交互方式,采用完全用点击的方式来控制,通过HT的g3d.getHitPosition(e)函数我能得到鼠标点击所在的平面位置,这样与蛇头的位置做比较就能判断出新的前进方向,如果点击位置超出了贪吃蛇的运行矩阵范围我就不做处理,这时候留给HT的标准orbit旋转操作方式,通过ht.Default.isDoubleClick(e)监听双击事件重启游戏。所谓的可移动化方面也没太多需要考虑的设计,仅在添加点击时需要考虑touch的情况 view.addEventListener(ht.Default.isTouchable ? 'touchstart' : 'mousedown', 

90来行所有JS源代码如下,各位游戏高手不要喷我,肯定很多人可以写得更精炼,但我只想通过这个玩一玩3D,HTML5和WebGL,包括给整天搞企业应用的自己换换脑子思考些新元素。

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

       function init() {                
            w = 40; m = 20; 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.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);
        }                
        function start(){
            dm.clear(); snake = []; score = 0; direction = 'up'; isRunning = true;
            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(20, 120, 120, 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;
        }

 


© 著作权归作者所有

共有 人打赏支持
xhload3d
粉丝 181
博文 156
码字总数 318723
作品 0
崇明
私信 提问
100行JS实现HTML5的3D贪吃蛇游戏

js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型,多次想尝试提交...

xhload3d
2014/03/06
0
7
[HTML5] 关于HTML5(WebGL)的那点事

2013年新春伊始,HTML5的曝光率急速增加,可以预见的是今年HTML5必将随着移动互联网的扩张而大举入侵!作为互联网前沿工作者的我们怎能视而不见!赶紧来认识一下HTML5家族中的主要新成员。 ...

长平狐
2013/07/01
2.8K
0
基于Web的3D绘图标准 —— WebGL发布1.0版本

Khronos 组织在游戏开发者大会发布了 WebGL 规范 1.0 正式版本,该版本带来了全新的 OpenGL ES 2.0,使得浏览器可通过 HTML5 和 JavaScript 进行识别,这表明 WebGL 将逐渐进入我们的视野。 ...

红薯
2011/03/04
1K
6
HTML5 JavaScript3D游戏引擎和框架

由于很多人都在用JavaScript、HTML5和WebGL技术创建基于浏览器的3D游戏,所有JavaScript 3D游戏引擎是一个人们主题。基于浏览器的游戏最棒的地方是平台独立,它们能在iOS、Android、Windows...

9秒学院
2015/11/21
416
0
5 个很炫的 HTML5 游戏

下面是我们为你准备了5款基于 html5/WebGL 的游戏以及游戏演示: 1. Coppercube Backyard 本演示展示现场与许多纹理(> 80),人物动画和摄像机飞行。 2. 3D Social game (WebGL) 这是一个W...

红薯
2011/12/17
6.6K
6

没有更多内容

加载失败,请刷新页面

加载更多

TiDB 3.0 Beta Release Notes

2019 年 1 月 19 日,TiDB 发布 3.0 Beta 版,对应 master branch 的 TiDB-Ansible。相比 2.1 版本,该版本对系统稳定性、优化器、统计信息以及执行引擎做了很多改进。 TiDB 新特性 支持 Vi...

TiDB
22分钟前
2
0
从拼多多优惠券事件看到的一些反思

本文由云+社区发表 作者:颜国平 摘要:最近几年,电商行业飞速发展,各种创业公司犹如雨后春笋大量涌现,商家通过各种活动形式的补贴来获取用户、培养用户的消费习惯,即将到来的“ 购物狂欢...

腾讯云加社区
22分钟前
4
0
记录一次BUG

1: 请求注册页面时生成一个UUID, 并且将UUID隐藏在页面中并且添加到session中去。 2: 发送短信时获取手机号和UUID,将两者发送至服务器 3: 先判断UUID和session中UUID是否一致。 不一致就...

专业写BUG的程序员
27分钟前
1
0
阿里云漏洞提示:phpMyAdmin <=4.8.1 checkPageValidity函数缺陷可导致GETSHELL

如题: phpMyAdmin <=4.8.1 后台checkPageValidity函数缺陷可导致GETSHELL 即:checkPageValidity函数对外部输入过滤不严,可导致本地包含任意文件。进一步地攻击者可通过注入代码到特定文件...

408582708
27分钟前
1
0
PyTorch可视化理解卷积神经网络

摘要: 神经网络工具像一个黑匣子,无法知道它的中间是如何处理的。本文使用图片加代码的形式讲解CNN网络,并对每层的输出进行可视化,便于初学者理解,可以动手实践下哦! 如今,机器已经能...

阿里云官方博客
40分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部