JavaScript强化教程 - 六步实现贪食蛇
1.首先创建div 并且给div加样式
<div id="pannel" style="width: 500px;height: 500px;z-index: 1;opacity: 0.5"></div>
给 <style...> 地图（div和表格）、所有的块（蛇头，食物身体加样式）
2.创建地图
document.write("<table cellspacing='0px'>");
for (var i = 0; i < 10; i++) {... }
document.write("</table>");
3.调用createNode函数创建块
var pannel = document.getElementById("pannel");
function createNode(type) {... } //[i][b]根据type创建块（0头部 1食物 2身体）
[/b][/i] //申请一些变量以便以后调用
var allNode = new Array();//存所有吃到的身体
var fooldNode = null;//指向食物a
var headNode = null;//指向头部b
headNode = createNode(0);//创建头部A
headNode.value = 39;//给头部一个方向 37左 38上 39右 40下
fooldNode = createNode(1);//创建食物B
4.定时器
function moveNode() {...};
setInterval(moveNode, 500);启动定时器
5.
document.onkeydown = function () {通过
event.keyCode改变headNode.value
实现用户按键改变蛇头自动移动的方向}
6.核心逻辑
在第4中的 function moveNode() {...}; 定时执行此函数
实现了：1.移动所有身体
2.移动蛇头
3.创建新块并且 新块在蛇尾产生，方向与蛇尾相同
------------------------------------------------------------------------------------------------
- 实现源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
} td {
width: 48px;
height: 48px;
border: solid 1px darkorange;
} div {
position: absolute;
width: 50px;
height: 50px;
} </style>
</head>
<body> <div id="pannel" style="width: 500px;height: 500px;z-index: 1;opacity: 0.5"></div> <script>
document.write("<table cellspacing='0px'>");
for (var i = 0; i < 10; i++) {
document.write("<tr>");
for (var j = 0; j < 10; j++) {
document.write("<td></td>");
}
document.write("</tr>");
}
document.write("</table>");
//创建头部
var pannel = document.getElementById("pannel");
function createNode(type) {
var div = document.createElement("div");
pannel.appendChild(div); div.style.left = parseInt(Math.random() * 10) * 50 + "px";
div.style.top = parseInt(Math.random() * 10) * 50 + "px"; switch (type) {
case 0:
div.style.background = "red";//头
break;
case 1:
div.style.background = "blue";//食物
break;
case 2:
div.style.background = "yellow";//身体
break;
}
return div;
}
var allNode = new Array();
var fooldNode = null;
var headNode = null;
headNode = createNode(0);
headNode.value = 39;
fooldNode = createNode(1);
function moveNode() { //移动所有身体
if (allNode.length > 0) {
for (var n = allNode.length - 1; n >= 0; n--) {
switch (parseInt(allNode[n].value)) {
case 37:
allNode[n].style.left = parseInt(allNode[n].style.left) - 50 + "px";
break;
case 38:
allNode[n].style.top = parseInt(allNode[n].style.top) - 50 + "px";
break;
case 39:
allNode[n].style.left = parseInt(allNode[n].style.left) + 50 + "px";
break;
case 40:
allNode[n].style.top = parseInt(allNode[n].style.top) + 50 + "px";
break;
}
if(n>0){
allNode[n].value = allNode[n-1].value;
}else {
allNode[n].value = headNode.value;
}
}
} var px = parseInt(headNode.style.left);
var py = parseInt(headNode.style.top);
switch (headNode.value) {
case 37:
headNode.style.left = px - 50 + "px";
break;
case 38:
headNode.style.top = py - 50 + "px";
break;
case 39:
headNode.style.left = px + 50 + "px";
break;
case 40:
headNode.style.top = py + 50 + "px";
break;
} //碰撞检测
if (headNode.style.left == fooldNode.style.left &&
headNode.style.top == fooldNode.style.top) {
var newbody = createNode(2);
var lastbody = null;
if (allNode.length == 0) {
lastbody = headNode;
} else {
lastbody = allNode[allNode.length - 1];
}
newbody.value = lastbody.value;
// lastbody.style.left = parseInt(lastbody.style.left)-50+"px";
switch (parseInt(lastbody.value)) {
case 37:
newbody.style.left = parseInt(lastbody.style.left) + 50 + "px";
newbody.style.top = lastbody.style.top;
break;
case 38:
newbody.style.top = parseInt(lastbody.style.top) + 50 + "px";
newbody.style.left = lastbody.style.left;
break;
case 39:
newbody.style.left = parseInt(lastbody.style.left) - 50 + "px";
newbody.style.top = lastbody.style.top;
break;
case 40:
newbody.style.top = parseInt(lastbody.style.top) - 50 + "px";
newbody.style.left = lastbody.style.left;
break;
} allNode.push(newbody);
fooldNode.style.left = parseInt(Math.random() * 10) * 50 + "px";
fooldNode.style.top = parseInt(Math.random() * 10) * 50 + "px";
}//碰撞end }
setInterval(moveNode, 500);
document.onkeydown = function () {
switch (event.keyCode) {
case 37:
headNode.value = 37;
break;
case 38:
headNode.value = 38;
break;
case 39:
headNode.value = 39;
break;
case 40:
headNode.value = 40;
break;
}
} </script> </body>
</html> 本文为H5EDU机构官方的HTML5培训教程，主要介绍贪食蛇
JavaScript强化教程
JavaScript强化教程 - 六步实现贪食蛇的更多相关文章
- JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案
1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolution Policy,只需要在游戏载入过程完成之后(cc.game.onStart函数回调中),调用下面的代 ...
- JavaScript强化教程——JavaScript 总结
本教程中我们向您讲授了如何向 html 页面添加 JavaScript,使得网站的动态性和交互性更强. 你已经学习了如何创建对事件的响应,验证表单,以及如何根据不同的情况运行不同的脚本. 你也学到了如 ...
- JavaScript强化教程 -- cocosjs场景切换
场景切换 在main.js,将StartScene作为我们初始化运行的场景,代码如下: cc.LoaderScene.preload(g_resources, function () { cc.dir ...
- JavaScript强化教程——jQuery AJAX 实例
什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...
- JavaScript强化教程——jQuery UI API 类别
---恢复内容开始--- 主要介绍:JavaScript强化教程—— jQuery UI API 类别 jQuery UI 在jQuery 内置的特效上添加了一些功能.jQuery UI 支持颜色动 ...
- JavaScript强化教程——Cocos2d-JS中JavaScript继承
javaScript语言本身没有提供类,没有其它语言的类继承机制,它的继承是通过对象的原型实现的,但这不能满足Cocos2d-JS引擎的要求.由于Cocos2d-JS引擎是从Cocos2d-x演变而来 ...
- javaScript高级教程(六) 获取窗口，屏幕，文档信息
1.屏幕坐标:相对于桌面左上角 窗口坐标:相对于窗口的左上角 文档坐标:相对于html文档左上角 当有滚动条时,窗口坐标与文档坐标之间有区别
- JavaScript贪食蛇游戏制作详解
之前闲时开发过一个简单的网页版贪食蛇游戏程序,现在把程序的实现思路写下来,供有兴趣同学参考阅读. 代码的实现比较简单,整个程序由三个类,一组常量和一些游戏逻辑以外的初始化和控制代码组成,总共400多行 ...
- Javascript贪食蛇小游戏
试玩:http://hovertree.com/game/9/ 贪吃蛇是一种风靡全球的小游戏,就是一条小蛇,不停地在屏幕上游走,吃各个方向出现的蛋,越吃越长.只要蛇头碰到屏幕四周,或者碰到自己的身子, ...
随机推荐
- art-template用户注册方法
应用场景nodejs Express框架,使用art-template模板引擎. 后台注册方法代码: var template = require('art-template'); template. ...
- Java 集合系列目录(Category)
下面是最近总结的Java集合(JDK1.6.0_45)相关文章的目录. 01. Java 集合系列01之 总体框架 02. Java 集合系列02之 Collection架构 03. Java 集合系 ...
- Vim多行缩进技巧
按v进入visual状态,选择多行,用>或<缩进或缩出 通常根据语言特征使用自动缩进排版:在命令状态下对当前行用== (连按=两次), 或对多行用n==(n是自然数)表示自动缩进从当前行起 ...
- Cool！15个超炫的 CSS3 文本特效【上篇】
每一个网页设计师都希望创建出让用户能够赏识的网站.当然,这是不可能满足每个人的口味的.幸运的是,我们有最强大的工具和资源.实际上,我们非常多的网站模板,框架,内容管理系统,先进的工具和其他的资源可以使 ...
- 苹果官方发布，iPhone 6 & Plus 设计素材
苹果发布 iPhone 6 和 iPhone 6 Plus 有一段时间了,据说首日预定量达到了创纪录的1600万部,真是不可思议.苹果已经创建了一些指引,让开发者可以受益.他们已经发布了一组苹果官方的 ...
- [C] C语言中的布尔值
C不具备显示的布尔类型,所以使用整数来代替,规则是:零是假,任何非零值皆为真. 反过来说,如果逻辑表达式为真其值一定为真,若逻辑表达式为假其值一定为零.
- SQLServer学习笔记系列2
一.写在前面的话 继上一次SQLServer学习笔记系列1http://www.cnblogs.com/liupeng61624/p/4354983.html以后,继续学习Sqlserver,一步一步 ...
- 在SQL Server 2016里使用查询存储进行性能调优
作为一个DBA,排除SQL Server问题是我们的职责之一,每个月都有很多人给我们带来各种不能解释却要解决的性能问题. 我就多次听到,以前的SQL Server的性能问题都还好且在正常范围内,但现在 ...
- shell脚本二
在shell脚本一 中,我讨论了shell脚本的语法规范,shell脚本的变量,以及shell脚本的测试语句. 仅仅懂得这些只能写简单的脚本,在简单的脚本中各条语句按顺序执行,从而实现自动化的管理,顺 ...
- jquery删除数组中重复元素
首先定义如下数组: var arr=[0,2,3,5,6,9,2]; 我们可以看到数组中存在重复元素'2'; 最后通过jquery筛选应该得到[0,2,3,5,6,9]; ok,首先我们再定义一个空数 ...