貪吃蛇

貪吃蛇

原創

2020-02-23 13:28

覺得javascript語言挺重要的，想借寫遊戲的方式來學習javascript，這樣來可使學習枯燥的理論有趣點，那就從寫貪吃蛇遊戲開始。以後還會寫寫其他遊戲。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>貪吃蛇</title> </head> <body> <mce:script language="javascript"> Sxhead=parseInt(Math.random()*10); //蛇頭的位置，橫座標 Syhead=parseInt(Math.random()*10); //蛇頭的位置，縱座標 var rows=10; //地圖行數 var cols=10; //地圖列數 var nodes=new Array(); //蛇身的節點 nodes.unshift(Syhead); nodes.unshift(Sxhead); GoX=0; //蛇移動方向，橫座標 GoY=0; //蛇移動方向，縱座標 var startGame=0; //遊戲開始標記 var eatFoodNum=0; //吃到食物個數 var gameSpeed=1000; var gameTime=0; //遊戲時間 var tm=0; var Map=new Array(); function createSnakeHead(Sxhead,Syhead) { //創建蛇頭節點 SnakeHead="node"+Sxhead+Syhead; //alert(SnakeHead); node=document.getElementById(SnakeHead); //alert(node); //node=document.getElementbyid(SnakeHead); //alert("Sxhead:"+Sxhead+",Syhead:"+Syhead); node.style.background="#000000"; Map[Syhead][Sxhead]='S'; } function removeSnakeTail(Sxtail,Sytail) {  SnakeTail="node"+Sxtail+Sytail; node=document.getElementById(SnakeTail); node.style.background="#ffffff"; Map[Sytail][Sxtail]='0'; } function checkRange() //判斷蛇頭是否出了範圍 { if(Sxhead<0) Sxhead=9; else if(Sxhead>9) Sxhead=0; if(Syhead<0) Syhead=9; else if(Syhead>9) Syhead=0; } function checkFront(frontx,fronty) //檢查蛇前進方向的情況，遇到食物或空地或自身 { if(Map[fronty][frontx]=='0') return '0'; else if(Map[fronty][frontx]=='F') return 'F'; else if(Map[fronty][frontx]=='S') return "over"; } function advance() //蛇前進 { Sxhead+=GoX; //蛇頭位置，橫座標 Syhead+=GoY; //蛇頭位置，縱座標 checkRange(); returnVal=checkFront(Sxhead,Syhead); if(returnVal=='0') //未遇到任何東西 { nodes.unshift(Syhead); //將蛇頭位置縱座標插入數組開始位置 nodes.unshift(Sxhead); //將蛇頭位置橫座標插入數組開始位置 createSnakeHead(Sxhead,Syhead); Sytail=nodes.pop(); Sxtail=nodes.pop(); removeSnakeTail(Sxtail,Sytail); str=nodes.toString(); } else if(returnVal=='F') //遇到食物 { eatFoodNum+=1; //食物個數加一 gameSpeed=gameSpeed-20; updataSorce(); //更新記分牌 nodes.unshift(Syhead); //將蛇頭位置縱座標插入數組開始位置 nodes.unshift(Sxhead); //將蛇頭位置橫座標插入數組開始位置 createSnakeHead(Sxhead,Syhead); createFood(); } else if(returnVal=='over') { ReStart=window.confirm("Game Over,重新開始?"); if(ReStart) window.location.reload(); else startGame=0; //遊戲結束 } } function changeDirection(x,y) //改變蛇前景方向 { GoX=x; GoY=y; } function createFood() //創建食物 { foodx=parseInt(Math.random()*10); foody=parseInt(Math.random()*10); while(Map[foody][foodx]=='S') //生成食物的位置不與蛇衝突位置衝突 { foodx=parseInt(Math.random()*10); foody=parseInt(Math.random()*10); } idStr="node"+foodx+foody; n=document.getElementById(idStr); n.style.background="yellow"; Map[foody][foodx]='F'; } function createMap() {  document.write('<table><tr><td>食物個數：</td><td id="sorce">0</td></tr><tr><td>時間：</td><td id="gametimeid">0s</td></tr></table>'); document.write('<div id="MainMap" style="border:#FF0000 2px groove;width:502px; height:502px; position:absolute"></div>'); for(i=0;i<10;i++) //縱座標 { Map[i]=new Array(); for(j=0;j<10;j++) //橫座標 { nodeid="node"+j+i; MainMap.innerHTML+='<div id='+nodeid+' style="border:#FF0000 1px groove;width:50px; height:50px; background:#ffffff; left:'+j*50+'px; top:'+i*50+'px; position:absolute;"></div>'; Map[i][j]='0'; } } } function move() { advance(); if(startGame) setTimeout('move()',gameSpeed); } function keydown() { switch(event.keyCode) { case 37: if(GoX!=1) changeDirection(-1,0); //蛇向左行進 break; case 38: if(GoY!=1) changeDirection(0,-1); //蛇向上行進 break; case 39: if(GoX!=-1) changeDirection(1,0); //蛇向右行進 break; case 40: if(GoY!=-1) changeDirection(0,1); //蛇向下行進 break; } if(startGame==0) { startGame=1; move(); updataGameTime() } return false; } function updataSorce() //更新遊戲分數 { sorce.childNodes[0].nodeValue=eatFoodNum; } function updataGameTime() //更新遊戲時間 { gametimeid.childNodes[0].nodeValue=gameTime+"s"; gameTime+=1; if(startGame) setTimeout('updataGameTime()',1000); } createMap(); createSnakeHead(Sxhead,Syhead); createFood(); document.οnkeydοwn=keydown; // --></mce:script> </body> </html>

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

公司剛入職了一名 Java 中級開發，短短 4 行代碼居然湊齊了 3 個 bug！我哭了~~

Nginx R31 doc-13-Limiting Access to Proxied HTTP Resources 訪問限流

python包：pandas

中外程序員到底有啥區別？

Python數據分析與挖掘實戰（5章）

一、什麼是Docker

C++文件/流

二、Docker 組件

揹包九講一 01揹包

今天！通義靈碼在北京、成都、杭州三城開講啦

Stripe跳轉支付,跳轉結算

zencart pingpong支付接口 v2

zencart單站多paypal賬號條件輪換

php5.2+apache2.8+mysql5+phpmyadmin2.9安裝及配置

IEEE 754 浮點數的表示精度探討

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結