`
xhload3d
  • 浏览: 208057 次
社区版块
存档分类
最新评论

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

阅读更多

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游戏在平板上的运行交互视频效果

传统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;
        }
        

 

2
2
分享到:
评论

相关推荐

    从0开发“Web3D贪吃蛇”游戏.zip

    开发Web3D贪吃蛇游戏是一次集Web前端技术、3D图形编程和游戏逻辑设计于一体的综合实践。通过这个项目,你不仅能提升JavaScript编程技能,还将深入理解WebGL和3D图形编程的基础知识,同时锻炼解决问题和优化性能的...

    贪吃蛇游戏源码

    贪吃蛇游戏是一款深受玩家喜爱的经典游戏,它在各种平台上都有不同的实现,包括手机、电脑以及如今的微信小游戏。在本源码中,游戏是使用LayaBox开发的,这是一款强大的2D/3D游戏开发框架,支持JavaScript和...

    实用html5与JS写的小游戏_源码

    在本压缩包中,你可以找到各种类型的小游戏,如经典的扫雷、贪吃蛇,也有基于物理引擎的碰撞检测游戏,甚至还有些基于Canvas或WebGL的3D游戏。这些游戏的源码展示了如何利用HTML5的Canvas API来绘制游戏场景,如何...

    three.js制作的贪吃蛇小游戏.zip

    虽然这个过程涉及到的细节较多,但只要掌握了three.js的基本用法和游戏逻辑,就可以轻松地创建出属于自己的3D贪吃蛇小游戏。这个项目不仅是一个有趣的实践,也是一个学习three.js的好例子,可以帮助开发者更好地理解...

    HTML小游戏.zip

    实现3D魔方游戏需要理解HTML5 Canvas或者WebGL进行图形渲染,以及复杂的三维旋转算法,确保用户可以流畅地操作虚拟魔方。 这些HTML小游戏不仅展示了HTML作为结构化语言的能力,还结合了JavaScript进行动态交互,...

    高仿鼠标贪吃蛇

    【标题】:“高仿鼠标贪吃蛇”是一个有趣的小游戏,它将...对于有兴趣深入学习的人,可以尝试修改代码,增加新的功能,比如添加多级难度、设置排行榜,甚至可以考虑使用WebGL实现3D效果,提升游戏的可玩性和趣味性。

    html-css-js 高手写的特效.zip

    贪吃蛇游戏的实现可以帮助开发者理解如何用JavaScript处理时间循环和事件监听。 "点击画线.html"可能是一个允许用户通过鼠标点击来画线的互动元素。这个效果通常会用到HTML5的Canvas元素,通过JavaScript控制用户的...

    基于HTML5的新增标签canvas,借canvas的特性来,进行绘制图形.zip

    描述中的"Canvas_snake_game-master"可能是一个基于`&lt;canvas&gt;`标签实现的贪吃蛇游戏项目。在这样的项目中,开发者通常会用`&lt;canvas&gt;`来绘制游戏场景,利用JavaScript处理游戏逻辑,比如蛇的移动、食物的生成、碰撞...

    2024跨年烟花代码html

    从压缩包文件名称来看,“使用python的turtle画樱花树,玫瑰,圣诞树,小猪佩奇,蛋糕,小黄人,贪吃蛇游戏61行代码 (9).zip”,虽然不直接相关,但可以看出这是一个Python编程相关的资源,其中的turtle模块常用于...

    jogo_snake_3D_CG

    标题中的“jogo_snake_3D_CG”暗示了一个基于CG(计算机图形学)技术的3D贪吃蛇游戏项目。在这个项目中,开发者可能使用了先进的图形技术和编程技巧来实现一个三维版本的传统游戏——贪吃蛇。游戏通常涉及交互性、...

    比较实用的js保

    13. 3D效果:利用WebGL或者Three.js库,JavaScript可以创建3D图形和动画,如旋转产品视图、3D地图等。 14. 游戏开发:JavaScript也可以用于开发简单的网页游戏,如贪吃蛇、俄罗斯方块等,结合canvas元素可以创建...

    Javascript 特效

    13. **游戏开发**:JavaScript也可以用于开发简单的HTML5游戏,如贪吃蛇、打地鼠等。 14. **WebGL图形**:通过Three.js等库,JavaScript可以实现3D图形渲染,创建丰富的视觉效果。 然而,从描述来看,这个压缩包中...

    javascript源码 样式 效果 500个

    6. **游戏开发**:JavaScript是许多网页游戏的基础,通过Canvas或WebGL可以创建2D和3D图形,实现各种小游戏,如扫雷、贪吃蛇、拼图等,提供娱乐性的同时也展示了JavaScript的强大能力。 7. **CSS操纵**:JavaScript...

    超级蛇

    在JavaScript中,这款游戏通常使用HTML5 Canvas或WebGL进行图形渲染,结合事件监听来处理用户输入,实现蛇的移动、碰撞检测以及食物生成等功能。 在JavaScript中,游戏的实现通常分为以下几个关键部分: 1. **初始...

    50-projects-in-js

    8. **Canvas与WebGL**:利用HTML5的Canvas和WebGL,可以创建2D和3D图形,如绘制图表、制作像素画、构建3D模型等。 9. **本地存储**:项目可能会涉及到浏览器的localStorage和sessionStorage,用于在用户关闭页面后...

    javascript-:学习 JavaScript 30

    这些项目通常包括一个简单的HTML5游戏,如井字游戏或贪吃蛇。通过这些,你可以掌握游戏逻辑、碰撞检测和用户输入处理。 **第二十一至第二十五天:动画** 学习如何用JavaScript制作平滑的CSS动画,例如滑动导航、...

Global site tag (gtag.js) - Google Analytics