java3d酷眩贪吃蛇下载,100行JS实现HTML5的3D贪吃蛇游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型,多次想尝试提交个小游戏但总无法写出让自己满意还能控制在这么小的字节范围。
自己写不出来,站在巨人肩膀总是有机会吧,折腾了一番站在Hightopo的肩膀上搞了个3D贪吃蛇游戏,算了算JS代码还只有90来行,终于满足了自己的小小心愿写完这篇可以满意去睡觉了。
以下先上一段最终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,体验下传说中hightopo的HT for Web的快速开发到底有多快,同时给整天搞企业应用的自己换换脑子思考些新元素。
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
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
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;
}
java3d酷眩贪吃蛇下载,100行JS实现HTML5的3D贪吃蛇游戏相关推荐
- python100行代码程序-100行python代码,轻松完成贪吃蛇小游戏
大家小时候都玩过贪吃蛇吧?小编小时候可喜欢拿爸妈的手机玩了,厉害着呢!今天,小编就来用100行代码实现一个简易版的贪吃蛇.在网上,贪吃蛇教程蛮多的,但要安装蛮多库的,而且也不够清晰,今天的代码比较短, ...
- 100行JS代码实现❤坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript )
坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript ) HTML5坦克大战网页小游戏,完美还原小霸王学习机效果,以坦克战斗及保卫基地为主题,属于策略型类游戏. ...
- python必背100源代码下载-100行Python代码实现一款高精度免费OCR工具
近期Github开源了一款基于Python开发.名为Textshot的截图工具,刚开源不到半个月已经500+Star. 这两天抽空看了一下Textshot的源码,的确是一个值得介绍的项目. 相对于大多 ...
- 原生JS:100行js代码带你实现【像素鸟】小游戏(完整代码+素材图片)
系列文章目录 JS:经典小游戏:像素鸟 JS:经典小游戏:贪吃蛇 JS:经典小游戏:扫雷 目录 系列文章目录 像素鸟 1.游戏介绍 2.代码分析 3.代码实现 3.1 随机生成水管 3.2 当水管超过 ...
- html贪吃蛇自动走,分享一个用html5实现的贪吃蛇特效代码
本篇小编为大家分享一个用html5实现的简单贪吃蛇特效代码,喜欢的小伙伴们可以看一下 Snake //内置大量BUG,I'm sorry. var lev=100; //定时器间隔时间 var num ...
- 100行Python代码,做一个打地鼠小游戏
游戏画面 首先先进行游戏画面排版, class TopWindow(QWidget):def __init__(self, parent=None):super().__init__(parent)s ...
- 【博客大赛】100行js代码实现网站在线用户数量统计 nodejs + socket.io方案
需求提出 公司的在线培训平台,需要增加一个新功能:实时统计当前在线的用户数量并在终端界面上显示,需要的时候可以查询当前在线的用户的明细. 有3种技术方案可以选用: 1)改动后台代码,在用户登录和退出时 ...
- python一般做什么游戏好玩_只需要9步100行Python代码就可以实现一个简单又好玩的弹球游戏...
今天给大家分享一个有趣又好玩的弹球的游戏,一来可以把类的知识融会一下,二来加深对Python的兴趣.你会发现哎呀Python写小游戏还是蛮方便的,蛮有意思的~~ 需要本文源码:私信回复[源码]即可获取 ...
- python简单好玩的代码_只需要9步100行Python代码就可以实现一个简单又好玩的弹球游戏...
今天给大家分享一个有趣又好玩的弹球的游戏,一来可以把类的知识融会一下,二来加深对Python的兴趣.你会发现哎呀Python写小游戏还是蛮方便的,蛮有意思的~~ 需要本文源码:私信回复[源码]即可获取 ...
最新文章
- 设置VSCode Git签出分支快捷键Alt+G
- 操作系统——存储管理:分区、分页、分段、请求式分页和虚拟内存
- Stanford机器学习笔记-6. 学习模型的评估和选择
- 还觉得linux命令难吗,看这篇2w多字的linux命令详解,通俗易懂
- 计算机原理与应用简称,基础知识-计算机原理与应用.ppt
- 【JEECG技术文档】JEECG 组织机构导入V3.7
- 什么是Ultrabook
- 【课本】【No.4】数字特征 离散/连续均值/方差 随机向量 协方差 相关系数 矩 偏度 峰度 多维均值/协方差 运算性质 条件期望 随机个随机向量的和 正态中的条件期望是线性函数
- 了解RxJava以及如何在Android应用中使用它
- nacos实现配置中心,对比config
- 大数据锁定消费者没用,核心是锁住用户的“脑袋”!
- Java数据结构-约瑟夫问题(Joseph环)
- java实现聊天室(websocket)
- java8-Stream集合操作学习
- 数据库查询时报IllegalArgumentException异常是什么原因?
- Bazel 与 gtest:构建一个最简单的测试驱动开发环境
- HIT-哈工大数据结构-作业4(C++)
- 极光推送在APICloud平台的使用教程
- 给textView设置文字渐变色
- Align before Fuse: Vision and Language Representation Learning with Momentum Distillation
热门文章
- Polynomial operation with C++
- 【JY】浅谈混凝土损伤模型及Abaqus中CDP的应用
- audio unity 加速_unity中如何实现调整视频播放速度的功能?
- 解决Edge浏览器主页被篡改问题,或许可以帮你彻底解决
- UEFI启动模式下安装Ubuntu 16.04教程
- 基于InceptionV3深度学习实现岩石图像智能识别与分类
- 前端视觉优化(一)CSS边框阴影、四周阴影讲解
- 《最优化计算方法》这门课中所有的方法在回归分析的比较与分析
- 从零开始---控制台用c写俄罗斯方块游戏(1)
- STC15W单片机蓝牙APP语音识别智能家居系统风扇灯空调窗帘温度湿度入侵检测