面向对象+原型实现贪吃蛇
前面的那篇贪吃蛇(https://blog.csdn.net/F_Felix/article/details/89676816)尽管也是用到了面向对象的,但是还有一些可以优化的地方,比如游戏本身同样是个对象,比如使用 JavaScript 中的原型
同样,我们先来分析一下这个贪吃蛇
思路分析
1、总共有几个对象? 这里有4个对象,分别是Snake、Food、Game、map,但是为了简单点就把map对象给省略了如果需要可以直接用之前那篇的
2、各个对象分别有哪些属性及方法呢?
- Food对象:宽高、颜色、位置属性以及渲染方法(width、height、bgColor、x、y 和render)
- Snake对象:宽高、方向、头颜色、身体颜色、身体属性以及渲染和移动方法(width、height、direction、headColor、bodyColor、body、render、move)
- Game对象:地图、蛇、食物属性和初始化、初始化游戏、开始游戏、暂停游戏、重置游戏、结束游戏、操作蛇对象(map、snake、food、init、start、pause、control、reset)
3、怎么在之前的基础上进行优化?
- 把方法定义在原型上,属性定义在构造函数中
- 使用沙箱把代码包裹起来,避免全局污染
(解释:https://blog.csdn.net/F_Felix/article/details/90111118)
然后就不多解释了,代码中有注释描述,直接上代码
页面代码
<!-- 样式部分 -->
<style>
* {
margin: 0;
padding: 0;
}
.map {
width: 800px;
height: 500px;
background-color: #000;
margin: 0 auto;
position: relative;
}
p {
text-align: center;
line-height: 30px;
}
.btn {
margin: 0 auto;
text-align: center;
}
</style>
<!-- 界面布局部分 -->
<body>
<div class="btn">
<button class="begin">开始游戏</button>
<button class="pause">暂停游戏</button>
<button class="reset">重启游戏</button>
</div>
<p>
<strong>游戏说明:</strong>Enter--> 开始游戏 Space--> 暂停游戏 Esc--->
重置游戏 ←↑→↓ 控制方向
</p>
<p>蛇每吃10个点速度增加,极限速度50,初始速度200</p>
<div class="map"></div>
<script src="food.js"></script>
<script src="snake.js"></script>
<script src="game.js"></script>
<script>
var map = document.querySelector('.map')
var btn1 = document.querySelector('.begin')
var btn2 = document.querySelector('.pause')
var btn3 = document.querySelector('.reset')
var g = new Game({
map: map
})
g.init()
btn1.onclick = function() {
g.start()
}
btn2.onclick = function() {
g.pause()
}
btn3.onclick = function() {
g.reset()
}
// 解决js中点击了一次按钮,再按回车会触发之前点击按钮的事件
document.