判断小蛇是否碰撞JAVA_原生JavaScript实现的贪吃蛇

涉及到的知识点：

键盘事件

setInterval()定时器

javascript中数组的使用

碰撞的检测

offsetLeft,offsetWidth,offsetTop,offsetHeight

实现的思路

让小蛇动起来

让食物随机生成

检测碰撞

让身体跟随

HTML主体代码

得分

一个小蛇移动的操场playground，里面包含了小蛇snake和食物food，还有一个记录得分的menu

CSS代码

*{

padding:0;

margin:0;

}

.container{

width:600px;

height:500px;

margin:0 auto;

}

#playground{

width:450px;

height:100%;

background-color:pink;

float:left;

position:relative;

}

#menu{

width:150px;

height:100%;

background-color:blue;

float:left;

}

#snake{

width:20px;

height:20px;

background-color:red;

position:absolute;

left:0;

top:0;

}

#food{

width:20px;

height:20px;

background-color:yellow;

position:absolute;

}

.body{

width:20px;

height:20px;

background-color:green;

position:absolute;;

top:0;

left:0;

}

#score{

font-size:30px;

font-weight:bold;

color:black;

}

#menu div{

font-size:20px;

font-weight:bold;

margin-left:20px;

}

此时界面的效果如下：

获取元素和定义全局变量

var snake = document.getElementById("snake");

var food = document.getElementById("food");

var playground = document.getElementById("playground");

var score = document.getElementById('score');

/*设置全局变量*/

var timer;

var srr = [];//存放蛇的位置的数组

var num = 0;//数组的长度

var snakeBody;//每次吃调一个食物，增加的身体

var timer1 = setInterval(eat,10);//设置一个碰撞的时间器

让小蛇动起来

监听键盘事件，判断上下左右键的ASCII码值来执行不同方向的移动函数，其中每移动1px，就要将小蛇的位置存入到arr[]数组中，因为后面实现身体跟随的时候，是根据数组里面的位置来动态变化的。

document.onkeydown = function(e){

var evt = window.evnet || e;

switch(evt.keyCode){

case 37://左

clearInterval(timer);

timer = window.setInterval(runLeft,10);//向左移动的时间器

function runLeft(){

if(snake.offsetLeft > 0){

snake.style.left = snake.offsetLeft - 1 + 'px';

snake.style.top = snake.offsetTop + 'px';

srr.push([snake.offsetLeft,snake.offsetTop]);//每移动1px，就将位置存进数组中

num++;//相应的数组长度加1

}else{

clearInterval(timer);

console.log("failed!");

}

}

break;

case 38://上

clearInterval(timer);

timer = window.setInterval(runTop,10);

function runTop(){

if(snake.offsetTop > 0){

snake.style.top = snake.offsetTop - 1 + 'px';

snake.style.left = snake.offsetLeft + 'px';

srr.push([snake.offsetLeft,snake.offsetTop]);

num++;

} else{

clearInterval(timer);

console.log("failed!");

}

}

break;

case 39://右

clearInterval(timer);

timer = window.setInterval(runRight,10);

function runRight(){

if(snake.offsetLeft < 430){

snake.style.left = snake.offsetLeft + 1 + 'px';

snake.style.top = snake.offsetTop + 'px';

srr.push([snake.offsetLeft,snake.offsetTop]);

num++;

} else{

clearInterval(timer);

console.log("falied!");

}

}

break;

case 40://下

clearInterval(timer);

timer = window.setInterval(runBottom,10);

function runBottom(){

if(snake.offsetTop < 480) {

snake.style.top = snake.offsetTop + 1 + 'px';

snake.style.left = snake.offsetLeft + 'px';

srr.push([snake.offsetLeft,snake.offsetTop]);

num++;

}else{

clearInterval(timer);

console.log("falied!");

}

}

break;

}

}

让食物随机产生

运用了Math类里面的random方法实现食物的随机产生，代码如下，配合碰撞检测使用

function pos(){

food.style.left = parseInt(Math.random()*430) + 'px';

food.style.top = parseInt(Math.random()*480) + 'px';

}

碰撞检测

小蛇和食物不碰撞有四种可能，图中黄色是食物，红色是小蛇：

第一种情况：

第二种情况：

第三种情况：

第三种情况

除了以上四种情况以外的都是碰撞的情况，所以代码如下

/*检测碰撞函数*/

function eat(){

snakeCrashFood(snake,food);

function snakeCrashFood(obj1,obj2){

var obj1Left = obj1.offsetLeft;

var obj1Width = obj1.offsetWidth + obj1.offsetLeft;

var obj1Top = obj1.offsetTop;

var obj1Height = obj1.offsetHeight + obj1.offsetTop;

var obj2Left = obj2.offsetLeft;

var obj2Width = obj2.offsetWidth + obj2.offsetLeft;

var obj2Top = obj2.offsetTop;

var obj2Height = obj2.offsetHeight + obj2.offsetTop;

if(!((obj1Width

snakeBody = document.createElement("div");

snakeBody.setAttribute("class","body");

playground.appendChild(snakeBody);//添加一节新的身体

pos();//让食物重新随机出现

setInterval(follow,10);//动态地改变新的身体的位置

}

}

}

让身体跟随

在讲让小蛇动起来的那一节的时候，已经提到过了，小蛇每移动1px，都会将此时的位置存入到位置数组中，这个位置数组就是在这一节里面起作用的，能让身体动态地跟随，看下面的图片

红色的头节点移动了40px，此时arr[]数组的长度就为40，那么第二节身体的位置刚好就是arr[20]的位置，第三节的位置就是arr[40]的位置，依次加等20。。。实现的代码如下

/*身体跟随函数*/

function follow(){

/*获得增加的身体的数组*/

var bodyNum = document.getElementsByClassName("body");

score.innerHTML = bodyNum.length;

var place = 0;

/*数组每移动1px,新的身体的位置就是相对于前一个身体的第20个数组的位置，后面依次加等*/

for(var i=0;i

place += 20;

bodyNum[i].style.left = srr[num-place][0] + 'px';

bodyNum[i].style.top = srr[num-place][1] + 'px';

}

}

原生js写的贪吃蛇网页版游戏特效

javascript 编写的贪吃蛇

JavaScript新手入门 贪吃蛇

从小就在玩贪吃蛇,但是知道今天自己做了一遍才知道原理的具体的实现步骤. 刚进入界面时显示开始游戏(不重要,本人比较喜欢吹毛求疵) 中间黑色部分为游戏的主要展示部分 主要步骤及源码: body中代码,红 ...

javascript实现游戏贪吃蛇

1.设计蛇:属性有宽.高.方向.状态(有多少节),方法:显示,跑 2.设计食物:属性宽.高 3.显示蛇:根据状态向地图里加元素 4.蛇跑起来:下一节到前一节的位置,蛇头根据方向变,删除原来的蛇,新建蛇 ...

JavaScript 面向对象思想 贪吃蛇游戏

js代码: 游戏的对象 ,食物,蛇 ,游戏控制思路如下 (完整代码在https://github.com/774044859yf/ObjectSnakeGame下载) var snake = { aS ...

canvas原生js写的贪吃蛇

//W3C//DTD XHTML 1 ...

随机推荐

C&sol;C&plus;&plus;编译和链接过程详解 &lpar;重定向表，导出符号表，未解决符号表&rpar;

详解link  有 些人写C/C++(以下假定为C++)程序,对unresolved external link或者duplicated external simbol的错误信息不知所措(因为这样的错 ...

Java基础--定时任务Timer

Java基础--定时任务Timer 一.Timer介绍 java.util.Timer java.util.TimerTask Timer是一个定时器类,通过该类可以为指定的定时任务进行配置.Time ...

iOS键盘出现时界面跟着往上推

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyBoardWillShow:) name:UI ...

ubuntu 下截图与快捷键设置

1. 安装 这里使用的 kubuntu sudo apt-get install ksnapshot 2. 设置快捷键 点击左下角的开始菜单,选择`应用程序` `设置` `系统设置` ksnapsho ...

shell命令getopts解析

getopts是一条获取和处理命令行选项的语句,格式为getopts option_string variable .其中option_string中包含一个有效的单字符选项,若getopts命令在命 ...

通过SCVMM分配iSCSI存储

除了使用基于SMB3.0应用程序的文件共享外,还可以使用iSCSI目标服务器的SAN存储,然后在SCVMM控制台中添加基于SMI-S类型的存储,步骤如下: 1.将一台安装了 iSCSI目标 功能的Wi ...

union以及一些扩展

select name,age from Students where Age<3unionselect name ,age from Students where Age >4--两个结 ...

JavaWeb(二)jsp运行原理，九大内置对象

JSP运行原理: 每个JSP页面在第一次被访问时,WEB容器都会把请求交给JSP引擎(即一个Java程序)去处理.JSP引擎先将JSP翻译成一个_jspServlet(实质上也是一个servlet) ...

SpringMVC&plus;Mybatis&plus;MySQL8遇到的问题

搭建SpringMVC+Mybatis+MySQL8过程中遇到的坑. 1.数据库驱动要使用新版本,我的和mysql保持一致. 查看mysql版本:MySQL\bin>mysql -V 配置对应版 ...