溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了用html5實現的貪吃蛇特效的案例，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
<html>
<head>
<meta charset='utf-8'/>
<title>Snake</title>
</head>
<body>
<canvas id="plank" style="border"></canvas>
<script type="text/javascript">
//內置大量BUG，I'm sorry.
var lev=100; //定時器間隔時間
var num=30; //網格大小，現在是30x30
var direction=3; //0:up 1:down 2:left 3:right
var handle; //用于管理定時器
var score=0; //分數
var pause=true; //暫停使用
var canvas = document.getElementById('plank');
var context = canvas.getContext('2d');
var snakex=new Array(); //存儲蛇身x坐標，下同
var snakey=new Array();
var prize=new Array(-1,-1); //食物的位置
function rand(){ //產生隨機數
return parseInt(Math.random()*num);
}
function chk(x,y){ //檢查是否結束，包括越界
if(x<0||y<0) return false;
if(x>num-1||y>num-1) return false;
for (var i=0; i!=snakex.length-1;i++) {
if(snakex[i]==x&&snakey[i]==y) {return false;}
};
return true;
}
function drawScore(text){ //打印分數
context.clearRect(0,0,300,25);
context.fillText("Score:"+text,5,5);
}
function makeprize(){ //產生食物的位置
var flag=false;
var prizepre=new Array(2); //使用鏈表會更好
while(!flag){ //食物位置不能在蛇體內
flag=true;
prizepre[0]=rand();prizepre[1]=rand();
for (var i=0; i!=snakex.length;i++) {
if((snakex[i]==prizepre[0])&&(snakey[i]==prizepre[1])) {flag=false;}
}
}
prize=prizepre;
}
function runscore(x,y){ //判斷是否吃到食物，并做處理
if(prize[0]==x&&prize[1]==y){
score=score+1;
drawScore(score);
snakex[snakex.length]=prize[0];
snakey[snakey.length]=prize[1];
makeprize();
drawNode(prize[0],prize[1]);
return true;
}
return false;
}
function run(){ //定時器用來判斷snake行進方向等等
switch(direction){ //方向
case 0: snakex[snakex.length]=snakex[snakex.length-1];snakey[snakey.length]=snakey[snakey.length-1]-1;break;
case 1: snakex[snakex.length]=snakex[snakex.length-1];snakey[snakey.length]=snakey[snakey.length-1]+1;break;
case 2: snakex[snakex.length]=snakex[snakex.length-1]-1;snakey[snakey.length]=snakey[snakey.length-1];break;
case 3: snakex[snakex.length]=snakex[snakex.length-1]+1;snakey[snakey.length]=snakey[snakey.length-1];break;
}
if(!runscore(snakex[snakex.length-1],snakey[snakey.length-1])){
if(chk(snakex[snakex.length-1],snakey[snakey.length-1])==false) {
clearInterval(handle);
drawScore('\\tGame over');
return;
}
drawNode(snakex[snakex.length-1],snakey[snakey.length-1]);
}
clearNode(snakex[0],snakey[0]);
snakex.shift();
snakey.shift();
}
function drawNode(x,y){ //畫點，共30X30個點（10*10像素算1個點）
context.fillRect(x*10+1,y*10+31,10,10);
}
function clearNode(x,y){
context.clearRect(x*10+1,y*10+31,10,10);
}
function init(){ //初始化，設置畫布大小，啟動定時器等等
canvas.width = 510;
canvas.height = 600;
context.font = "normal 20px Airl";
context.textBaseline = "top";
context.fillText('P鍵開始/暫停，方向鍵控制',0,350);
drawScore('');
context.strokeRect(0,30,302,302);
makeprize();
drawNode(prize[0],prize[1]);
snakex[0]=0;snakex[1]=1;snakex[2]=2;
snakey[0]=0;snakey[1]=0;snakey[2]=0;
drawNode(snakex[0],snakey[0]);drawNode(snakex[1],snakey[1]);drawNode(snakex[2],snakey[2]);
}
document.onkeydown=function(event){ //注冊鍵盤事件，up，down，left，right，暫停鍵p
var e = event || window.event;
if(e&&e.keyCode==38){
direction=0;
}
if(e&&e.keyCode==40){
direction=1;
}
if(e&&e.keyCode==37){
direction=2;
}
if(e&&e.keyCode==39){
direction=3;
}
if(e&&e.keyCode==80){
if(pause) {pause=false;handle=setInterval(run,lev);}
else {pause=true;clearInterval(handle);}
}
}
init();
</script>
</body>
</html>感謝你能夠認真閱讀完這篇文章，希望小編分享用html5實現的貪吃蛇特效的案例內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
