贪吃蛇小游戏源码再回顾
生活随笔
收集整理的這篇文章主要介紹了
贪吃蛇小游戏源码再回顾
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>游戲初始化界面</title><style>body {margin: 0;padding: 0;}#main {margin: 100px;}.btn {width: 100px;height: 40px;}.gtitle {font-size: 25px;font-weight: bold;}#gnum {color: red;}
</style>
</head><body><div id="main"><!-- 按鈕 --><h1>貪吃蛇游戲</h1><input class="btn" type="button" value="開始游戲" id="begin"><input class="btn" type="button" value="暫停游戲" id="pause"><span class="gtitle">第<span id="gnum">1</span>關</span></div><!-- 貪吃蛇游戲設計 --><script>var main = document.getElementById('main');/* 畫布格子是否開啟 */var showcanvas = false;/* atom 原子大小 xnum橫向原子數量 ynum縱向原子數量 */function Map(atom, xnum, ynum) {this.atom = atom;this.xnum = xnum;this.ynum = ynum;//聲明畫布this.canvas = null;//第二部分 創建畫布方法this.create = function() {this.canvas = document.createElement('div');this.canvas.style.cssText = 'position:relative;top:40px;border:1px solid red;background:#FAFAFA';this.canvas.style.width = this.atom * this.xnum + 'px'; //畫布的寬this.canvas.style.height = this.atom * this.ynum + 'px'; //畫布的寬main.appendChild(this.canvas);if (showcanvas) {for (var x = 0; x < xnum; x++) {for (var y = 0; y < ynum; y++) {var a = document.createElement('div');a.style.cssText = "border:1px solid yellow";a.style.width = this.atom + 'px';a.style.height = this.atom + 'px';a.style.backgroundColor = 'green';this.canvas.appendChild(a);a.style.position = 'absolute';a.style.left = x * this.atom + 'px';a.style.top = y * this.atom + 'px';}}}}}/*第四部分 創建蛇 */function Snake(map) {//設置寬度高度this.width = map.atom;this.height = map.atom;/* 蛇的方向 */this.direction = 'right';this.body = [{x: 2,y: 0}, //第一點{x: 1,y: 0}, //第二點{x: 0,y: 0} //第三點];//顯示蛇this.display = function() {for (var i = 0; i < this.body.length; i++) {//當吃到食物時候 x==null 不能新建 不然會在00處新建一個if (this.body[i].x != null) {var s = document.createElement('div');//將蛇的節點保存到狀態變量中 方便刪除使用this.body[i].flag = s;/* console.log(1); *///設置蛇的樣式s.style.width = this.width + 'px';s.style.height = this.height + 'px';s.style.backgroundColor = "rgb(" + Math.floor(Math.random() * 200) + "," +Math.floor(Math.random() * 200) + "," +Math.floor(Math.random() * 200) + ")"s.style.position = 'absolute';s.style.left = this.body[i].x * this.width + 'px';s.style.top = this.body[i].y * this.height + 'px';//添加到地圖中map.canvas.appendChild(s);}}}/* 讓蛇動起來{x: 2,y: 0}, //第一點{x: 1,y: 0}, //第二點{x: 0,y: 0} //第四點 讓蛇改變方向*/this.run = function() {for (var i = this.body.length - 1; i > 0; i--) {this.body[i].x = this.body[i - 1].x;this.body[i].y = this.body[i - 1].y;}//根據方向處理蛇頭switch (this.direction) {case "left":this.body[0].x -= 1;break;case "right":this.body[0].x += 1;break;case "up":this.body[0].y -= 1;break;case "down":this.body[0].y += 1;break;}//判斷蛇頭吃到食物 蛇頭坐標和食物坐標重合 第六部分if (this.body[0].x == food.x && this.body[0].y == food.y) {//蛇會加一個this.body.push({x: null,y: null,flag: null});//判斷一下幾倍if (this.body.length > l.slength) {l.set();}map.canvas.removeChild(food.flag);food = new Food(map);}//判斷是否出界/* if (this.body[0].x < 0 || this.body[0].x > map.xnum - 1 || this.body[0].y < 0 || this.body[0].y > map.ynum - 1) {clearInterval(timer);alert("真笨啊,活活的撞墻了");restart(map, this);return false;}*///判斷是否和自己重合for (var i = 4; i < this.body.length; i++) {if (this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y) {clearInterval(timer);alert("真笨啊,活活的吃到自己了");restart(map, this);return false;}}/* console.log(111); *//* this.body[0].x += 1; */for (var i = 0; i < this.body.length; i++) {//不等于空 就刪除 當吃到食物的時候 flag等于空if (this.body[i].flag != null) {map.canvas.removeChild(this.body[i].flag);}}this.display();//給body加鍵盤事件 第五步 給蛇改變方向window.onkeydown = function(e) {var event = e || window.event;switch (event.keyCode) {case 38:if (snake.direction != "down") {snake.direction = "up";}break;case 40:if (snake.direction != "up") {snake.direction = "down";}break;case 37:if (snake.direction != "right") {snake.direction = "left";}break;case 39:if (snake.direction != "left") {snake.direction = "right";}break;}}/**/}}//重新開始游戲 第六部分function restart(map, snake) {for (var i = 0; i < snake.body.length; i++) {map.canvas.removeChild(snake.body[i].flag);}snake.body = [{x: 2,y: 0}, //第一點{x: 1,y: 0}, //第二點{x: 0,y: 0} //第三點];snake.direction = 'right';snake.display();map.canvas.removeChild(food.flag);food = new Food(map);}//創建級別function Level() {this.num = 1; //第幾級別this.speek = 300; //速度加快this.slength = 8; //每個關的長度判斷this.set = function() {this.num++;if (this.speek <= 50) {this.speek = 50;} else {this.speek -= 50;}//可以自己定義this.slength += 3;this.display();start();}this.display = function() {document.getElementById('gnum').innerHTML = this.num;}}var l = new Level();l.display();var map = new Map(20, 40, 20);//創建畫布map.create();//構造食物var food = new Food(map);//構建蛇var snake = new Snake(map);snake.display();/* 第三部分 創建食物 map地圖對象 */function Food(map) {this.width = map.atom;this.height = map.atom;this.bgcolor = "rgb(" + Math.floor(Math.random() * 200) + "," + Math.floor(Math.random() * 200) + "," +Math.floor(Math.random() * 200) + ")"this.x = Math.floor(Math.random() * map.xnum);this.y = Math.floor(Math.random() * map.ynum);//畫出食物this.flag = document.createElement('div');this.flag.style.width = this.width + 'px';this.flag.style.height = this.height + 'px';this.flag.style.backgroundColor = this.bgcolor;this.flag.style.borderRadius = '50%';this.flag.style.position = 'absolute';this.flag.style.left = this.x * this.width + 'px';this.flag.style.top = this.y * this.height + 'px';map.canvas.appendChild(this.flag);}var timer; //變量可以提升/* 第一部分 */function start() {clearInterval(timer);timer = setInterval(function() {snake.run();}, l.speek)}/* 第一部分開始 */document.getElementById('begin').onclick = function() {start();}/*第一部分 暫停 */document.getElementById('pause').onclick = function() {clearInterval(timer);timer = setInterval(function() {}, 300)}
</script>
</body>
?
</html>
?
總結
以上是生活随笔為你收集整理的贪吃蛇小游戏源码再回顾的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 你不得不知道的通信行业基础介绍
- 下一篇： 如何复制百度文库的文章