HTML小游戏11 —— 横版恐龙大冒险游戏(附完整源码)

Posted 鲸落✗

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML小游戏11 —— 横版恐龙大冒险游戏(附完整源码)相关的知识,希望对你有一定的参考价值。

给大家安利一个免费且实用的前端刷题(面经大全)网站,👉点击跳转到网站

本节教程我会带大家使用 html 、CSS和 JS 来制作一个 html5横版恐龙大冒险游戏

✨ 前言


🕹️ 本文已收录于🎖️100个HTML小游戏专栏:100个H5游戏专栏https://blog.csdn.net/qq_53544522/category_12064846.html
🎮 目前已有100+小游戏,源码在持续更新中,前100位订阅限时优惠,先到先得。
🐬 订阅专栏后可阅读100个HTML小游戏文章;还可私聊进前端/游戏制作学习交流群;领取一百个小游戏源码。

在线演示地址:https://code.haiyong.site/718/
源码也可在文末进行获取


✨ 项目基本结构


大致目录结构如下(共117个子文件):

├── images
│   ├── a10_100x-sheet0.png
│   ├── a10_logo_-sheet0.png
│   ...
│   ├── worldselector-sheet0.png
│   └── worldselector-sheet1.png
├── c2runtime.js
├── game.js
├── loading-logo.png
├── media
│   ├── coins_gathering01.ogg
│   ├── coins_gathering02.ogg
│   ...
│   ├── playerjumping.ogg
│   └── playerlandingafterjump.ogg
├── spilGamesWrapper.js
├── jquery-2.0.0.min.js
└── index.html 3KB


场景展示

 

 

 

 HTML源码

<div id="fb-root"></div>
<div id="c2canvasdiv">
<canvas id="c2canvas" width="960" height="600">
<h1>您的浏览器似乎不支持HTML5。请尝试将浏览器升级到最新版本。 <a href="http://www.whatbrowser.org">什么是浏览器?</a>
<br/><br/><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx">Microsoft Internet Explorer</a><br/>
<a href="http://www.mozilla.com/firefox/">Mozilla Firefox</a><br/>
<a href="http://www.google.com/chrome/">Google Chrome</a><br/>
<a href="http://www.apple.com/safari/download/">Apple Safari</a><br/>
<a href="http://www.google.com/chromeframe">Google Chrome Frame for Internet Explorer</a><br/></h1>
</canvas>
</div>

CSS 源码

body

body 
    background: #000;
    color: #fff;
    overflow: hidden;
    -ms-touch-action: none;

canvas

canvas 
    touch-action-delay: none;
    touch-action: none;
    -ms-touch-action: none;

JS 源码

js 代码较多,这里提供部分,完整源码可以在文末下载

如果尝试在磁盘上预览导出的项目,发出警告

(function() 
	// 检查是否在文件协议上运行导出
	if (window.location.protocol.substr(0, 4) === "file") 
)();

禁用操作

window.onload = function() 
	document.onkeydown = function() 
		var e = window.event || arguments[0];
		//F12
		if (e.keyCode == 123) 
			return false;
			//Ctrl+Shift+I
		 else if ((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 73)) 
			return false;
			//Ctrl+Shift+C
		 else if ((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 67)) 
			return false;
			//Shift+F10
		 else if ((e.shiftKey) && (e.keyCode == 121)) 
			return false;
			//Ctrl+U
		 else if ((e.ctrlKey) && (e.keyCode == 85)) 
			return false;
			//Ctrl+S
		 else if ((e.ctrlKey) && (e.keyCode == 83)) 
			return false;
		
	;
	document.oncontextmenu = function() 
		return false;
	

游戏包装器

var GameWrapper = 
    isAsking: false,
    askAds: function (x) 
        if (!GameWrapper.isAsking) 
            GameWrapper.isAsking = true;
            if (GameAPI.IS_STANDALONE)                
                GameWrapper.onResume();
             else 
                GameAPI.GameBreak.request(function () 
                    GameWrapper.onPause();
                , function () 
                    GameWrapper.onResume();
                );
            

        

    ,
    onResume: function () 
        GameWrapper.isAsking = false;
        $("#funcName").val("OnResume");
        $("#exeCommand").click();
    ,
    onPause: function () 
        $("#funcName").val("OnPaused");
        $("#exeCommand").click();
    ,
;

图片资源

 
一共 98 张图片,全都打包放在文末的下载链接里了。

音频资源

源码下载


1.CSDN资源下载https://download.csdn.net/download/qq_44273429/87123666
2.从海拥资源网下载:https://code.haiyong.site/718/
3.也可通过下方卡片添加好友回复恐龙大冒险获取

以上是关于HTML小游戏11 —— 横版恐龙大冒险游戏(附完整源码)的主要内容,如果未能解决你的问题,请参考以下文章

HTML小游戏6 —— 《高达战争》横版射击游戏(附完整源码)

横版游戏跳台的碰撞忽略解决

Python Python小游戏-贪吃蛇大冒险

用Python写了一个贪吃蛇大冒险小游戏

小白可以用unity 制作2D 横版游戏吗?

Chrome 的小恐龙游戏,被我破解了...