uniapp开发一个贪吃蛇小游戏！ |
您所在的位置：网站首页 › typescript教学 › uniapp开发一个贪吃蛇小游戏！ |
uniapp开发一个贪吃蛇小游戏！
|
第一次玩贪吃蛇还隐约记得是?️后父亲给我玩的第一个游戏 该小游戏使用uniapp开发 前置详细内容就不细说了详细看：https://juejin.cn/post/7085727363547283469#heading-14 游戏演示
详细代码结构如果需要请到github查看 主要分为：开始游戏、地块、蛇身、虫子、污染地块，游戏音效 蛇蛇目前：{{snakes.length}}米长 选择游戏难度 简单模式 正常模式 困难模式 地狱模式 开始游戏 游戏结束 您的蛇蛇达到了{{snakes.length}}米 再次挑战 重选难度 export default { data() { return { blocks: [], // 板块 worms: [], // 虫子 snakes: [0, 1, 2, 3], // 蛇身 direction: "right", // 蛇移动方向 }; }, onLoad() { this.initGame(); }, methods: { initGame() { this.blocks = new Array(100).fill(0); // 生成100个地面板块 this.worms = [Math.floor(Math.random() * 96) 4]; // 随机生成虫子 this.snakes = [0, 1, 2, 3]; // 初始化蛇身位置 } } } 渲染蛇身 给我们的蛇穿上他的外衣 蛇身的渲染根据snakes(里边放着蛇的身体)来匹配地面板块的索引 从而找到对应的格格并修改背景图来渲染蛇身 蛇头和蛇尾就是取snakes第0位和最后一位 并找到对应的格格修改当前背景图 import worm from "worm.png"; import snakeBody from "snake_body.png"; import snakeHead from "snake_head.png"; import snakeTail from "snake_tail.png"; import polluteBlock from "pollute.png"; import wormBoom from "worm_4.png"; export default { methods: { bg(type, index) { let bg = ""; switch (type) { case 0: // 地板 bg = "unset"; break; case 1: // 虫子 if (this.boom) { bg = `url(${wormBoom})`; } else { bg = `url(${worm})`; } break; case 2: // 蛇 let head = this.snakes[this.snakes.length - 1]; let tail = this.snakes[0]; if (index === head) { bg = `url(${snakeHead})`; } else if (index === tail) { bg = `url(${snakeTail})`; } else { bg = `url(${snakeBody})`; } break; case 3: // 污染的地块 bg = `url(${polluteBlock})`; break; } return bg； }, } } 控制蛇的方向 控制蛇的方向pc端我们通过监听键盘事件找到对应的键盘键的编码上下左右来改变蛇的方向 而手机端我们通过touch时间手指触摸点及滑动点的XY轴值来判断蛇的方向 蛇蛇目前：{{snakes.length}}米长 |
【本文地址】
今日新闻 |
推荐新闻 |