js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型,多次想尝试提交个小游戏但总无法写出让自己满意还能控制在这么小的字节范围。
自己写不出来,站在巨人肩膀总是有机会吧,想起《基于HTML5的电信网管3D机房监控应用》这篇提到的threejs,babylonjs和Hightopo的几种基于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; }
相关推荐
HTML5+WebGL实现可拖拽的3D透明杯子效果源码.zip
这是一款基于WebGL实现3D图片特效。该特效利用WebGL和一张特定的黑白图片,制作出在鼠标移动时的3D图片特效。
HTML5+CSS+WEBGL网页3D游戏开发,经典教程
利用HTML5CSS3和WebGL开发HTML5游戏.zip
用 WebGL 打造 HTML5 游戏引擎平台.pdf 用 WebGL 打造 HTML5 游戏引擎平台.pdf 用 WebGL 打造 HTML5 游戏引擎平台.pdf
[奥莱理] HTML5 WebGL 3D 应用程序编程 英文版 [奥莱理] Programming 3D Applications with HTML5 and WebGL E Book ☆ 图书概要:☆ In two parts Foundations and Application Development Techniques author...
基于 WebGL 实现的 3D 曲面图表组件
Create engaging 3D applications for the Web with HTML5 and the emerging web graphics standard, WebGL. With this book, you'll learn hands-on how to take your website's production value to a new level ...
HTML5+WebGL实现的3D水母体Medusa变形动画效果源码.zip
HTML5+WebGL实现带多层视差响应的游戏场景3D视图效果源码.zip
HTML5 WebGL实现不同质感的3D球体和方块滚落动画效果源码.zip
HTML5 javascript调用webgl实现 下雪闪电打雷下雪天气效果天气现象 太逼真了,这其实就是游戏开发了.zip
使用webGL实现的全景图demo 介绍 https://public.blog.csdn.net/article/details/129471054
HTML5+WebGL实现带3D视觉效果的国际象棋棋盘棋子和光照动画源码.zip
课程分享——地图Web3D可视化-WebGL、Three.js,附源码 课程概述 - 本课程讲解如何在web上实现地图3D可视化 - 学习本课程有前端基础即可,如果了解three.js更好 适用人群 有前端基础,想基于Web实现地图数据的3D...
WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统...
beginning WebGL for HTML5 是一本学习和开发webGL的优秀指导书 里面提供了大量实例 并且在其书中提供了许多学习webGL的网站以及原书配套的实例网站
Webgl实现的天气效果(下雨和下雪)