代码地址如下:http://www.demodashi.com/demo/12755.html 项目介绍 本项目是利用原生js实现的h5小游戏-植物大战僵尸,主要结合了一下自己对于h5小游戏的理解,结合面向对象的编程思想进行开发,在实现时使用了部分es6语法,对于es6语法不太熟悉的小伙伴可以先查阅相关资料了解一下. 如有需要,可根据自己的需求修改源码样式.源码配置属性代码,实现个性化定制. 以下为文件目录结构示意图,核心代码在js文件夹下的四个common.js.main.js.game.js…
游戏地址:http://zangzhihong.jusukeji.com/flybird/index.html html部分 <!DOCTYPE html>   <!-- This html make by zzh 2017-11-9 -->   <html lang="en" xmlns="http://www.w3.org/1999/xhtml">       <!-- 未解决问题1,分数显示的逻辑问题.2定时器未完全清…
感情都在代码里,来,干了!... <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>贪吃蛇</title> <style type="text/css"> *{ margin:0; padding: 0…
前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJS,玩得了Egret,又学过PIXI.js.在移动前端方面,尤其是小游戏开始有一点点小经验了.但只是小经验,为什么说是小经验? 首先,深度不足,虽然用得最熟最多的白鹭,可是习惯了JavaScript,对TypeScript的OOP编程掌握得还不够:其次,对Egret等游戏框架了解的广度还不够,还有相当部分用法没用到.虽然能够应付朋友圈里传播的…
Egret白鹭H5小游戏开发入门(一)   前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJS,玩得了Egret,又学过PIXI.js.在移动前端方面,尤其是小游戏开始有一点点小经验了.但只是小经验,为什么说是小经验? 首先,深度不足,虽然用得最熟最多的白鹭,可是习惯了JavaScript,对TypeScript的OOP编程掌握得还不够:其次,对Egret等游戏框架了解的广度还不够,还有相…
3月23日晚上8点半(中国队火拼韩国的时候),做了一期直播分享.15年做的一个小游戏,把核心代码拿出来,现场讲写了一遍,结果后面翻车了,写错了两个地方,导致运行效果有点问题,直播边说话边写代码还真不一样(可以理解为借口).我先贴出写错的两个地方. 1. //self.last['', ''];//重置 这个是写错的 self.last = ["",""];//重置 这个才是正确的 2. $sword.css({'-webkit-transfrom':'rotateX…
整体架构: InventionActivity:实现UI的实例化,基本的按钮Activity之间跳转 GameActivity:实现UI的实例化,Webview的基本使用 MyProgressDialog:UI进度对话框属性类 依赖库类: SystemBarTintManager + Config =  实现兼容版本沉浸状态栏 ----------------------我是天天酷涛--------------------------- Webview 运行加载 H5小游戏 Webview基本属…
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用HTML5+原生js实现的推箱子游戏</title> <link rel="stylesheet" href="css/style.css"> </head> <body onkeydown="doKeyDown(e…
本系列文章对应游戏代码已开源 Sinuous game 上一节介绍了canvas的基础用法,了解了游戏开发所要用到的API.这篇文章开始,我将介绍怎么运用这些API来完成各种各样的游戏效果.这个过程更重要的是参透一些游戏开发的思路和想法,而不是仅仅知道怎么写代码来完成这个游戏. 先用一张图来了解一下整个游戏的构成. Map表示整个背景地图,作用很简单,就是渲染黑色背景.Player 表示玩家粒子,它尾巴中带有生命点,我们用Life类来表示.Enemy为红色的敌人粒子,因为技能粒子和Enemy粒子…
本系列文章对应游戏代码已开源 Sinuous game. 每个游戏都会包含场景和角色.要实现一个游戏角色,就要清楚角色在场景中的位置,以及它的运动规律,并能通过数学表达式表现出来. 场景坐标 canvas 2d的场景坐标系采用平面笛卡尔坐标系统,左上角为原点(0,0),向右为x轴正方向,向下为y轴正方向,坐标系统的1个单位相当于屏幕的1个像素.这对我们进行角色定位至关重要. Enemy粒子 游戏中的敌人为无数的红色粒子,往同一个方向做匀速运动,每个粒子具有不同的大小. 入口处通过一个循环来创建E…