Heim > Artikel > Web-Frontend > Schreiben eines Push-Box-Spiels mit JS und H5
Schreiben eines Push-Box-Spiels mit JS und H5
- 小云云Original
- 2018-03-17 16:24:492068Durchsuche
Das Push-Box-Spiel ist vor vielen Jahren ein beliebtes Spiel (viele Leute spielen es auch heute noch) Der Zweck des Spiels ist sehr einfach, das heißt, die Box zu schieben und alles zu schieben Wenn Sie das Ziel erreichen, ist das Spiel erfolgreich: Es scheint eine einfache Logik zu sein, aber es ist tatsächlich ziemlich schwierig, es zu vervollständigen. Jetzt werde ich vorstellen, wie man das Spiel schreibt unter Verwendung von js und html5 (der Einfachheit halber werden wir es durch einen rosa Kreis ersetzen):
1. Fähigkeitsanforderungen
JavaScript , HTML-Canvas, grundlegende objektorientierte Ideen, vernünftige Programmierlogik.
2. Schreibreihenfolge
1. pushBox.html-Datei
2.pojo.js-Datei (wird zum Speichern aller Objekte verwendet)
3.paint.js-Datei (wird zum Schreiben von Zeichnungen verwendet Anweisungen)
4.game.js-Datei (wird zum Schreiben des laufenden Logikteils verwendet)
5.allLevels.js-Datei (wird zum Speichern von Ebenen verwendet)
*Hinweis: Dies ist meine Schreibgewohnheit, unterteilt nach Inhalt und Funktion. Trennen Sie jede Kategorie . Wenn Sie eine bessere Möglichkeit haben, es zu schreiben, kommentieren Sie es bitte
3. Beginnen Sie mit dem Schreiben
1. Erstellen Sie eine einfache PushBox .html-Datei:
Der -Tag muss nur noch mit der ID versehen werden Der Logikteil ist abgeschlossen:
<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> Es werden vier weitere .js-Dateien eingeführt, und es erfolgt ein Aufruf der run()-Methode: </script>
<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. Schreiben Sie die Pojo-Klasse:
Zuerst müssen wir wissen, dass es diese Klassen gibt:
Person, Box, Zielpunkte, Steine und Wände sind sehr einfach. Alle Klassen haben Attribute wie Farbe (Farbe), Größe (Seitenlänge/Radius), x (Abszisse) und y (Ordinate). Dann müssen wir bedenken, dass Menschen und Steine mit dem Zielpunkt zusammenfallen können, also müssen wir das Attribut isOnTarget (ob es mit dem Zielpunkt übereinstimmt) zu den Klassen der Box und der Person hinzufügen, und schon sind wir fertig:
//人类
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. Schreiben Sie die Klasse paint.js
Wir müssen Malmethoden für alle Klassen schreiben, die wir gerade in der Klasse pojo.js geschrieben haben:
Es ist wichtig zu beachten, dass: Wenn wir beispielsweise bestimmte x-, y-Koordinaten verwenden, um eine Box zu zeichnen:
ctx.fillRect(x, y, size, size);
Bei folgendem Aufruf zeichnen wir die Box in allen Ebenen wie folgt:
ctx.fillRect(500, 500, 40, 40);
Wir können nicht bestimmen, was sich neben diesem Feld befindet, es ist schwer zu beurteilen, daher gibt es keine Möglichkeit, die Logikebene zu schreiben.
Also stellen wir uns das so vor: Wir verwenden ein zweidimensionales Array, um dieses Level zu konstruieren, und jedes Objekt (Box, Person, Zielpunkt, Ziegelstein oder Wand) wird in diesem Array platziert, arr1[ ] [], so:
var arr1 = [ ['','wall','wall','wall','wall','wall','',''], ['','wall','brick','person','wall','wall','wall',''], ['','wall','brick','box','brick','brick','wall',''], ['wall','wall','wall','brick','wall','brick','wall','wall'], ['wall','target','wall','brick','wall','brick','brick','wall'], ['wall','target','box','brick','brick','wall','brick','wall'], ['wall','target','brick','brick','brick','box','brick','wall'], ['wall','wall','wall','wall','wall','wall','wall','wall'] ];
Zum Beispiel ist arr1[0][1] die Wand, sodass die Logikschicht geschrieben werden kann. Ein weiterer Vorteil besteht darin, dass wir später sehr bequem neue Ebenen erstellen können. Wir müssen sie nur in der Reihenfolge der Koordinaten in das Array schreiben.
Also schreiben wir in paint.js so: Jede Methode führt einige Operationen an x und y aus, damit sie korrekt auf der Webseite gezeichnet werden kann:
//首先还是清屏
function clearScreen(ctx){
ctx.clearRect(0,0,1536,750);
}
//画人
function paintPerson(ctx, x, y, size,color){
ctx.beginPath();
ctx.fillStyle = color;
//我们在内部就写好该往哪里画，传过来的x，y坐标值就可以直接在里面计算了
ctx.arc(530+x*size*2+20, 180+y*size*2+20, size, 0, 2*Math.PI);
ctx.fill();
}
//画箱子
function paintBox(ctx, x, y, size,color){
ctx.beginPath();
ctx.fillStyle = color;
ctx.fillRect(530+x*size, 180+y*size, size, size);
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
ctx.moveTo(530+x*size, 180+y*size);
ctx.lineTo(530+x*size+size, 180+y*size+size);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(530+x*size+size, 180+y*size);
ctx.lineTo(530+x*size, 180+y*size+size);
ctx.stroke();
ctx.strokeRect(530+x*size, 180+y*size, size, size);
}
//画目标点
function paintTarget(ctx, x, y, size,color){
ctx.beginPath();
ctx.fillStyle = color;
ctx.arc(530+x*size*4+20, 180+y*size*4+20, size, 0, 2*Math.PI);
ctx.fill();
}
//画地砖，其中用了for循环简化了代码量
function paintBrick(ctx, x, y, size){
ctx.beginPath();
ctx.fillStyle = 'blue';
ctx.fillRect(530+x*size, 180+y*size, size, size);
ctx.strokeStyle = 'lightblue';
for(var i = 0; i <= 3; i++){
ctx.beginPath();
ctx.moveTo(530+x*size, 180+y*size+0.25*(i+1)*size);
ctx.lineTo(530+x*size+size, 180+y*size+0.25*(i+1)*size);
ctx.stroke();
}
for(var i = 0; i < 4; i++){
ctx.beginPath();
if(i%2 == 0){
ctx.moveTo(530+x*size+0.5*size, 180+y*size+0.25*i*size);
ctx.lineTo(530+x*size+0.5*size, 180+y*size+0.25*(i+1)*size);
ctx.stroke();
}else{
ctx.moveTo(530+x*size+0.25*size, 180+y*size+0.25*i*size);
ctx.lineTo(530+x*size+0.25*size, 180+y*size+0.25*(i+1)*size);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(530+x*size+0.75*size, 180+y*size+0.25*i*size);
ctx.lineTo(530+x*size+0.75*size, 180+y*size+0.25*(i+1)*size);
ctx.stroke();
}
}
}
//画围墙
function paintWall(ctx, x, y, size){
ctx.beginPath();
ctx.fillStyle = 'gray';
ctx.fillRect(530+x*size, 180+y*size, size, size);
ctx.strokeStyle = 'white';
ctx.beginPath();
ctx.moveTo(530+x*size+0.5*size, 180+y*size);
ctx.lineTo(530+x*size+0.5*size, 180+y*size+size);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(530+x*size, 180+y*size+0.5*size);
ctx.lineTo(530+x*size+size, 180+y*size+0.5*size);
ctx.stroke();
}Dann, wann Wir rufen die Zeichenmethode auf, wir nennen sie so und zeichnen entsprechend der Position jedes Blocks im Array:
unction getMap(ctx, person){
clearScreen(ctx);
for(var i = 0; i<arr1.length; i++){
for(var j = 0; j<arr1[0].length; j++){
//画初始图
if(arr1[i][j] == 'wall'){
//这样我们就把坐标作为参数，引入到那些paint方法里，经过计算，在网页中正确显示了
paintWall(ctx,j,i,40);
}else if(arr1[i][j] == 'brick'){
paintBrick(ctx, j, i,40);
}else if(arr1[i][j] == 'target'){
paintBrick(ctx, j, i,40);
paintTarget(ctx, j, i,10,'lime');
}else if(arr1[i][j] == 'box'){
paintBrick(ctx, j, i,40);
var index = getBoxIndex(boxes,i,j);
if(boxes[index].isOnTarget){
paintBox(ctx, j, i,40,'red');
}else{
paintBox(ctx, j, i,40,'yellow');
}
}else if(arr1[i][j] == 'person'){
paintBrick(ctx, j, i,40);
paintPerson(ctx, j, i,20,'pink');
}
}
}
}Nach dem Aufruf der getMap()-Methode in run() in game.js wird die Der Effekt ist wie folgt:
4.game.js Klasse:
Zuerst müssen wir noch die Objekte von Menschen und Boxen erstellen:
var person = new Person(0,0);
var boxLevel1Count = 3;
var boxes = new Array(boxLevel1Count);
for(var i = 0;i<boxLevel1Count;i++){
boxes[i] = new Box(0,0);
}Dann müssen wir die Position (Koordinaten) der Person im zweidimensionalen Array und die Koordinaten der drei Felder darin kennen. Wir benötigen die folgenden zwei Methoden:
//找到人的坐标
function findPerson(){
for (var i = 0; i < arr1.length; i++) {
var tmp = arr1[i];
for (var j = 0; j < tmp.length; j++) {
if (arr1[i][j] == 'person') {
//使用json传变量
return {personX:i,personY:j};
}
}
}
}
//找箱子的坐标，并把他们放到数组里
function findBox(){
var count = 0;
for (var i = 0; i < arr1.length; i++) {
var tmp = arr1[i];
for (var j = 0; j < tmp.length; j++) {
if (arr1[i][j] == 'box') {
boxes[count].x = i;
boxes[count].y = j;
count++;
}
}
}
return boxes;
}Nachdem wir die Koordinaten der Person gefunden haben, müssen wir x, y des Personenobjekts mit i, j im zweidimensionalen Array verknüpfen, das heißt:
//接收person的坐标 var position = findPerson(); //i是person的横坐标 var i = position.personX; //j是person的纵坐标 var j = position.personY; //使对象的属性和人在二维数组的坐标关联 person.x = i; person.y = j;
<br/>
Dann Wir können beispielsweise mit dem Schreiben der Logik beginnen. Der Benutzer drückt die Richtung. Drücken Sie die linke Taste, um zu bestimmen, was sich auf der linken Seite befindet. Wenn es sich um ein Kästchen handelt, müssen Sie auch bestimmen, was sich auf der linken Seite des Kästchens befindet:
Die richtige Logik lautet wie folgt (nehmen wir als Beispiel eine Person, die sich nach links bewegt, und dann sind oben, unten und rechts gleich):
Die Die spezifische Syntax ist sehr einfach: Gemäß dem ersten Beispiel befinden sich beispielsweise links Ziegelsteine, und die Person, auf die sie tritt, ist nicht der Zielpunkt:
if(arr1[i][j-1] == 'brick'){
arr1[i][j-1] = 'person';
arr1[i][j] = 'brick';
Audio1.src = '走路emm.wav';
}Wenn in unserem nächsten Schritt die Person Schritte zum Zielpunkt müssen wir person.isOnTarget auf true setzen. Wenn sich die Person entfernt, setzen wir diese Eigenschaft auf false
当人左边是箱子的时候，比较麻烦，首先必须明白有一点：我们到底推的是哪个箱子？之前已经有了一个存放所有箱子的数组了，所以现在需要一个方法，可以让我们知道我们推的是哪个箱子：
function getBoxIndex(boxes, i,j){
var index = 0;
for(var k = 0;k<boxes.length;k++){
if(boxes[k].x == i && boxes[k].y == j){
//找到了这个箱子的下标
index = k;
}
}
return index;
}在实际调用中，里面的参数（i，j）就写下一步要走的那个位置，比如说向左走，就是
var index = getBoxIndex(boxes, i,j-1);
这个index就是我们要找的第i个箱子了，接下来就很好办了，我们按照刚才的逻辑一步一步写，一堆的if、else，只需注意两点，当人踩到目标点时，把person.isOnTarget = true,移开之后false；箱子踩到目标点时boxes[index].isOnTarget = true,移开之后false，然后再整理一下，简化代码量，就是：
//玩家操作
document.onkeydown = function(ev){
var oCan = document.getElementById('can1');
var ctx = oCan.getContext('2d');
var oEvent = ev || event;
var Audio1 = document.getElementById('walk');
var Audio2 = document.getElementById('push');
//接收person的坐标
var position = findPerson();
//i是person的横坐标
var i = position.personX;
//j是person的纵坐标
var j = position.personY;
//使对象的属性和人在二维数组的坐标关联
person.x = i;
person.y = j;
if(oEvent.keyCode == 37){
if(person.isOnTarget){
if(arr1[i][j-1] == 'brick'){
arr1[i][j-1] = 'person';
arr1[i][j] = 'target';
person.isOnTarget = false;
}else if(arr1[i][j-1] == 'box' && arr1[i][j-2] != 'wall' && arr1[i][j-2] != 'box'){
var index = getBoxIndex(boxes, i,j-1);
if(!boxes[index].isOnTarget){
if(arr1[i][j-2] == 'brick'){
arr1[i][j-2] = 'box';
arr1[i][j-1] = 'person';
arr1[i][j] = 'target';
person.isOnTarget = false;
}else if(arr1[i][j-2] == 'target'){
arr1[i][j-2] = 'box';
arr1[i][j-1] = 'person';
arr1[i][j] = 'target';
person.isOnTarget = false;
boxes[index].isOnTarget = true;
}
}else if(boxes[index].isOnTarget){
if(arr1[i][j-2] == 'brick'){
arr1[i][j-2] = 'box';
arr1[i][j-1] = 'person';
arr1[i][j] = 'target';
boxes[index].isOnTarget = false;
}else if(arr1[i][j-2] == 'target'){
arr1[i][j-2] = 'box';
arr1[i][j-1] = 'person';
arr1[i][j] = 'target';
}
}
boxes[index].y--;
}else if(arr1[i][j-1] == 'target'){
arr1[i][j-1] = 'person';
arr1[i][j] = 'target';
}
}else if(!person.isOnTarget){
if(arr1[i][j-1] == 'brick'){
arr1[i][j-1] = 'person';
arr1[i][j] = 'brick';
}else if(arr1[i][j-1] == 'box' && arr1[i][j-2] != 'wall' && arr1[i][j-2] != 'box'){
var index = getBoxIndex(boxes, i,j-1);
//箱子踩的不是目标点
if(!boxes[index].isOnTarget){
//箱子左边是地面
if(arr1[i][j-2] == 'brick'){
arr1[i][j-2] = 'box';
arr1[i][j-1] = 'person';
arr1[i][j] = 'brick';
}//箱子左边是目标点
else if(arr1[i][j-2] == 'target'){
arr1[i][j-2] = 'box';
arr1[i][j-1] = 'person';
arr1[i][j] = 'brick';
boxes[index].isOnTarget = true;
}
}else if(boxes[index].isOnTarget){
if(arr1[i][j-2] == 'brick'){
arr1[i][j-2] = 'box';
arr1[i][j-1] = 'person';
arr1[i][j] = 'brick';
boxes[index].isOnTarget = false;
person.isOnTarget = true;
}else if(arr1[i][j-2] == 'target'){
arr1[i][j-2] = 'box';
arr1[i][j-1] = 'person';
arr1[i][j] = 'brick';
person.isOnTarget = true;
}
}
boxes[index].y--;
}else if(arr1[i][j-1] == 'target'){
arr1[i][j-1] = 'person';
arr1[i][j] = 'brick';
person.isOnTarget = true;
}
}
}这样，向左走的所有逻辑就完成了，然后是上，右，下，接着else if 就行，照猫画虎，把里面的i和j一更换就完成了。
所有逻辑写完，验证无误后，我们要判断通关条件，这个很简单，当所有的箱子都isOnTarget时候，成功，当然是在每次按完方向键之后都要判断：
function judgeWin(boxes){
var count = 0;
for(var p = 0;p<boxes.length;p++){
if(boxes[p].isOnTarget)
count++;
}if(count == boxes.length){
var Audio3 = document.getElementById('win');
Audio3.src = '鼓掌.mp3';
alert('You Win! 一共走了'+countStep+'步');
}
}通关的画面如下：
最后，我们加入音效，主要划分成以下几类：人走到砖块的，人推箱子的，人碰到墙的（和人推箱子碰到墙的），成功后的掌声。
总结：
1.我开始以为这个很简单，和我之前做的那个flappy bird 差不多，没想到这里面的逻辑其实很复杂，我的flappy bird链接如下：点击打开链接。所以，一定要在刚开始的时候要构思好大局，别越写越麻烦，容易产生放弃心里。
2.利用二维数组存放地图，然后在paint()方法里面写画的位置，大小等，调用的时候paint()里面就填坐标，这样有两个好处：（1）可以知道每个物块的上下左右都是什么，易于判断；（2）新建关卡的时候易于创建，只需要按照坐标位置，把wall，brick，person，target，box放进去即可
3.在创建人的对象后，我们需要在地图数组中把人的坐标找出来，然后将对象的x，y属性和坐标关联；在创建箱子的对象数组后，我们需要getIndex()方法，找到人到底推的是哪个箱子，才能使这个箱子的isOnTarget改成true或者false，这两点很关键。
Das obige ist der detaillierte Inhalt vonSchreiben eines Push-Box-Spiels mit JS und H5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse