時間：2023-07-25 22:09:01 | 來源：網(wǎng)站運營
時間：2023-07-25 22:09:01 來源：網(wǎng)站運營
用HTML+CSS+JavaScript做一個簡單的貪吃蛇小游戲：最近因為幫助大一的學妹做網(wǎng)頁，又接觸了一下前端方面的知識。（學妹已經(jīng)成了女朋友?。。?，嘻嘻）感謝自己當年認真學習，大三了好多東西還能拾起來，哈哈。我翻出了我當年寫的代碼，還真不少呢。今天復習復習，看一看那時候?qū)懙囊粋€貪吃蛇的代碼。當時用了一整天，跟著今日頭條上推送給我的一個視頻一點一點手敲的…… 兩年半了，我記得這么清楚，是因為寫這個太痛苦了，記憶猶新?。。。〈笠皇智弥恢罏槭裁吹拇a，一遍一遍的報錯，一遍一遍的改錯誤……
在線咨詢
index.html<!DOCTYPE html><html><head> <title>貪吃蛇</title> <meta charset="UTF-8"> <meta name="keywords" content="貪吃蛇"> <meta name="Description" content="這是一個初學者用來學習的小游戲"> <style type="text/css"> *{margin:0;} .map{margin:100px auto; height:600px; width:900px; background:#00D0FF; border:10px solid #AFAEB2; border-radius:8px; } </style> </head> <body><div class="map"><canvas id="canvas" height="600" width="900"> </canvas></div> <script src="javascript/snake.js"> </script></body></html>小白勿看#這是測試snake.js //獲取繪制工具 /* var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d");//獲取上下文 ctx.moveTo(0,0); ctx.lineTo(450,450);*/ var c=document.getElementById("canvas"); var ctx=c.getContext("2d"); /*ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(450,450); ctx.stroke(); */ var snake =[];//定義一條蛇，畫蛇的身體 var snakeCount = 6;//初始化蛇的長度 var foodx =0; var foody =0; var togo =0; function drawtable()//畫地圖的函數(shù) { for(var i=0;i<60;i++)//畫豎線 { ctx.strokeStyle="black"; ctx.beginPath(); ctx.moveTo(15*i,0); ctx.lineTo(15*i,600); ctx.closePath(); ctx.stroke(); } for(var j=0;j<40;j++)//畫橫線 { ctx.strokeStyle="black"; ctx.beginPath(); ctx.moveTo(0,15*j); ctx.lineTo(900,15*j); ctx.closePath(); ctx.stroke(); } for(var k=0;k<snakeCount;k++)//畫蛇的身體 { ctx.fillStyle="#000"; if (k==snakeCount-1) { ctx.fillStyle="red";//蛇頭的顏色與身體區(qū)分開 } ctx.fillRect(snake[k].x,snake[k].y,15,15);//前兩個數(shù)是矩形的起始坐標，后兩個數(shù)是矩形的長寬。 } //繪制食物 ctx.fillStyle ="black"; ctx.fillRect(foodx,foody,15,15); ctx.fill(); } function start()//定義蛇的坐標 { //var snake =[];//定義一條蛇，畫蛇的身體 //var snakeCount = 6;//初始化蛇的長度 for(var k=0;k<snakeCount;k++) { snake[k]={x:k*15,y:0}; } drawtable(); addfood();//在start中調(diào)用添加食物函數(shù) } function addfood() { foodx = Math.floor(Math.random()*60)*15; //隨機產(chǎn)生一個0-1之間的數(shù) foody = Math.floor(Math.random()*40)*15; for (var k=0;k<snake;k++) { if (foodx==snake[k].x&&foody==sanke[k].y)//防止產(chǎn)生的隨機食物落在蛇身上 { addfood(); } } } function move() { switch (togo) { case 1: snake.push({x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y}); break;//向左走 case 2: snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y-15}); break; case 3: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y}); break; case 4: snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y+15}); break; case 5: snake.push({x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y-15}); break; case 6: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y+15}); break; default: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y}); } snake.shift();//刪除數(shù)組第一個元素 ctx.clearRect(0,0,900,600);//清除畫布重新繪制 isEat(); isDead(); drawtable(); } function keydown(e) { switch(e.keyCode) { case 37: togo=1; break; case 38: togo=2; break; case 39: togo=3; break; case 40: togo=4; break; case 65: togo=5; break; case 68: togo=6; break; } } function isEat()//吃到食物后長度加1 { if(snake[snakeCount-1].x==foodx&&snake[snakeCount-1].y==foody) { addfood(); snakeCount++; snake.unshift({x:-15,y:-15}); } } function isDead() { if (snake[snakeCount-1].x>885||snake[snakeCount-1].y>585||snake[snakeCount-1].x<0||snake[snakeCount-1].y<0) { alert("You are dead,GAME OVER!!!"); window.location.reload(); } } document.onkeydown=function(e){ keydown(e); } window.onload = function()//調(diào)用函數(shù){ start(); setInterval(move,150); drawtable(); } 圖片自配關(guān)鍵詞：游戲,簡單
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
