GameBuilder开发游戏应用系列之100行代码实现贪吃蛇

来源：互联网发布：js 滑动特效编辑：程序博客网时间：2024/05/16 05:34

在线预览：http://osgames.duapp.com/apprun.html?appid=osgames1-801422234293697
在线编辑：http://osgames.duapp.com/gamebuilder.php?appid=osgames1-801422234293697
微信扫描：这里写图片描述
运行截图：

除了重力感应游戏，GameBuilder开发传统的游戏也毫不逊色，作为一个怀旧的人，总是对这类游戏情有独钟。

贪吃蛇主要靠一个UICanvas来实现，前面一片博客GameBuilder开发游戏应用系列之100行代码实现别踩白块有介绍过，配合四个UIButton来控制方向。

食物生成

win.makeFoodBlock = function(num) {    var bl = win.blockList;    var fl = win.foodList;    Math.min(48 * 72 - bl.length - fl.length, num);    var x, y;    for(var i = 0; i < num; i++) {        var block = {x:0, y:0};        do {            x = Math.floor(Math.random() * 48);            y = Math.floor(Math.random() * 72);            block.x = x; block.y = y;        } while(win.blockInList(block, win.blockList) || win.blockInList(block, win.foodList));        win.foodList.push(block);    }};

方向控制

实现UIButton的onClick事件。
这里写图片描述

var win = this.getWindow();win.changeDirection(win.DIR_UP);//播放音效this.playSoundEffect("disappear.mp3");

win.changeDirection = function(dir) {    switch(win.direction) {        case win.DIR_RIGHT:            if(dir == win.DIR_LEFT) {                return;            }            break;        case win.DIR_UP:            if(dir == win.DIR_DOWN) {                return;            }            break;        case win.DIR_LEFT:            if(dir == win.DIR_RIGHT) {                return;            }            break;        case win.DIR_DOWN:            if(dir == win.DIR_UP) {                return;            }            break;    }    win.direction = dir;};

计算蛇头下一个位置

win.nextFirst = function (first) {    var nextFirst = {x:0, y:0};    switch(win.direction) {        case win.DIR_RIGHT:            nextFirst.x = (first.x + 1) % 48;            nextFirst.y = first.y;            break;        case win.DIR_UP:            nextFirst.y = (first.y === 0) ? 71 : first.y - 1;            nextFirst.x = first.x;            break;        case win.DIR_LEFT:            nextFirst.x = (first.x === 0) ? 47 : first.x - 1;            nextFirst.y = first.y;            break;        case win.DIR_DOWN:            nextFirst.y = (first.y + 1) % 72;            nextFirst.x = first.x;    }    return nextFirst;};

贪吃蛇主要逻辑

win.updateList = function() {    var last = win.blockList[win.blockList.length - 1];    var first = win.blockList[0];    var nf = win.nextFirst(first);    //吃到食物了    if(win.blockInList(nf, win.foodList)) {        win.removeBlockFromFL(nf);        win.blockList.unshift(nf);        win.find("ui-sound-effects").play("disappear.mp3");        win.makeFoodBlock(1);        if(48 * 72 === win.blockList.length) {            win.openWindow("win-result", function(ret){}, false, win.blockList.length);            win.initGame();        }    } else if(win.blockInList(nf, win.blockList) && !win.checkEqual(nf, last)) {        //蛇头碰到蛇身，游戏结束!        win.openWindow("win-result", function(ret){}, false, win.blockList.length);        win.initGame();        console.log("Game Over");    } else {        //正常行进        win.blockList.pop();        win.blockList.unshift(nf);    }    setTimeout(win.updateList, 150);};

绘制贪吃蛇

实现UICanvas的onPaint接口。
这里写图片描述

var win = this.getWindow();var bl = win.blockList;var fl = win.foodList;var ctx = canvas2dCtx;for(var i = 0; bl !== null && i < bl.length; i++) {    ctx.strokeStyle = "white";    ctx.fillStyle = "block";    ctx.strokeRect(bl[i].x * 10, bl[i].y * 10, 10, 10);    ctx.fillRect(bl[i].x * 10, bl[i].y * 10, 10, 10);}for(var i = 0; fl !== null && i < fl.length; i++) {    ctx.strokeRect(fl[i].x * 10, fl[i].y * 10, 10, 10);    ctx.fillRect(fl[i].x * 10, fl[i].y * 10, 10, 10);    }之所以用了100行代码，是因为食物是一个列表，而不是传统的一个食物，这样会多费一些代码维护食物列表。

0 0