原生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 ...
随机推荐
- Linux 软件包管理
简介: linux中软件包的管理随着linux版本的不同而不同,一般RPM和DPKG是最常见的两类软件包管理工具.分别应用基于rpm软件包的linux发行版本和基于deb软件包的linux发行版本. ...
- 基于SSM的租赁管理系统0.1_20161225_项目需求
基于SSM的汽车租赁系统项目计划书 1.产品定位 本系统供提供租赁服务的企业内部使用,供企业员工进行线下操作. 2.需求分析 2.1 能为工作人员提供员工信息的管理功能,具有RBAC基于角色的权限管理 ...
- C# 委托&事件
之前关于事件这块理解一直不是很好,正好有空复习,整理记录一下 委托:可以将与自身形式相同(返回参数相同:传入参数相同)的方法当成参数进行传递. using UnityEngine; using Sys ...
- 何为HDFS？
该文来自百度百科,自我收藏. Hadoop分布式文件系统(HDFS)被设计成适合运行在通用硬件(commodity hardware)上的分布式文件系统.它和现有的分布式文件系统有很多共同点.但同时, ...
- LightGBM中GBDT的实现
现在LightGBM开源了,这里将之前的一个文档发布出来供大家参考,帮助更快理解LightGBM的实现,整体思路应该是类似的. LightGBM优雅,快速,效果好,希望LightGBM越来越好:) L ...
- 提高 ASP.NET Web 应用性能
转载:http://www.codeceo.com/article/24-ways-improve-aspnet-web.html 在这篇文章中,将介绍一些提高 ASP.NET Web 应用性能的方法 ...
- RadioGroup 和 ViewPager 绑定 实现切换
package com.jereh.helloworld.activity.day12; import android.app.Activity; import android.os.Bundle; ...
- 分享篇——我的Java学习路线
虽然之前我是开发出身,但是我学习的语言是Objective-c,这个语言使用起来范围比较窄,对于自动化学习来说也是无用武之地,所以我自己学习了Java,对于一个有开发经验的人来说学习一门新语言相对来说 ...
- 解决vsftpd的refusing to run with writable root inside chroot错误
参考 http://www.cnblogs.com/CSGrandeur/p/3754126.html 在Ubuntu下用 vsftpd 配置FTP服务器,配置 “ sudo chmod a-w /h ...
- Code Lock[HDU3461]
Code LockTime Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others)Total Subm ...