這是我第一個獨立完成的小遊戲，做完的時候發現遊戲不難，但是我還是寫了一天半，總之這是一個好的開始，好好加油，以後會更棒的！
<!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>