Introduction to the

I used to like to write H5 games when I was idle. A few days ago, I sorted out the code of pushing boxes and put it into git repository. Welcome to play.

Try to play

Code warehouse

The main logic

  1. The whole interface is a canvas, first read level.js file to get map information, and draw map information in the canvas accordingly. The map information for each level looks like this. 1 is the fence, 2 is the grey Wolf, 4 is the little sheep and 8 is the cage. 
    
       "map": [[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 8, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 1], [1, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1], [1, 0, 0, 0, 2, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1], [1, 0, 0, 0, 8, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]Copy the code
<script src="js/level.js"></script> var data = datas.myarray; // Datas are map information data defined in level.js. Var score = 0; Var level = 1; Var cage_num = 0; Var c = document.getelementById ("c"); Var CTX = c.goetContext ('2d');
var tree = new Image();
gameinit();
function gameinit() {
   tree.src = "img/tree.png";
   tree.onload = function () {
   	for (var i = 0; i < map.length; i++) {
   		for(var j = 0; j < map[i].length; J++) {//if(map[i][j] == 1) { ctx.drawImage(tree, j * 50, i * 50, 50, 50); }}}} //... Similarly, it should be noted that the location information of the grey Wolf should be saved when drawing the grey Wolf, and the total number of cages and (for judging whether they pass the test) should be recorded when drawing the cage. }Copy the code
  1. Listen for keyboard WASD and up, down, left, and right click events to redraw the canvas.
window.onkeydown = function() { var keycode = event.keyCode; // After completing the level, a message will appear and a new map will be drawn by pressing the button again.if (score >= cage_num) {
   			level++;
   			score = 0;
   			cage_num = 0;
   			ctx.clearRect(0, 0, 800, 600);
   			map = data[level].map;
   			gameinit();
   		} else {
   			switch (keycode) {
   				case38:// Key: upcase87:// key: w wolf.src ="img/wolf-sm.png";
   					if(map[wi-1][wj] == 0) {// Go up, top is grass ctx.clearRect(wj * 50, WI * 50, 50, 50); ctx.drawImage(wolf, wj * 50, wi * 50 - 50, 50, 50); map[wi][wj] = 0; map[wi - 1][wj] = 2; wi = wi - 1; }else if(map [wi - 1] [wj] = = 4 && map [wi - 2] [wj] = = 0) {/ / go upward, above is the sheep, the sheep is above the grass. ClearRect (wj * 50, WI * 50-50, 50, 50); ctx.drawImage(sheep, wj * 50, wi * 50 - 100, 50, 50); ClearRect (wj * 50, WI * 50, 50, 50); ctx.drawImage(wolf, wj * 50, wi * 50 - 50, 50, 50); Map [wi][wj] = 0; map[wi - 1][wj] = 2; map[wi - 2][wj] = 4; wi = wi - 1; }else if(map[wi-1][Wj] == 4&& map[wi-2][wj] == 8) {// Go up, there is a sheep on the top, there is an empty cage on the sheep. ClearRect (wj * 50, WI * 50-50, 50, 50); ctx.drawImage(sheep, wj * 50, wi * 50 - 100, 50, 50); ClearRect (wj * 50, WI * 50, 50, 50); ctx.drawImage(wolf, wj * 50, wi * 50 - 50, 50, 50); Map [wi][wj] = 0; map[wi - 1][wj] = 2; map[wi - 2][wj] = 12; wi = wi - 1; score++; }elseCtx.clearrect (wj * 50, WI * 50, 50, 50); ctx.clearRect(wj * 50, WI * 50, 50, 50); ctx.drawImage(wolf, wj * 50, wi * 50, 50, 50); }break; // The same for other buttons}} // Judge whether to pass the customs, and give the customs slogan.if(score >= cage_num && cage_num ! = 0) { ctx.font ="bolder 50px Arial";
   			ctx.fillStyle = "red";
   			ctx.fillText("YOU WIN!!!", 200, 200);
   			ctx.fillText("NEXT,GO!!!", 200, 300);
   		}
Copy the code