javascript實(shí)現(xiàn)貪吃蛇游戲(娛樂版)
本文實(shí)例為大家分享了javascript實(shí)現(xiàn)貪吃蛇游戲的具體代碼,供大家參考,具體內(nèi)容如下
一共三個對象map,snake,food,代表的含義如名字。snake和food其實(shí)就是數(shù)組,表示位置,map來畫圖、判斷得分、失敗等等,直接上代碼,可直接運(yùn)行。
<!doctype html> <html> <body> <canvas id="map" width="400" height="400" style="background:Black"></canvas> <h1>Score:</h1> <h2 id="score">0</h2> <script> //地圖 function Map() { this.field = document.getElementById("map").getContext("2d"); //畫布 this.draw = function (something) { //畫蛇或者食物 this.field.fillStyle = something.color; var position; for (position in something.positions) { this.field.fillRect(something.positions[position][0], something.positions[position][1], 20, 20); } } this.clear = function () { //清除畫布 this.field.clearRect(0, 0, 400, 400); } this.judge = function (snake, food) { //判斷狀態(tài)(得分、失敗、普通) var snakeHeadX = snake.positions[0][0]; var snakeHeadY = snake.positions[0][1]; var foodX = food.positions[0][0]; var foodY = food.positions[0][1]; if ((snakeHeadX == foodX) && (snakeHeadY == foodY)) { //吃食物 snake.positions.unshift([foodX, foodY]); food.positions[0] = [Math.floor(Math.random() * 20) * 20, Math.floor(Math.random() * 20) * 20]; this.clear(); this.draw(food); this.draw(snake); var score = document.getElementById('score'); score.innerHTML = (Number(score.innerHTML)+1).toString(); } else if ((snakeHeadX+20 > 400) || (snakeHeadX < 0) || (snakeHeadY+20 > 400) || (snakeHeadY < 0)) { alert('GIME OVER!'); //撞墻 } else { this.clear(); this.draw(food); this.draw(snake); } } } //蛇 function Snake() { this.positions = [[40 + 20, 40], [40, 40], [40 - 20, 40]]; //蛇的軀干 this.color = "Yellow"; this.direction = [1,0]; //蛇頭方向 this.move = function () { //移動 this.positions.unshift([this.positions[0][0] + this.direction[0] * 20, this.positions[0][1] + this.direction[1] * 20]); this.positions.pop(); } this.obeyOrders = function (snake = this) { //等待鍵盤上下左右 document.onkeydown = function (event) { var e = event || window.event || arguments.callee.caller.arguments[0]; var order = e.keyCode; console.log(snake.direction); switch (order) { case 37: snake.direction[0] = -1; snake.direction[1] = 0; break; case 38: snake.direction[1] = -1; snake.direction[0] = 0; break; case 39: snake.direction[0] = 1; snake.direction[1] = 0; break; case 40: snake.direction[1] = 1; snake.direction[0] = 0; break; default: ; } }; } } //食物 function Food() { this.positions = [[Math.floor(Math.random() * 20) * 20, Math.floor(Math.random() * 20) * 20]]; //隨機(jī)位置 this.color = 'Red'; } //開始執(zhí)行 (function () { var map = new Map(); var snake = new Snake(); var food = new Food(); map.draw(snake); map.draw(food); snake.obeyOrders(); var t=0; var interval = setInterval(function () { //每0.5s走一步 map.judge(snake, food); snake.move(); }, 500); })() </script> </body> </html>
效果如圖
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
typescript 將數(shù)組清空的方法實(shí)現(xiàn)
在開發(fā)應(yīng)用程序時,數(shù)組常用于存儲多個元素(如數(shù)字、字符串、對象等),然而,在某些場景下,你可能需要將數(shù)組清空,本文主要介紹了typescript 將數(shù)組清空的方法實(shí)現(xiàn),感興趣的可以了解一下2024-08-08微信小程序如何實(shí)現(xiàn)radio單選框單擊打勾和取消
這篇文章主要介紹了微信小程序如何實(shí)現(xiàn)radio單選框單擊打勾和取消,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01使用JavaScript實(shí)現(xiàn)一個錄屏插件
不知道大家平時都是使用什么錄屏軟件呢,有沒有想過只用JavaScript我們也可以快速實(shí)現(xiàn)一個錄屏插件呢,感興趣的小伙伴就跟隨小編一起學(xué)習(xí)一下吧2024-10-10JS使用reduce()方法處理樹形結(jié)構(gòu)數(shù)據(jù)
這篇文章主要介紹了JS使用reduce()方法處理樹形結(jié)構(gòu)數(shù)據(jù),對樹形結(jié)構(gòu)數(shù)據(jù)感興趣的同學(xué),可以參考下2021-05-05