JS实现贪吃蛇小游戏

最新推荐文章于 2024-05-23 22:21:26 发布

FFlouxetine

最新推荐文章于 2024-05-23 22:21:26 发布

阅读量2.6k

点赞数 7

文章标签： JavaScript 贪吃蛇 js 贪吃蛇小游戏 JS实现贪吃蛇

本文链接：https://blog.csdn.net/FFlouxetine/article/details/90210965

版权

分析食物

对象：食物
属性：宽（width）、高（height）、水平坐标（x）、垂直坐标（y）、背景颜色（bgcolor）
方法：随机生成、移除食物
（在此之前可以完成一个小任务,相当于为这一步做铺垫）
例题：随机生成十个方块，每一秒刷新一次，位置随机，颜色随机
分析蛇

对象：蛇
属性：初始长度（一个个蛇节构成：x，y，color）、方向：（direction）
方法：生成蛇、吃食物、移动
分析游戏

对象：游戏
属性：蛇、食物、方向
方法：开始游戏

建成页面 `index.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
		#container {
   
		    position: relative;
		    width: 800px;
		    height: 800px;
		    margin: 0 auto;
		    background-color: lightgray;
		}
		#container div {
   
		    position: absolute;
		}
	</style>
</head>
<body>
    <div id="container">

    </div>

    <script src="js/tools.js"></script>
    <script src="js/food.js"></script>
    <script src="js/snake.js"></script>
    <script src="js/game.js"></script>
    <script>
        var container = document.getElementById('container');
        var game = new Game(container);
        game.startGame(container);
    </script>
</body>
</html>

一个工具 `tools.js`

将此函数修改为允许接收小数

	var Tools = {
   
    random: function(min, max) {
   
        return Math.round(Math.random() * (max - min)) + min;
    }
}

分析食物 `food.js`

function Food(options) {
   
    var options = options || {
   };
    this.width = options.width||20;
    this.height = options.height||20;
    this.x = options.x||0;
    this.y = options.y||0;
    this.bgColor = options.bgColor||'red';
}

// 随机生成
Food.prototype.randomGenerateTo = function(container) {
   
    // 在生成食物之前，应该将蛇吃的那个食物移除
    var foodId = document.getElementById('food');
    if (foodId) {
   
        foodId.parentNode.removeChild(foodId);
    }

    // 创建div（document.createE

最低0.47元/天解锁文章

FFlouxetine

关注

7
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
JS实现贪吃蛇小游戏

JS实现贪吃蛇小游戏分析食物对象：食物属性：宽（width）、高（height）、水平坐标（x）、垂直坐标（y）、背景颜色（bgcolor）方法：随机生成、移除食物（在此之前可以完成一个小任务,相当于为这一步做铺垫）例题：随机生成十个方块，每一秒刷新一次，位置随机，颜色随机分析蛇对象：蛇属性：初始长度（一个个蛇节构成：x，y，color）、方向：（direction）方...
复制链接

扫一扫