js面向对象案例 贪吃蛇
程序员文章站
2022-03-24 11:45:43
食物对象 工具对象 snake对象 游戏对象 main HTML CSS ......
食物对象
1 (function () { 2 //map:所在的父盒子,obj自身的一些属都具有默认值 3 function food(map, obj) { 4 obj = obj || {}; //没有则使用默认值 5 this.width = obj.width || 20; 6 this.height = obj.height || 20; 7 this.top = obj.top || 0; 8 this.left = obj.left || 0; 9 this.backgroundcolor = obj.backgroundcolor || 'green'; 10 this.divarr = [];//存储$("div")的数组 11 this.map = map; 12 } 13 //在页面上用div渲染这个食物 14 food.prototype.render = function () { 15 this.divarr.push($('<div></div>')); 16 this.divarr[this.divarr.length - 1].css({ 17 'width': this.width, 18 'height': this.height, 19 'position': 'absolute', 20 'backgroundcolor': this.backgroundcolor, 21 }).appendto(this.map); 22 } 23 //随机生成食物的位置,必须传入snake对象作为参数 24 food.prototype.random = function (snake) { 25 var maxx = this.map.width() / this.width - 1;//地图的最大坐标 20px一格 26 var maxy = this.map.height() / this.height - 1; 27 var x = tools.getrandom(0, maxx); //随机生成x坐标和y坐标 工具对象的方法(在下面贴出 有点画蛇添足) 28 var y = tools.getrandom(0, maxy); 29 //遍历蛇对象的节点,如果随机生成的食物坐标与蛇节点重叠再次随机食物坐标 30 for (var i = 0; i < snake.snakenode.length; i++) { 31 if (x == snake.snakenode[i].left && y == snake.snakenode[i].top) { 32 x = tools.getrandom(0, maxx); 33 y = tools.getrandom(0, maxy); 34 i = 0;//再次随机食物坐标后,重置i 再次遍历 35 } 36 } 37 this.left = x; 38 this.top = y; 39 //在页面上改变食物的left,top 40 this.divarr[this.divarr.length - 1].css({ 41 'left': this.left * this.width, 42 'top': this.top * this.height 43 }); 44 } 45 window.food = food; 46 })()
工具对象
1 (function(){ 2 var tools = { 3 getrandom:function(min,max){ 4 return math.floor(math.random()*(max - min +1)+min); 5 } 6 } 7 window.tools = tools; 8 })()
snake对象
1 (function () { 2 //map:所在的父盒子,obj自身的一些属都具有默认值 3 function snake(map, obj) { 4 obj = obj || {}; //没有则使用默认值 5 this.width = obj.width || 20; 6 this.height = obj.height || 20; 7 this.divarr = []; //存储组成蛇的div盒子 8 this.map = map; 9 this.directioncode = obj.directioncode || 39; 10 this.snakenode = [{ //初始蛇的节点 11 left: 2, 12 top: 4, 13 background: 'red' 14 }, { 15 left: 1, 16 top: 4, 17 background: 'blue' 18 }, { 19 left: 0, 20 top: 4, 21 background: 'blue' 22 }] 23 } 24 //在页面上用div渲染蛇 25 snake.prototype.render = function () { 26 //遍历蛇的节点(snakenode) 27 for (var i = 0, len = this.snakenode.length; i < len; i++) { 28 this.divarr.push($('<div></div>'));//生成div,将div记录在蛇的divarr中 29 this.divarr[this.divarr.length - 1].css({ 30 'width': this.width, 31 'height': this.height, 32 'position': 'absolute', 33 'left': this.snakenode[i].left * this.width, 34 'top': this.snakenode[i].top * this.height, 35 'backgroundcolor': this.snakenode[i].background 36 }).appendto(this.map); 37 } 38 } 39 //根据蛇的方向(directioncode)改变蛇的节点(snakenode)的坐标 40 //思路是蛇最后的节点移动到前一个节点位置,直到蛇头根据方向移动一格 41 //37 38 39 40 是上下左右的按键码,65 68 83 87 是wasd的键码 42 //需要参数 定时器的标记(在游戏对象中生成) 43 snake.prototype.move = function (timgerid) { 44 //蛇身体 45 for (var i = this.snakenode.length - 1; i > 0; i--) { 46 this.snakenode[i].left = this.snakenode[i - 1].left; 47 this.snakenode[i].top = this.snakenode[i - 1].top; 48 } 49 //蛇头 50 switch (this.directioncode) { 51 case 39: 52 this.snakenode[0].left += 1; 53 break; 54 case 37: 55 this.snakenode[0].left -= 1; 56 break; 57 case 38: 58 this.snakenode[0].top -= 1; 59 break; 60 case 40: 61 this.snakenode[0].top += 1; 62 break; 63 case 68: 64 this.snakenode[0].left += 1; 65 break; 66 case 65: 67 this.snakenode[0].left -= 1; 68 break; 69 case 87: 70 this.snakenode[0].top -= 1; 71 break; 72 case 83: 73 this.snakenode[0].top += 1; 74 break; 75 default: 76 break; 77 } 78 //获取地图的最大坐标,如果蛇头的坐标越界则提示游戏结束 79 var maxx = this.map.width() / this.width; 80 var maxy = this.map.height() / this.height; 81 var snakeheadx = this.snakenode[0].left; 82 var snakeheady = this.snakenode[0].top; 83 if (snakeheadx < 0 || snakeheadx >= maxx || snakeheady < 0 || snakeheady >= maxy) { 84 clearinterval(timgerid);//清除定时器,游戏结束 85 alert('game over'); 86 } 87 88 } 89 //根据蛇的节点(snakenode)改变存储在divarr中的div的坐标 90 //感觉删除div 重新生成div 可能会消耗浏览器性能 91 snake.prototype.change = function () { 92 for (var i = 0, len = this.divarr.length; i < len; i++) { 93 this.divarr[i].css({ 94 'left': this.snakenode[i].left * this.width, 95 'top': this.snakenode[i].top * this.height, 96 'backgroundcolor': this.snakenode[i].background 97 }) 98 } 99 } 100 //snake的eat方法,需要参数 食物对象 定时器的标记 101 snake.prototype.eat = function (food, timgerid) { 102 //判断蛇头与食物坐标是否重合 103 var a = this.snakenode[0].left == food.left; 104 var b = this.snakenode[0].top == food.top; 105 //判断蛇头与蛇身坐标是否重合 106 for (var i = this.snakenode.length - 1; i > 0; i--) { 107 var c = this.snakenode[0].left == this.snakenode[i].left; 108 var d = this.snakenode[0].top == this.snakenode[i].top; 109 if (c && d) {//蛇吃到自己了 110 clearinterval(timgerid); 111 alert('game over'); 112 } 113 } 114 //当蛇头与食物坐标重合 115 if (a && b) { 116 //food.divarr[food.divarr.length - 1]代表最新生成的食物div 117 //将这个div记录在蛇的divarr中,在蛇节点(snakenode)中追加一个与之对应的节点 118 //在蛇移动时 改变节点坐标,然后根据节点坐标 改变这个div的坐标 119 this.divarr.push(food.divarr[food.divarr.length - 1]); 120 this.snakenode.push({ 121 background: 'blue', 122 left: 0, 123 top: 0 124 }); 125 food.render(); //重新生成食物 126 food.random(this);//随机坐标 127 } 128 } 129 window.snake = snake; 130 })();
游戏对象
1 (function () { 2 var that; //存储生成的游戏对象,因为定时器中的this指向window 3 var kcode = 39; //默认值与蛇的方向相同,存储临时方向按键码,因为在蛇移动之前时方向键可以被按多次 4 function game(map) { 5 this.map = map; 6 this.snake = new snake(this.map); //生成snake(蛇)对象 7 this.food = new food(this.map);//生成food(食物)对象 8 that = this; //记录自己 9 this.timgerid = null; //记录定时器(让蛇移动的定时器) 10 } 11 //通过原型添加一个开始的方法 12 game.prototype.star = function () { 13 this.food.render(); //生成(渲染)食物 14 this.food.random(this.snake);//随机食物的坐标,参数为snake对象,防止食物在蛇节点(snakenode)上 15 this.snake.render();//生成(渲染)蛇 16 kdown(); //开启(onkeydown),记录用户的所按的键码 17 runsnake(); //开启定时器,使蛇移动 18 } 19 20 function kdown() { 21 $(window).on('keydown', function (e) { 22 kcode = e.keycode;//记录用户的所按的键码 23 }) 24 } 25 //一个函数,参数 code 临时按键码,用来判断蛇的方向,让蛇无法掉头(方向不能直接从上变下) 26 function changingdirectionsuddenly(code) { 27 var b = code == 37 || code == 38 || code == 39 || code == 40 || code == 68 || code == 65 || code == 87 || code == 83; 28 if (b) { 29 if ((that.snake.directioncode === 39 || that.snake.directioncode == 68) && code !== 37 && code !== 65) { 30 that.snake.directioncode = code; 31 } 32 if ((that.snake.directioncode === 37 || that.snake.directioncode == 65) && code !== 39 && code !== 68) { 33 that.snake.directioncode = code; 34 } 35 if ((that.snake.directioncode === 38 || that.snake.directioncode == 87) && code !== 40 && code !== 83) { 36 that.snake.directioncode = code; 37 } 38 if ((that.snake.directioncode === 40 || that.snake.directioncode == 83) && code !== 38 && code !== 87) { 39 that.snake.directioncode = code; 40 } 41 } 42 return that.snake.directioncode; 43 } 44 //蛇移动 45 function runsnake() { 46 //记录定时器,开启定时器让蛇连续移动 47 that.timgerid = setinterval(function () { 48 //在蛇移动时判断方向。 49 // 如果在用户按下时判断方向,会导致连续按键使蛇掉头(先按左再按下,表现为掉头) 50 changingdirectionsuddenly(kcode); 51 // that.snake.eat(that.food, that.timgerid);//调用蛇的eat方法判断蛇是否吃到啥 52 // //先吃还是先移动呢?好像没啥区别 53 that.snake.move(that.timgerid);//调用蛇的move方法移动蛇节点一个 54 that.snake.change();//调用蛇的change方法改变构成蛇的div的坐标 55 that.snake.eat(that.food, that.timgerid); 56 }, 300) 57 } 58 59 window.game = game; 60 })()
main
1 (function () { 2 var game = new game($('#box')); 3 game.star(); 4 })();
html
1 <!doctype html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="x-ua-compatible" content="ie=edge"> 8 <title>document</title> 9 <link rel="stylesheet" href="css/style.css"> 10 </head> 11 12 <body> 13 <div id="box"> 14 </div> 15 </body> 16 <script src="js/jquery-1.12.2.js"></script> 17 <script src="js/tools.js"></script> 18 <script src="js/food.js"></script> 19 <script src="js/snake.js"></script> 20 <script src="js/game.js"></script> 21 <script src="js/main.js"></script> 22 23 </html>
css
1 #box{ 2 width: 200px; 3 height: 160px; 4 margin: 0 auto; 5 background-image: url(../images/ditu.jpg);//一个正方形图片,没有也不影响 6 /* background-color: #3c3c3c; */ 7 position: relative; 8 overflow: hidden; 9 }
上一篇: 世界上最贵的猫排名:草原猫一只2万美元