基于jquery复刻一个月饼版地狱死神小游戏

先放出游戏截图馋一下你们

滚动的月饼，跳跃的死神，尽全力跳起，又在重力的作用下回落。。。这不正是人生奋斗的写照吗？只是， 盛年不重来，一日难再晨。 珍惜奋斗拼搏的时光，珍惜陪在你身边的亲人，兄弟，爱人。

基础框架

背景图依旧是采用中秋主题
游戏容器就是设置左上角和右下角圆角，加半透明背景色即可，绝对定位的方式居中
死神素材来源于网络，定位的方式固定在那里
滚动的月饼素材来源于网络，通过动画+js方式实现位移+滚动
初始化定时器，得分

<div id="box"><div class="ground"></div><div class="Death"></div><div class="score">0</div><div class="result"></div></div>

判断逻辑

监听按键的空格和上箭头事件，更新死神dom的bottom值，来实现向上跳，向下回落采用定时器递减方式回落，每次进来清空上一个定时器，这也是为什么定时器需要声明为全局变量，边界条件处理，当落回地面时，需要清空定时器

 let t = null$(document).on('keydown', function (e) {if([38,32].includes(e.keyCode)) {if (t) {clearInterval(t)}let bottom = Number($('.Death').css('bottom').split('px')[0]) + 15if(bottom > $('#box').height() - 120) bottom = $('#box').height() - 120bottom = bottom+'px'$('.Death').css('bottom',bottom)t = setInterval(function () {let bottom = Number($('.Death').css('bottom').split('px')[0]) - 5if(bottom < 40) {clearInterval(t)t = nullbottom = 40}bottom = bottom+'px'$('.Death').css('bottom',bottom)}, 100)}})

生成滚动月饼，采用封装函数的方式进行生成，动态生成月饼，在滚到最左侧时将月饼dom移除，同时，需要判断是否与死神发生碰撞，发生碰撞，则游戏结束

 function initBing () {let div = $('<div>')div.addClass('bing')$('#box').append(div)div.css('right', Math.ceil(Math.random()*50) + 'px')let t = setInterval(function () {let right = Number(div.css('right').split('px')[0]) + 3let left = div.css('left').split('px')[0]if (left > DeathLeft && left < (DeathLeft+120)) {if ($('.Death').css('bottom').split('px')[0] <= 40) {clearInterval(t)$('.result').show()$('.bing').remove()}}if(right > $('#box').width()) {clearInterval(t)t = null div.remove() score++ $('.score').html(score) initBing()}right = right+'px'div.css('right',right)}, 10)}

初始化

初始化就是重复调用initBing方法，实现一次产出多个小球

 function start () {$('.result').hide()score = 0t = nullinitBing()initBing()initBing()}

重新开始

给结果dom绑定点击事件

$('.result').click(start)

就这样，我们的游戏就做完了，本文采用的是非常经典的jquery直接操作dom的这种实现思路，代码即实现，可读性强。

基于jquery复刻一个月饼版地狱死神小游戏相关推荐

【Python游戏】Python实现一个Q版泡泡堂小游戏 | 附带源码
相关文件想学Python的小伙伴可以关注小编的公众号[Python日志] 有很多的资源可以白嫖的哈,不定时会更新一下Python的小知识的哈!! 需要源码的小伙伴可以在公众号回复泡泡堂 Python ...
基于面向对象来写一个简单的贪吃蛇小游戏（代码可直接用）
分析一下用到的对象(这个案例的地图过于简单,可以不用创建为对象) 食物对象(food) 蛇对象(snake) 游戏对象(game) 1.food对象属性 :x, y, ...
用原生JS写一个网页版的2048小游戏（兼容移动端）
这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online ...
AI版的五子棋小游戏
AI版的五子棋小游戏内容简介本项目实现的五子棋博弈游戏是基于AI的五子棋游戏.游戏模式可以分为人机对弈和双人对弈两种模式.本程序采用基于启发式max/min算法的alpha-beta剪枝技术来选择 ...
简易贪吃蛇小游戏java版_用GUI实现java版贪吃蛇小游戏
本文实例为大家分享了java版贪吃蛇小游戏的具体代码,供大家参考,具体内容如下项目结构新建一个JFrame窗口,作为程序入口 public class GameStart{ public stat ...
写一个简单的实时互动小游戏
在写之前,我们先回顾上一篇文章,从需求.架构.设计.开发上讲述并演示了搭建一个实时通信客户端的过程,并附了图片与视频. 写这篇文章的之前,第一个互动的游戏DEMO已经写好了,先附上截图很奇怪的一张图 ...
基于Java Swing JFream 组件的趣味推箱子小游戏
一需求分析设计一个经典的推箱子小游戏,在窗体里有墙,箱子,胜利的标志,和工人,用户可以通过键盘上的"上"."下"."左"."右 ...
[源码和文档分享]基于Java Swing JFream 组件的趣味推箱子小游戏
一需求分析设计一个经典的推箱子小游戏,在窗体里有墙,箱子,胜利的标志,和工人,用户可以通过键盘上的"上"."下"."左"."右 ...
html+javascript实现的网页版飞机大战小游戏源码
html+javascript实现的网页版飞机大战小游戏源码完整代码下载地址: html+javascript实现的网页版飞机大战小游戏源码 index.html <!DOCTYPE html ...

基于jquery复刻一个月饼版地狱死神小游戏

基础框架

判断逻辑

初始化

重新开始

基于jquery复刻一个月饼版地狱死神小游戏相关推荐

最新文章

热门文章