如何使用javascript制作一个网页端3D贪吃蛇游戏(附源码及链接)
先来看游戏的最终效果:
3D网页版贪吃蛇游戏
下面来具体讲一下如何实现。
该游戏使用Hightopo的SDK制作,总共100多行代码,没有WebGL基础的同学们也可很快掌握。
场景初始化
首先,我们对页面进行初始化,包括初始化3D场景,设置地面网格,以及开启事件监听等。主要代码及注释如下:
w = 40; // 网格间距m = 20; // 网格行列数d = w * m / 2;food = null; dm = new ht.DataModel(); g3d = new ht.graph3d.Graph3dView(dm); // 初始化一个3d场景 // 配置网格 g3d.setGridVisible(true);g3d.setGridColor('#29B098');g3d.setGridSize(m);g3d.setGridGap(w); // 将3D场景添加到body下面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); // 获取当前鼠标点击点在3D场景中的位置// 根据点击点x,z轴坐标,计算贪吃蛇前进方向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); // 每间隔200ms贪吃蛇往前走一步
创建食物
贪吃蛇每次吃完一个食物,其身体就会增长一段。此时需要创建新的食物并随机放到一个新的位置。创建食物时,其位置不能与上一个位置重合,也不能与当前贪吃蛇身体重复。
/*** 创建食物,并摆放到随机位置。* 食物不能放到贪吃蛇身上,也不能放到上一个食物的位置**/
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'});
}
/*** x, y是否与snake身体重叠** @param {*} x* @param {*} y* @return {*} */
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;
}
/*** x, y是否与食物身体重叠** @param {*} x* @param {*} y* @return {*} */
function touchFood(x, y){return food && food.a('x') === x && food.a('y') === y;
}
function getRandom(){return parseInt(Math.random() * m);
}
/*** 创建一个节点,调整其位置和大小** @param {*} x* @param {*} y* @return {*} */
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 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();
}
处理贪吃蛇行走逻辑
有了贪吃蛇和食物后,下一步就是处理贪吃蛇行走逻辑。包括:
* 1. 检测到达边界或接触自己身体,则游戏结束
* 2. 如果吃到食物,则身体增加一段
* 3. 否则,继续往前走
/*** 根据direction计算下一个位置。同时:* 1. 检测到达边界或接触自己身体,则游戏结束* 2. 如果吃到食物,则身体增加一段* 3. 继续往前走** @return {*} */
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;
}
到这里,整个贪吃蛇游戏就完成了。双击场景即可启动游戏。点击场景可改变贪吃蛇运动方向。
对于懒得动代码的同学们,也可以点击下面链接直接体验该游戏:
3D网页版贪吃蛇游戏
网页打开后,源码可以直接通过F12获取
如何使用javascript制作一个网页端3D贪吃蛇游戏(附源码及链接)相关推荐
- 涂格子游戏html,网页版方格贪吃蛇游戏html源码分享
html源码,要做网页的话复制源码新建一个文本文档粘贴进去,然后文本文档改名snake.html即可. 体验地址:点击进入 玩法:用键盘的上下左右控制. 贪吃蛇-陌涛博客www.imotao.com ...
- 用c语言,制作一个心形彩色告白图案(附源码)
今天我们来一个好玩的,用c语言,制作一个心形彩色告白图案. 送给c语言初学者 代码: #include<stdio.h> #include<math.h> #include&l ...
- html仿微信滑动删除,使用Vue实现移动端左滑删除效果附源码
左滑删除在移动端是很常见的一种操作,常见于删除购物车中的商品,删除收藏夹中文章等等场景.我们只需要手指按住要删除的对象,然后轻轻向左滑动,便会出现删除按钮,然后点击删除按钮即可删除对象. 点击下载源码 ...
- [原创]jQuery推箱子小游戏(100关且可扩展可选关),休闲,对战,娱乐,小游戏,下载即用,兼容iPad移动端,代码注释全(附源码)
Sokoban 介绍 [原创]jQuery推箱子小游戏(100关且可扩展可选关),休闲,对战,娱乐,小游戏,下载即用,兼容iPad移动端,代码注释全(附源码) 游戏说明 经典的推箱子是一个来自日本的古 ...
- java3d酷眩贪吃蛇下载,100行JS实现HTML5的3D贪吃蛇游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...
- 6个绚丽时尚的Web前端3D效果展示(附源码)
作为一个前沿的 Web 开发者,对于 HTML5 和 现在流行的3D技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大 ...
- 贪吃蛇javascript代码_源于Jquery开发贪吃蛇游戏——简单思路分析总结
前言 刚开始是学习前端那会,在熟悉 HTML+CSS+JS 后,我开始尝试去做贪吃蛇游戏.没想到在一顿瞎搞后还真搞出来了一个简陋版的贪吃蛇.哈哈!因为这是我刚开始学习前端的时候做的,所以代码有点简陋, ...
- 诺基亚3d贪吃蛇java版_诺基亚3D贪吃蛇游戏下载-游戏大玩家
<诺基亚3D贪吃蛇>是一款非常魔性有趣的贪吃蛇小游戏,游戏把传统的贪吃蛇界面进行了改进,创造出一个全新的3D炫彩界面,看着爱吃豆豆的贪图蛇行走在立体空间,摇晃着它圆滚滚的身体,超级搞笑有意 ...
- c语言跳一跳辅助源码,.NET 开发一个微信跳一跳辅助程序(附源码)
原标题:.NET 开发一个微信跳一跳辅助程序(附源码) 来源:中国.NET研究协会 cnblogs.com/dotnet-org-cn/p/8149693.html 前言 微信更新了,出现了一个小游戏 ...
最新文章
- 设备树的具体使用方法
- Erdaicms旅游网站系统微信和手机端分销系统正式上线发布啦
- -bash: ./demoapp: 无法执行二进制文件 问题解决
- 计算机操作应用实训,计算机操作实训教案计算机操作实训教案.doc
- JAX-WS Web Service
- JS字符串转换为JSON的四种方法笔记
- myeclipse 10.7 for linux激活
- 我从GitHub 企业版找到严重的 RCE 漏洞,意外得$2万奖金 (GitHub $6.1万系列之一)...
- 阿里云ECS服务器自定义端口无法访问问题记录
- 从把三千行代码重构成15行代码谈起—好牛X的哟!!
- PHP处理海量样本相似度聚类算法
- 08.存储Cinder→5.场景学习→01.LVM Volume
- 阵列卡直通模式和raid模式_Dell R730服务器通过RAID在线扩容方法详解
- HCNP——静态路由
- SQL Server各版本
- openfire 群聊 java_Openfire即时通讯群聊、单聊、登录、注销的使用方法(Java+Android)...
- 项目管理之敏捷开发总结
- 用于 Power 体系结构的汇编语言
- 简易封装 element form表单
- OpenCV Mat转dlib array2d