js實(shí)現(xiàn)貪吃蛇小游戲（加墻）
本文實(shí)例為大家分享了js實(shí)現(xiàn)貪吃蛇小游戲的具體代碼，供大家參考，具體內(nèi)容如下
1.貪吃蛇的規(guī)則
作為一款經(jīng)典游戲，很多人玩他其實(shí)就是一種懷念。但是他不應(yīng)該那么單一，應(yīng)該有更多新的元素出現(xiàn)。然后我是個(gè)新手，希望我以后繼續(xù)學(xué)習(xí)的途中能夠再次回頭重寫一遍貪吃蛇。他的規(guī)則是;a.超出邊界會(huì)死 b.碰到自身會(huì)死 c.吃食物會(huì)變長。
值得注意的是：1.在函數(shù)里所調(diào)用的函數(shù)的順序很重要。2.<script src='http://www.aoyou183.cn/bcjs/mygame2.js'></script>必須在<canvas>的下面。
2.實(shí)現(xiàn)圖：
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='http://www.aoyou183.cn/bcjs/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='http://www.aoyou183.cn/bcjs/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，按上左會(huì)刷新界面，用標(biāo)記解決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 ++;}//繪制蛇身（連續(xù)的蛇點(diǎn)）function drawSnake(){ cxt.clearRect(0, 0, cvs.width, cvs.height); for( i=0; i<Snakebady.length; i++) { drawRect(Snakebady[i]); } drawRect(food); wall_location();}//繪制單個(gè)蛇點(diǎn)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,Snakenode.y * Snakesize,12,0,Math.PI*2,true);//蛇的形狀為圓形 cxt.strokeStyle='#484848'; cxt.lineWidth = 4; cxt.stroke(); cxt.closePath(); cxt.fill();}//繪制墻function drawwall (x,y){ wall.push({x:x, y:y, color:'#FFFF00'}); wall_length++; cxt.beginPath(); cxt.fillRect(Snakesize *x,Snakesize *y,Snakesize,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,j);} for( j= 6,i=25;j<15;j++) {drawwall(i,j);} for( i= 9,j=17;j<26;j++) {drawwall(i,j);} for(i=29,j=17;j<26;j++) {drawwall(i,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的值，然后再重新賦值進(jìn)行定義document.onkeydown = function(e){ if(direFlag) return; e.preventDefault();//清除頁面的滑動(dòng)帶來的上下鍵的操作 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;//****}//蛇的移動(dòng)function SnakeMove(){ var newSnakebady={x:Snakebady[0].x,y:Snakebady[0].y,color:Snakebady[0].color};//改變后蛇頭的坐標(biāo)，不能直接賦值 if(dre === 1)newSnakebady.y -=1;//蛇頭根據(jù)鍵盤事件上下左右移動(dòng) 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--)//蛇身的更替，用后一個(gè)位置等于前一個(gè)位置的坐標(biāo) { 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();}//得到食物后的蛇身在最后面加上一個(gè)蛇點(diǎn)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();}//進(jìn)行鍵位判斷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);//定時(shí)器，讓蛇移動(dòng)起來，可以設(shè)置他的速度。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. js select支持手動(dòng)輸入功能實(shí)現(xiàn)代碼2. Android studio 解決logcat無過濾工具欄的操作3. 如何在PHP中讀寫文件4. Android 實(shí)現(xiàn)徹底退出自己APP 并殺掉所有相關(guān)的進(jìn)程5. PHP正則表達(dá)式函數(shù)preg_replace用法實(shí)例分析6. php redis setnx分布式鎖簡單原理解析7. 什么是Python變量作用域8. Android Studio3.6.+ 插件搜索不到終極解決方案(圖文詳解)9. bootstrap select2 動(dòng)態(tài)從后臺(tái)Ajax動(dòng)態(tài)獲取數(shù)據(jù)的代碼10. vue使用moment如何將時(shí)間戳轉(zhuǎn)為標(biāo)準(zhǔn)日期時(shí)間格式
網(wǎng)公網(wǎng)安備