javascript 编写的贪吃蛇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.container{height: 300px;width: 300px;position: relative;margin: 100px auto;background: #c2e2ae;}
.bgTable{border: 1px solid black;border-spacing: 0;border-collapse:collapse;position: absolute}
.bgTable td{height: 20px;width: 20px;border: 1px solid black}
.bgTable tr{height: 20px;width: 100px;border: 1px solid black}
.cube{display: block;height:22px;width: 22px;background: red;position: absolute;margin: 1px}
#cu2{top: 0px;left:115px }
</style>
</head>
<body>
<div class="container">
<table class="bgTable">
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<span class="cube" id="cu1"></span>
<span class="cube" id="cu2"></span>
</div>
<script>
var container=document.querySelector('.container');
var cube=document.querySelector('.cube');
var up=38,down=40,left=37,right=39;// 上下左右 方向键的键码(keyCode)是38、40、37和39,
var t1,t2,t3,t4;
var cu1=document.querySelector('#cu1');
var cu2=document.querySelector('#cu2');
var randomdot=[0,23,46,69,92,115,138,161,184,207,230,253,276];//随机自由点位置
var n=2; var arrLeft=[],arrTop=[];//用来存储第一个方块每一步的位置 /*设置向上下左右移动*/
function moveLeft(obj){
t1=setInterval(function(){
obj.style.left=obj.offsetLeft-24+'px';
arrLeft.push(obj.offsetLeft);//存储位置
arrTop.push(obj.offsetTop);
if(obj.offsetLeft<=20){clearInterval(t1);}
},500)
}
function moveRight(obj){
t2=setInterval(function(){
obj.style.left=obj.offsetLeft+22+'px';
arrLeft.push(obj.offsetLeft);
arrTop.push(obj.offsetTop);
if(obj.offsetLeft>=270){clearInterval(t2);}
},500)
}
function moveTop(obj){
t3=setInterval(function(){
obj.style.top=obj.offsetTop-24+'px';
arrLeft.push(obj.offsetLeft);
arrTop.push(obj.offsetTop);
if(obj.offsetTop<=20){clearInterval(t3);}
},500)
}
function moveBottom(obj){
t4=setInterval(function(){
obj.style.top=obj.offsetTop+22+'px';
arrLeft.push(obj.offsetLeft);
arrTop.push(obj.offsetTop);
if(obj.offsetTop>=270){clearInterval(t4);}
},500)
}
/*对上下左右按键进行监听，按下某一个，会取消其他方向的移动，*/
document.onkeydown=function(){
var obj=cu1;
if(event.keyCode==up){
clearInterval(t1);
clearInterval(t2);
clearInterval(t3);
clearInterval(t4);
moveTop(obj);
}else if(event.keyCode==down){
clearInterval(t1);
clearInterval(t2);
clearInterval(t3);
clearInterval(t4);
moveBottom(obj);
}else if(event.keyCode==left){
clearInterval(t1);
clearInterval(t2);
clearInterval(t3);
clearInterval(t4);
moveLeft(obj);
}else if(event.keyCode==right){
clearInterval(t1);
clearInterval(t2);
clearInterval(t3);
clearInterval(t4);
moveRight(obj);
}
};
/*用来产生随机位置的自由方块*/
function newdot(){
var dot=document.createElement('span');
dot.className='cube';
container.appendChild(dot);
console.log(container.childElementCount);
var top1=Math.floor(Math.random()*14);
dot.style.top=''+randomdot[top1]+'px';
var left1=Math.floor(Math.random()*14);
dot.style.left=''+randomdot[left1]+'px';
}
/*当第一个方块和自由方块的位置重叠，自由方块将跟随第一个方块移动*/
function together(){
var container=document.querySelector('.container');
var small=container.lastElementChild;
if(cube.offsetLeft==small.offsetLeft&&cube.offsetTop==small.offsetTop){
var a=n;//用a将n的某一次的值固定
setInterval(function(){
/*自由方块1的位置为第一个方块倒一步的位置，自由方块2的位置为第一个方块倒两步的位置，以此内推*/
small.style.left=arrLeft[arrLeft.length-a]-1+'px';
small.style.top=arrTop[arrTop.length-a]-1+'px';
},10);
newdot();
n++;
}
}
T=setInterval(function(){
together();
},500); </script>
</body>
</html>
采用JavaScript编写的贪吃蛇，用了数组和定时器，坐标相关的知识，用了一下午，还是挺好玩的，就是没有写游戏结束，还有一些逻辑没有完成，永远都不会死的。。。
javascript 编写的贪吃蛇的更多相关文章
- JavaScript实现的--贪吃蛇
总的实现思路: 一.效果部分: 1.编写html代码,加上样式. 二.JavaScript部分: 1.利用dom方法创建一块草坪,即活动区域: 2.创建一条蛇,并设置其初始位置: ...
- JavaScript 小游戏 贪吃蛇
贪吃蛇 代码: <!DOCTYPE html><html><head> <meta charset="UTF-8"> <met ...
- JavaScript新手入门 贪吃蛇
从小就在玩贪吃蛇,但是知道今天自己做了一遍才知道原理的具体的实现步骤. 刚进入界面时显示开始游戏(不重要,本人比较喜欢吹毛求疵) 中间黑色部分为游戏的主要展示部分 主要步骤及源码: body中代码,红 ...
- javascript实现游戏贪吃蛇
1.设计蛇:属性有宽.高.方向.状态(有多少节),方法:显示,跑 2.设计食物:属性宽.高 3.显示蛇:根据状态向地图里加元素 4.蛇跑起来:下一节到前一节的位置,蛇头根据方向变,删除原来的蛇,新建蛇 ...
- 原生JavaScript实现的贪吃蛇
github代码地址:https://github.com/McRayFE/snake 涉及到的知识点: 键盘事件 setInterval()定时器 javascript中数组的使用 碰撞的检测 of ...
- JavaScript 面向对象思想 贪吃蛇游戏
js代码: 游戏的对象 ,食物,蛇 ,游戏控制思路如下 (完整代码在https://github.com/774044859yf/ObjectSnakeGame下载) var snake = { aS ...
- C - 简易贪吃蛇的编写
不多废话,直接进入正题——用C编写简易贪吃蛇.附上拙劣的源码 * c-snake * 首先说明使画面动起来的原理:通过 system("cls"); 清除当前控制台的显示,再pri ...
- 用 Python 写个贪吃蛇，保姆级教程！
本文基于 Windows 环境开发,适合 Python 新手 本文作者:HelloGitHub-Anthony HelloGitHub 推出的<讲解开源项目>系列,本期介绍 Python ...
- JavaScript版—贪吃蛇小组件
最近在学习JavaScript,利用2周的时间看完了<JavaScript高级编程>,了解了Js是一门面向原型编程的语言,没有像C#语言中的class,也没有私有.公有.保护等访问限制的级 ...
随机推荐
- Tkinter教程之Text(1)篇
本文转载自:http://blog.csdn.net/jcodeer/article/details/1811343 '''Tkinter教程之Text篇(1)''''''1.创建第一个Text''' ...
- [算法] 快速排序 Quick Sort
快速排序(Quick Sort)使用分治法策略. 它的基本思想是:选择一个基准数,通过一趟排序将要排序的数据分割成独立的两部分:其中一部分的所有数据都比另外一部分的所有数据都要小.然后,再按此方法对这 ...
- 办公室网络二三事 - chunyu
开始的时候,我们办公室拉了两条家庭百兆宽带,两条宽带分别接到路由器的wan1/wan2口上,我们愉快的工作愉快的上网. 后来,再拉了一条十兆企业专线,接到了路由器的wan3口上面,配了一些静态路由,希 ...
- 多线程之 CountDownLatch
CountDownLatch,一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待. CountDownLatch如其所写,是一个倒计数的锁存器,当计数减至0时触发特定 ...
- 【VB技巧】VB静态调用与动态调用dll详解
本文“[VB技巧]VB静态调用与动态调用dll详解”,来自:Nuclear'Atk 网络安全研究中心,本文地址:http://lcx.cc/?i=489,转载请注明作者及出处! [[请注意]]:在以下 ...
- Apache Spark Shark的简介
Shark是构建在Spark和Hive基础之上的数据仓库. 目前,Shark已经完成学术使命,终止开发,但其架构和原理仍具有借鉴意义. 它提供了能够查询Hive中所存储数据的一套SQL接口,兼容现有的 ...
- Apache Spark Streaming的适用场景
使用场景: Spark Streaming 适合需要历史数据和实时数据结合进行分析的应用场景,对于实时性要求不是特别高的场景也能够胜任.
- ASP.NET MVC程序传值方式:ViewData，ViewBag，TempData和Session
转载原地址 http://www.cnblogs.com/sunshineground/p/4350216.html 在ASP.NET MVC中,页面间Controller与View之间主要有以下几种 ...
- Google中rel="canonical"的相关解释和用法
转载原地址 http://blog.sina.com.cn/s/blog_673b01740100jxlz.html 近听到很多SEO 对在页面的规范版本用规范 URL 标签( canonical U ...
- 340. Longest Substring with At Most K Distinct Characters
最后更新 二刷 08-Jan-2017 和76.159很像.. 2 pointers.. 通过判断是否每一次是有效读取来增减accumulator,从而判断当前是否符合规定,再来更新maxLength ...