js实现贪吃蛇小游戏
生活随笔
收集整理的這篇文章主要介紹了
js实现贪吃蛇小游戏
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><title>新建網(wǎng)頁</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(){//創(chuàng)建div、設(shè)置樣式、追加給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;//聲明食物坐標(biāo)this.foodX = 0; this.foodY = 0;this.piece = null; //保存食物div節(jié)點(diǎn)對(duì)象//繪制食物this.showfood = function(){//創(chuàng)建div、設(shè)置樣式、追加給body//保證頁面只有一個(gè)食物的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";//給食物設(shè)置“絕對(duì)定位 position/left/top”this.piece.style.position="absolute";document.body.appendChild(this.piece);}//食物需要放到“小格子”里邊，不能壓線//食物移動(dòng)的最小距離是“步進(jìn)值”，值為20//食物移動(dòng)的距離稱為"權(quán)",x軸有權(quán)坐標(biāo)(0-39)，y軸也有權(quán)坐標(biāo)(0-19)//食物移動(dòng)的真實(shí)距離：步進(jìn)值 * 權(quán)//食物的“隨機(jī)”權(quán)坐標(biāo)設(shè)置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; //蛇節(jié)的邊長//定義小蛇(二維數(shù)組)//每個(gè)蛇節(jié)：[x軸，y軸，顏色，蛇節(jié)div節(jié)點(diǎn)對(duì)象]this.snakebody = [[0,1,'green',null],[1,1,'green',null],[2,1,'green',null],[3,1,'red',null]];this.redirect = "right"; //默認(rèn)移動(dòng)方向//a.繪制小蛇this.showsnake = function(){//遍歷snakebody創(chuàng)建4個(gè)div蛇節(jié)、設(shè)置樣式、追加給bodyfor(var i=0; i<this.snakebody.length; i++){//以下創(chuàng)建的蛇節(jié)數(shù)量有限制，不能無限創(chuàng)建//把創(chuàng)建好的蛇節(jié)給保存起來，以便后期進(jìn)行對(duì)比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];//顏色//給蛇節(jié)設(shè)置“絕頂定位”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. 移動(dòng)小蛇this.movesnake = function(){//移動(dòng)算法：當(dāng)前蛇節(jié)的“新坐標(biāo)”等于下個(gè)蛇節(jié)的“舊坐標(biāo)”//非頭部蛇節(jié)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];}//頭部蛇節(jié)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;}//觸碰食物//蛇頭坐標(biāo)var snakeX = this.snakebody[this.snakebody.length-1][0];var snakeY = this.snakebody[this.snakebody.length-1][1];//食物坐標(biāo) food.foodX/food.foodYif(snakeX==food.foodX && snakeY==food.foodY){//增加蛇節(jié)：增加蛇節(jié)的坐標(biāo) 等于 小蛇“尾部蛇節(jié)的舊坐標(biāo)”var newjie = [this.snakebody[0][0],this.snakebody[0][1],'green',null];//unshift()給數(shù)組頭部追加元素this.snakebody.unshift(newjie);//生成新食物food.showfood();}//控制小蛇在指定范圍內(nèi)移動(dòng)if(snakeX<0 || snakeX>39 || snakeY<0 || snakeY>19){alert('game over');clearInterval(mytime);//清除間隔函數(shù)return false;}//不能吃到自己(蛇頭坐標(biāo) 與 非蛇頭蛇節(jié)坐標(biāo)一致就是吃到自己)for(var k=0; k<this.snakebody.length-1; k++){//遍歷非蛇頭蛇節(jié)坐標(biāo)if(snakeX==this.snakebody[k][0] && snakeY==this.snakebody[k][1]){alert('game over kill you by yourself');clearInterval(mytime);return false;}}//根據(jù)新坐標(biāo)重新繪制小蛇this.showsnake();}}window.onload = function(){var map = new Map();map.showmap();food = new Food(); //全局變量food.showfood();snake = new Snake(); //snake對(duì)象是全局的snake.showsnake(); //繪制小蛇//setInterval(全局變量信息，時(shí)間)mytime = setInterval("snake.movesnake()",200); //移動(dòng)小蛇//給document設(shè)置鍵盤事件，控制小蛇移動(dòng)方向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>
總結(jié)
以上是生活随笔為你收集整理的js实现贪吃蛇小游戏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 实现文件上传进度条功能
- 下一篇： 二分查找法、顺序查找法