當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

js实现贪吃蛇小游戏

發布時間：2024/6/3 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 js实现贪吃蛇小游戏小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><title>新建網頁</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="" /><meta name="keywords" content="" /><script type="text/javascript">//① 繪制操作界面function Map(){//不變的信息通過“私有成員”定義//變的信息通過“公開的成員”定義var w = 800; var h = 400;//繪制地圖this.showmap = function(){//創建div、設置樣式、追加給bodyvar ditu = document.createElement('div');ditu.style.width = w+"px";ditu.style.height = h+"px";ditu.style.backgroundColor = "pink";ditu.style.backgroundImage = "url(./bg.jpg)";document.body.appendChild(ditu);}}//② 食物function Food(){var len = 20;//聲明食物坐標this.foodX = 0; this.foodY = 0;this.piece = null; //保存食物div節點對象//繪制食物this.showfood = function(){//創建div、設置樣式、追加給body//保證頁面只有一個食物的div存在if(this.piece===null){this.piece = document.createElement('div');this.piece.style.width = this.piece.style.height = len+"px";this.piece.style.backgroundColor = "green";//給食物設置“絕對定位 position/left/top”this.piece.style.position="absolute";document.body.appendChild(this.piece);}//食物需要放到“小格子”里邊，不能壓線//食物移動的最小距離是“步進值”，值為20//食物移動的距離稱為"權",x軸有權坐標(0-39)，y軸也有權坐標(0-19)//食物移動的真實距離：步進值 * 權//食物的“隨機”權坐標設置this.foodX = Math.floor(Math.random()*40);this.foodY = Math.floor(Math.random()*20);this.piece.style.left = this.foodX * len+"px";this.piece.style.top = this.foodY * len+"px";}}//③ 小蛇function Snake(){var len = 20; //蛇節的邊長//定義小蛇(二維數組)//每個蛇節：[x軸，y軸，顏色，蛇節div節點對象]this.snakebody = [[0,1,'green',null],[1,1,'green',null],[2,1,'green',null],[3,1,'red',null]];this.redirect = "right"; //默認移動方向//a.繪制小蛇this.showsnake = function(){//遍歷snakebody創建4個div蛇節、設置樣式、追加給bodyfor(var i=0; i<this.snakebody.length; i++){//以下創建的蛇節數量有限制，不能無限創建//把創建好的蛇節給保存起來，以便后期進行對比if(this.snakebody[i][3]===null){this.snakebody[i][3] = document.createElement('div');this.snakebody[i][3].style.width = this.snakebody[i][3].style.height = len+"px";this.snakebody[i][3].style.backgroundColor = this.snakebody[i][2];//顏色//給蛇節設置“絕頂定位”this.snakebody[i][3].style.position = "absolute";document.body.appendChild(this.snakebody[i][3]);}this.snakebody[i][3].style.left = this.snakebody[i][0] * len+"px";this.snakebody[i][3].style.top = this.snakebody[i][1] * len+"px";}}//b. 移動小蛇this.movesnake = function(){//移動算法：當前蛇節的“新坐標”等于下個蛇節的“舊坐標”//非頭部蛇節for(var n=0; n<this.snakebody.length-1; n++){this.snakebody[n][0] = this.snakebody[n+1][0];this.snakebody[n][1] = this.snakebody[n+1][1];}//頭部蛇節if(this.redirect=="right"){this.snakebody[this.snakebody.length-1][0] += 1;}if(this.redirect=="left"){this.snakebody[this.snakebody.length-1][0] -= 1;}if(this.redirect=="down"){this.snakebody[this.snakebody.length-1][1] += 1;}if(this.redirect=="up"){this.snakebody[this.snakebody.length-1][1] -= 1;}//觸碰食物//蛇頭坐標var snakeX = this.snakebody[this.snakebody.length-1][0];var snakeY = this.snakebody[this.snakebody.length-1][1];//食物坐標 food.foodX/food.foodYif(snakeX==food.foodX && snakeY==food.foodY){//增加蛇節：增加蛇節的坐標等于小蛇“尾部蛇節的舊坐標”var newjie = [this.snakebody[0][0],this.snakebody[0][1],'green',null];//unshift()給數組頭部追加元素this.snakebody.unshift(newjie);//生成新食物food.showfood();}//控制小蛇在指定范圍內移動if(snakeX<0 || snakeX>39 || snakeY<0 || snakeY>19){alert('game over');clearInterval(mytime);//清除間隔函數return false;}//不能吃到自己(蛇頭坐標與非蛇頭蛇節坐標一致就是吃到自己)for(var k=0; k<this.snakebody.length-1; k++){//遍歷非蛇頭蛇節坐標if(snakeX==this.snakebody[k][0] && snakeY==this.snakebody[k][1]){alert('game over kill you by yourself');clearInterval(mytime);return false;}}//根據新坐標重新繪制小蛇this.showsnake();}}window.onload = function(){var map = new Map();map.showmap();food = new Food(); //全局變量food.showfood();snake = new Snake(); //snake對象是全局的snake.showsnake(); //繪制小蛇//setInterval(全局變量信息，時間)mytime = setInterval("snake.movesnake()",200); //移動小蛇//給document設置鍵盤事件，控制小蛇移動方向document.onkeydown = function(evt){var num = evt.keyCode;if(num==40){snake.redirect = "down";}if(num==38){snake.redirect = "up";}if(num==37){snake.redirect = "left";}if(num==39){snake.redirect = "right";}}}</script><style type="text/css">body{margin:0;}</style></head><body></body> </html>

總結

以上是生活随笔為你收集整理的js实现贪吃蛇小游戏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。