用JS實(shí)現(xiàn)貪吃蛇小游戲
本文實(shí)例為大家分享了JS實(shí)現(xiàn)貪吃蛇小游戲的具體代碼,供大家參考,具體內(nèi)容如下
效果圖:
完整代碼如下:
HTML
<!DOCTYPE html> <html lang="en"> ? <head> ? ? <meta charset="UTF-8"> ? ? <meta http-equiv="X-UA-Compatible" content="IE=edge"> ? ? <meta name="viewport" content="width=device-width, initial-scale=1.0"> ? ? <link rel="stylesheet" href="css/index.css"> ? ? <title>Document</title> </head> ? <body> ? ? <div class="content"> ? ? ? ? <div class="btn startBtn"><button></button></div> ? ? ? ? <div class="btn pauseBtn"><button></button></div> ? ? ? ? <div id="snakeWrap"> ? ? ? ? ? ? <!-- <div class="snakeHead"></div> ? ? ? ? ? ? <div class="snakeBody"></div> ? ? ? ? ? ? <div class="food"></div> --> ? ? ? ? </div> ? ? </div> ? ? ? <script src="js/index.js"></script> </body> ? </html>
CSS
.content { ? ? width: 640px; ? ? height: 640px; ? ? margin: 100px auto; ? ? position: relative; } ? .btn { ? ? width: 100%; ? ? height: 100%; ? ? position: absolute; ? ? left: 0; ? ? top: 0; ? ? background-color: rgba(0, 0, 0, .3); ? ? z-index: 2; } ? .btn button { ? ? background: none; ? ? border: 0; ? ? background-size: 100% 100%; ? ? cursor: pointer; ? ? outline: none; ? ? position: absolute; ? ? left: 50%; ? ? top: 50%; } ? .startBtn button { ? ? width: 200px; ? ? height: 130px; ? ? background-image: url(../imgs/startBtn.gif); ? ? margin-left: -100px; ? ? margin-top: -75px; } ? .pauseBtn { ? ? display: none; } ? .pauseBtn button { ? ? width: 70px; ? ? height: 70px; ? ? background-image: url(../imgs/pauseBtn.png); ? ? margin-left: -35px; ? ? margin-top: -35px; } ? #snakeWrap { ? ? position: relative; ? ? width: 600px; ? ? height: 600px; ? ? background: #225675; ? ? border: 20px solid #7dd9ff; } ? ? /* #snakeWrap div { ? ? width: 20px; ? ? height: 20px; } */ ? .snakeHead { ? ? background-image: url(../imgs/snake.png); ? ? background-size: cover; } ? .snakeBody { ? ? background-color: #9ddbb1; ? ? border-radius: 50%; } ? .food { ? ? background-image: url(../imgs/food.png); ? ? background-size: cover; }
JS
// 聲明方塊的寬高,行數(shù)和列數(shù) var sw = 20, ? ? sh = 20, ? ? tr = 30, ? ? td = 30; ? var snake = null, //蛇的實(shí)例 ? ? food = null, //食物的實(shí)例 ? ? game = null; //游戲的實(shí)例 ? function Square(x, y, classname) { ? ? this.x = sw * x; ? ? this.y = sh * y; ? ? this.class = classname; ? ? ? this.viewContent = document.createElement('div'); //方塊對(duì)應(yīng)的DOM元素 ? ? this.viewContent.className = this.class; ? ? this.parent = document.getElementById('snakeWrap'); //方塊的父級(jí) } //創(chuàng)建方塊DOM,并添加到頁(yè)面里 Square.prototype.create = function() { ? ? this.viewContent.style.position = 'absolute'; ? ? this.viewContent.style.width = sw + 'px'; ? ? this.viewContent.style.height = sh + 'px'; ? ? this.viewContent.style.left = this.x + 'px'; ? ? this.viewContent.style.top = this.y + 'px'; ? ? ? this.parent.appendChild(this.viewContent); }; Square.prototype.remove = function() { ? ? this.parent.removeChild(this.viewContent); }; //?? function Snake() { ? ? this.head = null //存蛇頭的信息 ? ? this.tail = null //存蛇尾的信息 ? ? this.pos = []; //存蛇身上每個(gè)方塊的位置 ? ? ? //存儲(chǔ)蛇走的方向,用一個(gè)對(duì)象來(lái)表示 ? ? this.directionNum = { ? ? ? ? left: { ? ? ? ? ? ? x: -1, ? ? ? ? ? ? y: 0, ? ? ? ? ? ? rotate: 180 ? ? ? ? }, ? ? ? ? right: { ? ? ? ? ? ? x: 1, ? ? ? ? ? ? y: 0, ? ? ? ? ? ? rotate: 0 ? ? ? ? }, ? ? ? ? up: { ? ? ? ? ? ? x: 0, ? ? ? ? ? ? y: -1, ? ? ? ? ? ? rotate: -90 ? ? ? ? }, ? ? ? ? down: { ? ? ? ? ? ? x: 0, ? ? ? ? ? ? y: 1, ? ? ? ? ? ? rotate: 90 ? ? ? ? } ? ? }; } //初始化 Snake.prototype.init = function() { ? ? //創(chuàng)建蛇頭 ? ? var snakeHead = new Square(2, 0, 'snakeHead'); ? ? snakeHead.create(); ? ? this.head = snakeHead; //存儲(chǔ)蛇頭信息 ? ? this.pos.push([2, 0]); //把蛇頭的位置存起來(lái) ? ? ? //創(chuàng)建蛇身體1 ? ? var snakeBody1 = new Square(1, 0, 'snakeBody'); ? ? snakeBody1.create(); ? ? this.pos.push([1, 0]); //把蛇身1的坐標(biāo)存起來(lái) ? ? ? //創(chuàng)建蛇身體2 ? ? var snakeBody2 = new Square(0, 0, 'snakeBody'); ? ? snakeBody2.create(); ? ? this.tail = snakeBody2; //把蛇尾的信息存起來(lái) ? ? this.pos.push([0, 0]); //把蛇身1的坐標(biāo)存起來(lái) ? ? ? //形成鏈表關(guān)系 ? ? snakeHead.last = null; ? ? snakeHead.next = snakeBody1; ? ? ? snakeBody1.last = snakeHead; ? ? snakeBody1.next = snakeBody2; ? ? ? snakeBody2.last = snakeBody1; ? ? snakeBody2.next = null; ? ? ? //給蛇添加一條屬性,用來(lái)表示蛇的走向 ? ? this.direction = this.directionNum.right; //默認(rèn)讓蛇往右走 }; ? //該方法用來(lái)獲取蛇頭的下一個(gè)位置對(duì)應(yīng)的元素,要根據(jù)元素做不同的事情 Snake.prototype.getNextPos = function() { ? ? var nextPos = [ //蛇頭要走的下一個(gè)點(diǎn)的坐標(biāo) ? ? ? ? this.head.x / sw + this.direction.x, ? ? ? ? this.head.y / sh + this.direction.y ? ? ]; ? ? // console.log(nextPos[0]); ? ? ? //下個(gè)點(diǎn)是自己,游戲結(jié)束 ? ? var selfCollied = false; //是否撞到自己,默認(rèn)是否 ? ? //value表示數(shù)組中的某一項(xiàng) ? ? this.pos.forEach(function(value) { ? ? ? ? // console.log(nextPos[0], value[0]); ? ? ? ? if (value[0] == nextPos[0] && value[1] == nextPos[1]) { ? ? ? ? ? ? selfCollied = true; ? ? ? ? ? ? // console.log(2); ? ? ? ? } ? ? }); ? ? if (selfCollied) { ? ? ? ? console.log('撞到自己了!'); ? ? ? ? this.strategies.die.call(this); ? ? ? ? return; ? ? } ? ? ? // 下個(gè)點(diǎn)是墻,游戲結(jié)束 ? ? if (nextPos[0] < 0 || nextPos[1] < 0 || nextPos[0] > td - 1 || nextPos[1] > tr - 1) { ? ? ? ? console.log('撞墻!'); ? ? ? ? this.strategies.die.call(this); ? ? ? ? return; ? ? } ? ? ? // 下個(gè)點(diǎn)是食物,吃 ? ? if (food && food.pos[0] == nextPos[0] && food.pos[1] == nextPos[1]) { ? ? ? ? //如這條件成立,說明蛇頭走的下一點(diǎn)是食物的點(diǎn) ? ? ? ? console.log('撞到食物了'); ? ? ? ? this.strategies.eat.call(this); ? ? ? ? return; ? ? } ? ? ? // 下個(gè)點(diǎn)什么都不是,繼續(xù)走 ? ? this.strategies.move.call(this); ? }; // 處理碰撞后要做的事 Snake.prototype.strategies = { ? ? move: function(format) { //format這個(gè)參數(shù)用于決定要不要?jiǎng)h除最后一個(gè)方塊(蛇尾),當(dāng)傳了這個(gè)參數(shù)就表示要做的事情是吃 ? ? ? ? //創(chuàng)建新身體(在舊蛇頭的位置) ? ? ? ? ? var newBody = new Square(this.head.x / sw, this.head.y / sh, 'snakeBody'); ? ? ? ? //更新鏈表的關(guān)系 ? ? ? ? newBody.next = this.head.next; ? ? ? ? newBody.next.last = newBody; ? ? ? ? newBody.last = null; ? ? ? ? ? //把舊蛇頭從原來(lái)的位置刪除 ? ? ? ? this.head.remove(); ? ? ? ? newBody.create(); ? ? ? ? ? //創(chuàng)建新的蛇頭(蛇頭下一個(gè)要走到的點(diǎn)nextPos) ? ? ? ? var newHead = new Square(this.head.x / sw + this.direction.x, this.head.y / sh + this.direction.y, 'snakeHead'); ? ? ? ? ? //更新鏈表關(guān)系 ? ? ? ? newHead.next = newBody; ? ? ? ? newHead.last = null; ? ? ? ? newBody.last = newHead; ? ? ? ? newHead.viewContent.style.transform = 'rotate(' + this.direction.rotate + 'deg)'; ? ? ? ? newHead.create(); ? ? ? ? ? //蛇身上的每一個(gè)方塊的坐標(biāo)也要更新 ? ? ? ? this.pos.splice(0, 0, [this.head.x / sw + this.direction.x, this.head.y / sh + this.direction.y]) ? ? ? ? this.head = newHead; //還要把this.head的信息更新一下 ? ? ? ? ? if (!format) { //如果format的值為false,表示需要?jiǎng)h除(除了吃之外的操作) ? ? ? ? ? ? this.tail.remove(); ? ? ? ? ? ? this.tail = this.tail.last; ? ? ? ? ? ? this.pos.pop(); ? ? ? ? } ? ? }, ? ? eat: function() { ? ? ? ? this.strategies.move.call(this, true); ? ? ? ? createFood(); ? ? ? ? game.score++; ? ? }, ? ? die: function() { ? ? ? ? // console.log('die'); ? ? ? ? game.over(); ? ? } } ? snake = new Snake(); ? //創(chuàng)建食物 function createFood() { ? ? //食物小方塊的隨機(jī)坐標(biāo) ? ? ? var x = null; ? ? var y = null; ? ? ? var include = true; //循環(huán)跳出的條件,true表示食物坐標(biāo)在蛇身上。(需要繼續(xù)循環(huán))false表示食物的坐標(biāo)不再蛇身上(不用繼續(xù)循環(huán)) ? ? while (include) { ? ? ? ? x = Math.round(Math.random() * (td - 1)); ? ? ? ? y = Math.round(Math.random() * (tr - 1)); ? ? ? ? ? snake.pos.forEach(function(value) { ? ? ? ? ? ? if (x != value[0] && y != value[1]) { ? ? ? ? ? ? ? ? //這個(gè)條件成立說明現(xiàn)在隨機(jī)出來(lái)的這個(gè)坐標(biāo),在蛇身上沒有找到。 ? ? ? ? ? ? ? ? include = false; ? ? ? ? ? ? } ? ? ? ? }); ? ? } ? ? ? //生成食物 ? ? food = new Square(x, y, 'food'); ? ? //存儲(chǔ)生成食物的坐標(biāo),用于跟蛇頭要走的下一坐標(biāo)對(duì)比 ? ? food.pos = [x, y]; ? ? ? var foodDom = document.querySelector('.food'); ? ? if (foodDom) { ? ? ? ? foodDom.style.left = x * sw + 'px'; ? ? ? ? foodDom.style.top = y * sh + 'px'; ? ? } else { ? ? ? ? food.create(); ? ? } ? } ? //創(chuàng)建游戲邏輯 function Game() { ? ? this.timer = null; ? ? this.score = 0; } Game.prototype.init = function() { ? ? snake.init(); ? ? // snake.getNextPos(); ? ? createFood(); ? ? ? document.onkeydown = function(ev) { ? ? ? ? //當(dāng)蛇在往右走,不能按左鍵 ? ? ? ? if (ev.which == 37 && snake.direction != snake.directionNum.right) { ? ? ? ? ? ? snake.direction = snake.directionNum.left; ? ? ? ? } else if (ev.which == 38 && snake.direction != snake.directionNum.down) { ? ? ? ? ? ? snake.direction = snake.directionNum.up; ? ? ? ? } else if (ev.which == 39 && snake.direction != snake.directionNum.left) { ? ? ? ? ? ? snake.direction = snake.directionNum.right; ? ? ? ? } else if (ev.which == 40 && snake.direction != snake.directionNum.up) { ? ? ? ? ? ? snake.direction = snake.directionNum.down; ? ? ? ? } ? ? } ? ? ? this.start(); }; //開始游戲 Game.prototype.start = function() { ? ? this.timer = setInterval(function() { ? ? ? ? snake.getNextPos(); ? ? }, 200); }; //暫停游戲 Game.prototype.pause = function() { ? ? clearInterval(this.timer); }; //游戲結(jié)束 Game.prototype.over = function() { ? ? clearInterval(this.timer); ? ? alert('你的得分為' + this.score); ? ? ? //游戲回到初始狀態(tài) ? ? var snakeWrap = document.getElementById('snakeWrap'); ? ? snakeWrap.innerHTML = ''; ? ? ? snake = new Snake(); ? ? game = new Game(); ? ? ? var startBtnWrap = document.querySelector('.startBtn'); ? ? startBtnWrap.style.display = 'block'; }; //開啟游戲 game = new Game(); var startBtn = document.querySelector('.startBtn button'); console.log(startBtn); startBtn.onclick = function() { ? ? startBtn.parentNode.style.display = 'none'; ? ? game.init(); }; //暫停游戲 var snakeWrap = document.getElementById('snakeWrap'); console.log(snakeWrap); var pauseBtn = document.querySelector('.pauseBtn button'); console.log(pauseBtn); snakeWrap.onclick = function() { ? ? game.pause(); ? ? pauseBtn.parentNode.style.display = 'block'; ? ? console.log(123); }; pauseBtn.onclick = function() { ? ? game.start(); ? ? pauseBtn.parentNode.style.display = 'none'; }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
ionic2自定義cordova插件開發(fā)以及使用(Android)
這篇文章主要為大家詳細(xì)介紹了ionic2自定義cordova插件開發(fā)以及使用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06JavaScript簡(jiǎn)單實(shí)現(xiàn)合并兩個(gè)Json對(duì)象的方法示例
這篇文章主要介紹了JavaScript簡(jiǎn)單實(shí)現(xiàn)合并兩個(gè)Json對(duì)象的方法,結(jié)合實(shí)例形式分析了json對(duì)象的遍歷、添加實(shí)現(xiàn)合并的相關(guān)操作技巧,需要的朋友可以參考下2017-10-10如何基于uni-app實(shí)現(xiàn)微信小程序一鍵登錄與退出登錄功能
uni-app 是使用vue的語(yǔ)法+小程序的標(biāo)簽和API的一套框架,是一套代碼多端使用,目前是大前端的一種趨勢(shì),下面這篇文章主要給大家介紹了關(guān)于如何基于uni-app實(shí)現(xiàn)微信小程序一鍵登錄與退出登錄功能的相關(guān)資料,需要的朋友可以參考下2022-09-09Javascript DOM事件操作小結(jié)(監(jiān)聽鼠標(biāo)點(diǎn)擊、釋放,懸停、離開等)
這篇文章主要介紹了Javascript DOM事件操作,結(jié)合實(shí)例形式總結(jié)分析了javascript監(jiān)聽鼠標(biāo)點(diǎn)擊、釋放,懸停、離開等操作技巧,需要的朋友可以參考下2017-01-01JavaScript實(shí)現(xiàn)文本相似度對(duì)比
這篇文章主要介紹了JavaScript實(shí)現(xiàn)文本相似度對(duì)比,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-06-06