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

100行JS实现HTML5的3D贪吃蛇游戏

阅读更多

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

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


 以下先上一段最终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,包括给整天搞企业应用的自己换换脑子思考些新元素。

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

 

  • 大小: 697.4 KB
6
1
分享到:
评论
1 楼 sanshizi 2014-03-06  
不错, 学习一下

相关推荐

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

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

    贪吃蛇游戏各种源码集合

    4. **JavaScript**:JavaScript通常用于网页开发,可以结合HTML5的Canvas API来创建贪吃蛇游戏。JavaScript源码可以帮助你学习如何在浏览器环境中实现动态图形和用户交互。 5. **C#**:C#与Unity引擎配合良好,常...

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

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

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

    这些游戏的源码展示了如何利用HTML5的Canvas API来绘制游戏场景,如何使用JavaScript处理用户输入、控制游戏逻辑,以及如何利用事件监听和定时器实现游戏循环。 Canvas是HTML5的一个重要元素,它允许开发者通过...

    贪吃蛇游戏源码

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

    Html5小游戏源代码H5小游戏源码JS开发网页小游戏开源源码大合集.zip

    维京战争,一个都不能死,捕鱼达人,植物大战僵尸,3D魔方,青蛙吃苍蝇,蜘蛛纸牌,贪吃蛇,水果削除,2048中文版,大鱼吃小鱼,飞机大战,跑酷小游戏,贪吃蛇2.0,射击鸭子,激流勇进,天天消消乐,别踩白块,线条...

    HTML5 canvas简单贪吃蛇小游戏特效代码

    - 贪吃蛇游戏的基本逻辑包括蛇的移动、食物生成、碰撞检测和分数计算。 - 蛇由多个身体部分组成,每个部分都有自己的坐标,蛇的移动通过改变头部坐标来实现,其余部分跟随头部移动。 - 食物随机生成在画布内,当...

    使用HTML和JavaScript做小游戏的代码

    在实现这些小游戏时,可能使用了一些JavaScript库或框架,如jQuery简化DOM操作,或者Three.js进行3D图形渲染。不过,基础的HTML和JavaScript知识是开发这些游戏的基石。 此外,了解一些基本的算法和数据结构也是...

    高仿鼠标贪吃蛇

    【压缩包子文件的文件名称列表】:只有一项“小球模板.html”,这个文件可能是游戏的主入口,使用HTML构建了游戏的基本框架,并通过内联JavaScript或者引用外部JS文件来实现游戏逻辑。"小球"可能指的是贪吃蛇的身体...

    HTML小游戏.zip

    在这个压缩包中,我们可以看到两个版本的贪吃蛇游戏:"贪吃蛇.html"和"28行贪吃蛇.html"。贪吃蛇的实现通常涉及到HTML布局基础、JavaScript事件监听和处理、以及DOM操作。28行贪吃蛇可能是一个简化版,挑战在有限的...

    snakegame仿贪吃蛇大作战游戏AI

    【压缩包子文件的文件名称列表】"lanbomo-laya-snakes-82c5001"可能代表项目源码的版本控制标识,其中“lanbomo”可能是开发者或团队的名称,“laya-snakes”则指明项目与layabox和贪吃蛇游戏相关。"82c5001"可能是...

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

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

    比较实用的js保

    14. 游戏开发:JavaScript也可以用于开发简单的网页游戏,如贪吃蛇、俄罗斯方块等,结合canvas元素可以创建丰富的图形界面。 15. 数据可视化:借助D3.js等库,可以将复杂的数据转化为易于理解的图表,如柱状图、...

    2024跨年烟花代码html

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

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

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

    所有常见的javascript特效

    11. **游戏类**:JavaScript结合HTML5的Canvas可以创建各种简单游戏,如扫雷、贪吃蛇等。游戏逻辑、碰撞检测、得分计算等都可以通过JavaScript实现。 12. **流行特效类**:随着技术的发展,如粒子特效、3D转场、SVG...

    JS常用特效(CHM版)

    13. **网页游戏**:JavaScript还可以用于开发简单的网页游戏,如扫雷、贪吃蛇等,提供娱乐功能。 这个"JS常用特效(CHM版)"资源库无疑是开发者们学习和实践JavaScript特效的宝贵工具,无论你是初学者还是经验丰富...

    Javascript 特效

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

    非常酷的JavaScript效果

    11. 游戏开发:JavaScript也可以用来开发简单的网页游戏,如扫雷、贪吃蛇等,增加娱乐性。 12. 社交媒体集成:通过JavaScript接口,可以将社交媒体分享、评论等功能无缝接入网页。 在压缩包“JS效果”中,可能包含...

Global site tag (gtag.js) - Google Analytics