一、项目介绍
- 功能：
- （1）、开始界面点击开始，进入游戏界面
- （2）、按上下左右键来控制食物运动得方向
- （3）、控制一次以后方向确定蛇会一直游动
- （4）、食物随机产生
- （5）、当蛇头和食物碰撞后食物位置变动，蛇身加长，游戏分数加1
- （6）、蛇头碰到墙壁或者自己游戏结束，按确认后游戏重新开始
二、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>贪吃蛇</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/index.js"></script>
</head>
<body>
<!--主界面-->
<div id="timu">贪吃蛇游戏</div>
<div class="box" id="box">
<a href="javascript:void(0)" id="shw"> <img src="images/start.png" alt="" ></a>
<div class="snake" id="snake">
<div class="snake_head" id="snake_head"></div>
<div class="snake_body1 snake_body"></div>
<div class="snake_body2 snake_body"></div>
<div class="snake_body3 snake_body"></div>
</div>
</div>
<div id="score"> 总分：<span id="scorecontent">0</span></div>
</body>
</html>
/*初始化*/
*{
margin: 0px;
padding: 0px;
}
body{
width: 100%;
height: 100%;
background: url("../images/bg.jpg") repeat;
}
/*题目*/
#timu{
width: 300px;
height: 50px;
margin: 0 auto;
font-size:50px;
font-weight: bolder;
color: white;
text-shadow: -1px 3px #b3d4fc;
text-align: center;
}
/*开始按钮位置*/
.box{
width: 1000px;
height: 500px;
margin: 50px auto;
border: 5px solid #ccc;
position: relative;
}
#shw{
display: block;
position: relative;
left:50%;
top:50%;
transform: translate(-100px,-75px);
}
#shw>img{
width: 200px;
height: 150px;
}
/*蛇*/
.snake{
display: none;
}
.snake>div{
width: 20px;
height: 20px;
border-radius: 50%;
}
.snake_body,.snake_head{
position: absolute;
background: yellow;
}
.snake_head{
background: red;
left: 500px;
top:180px;
}
.snake_body{
top:180px;
}
.snake_body1{
left:520px;
}
.snake_body2{
left:540px;
}
.snake_body3{
left:560px;
}
/*创建的蛇身*/
.creatbody{
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
background:yellow;
}
/*食物*/
.food{
width: 20px;
height: 20px;
background: pink;
border-radius: 50%;
position: absolute;
}
/*蛇10px一格*/
/*分数*/
#score{
display: none;
width: 200px;
height: 50px;
position: absolute;
bottom: 50px;
right: 100px;
font-weight: bold;
font-size: 20px;
}
//关于游戏内容
//（1）在开始的以后，食物和蛇出现
//（2）对象有蛇和食物两个
/*---------------------控制键盘的上下左右键来控制蛇移动----------------------
* (1)、键盘控制方向
* （2）、方向定了之后一直运动(定时器)
* （3）、可以暂停（space是暂停）（暂停定时器）
*（4）上下左右键控制方向 space暂停37-40从左 上 右 下
*
* */
/*
------------以后补充功能--------------------
（1）多食物
（2）有多个速度可供选择
*/
// 当蛇的头部和蛇碰撞此时这个食物消失，另外生成一个事物，并且分数加1，蛇身加一节
// 开始的js
//全局变量s
//snake是蛇实例化 snake1是界面的蛇
//------------------------全局变量---------------------
var snakeHead=null, snake1 ,snakeArr=[],snake=null;
var box;
var data=[{x:500,y:180},{x:520,y:180},{x:540,y:180},{x:560,y:180}];//存蛇身
var timeId=null;//运动的定时器的id
var x,y;//蛇的位置
var food;//食物的对象
var SumScore=0,scoreContent;
var flag;
//----------------入口代码----------------------
window.onload=function () {
snake=new Snake();
food1=new Food();
Show();
for(var i=0;i<snake1.children.length;i++)
{
snakeArr.push(snake1.children[i]);
}
//移动
snake.move();
}
//模块化
//---------------------1、模块化开始界面-----------------------------
function Show() {
var sho=document.getElementById('shw');
var score=document.getElementById('score');
snake1=document.getElementById('snake');
snakeHead=document.getElementById('snake_head');
box=document.getElementById('box');
scoreContent=document.getElementById('scorecontent');
sho.onclick=function () {
this.style.display='none';
score.style.display='block';
snake1.style.display='block';
food1.creatFood();
}
}
//------------------------------------蛇对象---------------------------
function Snake(){
// 1------------------ 蛇移动-------------------------------
this.move=function () {
document.onkeydown=function (event) {
event=event||window.event;
var decroation=event.keyCode;
switch (decroation) {
case 37:
snakeHead.style.left=snakeHead.offsetLeft-20+'px';
snake.remove();
//重复移动
sport(decroation);
break;
case 38:
snakeHead.style.top=snakeHead.offsetTop-20+'px';
snake.remove();
sport(decroation);
break;
case 39:
snakeHead.style.left=snakeHead.offsetLeft+20+'px';
snake.remove();
sport(decroation);
break;
case 40:
snakeHead.style.top=snakeHead.offsetTop+20+'px';
snake.remove();
sport(decroation);
break;
case 32:
clearInterval(timeId);
break;
}
}
this.remove=function () {
// 移动
snake.died();
for(var i=1;i<snakeArr.length;i++)
{
snake1.children[i].style.left=data[i-1].x+'px';
snake1.children[i].style.top=data[i-1].y+'px';
if(Math.abs(x-data[0].x)<=20&&Math.abs(y-data[i].y)<=20)
{
console.log();
food1.change();
//新建的位置
snake.creat();
}
}
//刷新移动后的距离
for(var j=0;j<snakeArr.length;j++)
{
data[j].x=snake1.children[j].offsetLeft;
data[j].y=snake1.children[j].offsetTop;
}
}
//-----------------判断是否失败----------------
// （1）,撞墙，撞自己
this.died=function () {
// (1)、撞墙
if(data[0].x<20 || data[0].x>960 ||data[0].y<20 ||data[0].y>500)
{
flag=confirm(` 总分数:${SumScore}分 碰到墙壁 game over ！！！！是否重新开始`);
console.log(flag);
if(flag)
{
location.reload(true);
}
clearInterval(timeId);
return false;
}
// 头碰到身体giveover
for(var z=1;z<data.length;z++)
{
if(Math.abs(data[0].x-data[z].x)<20 && Math.abs(data[0].y-data[z].y)<20)
{
flag=confirm(` 总分数:${SumScore}分 撞到自己 game over ！！！！是否重新开始`);
console.log(flag);
if(flag)
{
location.reload(true);
}
clearInterval(timeId);
return false;
}
}
}
}
//------------------------------ 蛇身加长创建------------------------------------
this.creat=function () {
SumScore+=1;
var div=document.createElement('div');
div.className='creatbody';
div.style.left=data[data.length-2].x+'px';
div.style.top=data[data.length-2].y+'px';
snake1.appendChild(div);
//分数
scoreContent.innerText=SumScore;
console.log(snake1);
snake.remove();
snakeArr.push(div);
data.push({x:data[data.length-1].x,y:data[data.length-1].y});
}
}
//如果确定好方向一直走
//------------------------蛇一直运行---------------------------------
function sport(decroation) {
if(timeId!=null)
{
clearInterval(timeId);
}
timeId=setInterval(function () {
switch (decroation) {
case 37:
snakeHead.style.left=snakeHead.offsetLeft-20+'px';
snake.remove();
break;
case 38:
snakeHead.style.top=snakeHead.offsetTop-20+'px';
snake.remove();
break;
case 39:
snakeHead.style.left=snakeHead.offsetLeft+20+'px';
snake.remove();
break;
case 40:
snakeHead.style.top=snakeHead.offsetTop+20+'px';
snake.remove();
break;
}
},100);
}
//-----------------食物---------------------
function Food() {
/* // 食物的位置width: 1000/20=50; x:0-49
height: 500/20=25; y:0-24
*/
x=parseInt(Math.random()*49)*20;
y=parseInt(Math.random()*24)*20;
this.creatFood=function () {
food=document.createElement('div');
food.className='food';
food.style.left=x+'px';
food.style.top=y+'px';
box.appendChild(food);
}
this.change=function () {
x=parseInt(Math.random()*49)*20;
y=parseInt(Math.random()*24)*20;
food.style.left=x+'px';
food.style.top=y+'px';
}
}
扫一扫
164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
