javaScript小项目------贪食蛇
2016-08-31 23:22
246 查看
运用了纯js和css完成的小demo
实现思路：
1.创建场景2.创建头部和果实部分（注意：头部是一个独立的部分）
3.创建上下左右的按键功能
4.创建移动的头部，以及定时器。（在按键触发的时候就启动定时器)
5.判断是否吃到水果（当吃到水果，即头部跟果实的位置一样的时候，刷新两者的位置）
6.吃到果实后，身体变大，特别要注意身体添加的方向
7.判断头部改变后，身体第一位置与第二位置的移动
特别注意：
1.身体部分的方向变动2.每次只能允许身体中的一个部分方向改变
还在完善中
经过几天的跟进修复了一些小的bug—- 9.4bug:
1.头部不能接触身体的任何部分
2.不能超过板块的空间限制
3.过时不能再身体和头部出现（还没实现）
实现效果图：
当碰到板块和碰到身体时
<!doctype html>
<html>
<meta charset="utf-8">
<head>
<style>
*{
margin: 0;
padding:0;
}
.content{
position: absolute;
width: 500px;
height: 500px;
background-color: #212121;
}
.colo{
width: 48px;
height: 48px;
background-color: #E6E6E6;
border: 1px solid #466F85;
float: left;
color: #fff;
}
.head{
/*background-color: #49DF85;*/
background-image: url(./img/22.jpg);
border-radius: 10px;
background-size: 100%;
position: absolute;
height: 48px;
width: 48px;
}
.fruit{
/*background-color: #49DF85;*/
background-image: url(./img/fruit.jpg);
background-size: 100%;
position: absolute;
height: 48px;
width: 48px;
}
.score{
top: 10px;
font-family: '黑体';
left:600px;
position: absolute;
height: 50px;
width: 200px;
background-color: #1193FF;
color: #FFF;
border-radius: 10px;
padding: 10px 10px 10px 10px;
}
.score p{
color: #FFF;
}
.newbody{
position: absolute;
width: 48px;
height: 48px;
background-image: url(./img/33.jpg);
background-size: 100%;
}
.btn{
font-family: '黑体';
left:600px;
top: 100px;
position: absolute;
height: 50px;
width: 100px;
background-color: #1193FF;
color: #FFF;
text-align: center;
line-height: 50px;
font-size: 20px;
cursor: pointer;
border-radius: 15px;
}
.rule{
position: absolute;
height: 150px;
width: 300px;
color: black;
top: 260px;
left:600px;
margin-bottom: 30px;
}
.title{
height: 30px;
line-height: 30px;
text-align: center;
margin-bottom: 10px;
box-shadow: 0 0px 15px rgba(0,0,0,0.15);
font-size: 18px;
width: 300px;
}
.rule_content{
margin-bottom: 10px;
box-shadow: 0 0px 15px rgba(0,0,0,0.15);
/*line-height: 100px;*/
background-color: #FFF;
height:100px;
font-size: 16px;
text-indent: 5px;
padding:10px 10px 0 10px;
}
#sro{
margin-top:5px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="content" id="content">
</div>
<div class="btn" id="stop">停止游戏</div>
<div class="btn" style="top:180px" id="start">开启游戏</div>
<!-- <div class="btn" style="top:430px" id="gameWay">游戏状态：</div> -->
<div class="rule">
<p class="title">游戏规则:</p>
<p class="rule_content">在规定时间内吃尽量多的恶魔果实，并避免碰墙和吃到自己。</p>
</div>
<div class="score" id="score" >分数：<p id="sro"></p></div>
<script type="text/javascript" >
//添加状态
var stop=document.getElementById('stop');
var start=document.getElementById("start");
var gameWay=document.getElementById('gameWay');
start.onclick=function(){
head.value='2';
incident=setInterval(move,200);
}
stop.onclick=function(){
clearInterval(incident);
}
//
var content=document.getElementById("content");
for(var i=0;i<100;i++){
var div=document.createElement("div");
div.className="colo";
content.appendChild(div);
}
var scoreId=document.getElementById("score");
var scoreNum=0;
var scoreCon=document.createElement("p");
// var scoreText=document.createTextNode(scoreNum);
// scoreCon.appendChild(scoreText);
scoreId.appendChild(scoreCon);
var head=null; //保存蛇头
var fruit=null; //保存果实
var dir=null; //保存蛇的方向
var body=new Array(); //保存蛇身体增加的部分
var bodyNum=0; //记录创建了多少个body
//随机创建head和fruit到content里面
function createType(type){
if(type==1){
//创建随机数
var row = parseInt(Math.random() * 6 +2);
var col = parseInt(Math.random() * 6 +2);
head=document.createElement("div");
head.className="head";
head.style.top=row*50+"px";
head.style.left=col*50+"px";
content.appendChild(head);
// head.style.top=;
// head.style.left=;
}
if(type==2){
//创建随机数
var row = parseInt(Math.random() * 6 +2);
var col = parseInt(Math.random() * 6 +2);
fruit=document.createElement("div");
fruit.className="fruit";
fruit.style.width="50";
fruit.style.height="50";
fruit.style.backgroundColor="#EA2000";
fruit.style.top=row*50+"px";
fruit.style.left=col*50+"px";
content.appendChild(fruit);
}
}
//调用创建的道具方法
createType(1);
createType(2);
//蛇头移动函数
var direction=new Array; //存每个新建Body的方向
//转换数
var numss=0;
//自动滑动事件
console.log();
function move(){
if(head.value!=""){
switch(head.value){
case '1':
head.style.top=head.offsetTop-50+"px";
break;
case '2':
head.style.top=head.offsetTop+50+"px";
break;
case '3':
head.style.left=head.offsetLeft-50+"px";
break;
case '4':
head.style.left=head.offsetLeft+50+"px";
break;
}
}
//头部越界的时候触发事件
if(head.offsetTop>=450||head.offsetTop<=0||head.offsetLeft>=450||head.offsetLeft<0){
alert("超出边界！请重新游戏");
//重新刷新头，身体和果实位置
resize();
}
//头部不能接触身体的任何部分和给身体赋value值
if(body.length!=0){
for(var i=body.length-1;i>=0;i--){
if(i==0){
body[0].value=head.value;
}else{
body[i].value=body[i-1].value;
}
}
for(var j=0;j<body.length;j++){
if(body[j].style.left==head.style.left&&body[j].style.top==head.style.top){
alert('头部不能接触身体的任何部分,请重新开始游戏');
resize();
}
}
}
//转换方向
//如果成功吃掉果实后事件
if(head.style.top==fruit.style.top&&head.style.left==fruit.style.left){
// for(var j=0;j<body.length;j++){
// var row = parseInt(Math.random() * 6 +2)*50;
// var col = parseInt(Math.random() * 6 +2)*50;
// if(body[j].style.top==row+"px"&&body[j].style.left==col+"px"){
// row = parseInt(Math.random() * 6 +2)*50;
// col = parseInt(Math.random() * 6 +2)*50;
// }
// }
var row = parseInt(Math.random() * 6 +2);
var col = parseInt(Math.random() * 6 +2);
fruit.style.top=row*50+"px";
fruit.style.left=col*50+"px";
//记录分数
scoreNum=scoreNum+1;
document.getElementById('sro').innerText="";
document.getElementById('sro').innerText=scoreNum;
//创建body部分
bodyAdd(head.style.top,head.style.left,head.value);
}
//控制body跟随head运动部分
//有身体的时候要动态改变body的值
if(body.length>0){
var body01=document.getElementById('body01');
body01.style.top=head.offsetTop+"px";
body01.style.left=head.offsetLeft+"px";
switch(head.value){
case '1':
body01.style.top=head.offsetTop+50+"px";
body01.style.left=head.offsetLeft+"px";
break;
case '2':
body01.style.top=head.offsetTop-50+"px";
body01.style.left=head.offsetLeft+"px";
break;
case '3':
body01.style.left=head.offsetLeft+50+"px";
body01.style.top=head.offsetTop+"px";
break;
case '4':
body01.style.left=head.offsetLeft-50+"px";
body01.style.top=head.offsetTop+"px";
break;
}
}
if(body.length>1){
body[bodyNum-1].value=body[bodyNum-2].value;
for(var i=1;i<body.length;i++){
var nu=i+1;
var bodyId=document.getElementById('body0'+nu);
var body_Id=document.getElementById('body0'+i);
bodyId.style.top=body_Id.offsetTop+"px";
bodyId.style.left=body_Id.offsetLeft+"px";
switch(body[bodyNum-(body.length-i)].value){
case '1':
bodyId.style.top=body_Id.offsetTop+50+"px";
bodyId.style.left=body_Id.offsetLeft+"px";
break;
case '2':
bodyId.style.top=body_Id.offsetTop-50+"px";
bodyId.style.left=body_Id.offsetLeft+"px";
break;
case '3':
bodyId.style.left=body_Id.offsetLeft+50+"px";
bodyId.style.top=body_Id.offsetTop+"px";
break;
case '4':
bodyId.style.left=body_Id.offsetLeft-50+"px";
bodyId.style.top=body_Id.offsetTop+"px";
break;
}
}
}
}
//清空状态，并初始化界面属性
function resize(){
var row1 = parseInt(Math.random() * 6 +2);
var col1 = parseInt(Math.random() * 6 +2);
var row2 = parseInt(Math.random() * 6 +2);
var col2 = parseInt(Math.random() * 6 +2);
head.style.top=row1*50+"px";
head.style.left=col1*50+"px";
head.id="head";
fruit.style.top=row2*50+"px";
fruit.style.left=col2*50+"px";
//清除身体部分并初始化变量
var newbody=document.getElementById('content');
var newbodys=document.getElementsByClassName('newbody');
var body_length=newbodys.length;
for(var i=0;i<body_length;i++){
newbody.removeChild(newbody.childNodes[103]);
}
bodyNum=0;
body=[];
clearInterval(incident);
}
//创建按钮时间
document.onkeydown=function(){
var code=event.keyCode;
switch (code){
//向上
case 38:
head.value='1';
break;
//向下
case 40:
head.value='2';
break;
//向左
case 37:
head.value='3';
break;
//向右
case 39:
head.value='4';
break;
case 32:
head.value='5'; //空格暂停
break;
}
}
//身体增加事件
function bodyAdd(top,left,dir){
if(dir!=""){
dir=dir;
}
else{
dir=head.value;
}
//首次创建body
if(bodyNum==0){
var newbody=document.createElement('div');
newbody.className="newbody";
newbody.id="body01";
switch (dir){
case '1':
newbody.style.top=head.offsetTop-50+'px';
newbody.style.left=head.offsetLeft+"px";
break;
case '2':
newbody.style.top=head.offsetTop+50+'px';
newbody.style.left=head.offsetLeft+"px";
break;
case '3':
newbody.style.left=head.offsetLeft-50+'px';
newbody.style.top=head.offsetTop+"px";
break;
case '4':
newbody.style.left=head.offsetLeft+50+'px';
newbody.style.top=head.offsetTop+"px";
break;
}
content.appendChild(newbody);
bodyNum=bodyNum+1;
body.push(newbody);
}else{
//第二次及多次创建
var newbody=document.createElement('div');
newbody.className="newbody";
newbody.id="body0"+(body.length+1);
switch (dir){
case '1':
newbody.style.top=body[body.length-1].offsetTop-50+'px';
newbody.style.left=body[body.length-1].offsetLeft+"px";
break;
case '2':
newbody.style.top=body[body.length-1].offsetTop+50+'px';
newbody.style.left=body[body.length-1].offsetLeft+"px";
break;
case '3':
newbody.style.left=body[body.length-1].offsetLeft-50+'px';
newbody.style.top=body[body.length-1].offsetTop+"px";
break;
case '4':
newbody.style.left=body[body.length-1].offsetLeft+50+'px';
newbody.style.top=body[body.length-1].offsetTop+"px";
break;
}
content.appendChild(newbody);
bodyNum=bodyNum+1;
body.push(newbody);
}
// body.push(content);
}
//超出边界，重置信息事件
function initialize(){
//重置果实
var row = parseInt(Math.random() * 6 +2);
var col = parseInt(Math.random() * 6 +2);
fruit.style.top=row*50+"px";
fruit.style.left=col*50+"px";
//记录分数
document.getElementsByTagName('p')[0].innerText="";
//重置贪食蛇
}
var incident;
incident=setInterval(move,200);
//附加操作
// var btn=document.getElementById('btn');
// btn.onclick=function(){
// clearInterval(incident);
// }
//
</script>
</body>
</html>可以到我的Github直接下载噢，谢谢
蛇的头部和身体，还有果实部分可以自由添加图片和背景颜色：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 项目中的一些Javascript应用实例
- 收集和在项目中用到的javascript
- javascript实现爱你在FF IE下都有效的添加一个项目
- javascript选择一个项目
- javascript日期星期的实现-项目中小应用
- 我在CodePlex上建的开源项目：JavaScript Lexer and Parser(欢迎加入)
- javascript实现爱你在FF IE下都有效的添加一个项目
- 项目实践之javascript技巧
- 最近看到的一些比较有趣的javascript开源项目
- 将javascript嵌入项目中
- 从javascript语言本身谈项目实战
- Yycom项目经验总结(ASP与JAVASCRIPT)
- (转载)javascript在项目中的应用
- 从javascript语言本身谈项目实战
- 从javascript语言本身谈项目实战
- 从javascript语言本身谈项目实战
- 从javascript语言本身谈项目实战
- 在项目中写一个 JavaScript 弹出窗口 通用类
- 移动项目开发笔记(改变页面JavaScript加载时的执行顺序(zt))
- 10个具体项目生动精彩讲述JavaScript；超级Web应用，构建不再困难