【失业在家可以做什么之搭建个人博客】在博客主页上加入小游戏！

最新推荐文章于 2024-06-11 20:41:15 发布

Shea的笔记本

最新推荐文章于 2024-06-11 20:41:15 发布

阅读量109

点赞数

文章标签： html5 javascript css 游戏程序

本文链接：https://blog.csdn.net/weixin_45924718/article/details/132509405

版权

免责声明： 猫不可以喝咖啡

23届毕业生失业在家，准备搭建自己的个人博客，希望自己的博客可以是一个欢乐家园。大致的构思了一下，博客大概有“技术博客”、“游戏”、“生活”三个模块。

主页构想

我很喜欢像素风格的游戏，于是打算在主页放置一个CoffeeCat 游戏（自创的），就是猫咪可以随意移动，并且碰到咖啡后就可以把咖啡吃掉，一个非常简单的游戏。

实现效果如下：
在这里插入图片描述

主题风格

像素主题我使用的是NES.CSS帮助我实现这种风格
猫咪和咖啡是阿里巴巴矢量图标库中的-像素风图标

确定好风格以后就可以开始编写内容了。

HTML、CSS代码后续会贴出，本文主讲JS代码。

小猫移动

游戏的第一步就是让小猫在屏幕内移动：

获得屏幕的宽度
监听键盘的左键和右键
改变小猫的左右位置

小猫移动代码：

//获取小猫元素
var cat = document.getElementById("cat");
//获取屏幕的宽度
var screenWidth = window.innerWidth;
//获取小猫的位置
var catLeft = cat.getBoundingClientRect().left;
//监听键盘事件的<- 和 ->
document.onkeydown = function(e){
	var e = window.event || e;
	switch(e.keyCode){
		case 37:
                //判断是否到屏幕边界
                if (catLeft > 50) {
                    catLeft = catLeft - 20;
                }
                cat.style.left = catLeft + "px";
                break;
            case 39:
                //判断是否到屏幕的边界
                if (catLeft < screenWidth - 70) {
                    catLeft = catLeft + 20;
                }
                cat.style.left = catLeft + "px";
                break;
	}
}

在向右移动的时候为什么是catLeft < screenWidth - 70
这里为什么是70，在50的猫咪向右移动会带出多余的屏幕。猫咪的宽度是50px，当猫咪距离屏幕为60时，screenWidth-catLeft = 40 ，已经小于了50，屏幕会溢出。根据计算，70，不会溢出屏幕。

创建开发元素以及咖啡掉落

猫咪可以移动以后就是咖啡在屏幕随机位置掉落

在屏幕内随机选择一个位置创建一个咖啡
将创建的咖啡向下掉落
如果已经到了屏幕的底部，咖啡消失

    function createCoffee(){
        //创建咖啡元素
        var coffee = document.createElement("img");
        coffee.src = "../style/img/coffe.svg";
        coffee.style.position = "absolute";
        coffee.style.top = "0px";
        coffee.style.left = Math.floor(Math.random()*(screenWidth-64)) + "px";
        document.body.appendChild(coffee);

        //向下移动
        function dorpCoffee(){
            var currentTop = parseInt(coffee.style.top);
            var newTop = currentTop + 10;
            //检测咖啡是否掉到底部
            if(newTop > screenHeight - 64){
                document.body.removeChild(coffee);
                clearInterval(intervalId);
            }else{
                coffee.style.top = newTop + "px";
            }
        }
    
        var intervalId = setInterval(dorpCoffee,100);
    }

在创建咖啡元素中 coffee.style.left = Math.floor(Math.random()*(screenWidth-64)) + "px";为什么要减掉70也是和上面遇到屏幕溢出问题是相同的。

小猫吃咖啡

小猫吃掉咖啡应该是在咖啡掉落过程中，是否消失或继续下落的一个条件，所以我们要将这个对比加入到createCoffee()函数中：

    function createCoffee(){
        //创建咖啡元素
        var coffee = document.createElement("img");
        coffee.src = "../style/img/coffe.svg";
        coffee.style.position = "absolute";
        coffee.style.top = "0px";
        coffee.style.left = Math.floor(Math.random()*(screenWidth)) + "px";
        document.body.appendChild(coffee);

        //向下移动
        function dorpCoffee(){
            var currentTop = parseInt(coffee.style.top);
            var newTop = currentTop + 10;

            //检测猫咪是否碰撞到猫咪
            var coffeeRect = coffee.getBoundingClientRect();
            var catRect = cat.getBoundingClientRect();
            if(coffeeRect.bottom >= catRect.top && coffeeRect.left >= catRect.left && coffeeRect.right <= catRect.right){
                document.body.removeChild(coffee);
                clearInterval(intervalId);
            //检测咖啡是都到底部
            }else if(newTop > screenHeight - 64){
                document.body.removeChild(coffee);
                clearInterval(intervalId);
            }else{
                coffee.style.top = newTop + "px";
            }
        }
    
        var intervalId = setInterval(dorpCoffee,100);
    }