js面向对象案例 贪吃蛇
程序员文章站
2022-06-25 08:14:15
食物对象 工具对象 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 }