使用前端和后端开发恐龙冒险小游戏

2024科技新时代

已于 2024-03-09 15:03:16 修改

阅读量494

点赞数 12

分类专栏： Windows使用操作说明文章标签：前端 html

于 2024-03-09 15:00:53 首次发布

本文链接：https://blog.csdn.net/2301_76481038/article/details/136583205

版权

Windows使用操作说明专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.前端与后端的认知

在开发之前，我们需要知道，什么是前端后端 :

前端和后端是Web开发的两个关键概念，它们是开发一个完整的Web应用所必需的两个不可分割的部分。以下是前端和后端的详细介绍：

前端，也称为客户端，指的是Web应用程序的用户界面及用户在浏览器中看到的所有内容，包括文本、图像、按钮等。前端开发人员使用HTML、CSS和JavaScript等技术来构建Web应用程序的用户界面，确保Web应用程序的用户界面易于使用、美观并且交互性强。

后端，也称为服务器端，指的是Web应用程序的逻辑处理和数据存储部分，即Web应用程序在服务器上运行的部分。后端开发人员使用各种编程语言和框架，如Java、Python、PHP等来开发Web应用程序的逻辑处理和数据存储部分，确保Web应用程序具有高效的性能、安全性以及可扩展性。

两者之间的区别在于所关注的内容不同，但是它们是互相关联的，需要相互合作以构建一个完整的Web应用程序。

2.准备工作

这个准备工作，一般WIN 10 家庭版和专业版和MAC 3.0及以上电脑基本都有支持

至于Win 7 及以下电脑版本呢，博主没有使用过Win 7 写代码😶，所以可能需要自己发掘。

3.开始编程

我们需要先创建一个文件夹名称为 img 用来保存图片背景的压缩图片

（资源在文章顶部发送）

资源 1 : img文件夹内的照片

接着我们再创建一个文件夹名为 src

这个文件夹里面再创建个子文件夹名为 assets

(文件夹是空的，不要放任何东西)

接着，我们在最大的文件夹，用来保存代码的文件夹里面编程:

新建一个html文件，输入以下代码 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<h3 style="text-align: center">恐龙冒险！请按下↑键开始游玩</h3>
    <div id="runner-container" class="runner-container offline" style="height: 200px; width: 600px; background: #fff; margin-left: auto; margin-right: auto; margin-top: 100px; border: 1px solid hsla(0,0%,21%,1.00); box-shadow: -1px 11px 46px 5px rgba(0,0,0,0.34); -webkit-box-shadow: -1px 11px 46px 5px rgba(0,0,0,0.34); -moz-box-shadow: -1px 11px 46px 5px rgba(0,0,0,0.34);">
        &nbsp;
    </div>


    <img id="sprite" style="display: none;" src="img/1.png" alt="test" />

</body>
<style> 
</style>
<script src="script.js"></script>


</html>

其余代码已发送到文章资源，这篇文章就到这里，拜拜

(注意不是只有这一个代码，其余代码在资源文件里)