原生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 ...
随机推荐
- ->code vs 1474 十进制转m进制
1474 十进制转m进制 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题解 查看运行结果 题目描述 Description 将十进制数n转换成m进 ...
- 【mongo】聚合相关资料
一个很好的博客:http://www.cnblogs.com/shanyou/p/3494854.html 官网:https://docs.mongodb.com/manual/reference/o ...
- javaEE基础08
javaEE基础08 一.继承 特点:继承父类的属性和方法,单继承(多继承) 特性:方法的复写(重写) 比如:人可以养狗 人------>狗:整体和部分(拥有)关系 关键字:extends 结构 ...
- luac++
Cocos2d-x下Lua调用自定义C++类和函数的最佳实践 洪亮 305 2014年08月09日 发布 1 推荐 21 收藏,14.9k 浏览 关于cocos2d-x下Lua调用C++的文档看了 ...
- C++ 字符处理函数
C/C++里有一个头文件#include <ctype.h>,里面定义了很多字符函数,在实际开发中,用起来很方面. int isalpha(int ch) 若ch是字母('A'-'Z', ...
- zsh 自动补全导致命令显示重复
关键字:autocomplete, zsh, backspace, securecrt, xterm, linux console 举个例子: 输入命令ls 然后按TAB补全试试,发现竟然是这样的 ...
- ubuntu 报错： The system is running in low-graphics mode
出错原因不知为何,apt-get install --reinstall unity-greeter 不起作用. 试了一下,这样居然有效: cd /etc/X11 sudo cp xorg.conf. ...
- Jenkins配置自动发送邮件，成功！
Jenkins自动发送邮件配置: 打开"系统管理"--"系统设置" 在"Jenkins Location"设置系统管理员地址(重要:不能省略 ...
- 序言<EntityFramework6.0>
Entity Framework是微软战略性的数据访问技术,不同与早期访问技术,Entity Framework并不耦合在Visual Studio中,它提供了一个全面的, 基于模型的生态系统,使您能 ...
- Global Translator
Global Translator插件可以把已经通过翻译服务翻译好的内容生成对应语种的“静态”页面,或者说“缓存”起来,这样在一段时间内(可设置)想访问该语种的这 个页面的访客,就可以在不调用翻译服务 ...