初学JS,使用JS、H5编写推箱子小游戏简易版
推箱子小游戏是一款多年前很流行的小游戏(即使现在也有很多人玩),游戏目的很简单,就是人推箱子,把所有的箱子推到目的地,就游戏成功:
看似跟简单的逻辑,其实还是有一定难度的,我也是依靠了别人的帮助才完成的,现在开始介绍如何用js,html5编写该游戏(方便起见我们把人用一个粉圆形代替):
一.能力要求
JavaScript,HTML画布,面向对象的基本思想,合理的编程逻辑。
二.编写顺序
1.pushBox.html文件
2.pojo.js文件(用来存放所有的对象)
3.paint.js文件(用来写画画的语句)
4.game.js文件(用来写运行逻辑部分)
5.allLevels.js文件(用来存放关卡)
*注:这是我的书写习惯,按内容和功能将个各类分开,如有更好地写法欢迎评论
三.开始编写
1.建立基本的pushBox.html文件:
内容很简单,<body>里面仅仅需要<canvas>标签,设置id,其后的<audio>文件在逻辑部分做完后再加进去:
<body>
<canvas id='can1' width=1536 height=733></canvas>
<audio id="walk" autoplay></audio>
<audio id="push" autoplay></audio>
<audio id="win" autoplay></audio>
</body>
<script>有引入其他四个.js文件,还有一个调用run()方法:
<script type="text/javascript" src="pojo.js"></script>
<script type="text/javascript" src="game.js"></script>
<script type="text/javascript" src="paint.js"></script>
<script type="text/javascript" src="allLevels.js"></script>
<script>
window.onload = function(){
run();
}
</script>
2.写pojo类:
首先我们需要知道总共有这些类:
人,箱子,目标点,砖块和围墙,很简单,所有的类都有color(颜色),size(边长/半径),x(横坐标),y(纵坐标)这些属性。然后我们要记得,人和砖块可能和目标点重合,所以在箱子和人的类里面要加上isOnTarget(是否和目标点重合)属性,这样就完成了:
//人类
function Person(x, y){
this.color = 'pink';
this.size = 20;
this.x = x;
this.y = y;
//判断这个人是否在目标点上
this.isOnTarget = false;
}
//箱子类
function Box(x, y){
this.color = 'yellow';
this.size = 40;
this.x = x;
this.y = y;
//判断某个箱子是否在目标点上
this.isOnTarget = false;
}
//目标点类
function Target(x, y){
this.size = 12;
this.x = x;
this.y = y;
this.color = 'lime';
}
//地砖类
function Brick(x, y){
this.x = x;
this.y = y;
this.size = 40;
}
//围墙类
function Wall(x, y){
this.x = x;
this.y = y;
this.size = 40;
}
3.编写paint.js类
我们需要对刚刚在pojo.js类中写的所有类写出画的方法: