前端游戏之原生js-猴子吃水果
2024-07-02 07:39:43
偶然想到曾经在无智能手机时代，玩过的一款游戏，游戏名忘了，只记得内容，游戏内容是一个猴子在树木之间跳跃，吃水果，躲炸弹，防虫子，其他的记不太清，大致是这样的玩法，似乎是某款诺基亚上的游戏。。。。。。-_-!!。。。。。。由于执念太强，所以试着用html和原生js写下，倒是写出了个半吊子，唔----算是有个小样子吧。。。先看下游戏展示图：
接下来是html代码：
<div class="startGame"> <!-- 游戏开始大页面 --><img src="img/start.png" alt="" id="startGame"> <!-- 加入游戏开始按钮，这里用图片代替 -->
</div><div class="wrapper" id="wrapper"> <!-- 游戏开始后进入的主页面的大页面 --><div class="backgroundTree"> <!-- 在大页面里装入背景—三棵树 --><div class="tree1"></div> <!-- 这里的树用图片表示，在css中写入，下面的树相同 --><div class="tree2"></div><div class="tree3"></div></div><div class="move" id="move"> <!-- 在大页面中加入动态因子（猴子，水果，炸弹），由于是动态的，所以在js里生成显示，不再这里直接显示 --><!-- <div class="monkey" id="monkey"></div> --> <!--注： 这是在执行js后，会自动生成的三个节点 --><!-- <div class="fruits" id="fruits"></div> --><!-- <div class="boom" id="boom"></div> --></div><div class="scoreBox" id="scoreBox"> <!-- 显示分数的大页面 --><div class="score">计分：<p id="score">0</p> <!-- 动态计入分数，在js里写入变化的分数值 --></div></div>
</div>
<div class="gameOver" id="gameOver"> <!-- 当游戏失败后，显示的游戏结束大页面 --><div class="over" id="over"> <!-- 在大页面中的游戏结束弹出框，这里用图片表示(在css里写入图片) --><div class="close" id="close"></div> <!-- 在游戏结束框里加入关闭按钮，这里也用图片表示（css加入图片） --><div class="scoreOver"><p id="scoreOver"></p></div> <!-- 在游戏结束框中加入最后的计分 --></div>
</div>
接下来css代码：
*{ /* 写代码的习惯，先将所有默认的margin和padding都清0 */margin: 0;padding: 0;}.startGame{ /* 设置游戏开始的大页面 */width: 100%; /* 100%的宽度 */height: 609px; /* 根据自己的电脑浏览器显示大小设置的高度 */position: absolute; /* 设置绝对定位 */top: 0;left: 0;z-index: 1000; /* 显示在其他页面的最前面 */
}.startGame img{ /* 在大页面中显示的游戏开始按钮 */width: 300px; /* 根据图片设置宽高 */height: 100px;position: absolute; /* 设置绝对定位，从这里到下面的margin：auto的设置表示该内容基于父级定位到正中心位置 */top: 0;left: 0;right: 0;bottom: 0;margin: auto;
}.wrapper{ /* 游戏开始后的主界面的大界面 */width: 100%; /* 和上述一样是设置宽高和绝对定位 */height: 609px;position: absolute;top: 0;left: 0;
}.backgroundTree{ /* 在大界面中显示树的页面 */width: 100%; /* 这里的值和上述设置的一样，原因往上看，这里不解释了 */height: 609px;position: absolute;top: 0;left: 0;background-image: url('img/bg1.jpg'); /* 加入背景图片，记得要和你的树看起来和谐一点哦 */background-size: 100% 100%; /* 100%平铺图片 */
}.tree1{ /* 在背景图片中加入树的图片 */width: 25%; /* 设置树的宽高，宽占背景图片的25% */height: 609px; background-image: url('img/tree.png'); /* 加入树的图片 */background-size: 100% 100%; /* 平铺 */position: absolute; /* 绝对定位 */top: 0;left: 5%; /* 位置距离左边5% */
}.tree2{ /* 加入第二个树的图片 */width: 25%; /* 和上述一样 */height: 609px;background-image: url('img/tree.png');background-size: 100% 100%;position: absolute;top: 0;left: 37.5%; /* 位置距离左边37.5% */
}.tree3{ /* 加入第三个树的图片 */width: 25%;height: 609px;background-image: url('img/tree.png');background-size: 100% 100%;position: absolute;top: 0;left: 70%; /* 位置距离左边70% */
}.move{ /* 设置动态因子的大页面 */width: 100%; height: 520px; /* 设置你希望的游戏活动区域大小 */position: absolute;top: 60px; /* 设置位置距离上边60px */left: 0;display: none; /* 刚开始时为不显示，触发js（即点击游戏开始按钮后）后更改为显示 */
}.monkey{ /* 设置猴子的大小和初始位置 */width: 100px;height: 100px;background-image: url('img/monkey.png'); /* 加入猴子图片 */background-size: 100% 100%;position: absolute; /* 设置基于父级的绝对定位，距上80px，距左150px */top: 80px;left: 150px;
}.fruits{ /* 设置水果的大小，至于位置在js里规定 */width: 150px;height: 50px;background-image: url('img/fruits.png'); /* 水果图片 */background-size: 100% 100%;}.boom{ /* 设置炸弹的大小 ，和上述一样解释*/width: 150px;height: 50px;background-image: url('img/zd.png');background-size: 100% 100%;display: block; /* 设置显示为block */
}.scoreBox{ /* 在大页面上的分数显示盒子 */width: 100%;height: 30px;position: absolute;top: 0;left: 0;}.score{ /* 在分数盒子里显示分数的大小和位置 */width: 80px;height: 30px;line-height: 30px; /* 垂直居中显示 */text-align: center;color: #222; /* 字体为黑色 */font-size: 18px; /* 字体大小 */font-weight: bolder; /* 字体加粗 */position: absolute; /* 在盒子里居中显示 */top: 0;left: 0;right: 0;bottom: 0;margin: auto;float: left; /* 向左浮动 */}
.score p{ /* 动态分数值 */float: right; /* 向右浮动，使数字和汉字在同一行 */
}.gameOver{ /* 游戏结束大页面 */width: 100%;height: 609px;z-index: 10000; /* 显示在所有其他页面的最前面 */position: absolute;top: 0;left: 0;display: none; /* 刚开始时不显示，直到js里的相关事件被触发 */
}.over{ /* 在游戏结束大页面中显示游戏结束图片框 */width: 320px; /* 图片大小自己按需求写 */height: 180px;position: absolute; /* 在大页面中居中显示 */top: 0;left: 0;right: 0;bottom: 0;margin: auto;background-image: url('img/gameOver.png'); /* 加入游戏结束的图片 */background-size: 100% 100%;}.close{ /* 在游戏结束框里加入关闭按钮 */width: 30px; /* 大小自己按需设置 */height: 30px;background-image: url('img/shanchu.png'); /* 加入关闭按钮的图片 */background-size: 100% 100%;position: absolute; /* 设置图片位置为基于父级的绝对定位 */top: 18px; /* 距上边18px */right: 18px; /* 距右边18px */cursor: pointer; /* 当鼠标移到图片，原鼠标指示变成小手图片 */
}.scoreOver{ /* 设置游戏结束图片上所显示的最终分数 */width: 80px; /* 分数显示的范围宽高 */height: 30px;position: absolute; /* 依据图片设置分数显示位置 */top: 118px;left: 170px;font-size: 20px; /* 分数大小 */font-weight: bolder; /* 分数字体加粗 */color: #000; /* 分数字体颜色白色 */
}
接下是js代码：
var startGame = document.getElementById('startGame'); //获取在html中的id = ‘startGame’的节点
var move = document.getElementById('move'); //以下同上解释
var score = document.getElementById('score');
var over = document.getElementById('over');
var gameOver = document.getElementById('gameOver');
var close = document.getElementById('close');
var scoreOver = document.getElementById('scoreOver');
var scoreBox = document.getElementById('score');
var boom = document.getElementsByClassName('boom');var k = true; //设置锁
var number = [150,210,593,653,1036,1096];
var key = 1;
var speed1 = 100;
var speed2 = 80;
var timerf;
var timerb;begin(); //执行函数begin()
function begin(){ //游戏开始的默认值设置this.monkey_top = 80; // 设置this.monkey_top为（假）猴子位置的高度this.monkey_left = 150; //设置猴子位置的左边距离this.score = 0; //设置初始的分数为0monkey = document.createElement("div"); //创建一个（真）猴子（div）monkey.setAttribute('id','monkey'); //给猴子一个id = 'monkey'monkey.classList.add('monkey'); //给猴子一个class = “monkey”,用在css设置里move.appendChild(monkey); //把猴子插入move节点下，成为move节点下的子节点，注：这的move是上述从var move里获取的id=“move”的节点bindEvent(); //触发bindEvent()函数
}function bindEvent(){ //用来装所有按键鼠标事件startGame.onclick = function(){ //当点击游戏开始按钮时触发该事件（注：startGame也是从上述的var startGame里得到的id节点，以下类似的不再说明）startGame.style.display = 'none'; // id=‘startGame’的节点display为none时，表示不显示该节点内容以及其下的子节点move.style.display = 'block'; //表示move节点包括其子节点都显示food(); //触发food()函数bomb(); //触发bom()函数}document.onkeydown = function(e){ //键盘事件，用来控制猴子的移动事件var code = e.keyCode; //用code获取你所按的按键的代表的值setDerict(code); //将code的值返给setDerict()函数，触发该函数}close.onclick = function(){ //游戏结束后出现在游戏结束框右上方的叉叉按钮的点击事件gameOver.style.display = 'none'; //游戏结束框消失k = true; //钥匙k为truereStart(); //触发重新开始游戏的函数，即reStart()}
}function reStart(){ //游戏重新开始函数this.monkey_top = 80; //与上述的begin()一样,重新设置初始值this.monkey_left = 150;this.score = 0;scoreBox.innerHTML = this.score; //将游戏主界面的分数清0monkey = document.createElement("div"); //创建一个新的猴子monkey.setAttribute('id','monkey');monkey.classList.add('monkey');move.appendChild(monkey);key = 1; //钥匙key初始值为1bindEvent(); //重新触发bindEvent等一系列函数food();bomb();}function setDerict(code){ //猴子移动方向的控制switch(code){ //获取到code的值case 37: //表示按键的方向键左if(key == 2||key == 4||key == 6){ //当key为2，4，6时引发的事件，注：这里的key的用意是：由于一颗树木分左右，而两颗树间又有距离，所有的树左右距离一样，所有的树与树间隔也一样，但左右和间隔的距离不一样，所以这里将其猴子的跳跃分成树1左，树1右，树间，树2左，树2右，树间…，不难找到规律，猴子从左到右为奇数，从右到树间为偶数，因此需要一个key来计入数字monkey.style.left = this.monkey_left - 60 + 'px'; //当key为偶数时，猴子的右距离为原始值右距离减60（这个60是树的左右直径）this.monkey_left = parseInt(getComputedStyle(monkey).left); //此时的原始值要同步改变为当前的猴子位置的右距monkey.style.backgroundImage = 'url("img/monkey.png")'; //加入猴子面朝左的图片key --; //key减1，变奇数}else if(key == 3 || key == 5){ //key为奇数时执行，注这里没有1，是因为这个按键是向左的，而猴子刚开始为的位置就在最左边，所以key为1时不能操作向左的按键monkey.style.left = this.monkey_left - 383 + 'px'; //猴子右距-383，这里的383是两颗树之间的距离this.monkey_left = parseInt(getComputedStyle(monkey).left); //同上monkey.style.backgroundImage = 'url("img/monkey2.png")'; //面朝右的猴子图片key --; //key减1，变偶数}else{ //因为树只有三颗，所以可设置的范围也就在1-5之间，所以当key为其他数值时，不触发事件;}break;case 38: //上monkey.style.top = parseInt(getComputedStyle(monkey).top) - 10 + 'px'; //控制猴子向上运动时的移动距离，为当前距离-10this.monkey_top = parseInt(getComputedStyle(monkey).top); //实时获得更改后的猴子上距离break;case 39: //右if(key == 1||key == 3||key == 5){ //这里的解释和上述37的一样，不再不说明，注：这里有1是由于该按键向右，因此可以操作monkey.style.left = this.monkey_left + 60 + 'px';this.monkey_left = parseInt(getComputedStyle(monkey).left);monkey.style.backgroundImage = 'url("img/monkey2.png")';key ++; //变偶数}else if(key == 2 || key == 4){ //与上述一样，不多解释了monkey.style.left = this.monkey_left + 383 + 'px';this.monkey_left = parseInt(getComputedStyle(monkey).left);monkey.style.backgroundImage = 'url("img/monkey.png")';key ++;}else{;}break;case 40: //下 monkey.style.top = parseInt(getComputedStyle(monkey).top) + 10 + 'px'; //同上含义this.monkey_top = parseInt(getComputedStyle(monkey).top);break;default:break;}
}function food(){ //设置水果函数var f = Math.floor(Math.random()*6); 先用f来获取一个0-6的一个随机数var monkey_l1 = parseInt(getComputedStyle(monkey).left); //为下述过程方便，因此将猴子的位置赋给新变量var monkey_t1 = parseInt(getComputedStyle(monkey).top);var fruits = document.createElement('div'); //做一个水果(div)fruits.style.position = 'absolute'; //水果设置绝对定位fruits.style.left = number[f] + 'px'; //水果的右距为数组number里的第随机f个数，number[]数组的具体数值在开头设置了fruits.style.top = 0 + 'px'; //水果的初始上距离为0move.appendChild(fruits); //在move下加入水果节点，是水果节点成为move下的子节点fruits.setAttribute('id','fruits'); //为水果节点加入id = ‘fruits’fruits.classList.add('fruits'); //加入class = ‘fruits’timerf = setInterval(function(){ //设置每隔speed1分钟执行一次的事件var monkey_l1 = parseInt(getComputedStyle(monkey).left); //这里同上述的猴子里的一样意思，不再多解释var monkey_t1 = parseInt(getComputedStyle(monkey).top);var f_l = parseInt(getComputedStyle(fruits).left); //这里也是为方便，将水果的左距离赋给f_lvar f_t = parseInt(getComputedStyle(fruits).top); //同fruits.style.top = f_t + 10 + 'px'; //水果的上距离+10if(f_t > 450){ //根据游戏界面设置数值，这里的450是我界面上的底部距离fruits.remove(); //当水果到达450以后，水果消失（删除节点）food(); //上个水果消失，下个水果出现}else if((monkey_l1 == f_l)&&((monkey_t1 == f_t)||(monkey_t1 == f_t + 30)||(monkey_t1 == f_t - 50))){ //前面为图方便就用在这里，这里表示的是当猴子吃到水果时，执行的事件，而猴子要吃到水果的要求就是，猴子的位置要和水果的位置一样，就表示吃到了，因为我的猴子设置的是100的宽高，而水果是50，所以这里我把猴子分成了三段，以便猴子吃水果的时候能够正常点显示（什么是正常显示，，，嗯，，就是水果碰到猴子头或者猴子身体或者猴子尾巴时，都表示吃到水果，都能得分）this.score += 1; //吃到水果得分+1scoreBox.innerHTML = this.score; //更新给界面上的分数fruits.remove(); //吃到水果后，水果自然要消失food(); //吃完，就要生成下个水果的出现，以便游戏继续bomb(); //为了增加游戏难度，所以当猴子吃到一个水果后，就要同步增加一个炸弹}else{ //其他情况不执行事件;}},speed1);}function bomb(){ //设置炸弹var b = Math.floor(Math.random()*6); //与上述水果一致，其目的是为了随机出现在树的顶端六个位置var zd = document.createElement('div'); //创建一个炸弹zd.style.position = 'absolute'; //设置绝对定位zd.style.left = number[b] + 'px'; //取到随机位置zd.style.top = 0 + 'px'; //与上述一致，不多解释move.appendChild(zd);zd.setAttribute('id','zd');zd.classList.add('boom');timerb = setInterval(function(){ //设置每隔speed2执行一次事件var monkey_l = parseInt(getComputedStyle(monkey).left); //与上述水果一致不多解释var monkey_t = parseInt(getComputedStyle(monkey).top); var b_t =parseInt(getComputedStyle(zd).top);var b_l =parseInt(getComputedStyle(zd).left);zd.style.display = 'block'; //设置display = ‘block’zd.style.top = b_t + 10 + 'px'; //设置上距离+10if(b_t > 450){ /同上述解释if(k == true){ //这里设置的k，在下面解释zd.remove(); //炸弹消失bomb(); //重新生成炸弹}else{ //在这里解释下k的作用，因为游戏的难度是靠不断增加的炸弹为障碍，所以就出现了个问题，由于这里的zd.move()只能删除当前的炸弹（1个），不能删除所有的炸弹，因此对于重新开始游戏就麻烦了，炸弹会重失败时的个数开始显示，也就是游戏不能再从简单的开始玩，所以这里为设置所有炸弹都消失，而添加了这步操作for(var l = 0;l<document.getElementsByClassName('boom').length;l++){ //for循环的是当前html里显示的所有class为boom的节点，该节点表示的就是炸弹var long = document.getElementsByClassName('boom')[l]; //获取每个boom节点long.remove(); //循环删除每个boom节点}}}else if((monkey_l == b_l) && ((monkey_t == b_t) || (monkey_t == b_t - 50) ||( monkey_t == b_l + 30))){ //这里的含义同上述的水果，只是将水果替换为炸弹，也就是猴子吃到炸弹时引发的事件scoreOver.innerHTML = this.score; //游戏结束最终得分gameOver.style.display = 'block'; //显示游戏结束界面k = false; //这里控制所有正在掉落的炸弹，使它不会再触发上述的事件，而转触发删除节点事件fruits.remove(); //游戏结束所以水果也需要消失monkey.remove(); //猴子消失zd.remove(); //这个碰到的炸弹也消失}else{;}if((monkey_l == b_l) && ((monkey_t == b_t) || (monkey_t == b_t - 50))){ //不用怀疑，这里也和上面的一致，是猴子碰到炸弹触发事件，而作用也是为了双重保险删除所有炸弹节点，，，，，不知道这步是不是多余了。。。。等会试试for(var l = 0;l<document.getElementsByClassName('boom').length;l++){var long = document.getElementsByClassName('boom')[l];long.remove();}}},speed2);
}
好了，现在所有的代码都写完了，这游戏有个小缺点，就是当游戏失败后，你需要等界面上的所有炸弹都掉落完毕，再重新开始，才能从简单的开始（即刚开始只掉落一个炸弹）。。。。
总算是完成了记忆中的那个游戏，有点小激动，咳咳。。。虽然是挺low的，不过算是满足了下回忆吧。。。有空会继续升级这个游戏，毕竟还没有把向上爬的金龟子加入，，，
那个有感兴趣的大佬们，可以写写，写个更好的，希望最终作品能够分享给我，谢谢了。。。
注：上述代码解释有误的，帮我指出，谢谢。当然如果上述代码有不理解的也可以联系我
前端游戏之原生js-猴子吃水果相关推荐
- 水果掉落小游戏（原生js+css动画）
摘要 水果下落小游戏,采用原生js的dom操作和css的animation,做的比较粗糙,目的是练习原生js的常用操作.游戏功能与界面均为他人设计,本demo具体代码实现由本人独立实现. 样式 dem ...
- 2048小游戏（原生js基础代码篇）
今天在这里,我将给各位呈现一个简单的游戏代码. 想必大家都接触过2048这个小游戏吧,在悠闲时间用于消遣时间最好不过了,那么,我给大家写一个2048最基本的原生js代码. HTML: <!DOC ...
- html flappybird小游戏代码,原生js实现Flappy Bird小游戏
这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习. html结构 css样式 #game { width: 800px; height: 600px; border: 1px s ...
- 【前端路由原理--原生JS实现方式】--前后端路由的区别、关于单页面应用与多页面应用、什么是CSR、SSR、SSG、ISP
前言 本来只是想学习 React-Router v6 ,没有想到,带出了这么多东西.前后端路由有什么区别?SPA与MPA的是什么?在了解到前端路之后又发现单页面于应用与多页面应用的不同之处,以及 .n ...
- 前端每日实战：163# 视频演示如何用原生 JS 创作一个多选一场景的交互游戏（内含 3 个视频）...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/LXMzRX 可交互视频 此视频是可 ...
- 前端小白写了个网页版五子棋游戏，使用原生 JS + Canvas 实现绘制棋子、棋盘
功能模块 快来体验下吧!看下你能赢得了计算机么? 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 老规矩,源码贴上 具体代码 (1)HTML代码 <!DOCTYPE html ...
- 原生js canvas 碰撞游戏的开发笔记
-----------------------------------------------福利--------------------------------------------- ----- ...
- eclipse javascript_原生js实现贪吃蛇游戏_javascript技巧
更新时间:2020年10月26日 11:46:36 作者:leisure-ZL 这篇文章主要为大家详细介绍了原生js实现贪吃蛇小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴 ...
- 原生html小游戏,原生JS实现别踩白块小游戏（一）
对于前端开发人员来说,闲暇之余自己开发个小游戏打发时间,也是对自己基础技术的一种应用考验.那么别踩白块小游戏,相信大家并不陌生,这个小游戏我们可以通过原生js来实现,即便是前端初学者也可以轻松完成. ...
最新文章
- Linux下视频截取命令
- 每天一记 10.01.27
- 7 Javascript:表单与验证-非空验证
- 请在贵网站的根目录下部署一个文件_使用 github pages, 快速部署你的静态网页
- Oracle手边常用70则脚本知识汇总
- python 连续三个数满足条件_计算满足条件的连续值数（Pandas Dataframe）
- Java io流---拷贝文件夹下的所有文件和目录
- Vue只是JavaScript其中的一个框架
- 快应用宣布支持第三方DSL
- B00004 atoi函数
- 光流（四）--Kanade-Lucas-Tomasi(KLT)目标跟踪
- 2019梅江（天津）年货展销会启幕
- GitHub客户端 Desktop使用
- 大学物理-热学-教学总结
- 基于51单片机的多线程操作系统设计
- 所谓领导力，指的是这21种能力
- UVA 11584 Partitioning by Palindromes
- Wordpress商品详情页新增Buy on amazon/ebay跳转按钮
- FileZilla快速部署
- 深度学习 06_2 车辆统计项目代码