原生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 ...
随机推荐
- jquery 双向select控件bootstrap Dual listbox
http://www.cnblogs.com/hangwei/p/5040866.html -->jquery 双向select控件bootstrap Dual listboxhtt ...
- Best code水题之路
BestCoder 2nd Anniversary: 1001.Oracle There is once a king and queen, rulers of an unnamed city, wh ...
- VS工具如何新建筛选器
最近,遇到了一个问题,别人用VS工具新建了一个工程,不知道怎么的,就是没有办法新建筛选器. 今天,终于解决了,记录下,也希望能够帮助更多的人. 当我们的工程目录里的文件越来越多的时候,这时候需要建立帅 ...
- WPF之Binding初探
初学wpf,经常被Binding搞晕,以下记录写Binding的基础. 首先,盗用张图.这图形象的说明了Binding的机理. 对于Binding,意思是数据绑定,基本用法是: 1.在xmal中使用 ...
- 使用国内pypi源来安装python包
国内源 http://pypi.douban.com/ 豆瓣 http://pypi.hustunique.com/ 华中理工大学 http://pypi.sdutlinux.org/ 山东理工 ...
- [UWP]使用AdaptiveTrigger实现自适应布局
这篇博客将介绍如何在UWP开发中使用AdaptiveTrigger实现自适应布局. 场景1:窗体宽度大于800时,窗体背景色为绿色,窗体在0到800之间为蓝色. XAML Code: <Grid ...
- linux内核(kernel)版本号的意义
转自:http://www.cnblogs.com/jsjliuxing/archive/2011/12/01/2271182.html 在linux下有一个目录,即/usr/src/kernels/ ...
- MachineKey 操作 之 应用集群中SSO应用生成MachineKey
MachineKey介绍 MachineKey其用于对 Forms 身份验证 Cookie 数据和视图状态数据进行加密和解密,一般情况下IIS自动默认给网站或者每一个应用生成唯一的MachineKey ...
- 【CentOS】LAMP相关2
////////////////配置Apache//////////////////////////// 拿一个discuz来演示 LFS是什么,然后去掌握以下吧,对我们的提升很大?????听说广州的 ...
- Redis为什么使用单进程单线程方式也这么快
[转] http://www.syyong.com/db/Redis-why-the-use-of-single-process-and-single-threaded-way-so-fast.htm ...