js實現貪吃蛇小遊戲代碼（源碼）
<html lang="en">
<head>
<meta charset="UTF-8">
<title>貪吃蛇遊戲</title>
</head>
<script type="text/javascript">
//定義一個點對象
function Point(x,y){
this.x=x;
this.y=y;
this.getX=function(){
return x;
}
this.getY=function(){
return y;
}
}
//定義方向變量
var startDir=null;//蛇移動方向
var food;//定義存儲食物節點的數組
var snakeloc;//定義一個存儲蛇身節點的數組
//初始化地圖
function initMap() {
var map = document.getElementById("map");//找到跟節點
for (var i = 0; i < 20; i++) {
var tr = document.createElement("tr");//創建節點
for (var j = 0; j < 20; j++) {
var td = document.createElement("td");//創建節點
td.setAttribute("id", "td" + i +"_"+ j);//設置id值 方便後續的查找 設置值
tr.appendChild(td);//添加節點
}
map.appendChild(tr);//加入值
}
}
//初始化蛇
function initSnake(){
snakeloc=[];
var x=10;//設置蛇的x節點 中點
var y=10;//設置蛇的y節點 中點
var dir;//保存蛇運動的方向
var tdm=document.getElementById("td"+x+"_"+y);
var tdl=document.getElementById("td"+x+"_"+(y-1));
var tdr=document.getElementById("td"+x+"_"+(y+1));
//設置點的值
var point1=new Point(x,y-1);
var point2=new Point(x,y);
var point3=new Point(x,y+1);
//將點對象放入數組中去
snakeloc.push(point3);
snakeloc.push(point2);
snakeloc.push(point1);
//設置顏色
tdr.style.background="red";//設置節點爲紅色
tdm.style.background="blue";//設置節點顏色
tdl.style.background="blue";//設置節點顏色
}
//初始化食物
function initFood(){
var foodX;
var foodY;
var flag=0;//定義次數
while(true){
foodX = Math.floor(Math.random() * 20);
foodY = Math.floor(Math.random() * 20);
for(var i=0;i<snakeloc.length;i++){
//如果不和數組中的所有點都不重合，說明這個點可以用
if(snakeloc[i].getX()==foodX&&snakeloc[i].getY()==foodY){
flag++;
break;
}
}
if(flag==0) break;
}
food=[ ];
food.push(new Point(foodX,foodY));//將食物座標放入數組中去
var td=document.getElementById("td"+foodX+"_"+foodY);
td.style.background="black";
}
//監聽蛇的移動
function snakeMove(){
document.onkeydown=function(e){
if(e.keyCode>=37&& e.keyCode<=40){
var currentDir= e.keyCode;
//看看是否要改變方向 如果沒有這一步可能會出現頭和身體重合
if(startDir-currentDir!=2&¤tDir-startDir!=2){
startDir=currentDir;
}
switch(startDir){
case 37:moveLeft();break;
case 38:moveUp();break;
case 39:moveRight();break;
case 40:moveDown();break;
default:break;
}
}
if(eatFood()){
initFood();//就再創建一個食物
}else{
clearSnakeEnd();//清除蛇尾
}
//如果撞牆或者咬到自己
if(gameOver()){
alert("Game Over!");
return;
}
updateSnake();//調用顯示蛇
}
}
//向上移動
function moveUp(){
var oldHead=snakeloc[0];//舊蛇頭位置
//更新蛇座標
for (var i = snakeloc.length ; i > 0; i--) {
snakeloc[i] = snakeloc[i - 1];
}
snakeloc[0]=new Point(oldHead.getX()-1,oldHead.getY());
}
//向下移動
function moveDown(){
var oldHead=snakeloc[0];//舊蛇頭位置
//更新蛇座標
for (var i = snakeloc.length ; i > 0; i--) {
snakeloc[i] = snakeloc[i - 1];
}
snakeloc[0]=new Point(oldHead.getX()+1,oldHead.getY());
}
//向左移動
function moveLeft(){
var oldHead=snakeloc[0];//舊蛇頭位置
//更新蛇
for (var i = snakeloc.length ; i > 0; i--) {
snakeloc[i] = snakeloc[i - 1];
}
snakeloc[0]=new Point(oldHead.getX(),oldHead.getY()-1);
}
//向右移動
function moveRight(){
var oldHead=snakeloc[0];//舊蛇頭位置
//更新蛇
for (var i = snakeloc.length ; i > 0; i--) {
snakeloc[i] = snakeloc[i - 1];
}
snakeloc[0]=new Point(oldHead.getX(),oldHead.getY()+1);
}
//消除蛇尾 即將它的顏色消掉
function clearSnakeEnd(){
var end=snakeloc.pop();//清楚蛇尾 返回蛇尾座標
var td=document.getElementById("td"+end.getX()+"_"+end.getY());
td.style.background="";//設置爲一個字符串 即沒有顏色
}
//更新蛇 顯示蛇
function updateSnake(){
for(var i=1;i<snakeloc.length;i++){
var td=document.getElementById("td"+snakeloc[i].getX()+"_"+snakeloc[i].getY());
td.style.background="blue";
}
var th=document.getElementById("td"+snakeloc[0].getX()+"_"+snakeloc[0].getY());
th.style.background="red";
}
//檢測蛇是否吃到食物
function eatFood(){
var foodX=food[0].getX();
var foodY=food[0].getY();
var headX=snakeloc[0].getX();
var headY=snakeloc[0].getY();
if(foodX==headX&&foodY==headY){
return true;
}
return false;
}
//遊戲結束情況
function gameOver(){
//死的第一種情況 撞牆而死
var headX=snakeloc[0].getX();
var headY=snakeloc[0].getY();
if(headY>19||headY<0||headX<0||headX>19){
return true;
}
//死的第二種情況 咬死自己
for(var i=1;i<snakeloc.length;i++){
var ele=snakeloc[i];
if(ele.getX()==snakeloc[0].getX()&&ele.getY()==snakeloc[0].getY()){
return true;
}
}
return false;
}
</script>
<body>
<table id="map" border="3" align="center" width="500px" height="500px" style="border-collapse:collapse;">
<caption style="color: red;font-size: larger;">貪吃蛇遊戲</caption>
</table>
</body>
<script type="text/javascript">
snakeMove();//移動方法的調用
initMap();//初始化地圖
initSnake();//初始化蛇
initFood();//初始化食物
snakeMove();//移動
</script>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.