这是我第一个独立完成的小游戏,做完的时候发现游戏不难,但是我还是写了一天半,总之这是一个好的开始,好好加油,以后会更棒的!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>贪食蛇小游戏</title>
<style>
*{
margin: 0;
padding: 0;
}
p{
font-size: 0;
/* -webkit-text-size-adjust:none;*/
}
#maindiv{
border-top: 1px grey solid;
border-left: 1px grey solid;
background-color: bisque;
position: absolute;
display: inline-block;
top: 10px;
left: 400px;
}
.snack{
border-width: 0;
background-color: darkorchid;
position: absolute;
}
a{
display:inline-block;
margin: 0;
border-right: 1px solid grey;
border-bottom: 1px solid grey;
width: 29px;
height: 29px;
background-color: aqua;
}
label,button{
position: absolute;
display: block;
width: 120px;
height: 80px;
font-size: large;
font-weight: bold;
}
#start{
top: 500px;
left: 500px;
}
#enddiv{
display: block;
position: absolute;
top: 150px;
left: 500px;
background-color: #cccccc;
}
#endbt{
display: none;
}
#explanation{
position: absolute;
top: 10px;
left: 10px;
width: 350px;
height: 200px;
font-size:50px;
}
</style>
</head>
<body>
<div id="maindiv">
<table id="ta"></table>
</div>
<div id="enddiv">
<button id="endbt">重新开始</button>
</div>
<div id="explanation">游戏说明<br>上下左右键控制<br>其余键暂停</div>
<button id="start" onclick="begin()">点击开始</button>
<script>
var set;
var ss=new Array();//snake的数组
var maindiv;
var n=37;//初始化方向
var ricex,ricey;//食物的位置
var myrice;//食物
var len;//记录成绩
var body;
var endbt;//重新开始按钮
var enddiv;//结束的块
var start;
var flag;
//产生0到10的随机数,返回30的倍数
function random() {
var x=Math.floor(Math.random()*11);
return x*30;
}
//食物的构造函数
function rice (X,Y){
this.node=null;
this.init=function () {
this.node=document.createElement("a");
this.node.style.left=1+X+"px";
this.node.style.top=1+Y+"px";
this.node.className="snack";
maindiv.appendChild(this.node);
}
this.init();
}
function check(x,y) {
if(x<1||x>331||y<1||y>331) return true;
for(var i=0;i<ss.length;i++)
{
if(x==ss[i].node.offsetLeft&&y==ss[i].node.offsetTop)
return true;
}
return false;
}
function END() {
// alert("end");
clearInterval(set);
body.removeEventListener("keypress",MOVE,true);
endbt.innerHTML="您的得分为"+len*100;
endbt.style.display="block";
}
function f() {
var x=random();var y=random();
for (var i = 0; i < ss.length; i++) {
if (x+1 == ss[i].node.offsetLeft && y +1== ss[i].node.offsetTop) {
f();//递归调用,保证不会和蛇的身体重合
}
}
if(ricex!=0&&ricey!=0) return ;
ricex=x;
ricey=y;
return ;
}
function addrice(X,Y) {
rice.call(this,X,Y);
this.node.style.backgroundColor="pink";
}
function snakemove()
{
var startl=ss[0].node.offsetLeft;
var startt=ss[0].node.offsetTop;
var nextl,nextt;
//改变位置
if(n==37) {//left 把最后一个块放在前面
nextl=startl-30;
nextt=startt;
}
else if(n==38){//up
nextl=startl;
nextt=startt-30;
}
else if(n==39) {//right
nextl=startl+30;
nextt=startt;
}
else if(n==40){//down
nextl=startl;
nextt=startt+30;
}
if(check(nextl, nextt)) END();
//吃到一个食物,记得放新食物
if(nextl==ricex+1&&nextt==ricey+1)
{
len++;
myrice.node.style.backgroundColor="darkorchid";
ss.unshift(myrice);
ricex=0;
ricey=0;
f();
myrice=new addrice(ricex,ricey);
}
else{
var last=ss.pop();
maindiv.removeChild(last.node);
last.node.style.left=nextl+"px";
last.node.style.top=nextt+"px";
ss.unshift(last);
maindiv.appendChild(last.node);
}
// alert(ss.length);
}
function MOVE(e) {
if(e.keyCode==37||e.keyCode==38||e.keyCode==39||e.keyCode==40)
{
n=e.keyCode;
}
else
{
if(flag==true)
{
flag=false;
clearInterval(set);
}
else
{
flag=true;
set=setInterval(snakemove,300);
}
}
}
//运行的函数
var begin=function () {
var res="";
ricex=0;
ricey=0;
flag=true;
for(var i=0;i<12;i++)
{
res+="<p>";
for(var j=0;j<12;j++)
{
res+="<a></a>";
}
res+="</p>";
}
maindiv=document.getElementById("maindiv");
maindiv.innerHTML=res;
//界面完成后初始化方块1
var my=new rice(random(),random());
ss.push(my);
len=0;
//******************以上为显示表格,并且声明变量
// 初始化一个食物
f();
myrice=new addrice(ricex,ricey);
//增加监听器
body=document.getElementsByTagName("body")[0];
enddiv=document.getElementById("enddiv");
endbt=document.getElementById("endbt");
start=document.getElementById("start");
start.style.display="none";
if(window.addEventListener){
body.addEventListener("keydown",MOVE,true);
}
else if(window.attachEvent)
{
body.attachEvent("onkeydown",MOVE);
}
else {
body.onkeydown=MOVE;
}
enddiv.addEventListener("click",function (e) {
location.reload(true);
},true);
set= setInterval(snakemove,300);
}
</script>
</body>
</html>