原生JS制作贪吃蛇小游戏
感情都在代码里，来，干了！...
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>贪吃蛇</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
#box{
height: 400px;
width: 600px;
margin:50px auto;
border:1px solid #ccc;
position: relative;
}
.snake{
height: 18px;
width: 18px;
background: red;
position: absolute;
border:1px solid #ccc;
top: 0;
left: 0;
}
.con{
height: 20px;
width: 20px;
background: green;
position: absolute;
top: 60px;
left: 80px;
}
</style>
</head>
<body>
<div id="box">
<div class="snake"></div>
<p class="con"></p>
</div>
</body>
<script type="text/javascript">
var box=document.getElementById('box');
var snake=box.getElementsByClassName('snake');
var l=0,t=0,time=null;
var s=false,x=false,z=false,y=true;
function test () {
//获取box各个方向的距离
var l1=snake[0].offsetLeft;
var r1=snake[0].offsetLeft+snake[0].offsetWidth;
var t1=snake[0].offsetTop;
var b1=snake[0].offsetTop+snake[0].offsetHeight;
//获取con各个方向的距离
var con=box.getElementsByClassName('con')[0];
var l2=con.offsetLeft;
var r2=con.offsetLeft+con.offsetWidth;
var t2=con.offsetTop;
var b2=con.offsetTop+con.offsetHeight;
var a,b,c,d;
var f1;
// if (l1>=r2||r1<=l2||t1>=b2||b1<=t2) {
// a=false;
// } else{
// a=true;
// }
// return a;
if (z&&l1<=r2&&!(r1<=l2||t1>=b2||b1<=t2)) {
a=true;
} else{
a=false
};
if (y&&r1>=l2&&!(l1>=r2||t1>=b2||b1<=t2)) {
b=true;
} else{
b=false
};
if (s&&t1<=b2&&!(l1>=r2||r1<=l2||b1<=t2)) {
c=true;
} else{
c=false
};
if (x&&b1>=t2&&!(l1>=r2||r1<=l2||t1>=b2)) {
d=true;
} else{
d=false
};
return(a||b||c||d);
};
//创建食物
function creat () {
var flag=false;
do{
var left=parseInt(Math.random()*30)*20;
var top=parseInt(Math.random()*20)*20;
for (var i = 0; i < snake.length; i++) {
if (snake[i].offsetLeft==left&&snake[i].offsetTop==top) {
flag=true;
break;
} else{
flag=false;
}
};
}while(flag);
var newp=document.createElement('p');
newp.className='con';
newp.style.left=left+'px';
newp.style.top=top+'px';
box.appendChild(newp);
}
//判断游戏结束
function gameOver (zuo,shang) {
if (zuo<0||zuo>=600||shang<0||shang>=400) {
clearInterval(time);
alert('game over!点击确定后按“F5”重新开始游戏');
f1=false;
};
for (var i = 1; i < snake.length; i++) {
if(snake[i].offsetLeft==zuo&&snake[i].offsetTop==shang){
clearInterval(time);
alert('game over!');
f1=false;
};
};
}
function insert (obj1,obj2,left,top) {
obj1.style.top=top+'px';
obj1.style.left=left+'px';
obj2.insertBefore(obj1,snake[0]);
}
function remove (obj,name,num) {
var con=obj.getElementsByClassName(name)[num];
obj.removeChild(con);
}
function getlong (obj,obj1,name,left,top,num) {
f1=true;
gameOver(left,top);
if (f1) {
insert (obj1,obj,left,top);
remove (obj,name,num);
creat();
};
}
function move (obj,obj1,name,left,top,num,name1) {
f1=true;
gameOver(left,top);
if (f1) {
insert (obj1,obj,left,top);
obj.removeChild(name1[name1.length-1]);
};
}
time=setInterval(function () {
var Nsnake=document.createElement('div');
Nsnake.className='snake';
var ll=snake[0].offsetLeft;
var tt=snake[0].offsetTop;
var flag=true;
if(x){
if(test()){
tt+=20;
getlong (box,Nsnake,'con',ll,tt,0);
}else{
tt+=20;
move (box,Nsnake,'con',ll,tt,0,snake);
}
}
if(y){
if(test()){
ll+=20;
getlong (box,Nsnake,'con',ll,tt,0);
}else{
ll=ll+20;
move (box,Nsnake,'con',ll,tt,0,snake);
}
}
if(s){
if(test()){
tt-=20;
getlong (box,Nsnake,'con',ll,tt,0);
}else{
tt-=20;
move (box,Nsnake,'con',ll,tt,0,snake);
}
}
if(z){
if(test()){
ll-=20;
getlong (box,Nsnake,'con',ll,tt,0);
}else{
ll-=20;
move (box,Nsnake,'con',ll,tt,0,snake);
}
}
},150)
document.onkeydown=function (ev) {
var e=ev||window.event;
var time1,time2,tim3,time4;
function clear () {
clearTimeout(time1);
clearTimeout(time2);
clearTimeout(time3);
clearTimeout(time4);
}
switch(e.keyCode){
case 37:
if (y) {
z=false;
y=true;
s=false;
x=false;
} else{
time1=setTimeout(function () {
z=true;
y=false;
s=false;
x=false;
},50)
};
break;
case 38:
if (x) {
z=false;
y=false;
s=false;
x=true;
} else{
time2=setTimeout(function () {
z=false;
y=false;
s=true;
x=false;
},50)
};
break;
case 39:
if (z) {
z=true;
y=false;
s=false;
x=false;
} else{
time3=setTimeout(function () {
z=false;
y=true;
s=false;
x=false;
},50)
};
break;
case 40:
if (s) {
z=false;
y=false;
s=true;
x=false;
} else{
time4=setTimeout(function () {
z=false;
y=false;
s=false;
x=true;
},50)
};
break;
}
} </script>
</html>
原生JS制作贪吃蛇小游戏的更多相关文章
- JS高级---案例：贪吃蛇小游戏
案例:贪吃蛇小游戏 可以玩的小游戏,略复杂,过了2遍,先pass吧 先创建构造函数,再给原型添加方法.分别创建食物,小蛇和游戏对象. 食物,小蛇的横纵坐标,设置最大最小值,运动起来的函数,按上下左右键 ...
- C++ 简单的控制台贪吃蛇小游戏
由于比较懒,所以不怎么写,觉得这样不应该.我应该对自己学的做出整理,不管是高端低端,写出来是自己的. // 贪吃蛇.cpp : 定义控制台应用程序的入口点. // #include "std ...
- 贪吃蛇小游戏-----C语言实现
1.分析 众所周知,贪吃蛇游戏是一款经典的益智游戏,有PC和手机等多平台版本,既简单又耐玩.该游戏通过控制蛇头方向吃食物,从而使得蛇变得越来越长,蛇不能撞墙,也不能装到自己,否则游戏结束.玩过贪吃蛇的 ...
- 原生JS实现的h5小游戏-植物大战僵尸
代码地址如下:http://www.demodashi.com/demo/12755.html 项目介绍 本项目是利用原生js实现的h5小游戏-植物大战僵尸,主要结合了一下自己对于h5小游戏的理解,结 ...
- Java GUI学习,贪吃蛇小游戏
JAVA GUI练习 贪吃蛇小游戏 前几天虽然生病了,但还是跟着狂神学习了GUI的方面,跟着练习了贪吃蛇的小项目,这里有狂神写的源码点我下载,还有我跟着敲的点我下载,嘿嘿,也就注释了下重要的地方,这方 ...
- 用GUI实现java版贪吃蛇小游戏
项目结构 新建一个JFrame窗口,作为程序入口 public class GameStart{ public static void main(String[] args) { JFrame jFr ...
- Java 用java GUI写一个贪吃蛇小游戏
目录 主要用到 swing 包下的一些类 上代码 游戏启动类 游戏数据类 游戏面板类 代码地址 主要用到 swing 包下的一些类 JFrame 窗口类 JPanel 面板类 KeyListener ...
- JS贪吃蛇小游戏
效果图展示: 具体实现代码如下: (1)html部分 !DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- 用js写一个贪吃蛇小游戏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 修改NavigationView中的Item的Icon大小
<dimen name="navigation_icon_size">48dp</dimen>
- CSS系列：在HTML中引入CSS的方法
HTML与CSS是两个作用不同的语言,它们同时对一个网页产生作用,因此必须将CSS与HTML链接在一起使用.在HTML中,引入CSS的方法主要有4种:行内式.内嵌式.导入式和链接式. 1. 行内式 行 ...
- UWP VirtualizedVariableSizedGridView 支持可虚拟化可变大小Item的View（一）
Boss的需要时这样的,Item是可变大小的,同时根据不同的Window size,来确定Item的结构和大小Window 小的时候是 大的时候是这样的: 当然这size变化的过程中也允许其他结构,我 ...
- Spring的事务管理
事务 事务:是逻辑上一组操作,要么全都成功,要么全都失败. 事务特性(ACID) 原子性:事务不可分割 一致性:事务执行的前后,数据完整性保持一致 隔离性:一个事务执行的时候,不应该受到其他事务的打扰 ...
- dos学习
>>>>>>>>>> arp-a:查看路由缓存表,所有的IP都在这里. ping <ip地址(例:192.168.x.x)>:查 ...
- 大家都在用PDA条码扫描枪管理企业仓库 PDA无线数据采集程序
PDA数据采集器又称之为手持终端,这些都是用于扫描货物条码统计数据用的,PDA扫描枪有效提高企业仓库管理,在仓库管理中引入条码技术,对仓库的到货检验.入库.出库.调拨.移库移位.库存盘点等各个作业环节 ...
- gradle下载地址
gradle下载:http://services.gradle.org/distributions
- matlab 求解线性方程组之LU分解
线性代数中的一个核心思想就是矩阵分解,既将一个复杂的矩阵分解为更简单的矩阵的乘积.常见的有如下分解: LU分解:A=LU,A是m×n矩阵,L是m×m下三角矩阵,U是m×n阶梯形矩阵 QR分解: 秩分解 ...
- [翻译svg教程]svg学习系列 开篇
目录 [翻译svg教程]svg学习系列 开篇 [翻译svg教程 ]svg 的坐标系统 [翻译svg教程]svg 中的g元素 [翻译svg教程]svg中矩形元素 rect [翻译svg教程]svg中的c ...
- PS特效精粹
冲击有力的广告效果 神奇画笔功能 + 强大的图层样式 Photoshop中的三维特效