js實現貪吃蛇小遊戲（加牆）
阿新 • • 發佈：2020-07-31
本文例項為大家分享了js實現貪吃蛇小遊戲的具體程式碼，供大家參考，具體內容如下
1.貪吃蛇的規則
作為一款經典遊戲，很多人玩他其實就是一種懷念。但是他不應該那麼單一，應該有更多新的元素出現。然後我是個新手，希望我以後繼續學習的途中能夠再次回頭重寫一遍貪吃蛇。他的規則是;a.超出邊界會死 b.碰到自身會死 c.吃食物會變長。
值得注意的是：1.在函式裡所呼叫的函式的順序很重要。2.<script src="mygame2.js"></script>必須在<canvas>的下面。
2.實現圖：
3.HTML的程式碼：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>貪吃蛇第二版</title>
<link rel="stylesheet" href="mygame2.css" rel="external nofollow" type="text/css">
</head>
<body >
<div class="container">
<div class="center">
<h1>snake</h1>
<canvas id="myCanvas"></canvas>
<script src="mygame2.js"></script>
</div>
</div>
</body>
</html>4.CSS的程式碼（mygame2.css）:
*{
padding: 0;
margin: 0;
}
.container
{
text-align:center;
}
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
}
#myCanvas
{
border-style:solid;
border-color:#A9A9A9;
background-color: #E0FFFF;
}
5.js的程式碼（mygame2.js）
/**
* Created by Administrator on 2017/6/30.
*/
//畫布
var cvs=document.getElementById("myCanvas");
var cxt=cvs.getContext("2d");
cvs.height=600;
cvs.width=800;
var Snakesize=20;
var cvsCridx=cvs.width/Snakesize;//格子化
var cvsCridy=cvs.height/Snakesize;
var length=0;
var wall_length=0;
var Snakebady=[];
var dre =2;
var food = {};
var direFlag = 0;//程式存在的bug，按上左會重新整理介面，用標記解決
var speed=0;
var wall=[];
//初始化
function init()
{
Snakebady=[];
length=0;
dre =2;
for(var i= 0;i<3;i++)
{
CreateSnakeNode(parseInt(cvsCridx/2)+i,parseInt(cvsCridy/2));
}
drawSnake();
putfood();
}
//放蛇身
function CreateSnakeNode(x,y)
{
Snakebady.push({x:x,y:y,color:length===0 ? "#000000" : "#778899" });
length ++;
}
//繪製蛇身（連續的蛇點）
function drawSnake()
{
cxt.clearRect(0,cvs.width,cvs.height);
for( i=0; i<Snakebady.length; i++)
{
drawRect(Snakebady[i]);
}
drawRect(food);
wall_location();
}
//繪製單個蛇點
function drawRect(Snakenode)
{
cxt.beginPath();
Snakesize = 20;
cxt.fillStyle = Snakenode.color;
cxt.fillRect(Snakenode.x * Snakesize,Snakenode.y * Snakesize,Snakesize,Snakesize);//蛇的形狀為方形
//cxt.arc(Snakenode.x * Snakesize,12,Math.PI*2,true);//蛇的形狀為圓形
cxt.strokeStyle="#484848";
cxt.lineWidth = 4;
cxt.stroke();
cxt.closePath();
cxt.fill();
}
//繪製牆
function drawwall (x,y)
{
wall.push({x:x,color:"#FFFF00"});
wall_length++;
cxt.beginPath();
cxt.fillRect(Snakesize *x,Snakesize *y,Snakesize);
cxt.fillStyle = wall.color;
cxt.strokeStyle="#484848";
cxt.lineWidth = 2;
cxt.stroke();
cxt.closePath();
cxt.fill();
}
//牆的位置
function wall_location()
{
var i,j;
for( i= 2,j= 5;i<15;i++)
{drawwall(i,j);}
for( i=25,j=5;i<38;i++)
{drawwall(i,j);}
for( j= 6,i=14;j<15;j++)
{drawwall(i,i=25;j<15;j++)
{drawwall(i,j);}
for( i= 9,j=17;j<26;j++)
{drawwall(i,j);}
for(i=29,j);}
for(i=10,j=25;i<29;i++)
{drawwall(i,j);}
}
//放置食物，不超過畫布，不放在蛇身上,不能放在牆上
function putfood()
{
var flog=1;
while(1)
{
flog=1;
var foodx = parseInt(Math.random()*cvsCridx);
var foody = parseInt(Math.random()*cvsCridy);
for(var i = 0; i < Snakebady.length; i ++)
{if(Snakebady[i].x === foodx && Snakebady[i].y === foody) flog = 0;}
for(var j=0; j<wall_length ; j++)
{
if(wall[j].x === foodx && wall[j].y === foody)
flog = 0;
}
if(flog) break;
}
food = {x: foodx,y: foody,color: '#B00000'};
}
//先用alert讀出位置的ASCLL的值，然後再重新賦值進行定義
document.onkeydown = function(e){
if(direFlag) return;
e.preventDefault();//清除頁面的滑動帶來的上下鍵的操作
if(e.keyCode===38|| e.keyCode===87) setDirection(1);//上
if(e.keyCode===40|| e.keyCode===83) setDirection(-1);//下
if(e.keyCode===37|| e.keyCode===65) setDirection(2);//左
if(e.keyCode===39|| e.keyCode===68) setDirection(-2);//右
if(e.keyCode ===32) speed=100;//****
}
//蛇的移動
function SnakeMove()
{
var newSnakebady={x:Snakebady[0].x,y:Snakebady[0].y,color:Snakebady[0].color};//改變後蛇頭的座標，不能直接賦值
if(dre === 1)newSnakebady.y -=1;//蛇頭根據鍵盤事件上下左右移動
if(dre === -1) newSnakebady.y +=1;
if(dre === 2) newSnakebady.x -=1;
if(dre === -2) newSnakebady.x +=1;
for(var i=Snakebady.length-1;i>0;i--)//蛇身的更替，用後一個位置等於前一個位置的座標
{
Snakebady[i].x=Snakebady[i-1].x;
Snakebady[i].y=Snakebady[i-1].y;
if(Snakebady[i].x===newSnakebady.x&&Snakebady[i].y===newSnakebady.y)//判斷撞自己
return goend();
}
Snakebady[0]=newSnakebady;
direFlag = 0;
boundary(Snakebady[0]);
isgetfood(Snakebady[0]);
strike_wall();
}
//得到食物後的蛇身在最後面加上一個蛇點
function isgetfood(nood)
{
if(nood.x===food.x&&nood.y===food.y)
{
putfood();
Snakebady.push({x:Snakebady[Snakebady.length-1].x,y:Snakebady[Snakebady.length-1].y,color:"#778899"});//增加蛇身
}
}
//判斷牆
function strike_wall()
{
for(var i=0;i<wall_length;i++)
{
for(var j=0;j<length;j++)
{
if(Snakebady[j].x === wall[i].x && Snakebady[j].y === wall[i].y)
return goend();
}
}
}
//判斷邊界
function boundary(node)
{
if(node.x < 0 || node.x > cvsCridx - 1 || node.y < 0 || node.y > cvsCridy - 1) goend();
}
//進行鍵位判斷
function setDirection(dir){
direFlag = 1;
if(Math.abs(dir)===Math.abs(dre)) return;//往上不能往下
dre=dir;
}
//*******
function goend()
{
init();
}
init();
speed=200-speed;//****
setInterval(function(){
SnakeMove();drawSnake();},150);//定時器，讓蛇移動起來，可以設定他的速度。以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。