js實現簡單的貪吃蛇遊戲
阿新 • • 發佈:2020-04-25
本文例項為大家分享了js實現貪吃蛇遊戲的具體程式碼,供大家參考,具體內容如下
執行截圖:
原始碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>貪吃蛇小遊戲</title> <style> body { margin:0px; padding:0px; } #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> <script> var main = document.getElementById('main'); var showcanvas = true; //是否開啟畫布格子 /** * 地圖物件的構造方法 * @param atom 原子大小寬和高是一樣的 10 * @param xnum 橫向原子的數量 * @param ynum 縱向原子的數量 * @constructor */ function Map(atom,xnum,ynum){ this.atom = atom; // 20x20 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 darkred; 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 y=0; y<ynum; y++) { for (var x = 0; x < xnum; x++) { 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 = "LightSkyBlue"; this.canvas.appendChild(a); a.style.position = 'absolute'; a.style.left = x * this.atom + 'px'; a.style.top = y*this.atom+'px'; } } } } } /** * 建立食物的構造方法 * @param map 地圖物件 * @constructor */ 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); } function Snake(map) { //設定寬,高 this.width=map.atom; this.height = map.atom; //預設走的方向 this.direction = 'right'; this.body = [ {x:2,y:0},//蛇頭, 第一點 0 {x:1,//蛇脖子,第二點 1 {x:0,y:0} //蛇尾, 第三點 2 //{x:null,y:null,flag:null} 3 ]; //顯示蛇 this.display = function(){ for(var i=0; i<this.body.length; i++){ if(this.body[i].x !=null) { //當吃到食物時, x==null,不能新建, 不然會在0,0處理新建一個 var s = document.createElement('div'); // 將節點儲存到一個狀態變數中, 以便以後刪除使用 this.body[i].flag = s; //設定蛇的樣式 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) +")"; //s.style.borderRadius = '50%'; //設定位置 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); } } } //讓蛇運動起來 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; } //預設是right left up down // 根據方向處理蛇頭 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; } //判斷蛇頭吃到食物, xy和食物的XY重合 if(this.body[0].x ==food.x && this.body[0].y == food.y ){ //蛇加一節, 根據最後節點定 this.body.push({x: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; } } for(var i=0; i<this.body.length; i++){ if(this.body[i].flag != null) { //當吃到食物, flag是等null,且不能刪除 map.canvas.removeChild(this.body[i].flag) } } this.display(); } } //重新開始遊戲 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} //蛇尾, 第三點 2 ]; snake.direction = 'right'; snake.display(); map.canvas.removeChild(food.flag); food = new Food(map); } //設定級別物件 function Level() { this.num = 1; //第幾級別 this.speed= 300; //毫秒, 每升一關, 數量減少20, 速度就加快了 this.slength = 8; //每個關的長度判斷 this.set = function() { this.num++; if(this.speed <= 50) { this.speed = 50; }else{ this.speed -=50; } this.slength += 10; //這個可以自己定義 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(); // 組body加鍵盤事件, 上下左右 window.onkeydown = function(e){ var event = e || window.event; // console.log(event.keyCode); 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; } } var timer; //變數可以提升 function start() { clearInterval(timer); timer = setInterval(function(){ snake.run(); },l.speed); } document.getElementById('begin').onclick=function(){ start(); } document.getElementById('pause').onclick=function() { clearInterval(timer); } </script> </div> </body> </html>
小編還為大家準備了精彩的專題:javascript經典小遊戲彙總
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。