原生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 ...
随机推荐
- javaSE基础05
javaSE基础05:面向对象 一.数组 数组的内存管理 : 一块连续的空间来存储元素. Int [ ] arr = new int[ ]; 创建一个int类型的数组,arr只是一个变量,只是数组的一 ...
- vue2.0 组件之间的数据传递
组件间的数据传递// 父组件<template><div class="order"><dialog-addpro v-on:closedialog= ...
- 微信后台开发第一步：nodeJS+express接入微信后台详细教程
博文由 水车 编写 欢迎各位指正,转载请把链接带上——http://www.cnblogs.com/xuange306/p/4971702.html 前期准备工作 1:如果你没有服务器,那你需要一 ...
- PermGen space
MyEclipse内存空间不足,调整空间操作: 1.点击"Run"-"Run Configurations",在打开的窗口中点击"Arguments& ...
- OSError: libcudart.so.7.5: cannot open shared object file: No such file or directory
在ubuntu14.04-64-bit,安装完cuda ,cudnn.opencv后, 配置完MXNet,运行demo 时出现错误,库路径环境变量问题,解决方法: sudo ldconfig /usr ...
- Blender 脚本之 Operator 初探
addon(插件)用来扩展 Blender 的功能,跟其他软件里的 plugin(插件)一样,去掉不会影响软件的运行.插件可以加到 Blender 的用户偏好设置目录里,或者就在你所编辑的.blend ...
- 剑指Offer-【面试题07：两个栈实现队列】
package com.cxz.question7; import java.util.Stack; /** * 用两个栈实现一个队列.队列的声明如下,请实现它的两个函数appendTail 和del ...
- Datazen介绍
Datazen是移动端全平台的图表解决方案,基于HTML5的应用,实现了全平台的整合.此篇主要对其功能进行大体介绍. 这个平台最近刚被微软收购,相信微软看重的是其HTML5在全移动端平台的实现.Dat ...
- linux 下UGet闪退问题
安装UGet,开始使用正常,后来打开时会闪退,估计是软件配置错误,但软件重装也没用,用dpkg --purge也无法删除配置文件. 后来想到是在下载eclipse时,将eclipse文件删除,导致软件 ...
- mysql命令行修改字符编码
1.修改数据库字符编码 mysql> alter database mydb character set utf8 ; 2.创建数据库时,指定数据库的字符编码 mysql> create ...