8129人阅读
伴随Ajax与网页游戏的崛起，曾几何时JavaScript也成了游戏开发时可供选择的技术之一，文本仅列举数项由JavaScript技术实现的web小游戏（不含网游），聊作参考之用。
1、Mario（游戏地址：
传说中的马里奥网页版，一比一实现了红白机时代超级马里奥中所有功能与关卡，精细程度不逊原版游戏。
依赖库：无
Bunny Hunt
（游戏地址：
猎兔，一款简单耐玩的网页狩猎游戏，没有使用第三方支持库，直接利用
JavasSript
依赖库：无
游戏地址：
炸弹人，经典到无以复加的桌面游戏，通过
JavaScript
获得了完美再现。
SoundManager2
游戏地址：
又一款传说级的游戏，笔者开始怀疑有某个超级闲的家伙（或组织），开始悄悄将红白机时代的游戏统一移植为
版&&嗯，或许近些年出现的
JavaScript
模拟器就是他们的阴谋产物&&
Ajax Chinese Chess
（游戏地址：
举凡识字的中国人看到此图，就会知道这是一款基于
JavaScript
的中国象棋游戏&&
SoundManager2
（游戏地址：
疯狂走红的数独游戏，
JavaScript
狂人们又怎么可能放过呢？（似乎所有可以进行图形显示的系统上都能跑这个游戏了&&）
依赖库：无
（游戏地址：
就是著名的雷电啦，完成度相当高的经典射击游戏，效果流畅，笔者第一次运行时曾一度误以为在玩
SoundManager2
游戏地址：
？哎，现实生活中是没希望了&&不过，在该游戏中你却可以暂时做到这一点。
游戏地址：
又一款强悍到逆天的
JavaScript
横版游戏，在
下的表现已经与同类
游戏不相伯仲了。
（游戏地址：
雷电类的横版射击游戏，似乎用
JavaScript
进行游戏开发的家伙都很喜欢横板游戏&&作者在游戏介绍里写到&&你们的任务是：找出骷髅博士，并消灭他！
Javascript
Wolfenstein 3D
（游戏地址：
由传说中的天才
Jacob Seidelin&
所作（瞧瞧，人家名字是怎么叫的，学问啊&&）。移植自世界上第一款第一人称射击游戏（有争议，一说为《
Ultima Underworld
》），也就是《重返德军总部》前作《德军总部》的
JavaScript
仅从现阶段
JavaScript
综合性能来说，其完成度之高令人叹为观止，恐怕连部分
游戏开发者也要自惭形秽。如果有朝一日
标准普及了，哪怕该作者用
JavaScript
复刻出一个魔兽世界偶都毫不奇怪&&唯一遗憾的是，此游戏依赖于
JavaScript
技术，可能对
SoundManager2
：本想收录
版《白之绊》、《逆转裁判》、《大恶司》等，却发现其对外链接皆已无法使用，故缺（似乎相关作者都跑去开发
网游，集体生死未卜中&&）。
再者，长城以外
上还有很多
JavaScript
游戏实现，由于时间关系此处不一一列举，关心者请自行&翻而阅之&。
&&&&&&&&&正文斩断，相关退散&&&&&&&&
转了不少JavaScript游戏过来，忽然自己也想写点东西，所以用开发了&半截&的LGame-Simple-0.2.5写了其中一个JavaScript游戏的复刻（目前修正了前版部分Bug，添加了一些精灵与辅助功能，但0.2.5的核心功能尚未添加，可理解为传说中的&降龙十八缺三掌&状态&&），怎么说Java开发游戏也比JavaScript方便嘛，无论是桌面上，抑或网页里&&
PS:不要问偶为什么移植Bunny Hunt而不是Javascript Wolfenstein 3D&&除非偶吃顶了，或者不用睡觉&&（另外偶最近会先忙正事，LGame将暂时停笔，留待12月中旬继续&&12月底前发布0.2.5版&&）
下载地址：
package org.loon.
import java.awt.C
import java.awt.Graphics2D;
import java.awt.event.KeyE
import java.awt.event.MouseE
import org.loon.framework.game.simple.GameS
import org.loon.framework.game.simple.action.map.Vector2D;
import org.loon.framework.game.simple.action.sprite.L
import org.loon.framework.game.simple.action.sprite.StatusB
import org.loon.framework.game.simple.action.sprite.P
import org.loon.framework.game.simple.action.sprite.S
import org.loon.framework.game.simple.action.sprite.S
import org.loon.framework.game.simple.core.D
import org.loon.framework.game.simple.core.LS
import org.loon.framework.game.simple.core.LT
import org.loon.framework.game.simple.core.LTimerC
import org.loon.framework.game.simple.core.S
import org.loon.framework.game.simple.window.LB
import org.loon.framework.game.simple.window.LP
import org.loon.framework.game.simple.window.LT
* Copyright 2008 - 2009
* Licensed under the Apache License, Version 2.0 (the &License&); you may not
* use this file except in compliance with the License. You may obtain a copy of
* the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &AS IS& BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
* @project loonframework
* @author chenpeng
* @email：.cn
* @version 0.1
public class BunnyHunt extends Screen {
interface IBunny {
int type();
void reset();
void kill();
void setVisible(boolean visible);
private int level,
private class Bunny extends Sprite implements IBunny {
private static final long serialVersionUID = 1L;
private boolean init,
private int top, bottom,
private LT
private Vector2D oldVector2D;
public Bunny(String fileName, int row, int col, int top, int bottom) {
super(fileName, row, col);
this.top =
this.bottom =
this.isRunning(false);
this.setCurrentFrameIndex(0);
this.timer = new LTimer(100);
this.reset();
public void setLocation(double x, double y) {
super.setLocation(x, y);
this.oldVector2D = new Vector2D(x, y);
public int type() {
public void reset() {
this.kill =
this.init =
this.setVisible(false);
this.setLocation(oldVector2D);
if (getTotalFrames() == 2) {
this.setCurrentFrameIndex(0);
public void update(long elapsedTime) {
if (!isVisible()) {
super.update(elapsedTime);
if (gameStart) {
if (!init) {
if (y() & top) {
// 精灵坐标向上移动（5倍速）
this.move_up(5);
this.init =
if (init && timer.action(elapsedTime)) {
if (kill) {
if (getTotalFrames() != 2) {
this.type = 1;
this.setCurrentFrameIndex(2);
timer.setDelay(10);
if (y() & bottom) {
// 精灵坐标向下移动（10倍速）
this.move_down(10);
if (y() &= BunnyHunt.this.getHeight()) {
this.reset();
BunnyHunt.this.randomBunny();
public boolean isKill() {
public void kill() {
if (getCurrentFrameIndex() != 2) {
this.setCurrentFrameIndex(1);
this.timer.setDelay(100);
this.kill =
// 信息选择框，用于显示重启/结束菜单
private class MsgBox extends LPanel {
private LTag text2 = new LTag(&& + count, 370, 150, 50, 50);
public void setNumber(int num) {
text2.setTag(num);
public MsgBox(int x, int y, int w, int h) {
super(x, y, w, h);
// 面板设为灰色
setBackground(Color.GRAY);
// 透明度0.5f
setAlpha(0.5f);
LButton button1 = new LButton(&games/button_reload.gif&, null, 180,
public void doClick() {
BunnyHunt.this.removeAll();
BunnyHunt.this.initBunny();
LButton button2 = new LButton(&games/button_stop.gif&, null, 400,
public void doClick() {
BunnyHunt.this.removeAll();
BunnyHunt.this.setBackground(&games/closing.jpg&);
LTag text1 = new LTag(&Number of bunnies mutilated:&, 215, 90, 50,
text1.setColor(Color.WHITE);
text1.setFont(&Dialog&, 0, 25);
text2.setColor(Color.WHITE);
text2.setFont(&Dialog&, 1, 30);
add(text1);
add(text2);
add(button1);
add(button2);
private class Cloud extends Picture {
private static final long serialVersionUID = 1L;
private LTimer timer = new LTimer(20);
public Cloud(String fileName, int x, int y) {
super(fileName, x, y);
public void update(long elapsedTime) {
if (isVisible() && timer.action(elapsedTime)) {
// 自动向左移动
move_left();
if(x()&0){
setX(BunnyHunt.this.getWidth());
private Label label1 = new Label(&LEVEL :&, &Dialog&, 0, 15, 300, 23),
label2 = new Label(&&, &Dialog&, 1, 12, 360, 22),
label3 = new Label(&LIVES :&, &Dialog&, 0, 15, 530, 23);
private StatusBar timeBar = new StatusBar(400, 15, 100, 5);
private MsgBox msgBox = new MsgBox(0, 0, 800, 400);
private Bunny bunny1, bunny2, bunny3, bunny4, bunny5;
private IBunny[]
private Sprite lives = new Sprite(&games/lives.gif&, 600, 7, 60, 21);
private Picture hill = new Picture(&games/hill.png&, 200, 288);
private Cloud cloud1 = new Cloud(&games/cloud.png&, 195, 20);
private Cloud cloud2 = new Cloud(&games/cloud2.png&, 75, 20);
private Picture hills = new Picture(&games/hills.png&, 0, 235);
private LTimer time = new LTimer(2 * LSystem.SECOND);
private boolean gameS
public BunnyHunt() {
// 设定初始背景
this.setBackground(&games/splash.jpg&);
LButton startButton = new LButton(&games/button_start.gif&, null, 165,
public void doClick() { // 变更背景图像
BunnyHunt.this.setBackground(&games/stage.jpg&);
BunnyHunt.this.initBunny();
this.dispose();
}; // 添加开始按钮
this.add(startButton);
private void endGame() {
this.gameStart =
this.msgBox.setNumber(count);
this.timeBar.setHit(false);
this.add(msgBox);
private void randomBunny() {
for (int i = 0; i & level && i & 3; i++) {
bunnies[getBunnyRandom(bunnies.length)].setVisible(true);
private int getBunnyRandom(int type) {
return LSystem.random.nextInt(type);
private void initBunny() {
this.gameStart =
this.level = 1;
this.count = 0;
this.bunny1 = new Bunny(&games/bunny1.png&, 84, 152, 130, 50);
this.bunny2 = new Bunny(&games/bunny2.png&, 119, 152, 190, 50);
this.bunny3 = new Bunny(&games/bunny3.png&, 122, 152, 150, 50);
this.bunny4 = new Bunny(&games/bunny4.png&, 135, 152, 180, 50);
this.bunny5 = new Bunny(&games/bunny5.png&, 140, 152, 180, 50);
this.bunnies = new IBunny[] { bunny1, bunny2, bunny3, bunny4, bunny5 };
this.timeBar.setHit(true);
this.timeBar.empty();
this.label2.setLabel(level);
this.label1.setAlpha(0.8f);
this.add(label1);
this.add(label2);
this.label3.setAlpha(0.8f);
this.add(label3);
this.add(timeBar);
this.lives.isRunning(false);
this.lives.setCurrentFrameIndex(0);
this.add(lives);
this.bunny1.setLocation(40, 400);
this.bunny3.setLocation(550, 400);
this.bunny4.setLocation(130, 400);
this.bunny5.setLocation(430, 400);
this.add(bunny1);
this.add(bunny3);
this.add(bunny4);
this.add(bunny5);
this.add(hills);
this.bunny2.setLocation(410, 400);
this.add(bunny2);
this.add(hill);
this.add(cloud1);
this.add(cloud2);
this.randomBunny();
public void alter(LTimerContext timer) {
if (time.action(timer.getTimeSinceLastUpdate())) {
if (timeBar.getValue() & timeBar.getMaxValue()) {
timeBar.setUpdate(timeBar.getValue() + 10);
timeBar.empty();
level += 1;
label2.setLabel(level);
public void draw(Graphics2D g) {
public void leftClick(MouseEvent e) {
if (contains(msgBox)) {
Sprites ss = getSprites();
for (int i = ss.size(); i & -1; --i) {
if (ss.getSprite(i) instanceof IBunny) {
if (onClick(ss.getSprite(i))) {
IBunny bunny = ((IBunny) ss.getSprite(i));
if (bunny.type() == 1) {
.setCurrentFrameIndex(lives
.getCurrentFrameIndex() + 1);
if (lives.getCurrentFrameIndex() &= 3) {
endGame();
bunny.kill();
count += 1;
public void middleClick(MouseEvent e) {
public void onKey(KeyEvent e) {
public void onKeyUp(KeyEvent e) {
public void rightClick(MouseEvent e) {
public static void main(String[] args) {
GameScene frame = new GameScene(&猎兔(素材取自同名Javascript游戏)&, 800, 400);
Deploy deploy = frame.getDeploy();
deploy.setScreen(new BunnyHunt());
deploy.setLogo(false);
deploy.setShowFPS(true);
deploy.setFPS(100);
deploy.mainLoop();
frame.showFrame();
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：2554534次
积分：29241
积分：29241
排名：第188名
原创：318篇
转载：66篇
评论：5529条
(1)(2)(1)(5)(3)(4)(1)(3)(4)(5)(3)(1)(1)(2)(1)(3)(2)(3)(3)(2)(2)(7)(1)(1)(3)(2)(10)(11)(14)(7)(11)(29)(4)(4)(11)(7)(5)(5)(9)(3)(10)(9)(2)(6)(11)(21)(21)(16)(16)(16)(8)(14)(7)(13)(7)(11)(1)(3)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'10款超炫HTML5游戏 附游戏源码 | HTML5资源教程更多频道内容在这里查看
爱奇艺用户将能永久保存播放记录
过滤短视频
暂无长视频（电视剧、纪录片、动漫、综艺、电影）播放记录，
按住视频可进行拖动
&正在加载...
请选择打赏金额：
收藏成功，可进入
查看所有收藏列表
当前浏览器仅支持手动复制代码
视频地址：
flash地址：
html代码：
通用代码：
通用代码可同时支持电脑和移动设备的分享播放
用爱奇艺APP或微信扫一扫，在手机上继续观看
当前播放时间：
一键下载至手机
限爱奇艺安卓6.0以上版本
使用微信扫一扫，扫描左侧二维码，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接http://71.am/udn
下载安装包到本机：
设备搜寻中...
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
连接失败！
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
部安卓（Android）设备，请点击进行选择
请您在手机端下载爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接http://71.am/udn
下载安装包到本机：
爱奇艺云推送
请您在手机端登录爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
180秒后更新
打开爱奇艺移动APP，点击“我的-扫一扫”，扫描左侧二维码进行登录
没有安装爱奇艺视频最新客户端？
， 可在设置中重新打开噢！
30秒后自动关闭
RPG游戏制作新手教学：第一课 如何制作地图">RPG游戏制作新手教学：第一课 如何制作地图
播放量数据：快去看看谁在和你一起看视频吧~
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制
安装爱奇艺视频客户端，
马上开始为您下载本片
5秒后自动消失
&li data-elem="tabtitle" data-seq="{{seq}}"& &a href="javascript:void(0);"& &span>{{start}}-{{end}}&/span& &/a& &/li&
&li data-downloadSelect-elem="item" data-downloadSelect-selected="false" data-downloadSelect-tvid="{{tvid}}"& &a href="javascript:void(0);"&{{pd}}&/a&
选择您要下载的《
色情低俗内容
血腥暴力内容
广告或欺诈内容
侵犯了我的权力
还可以输入
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制
本奖品由提供
红包雨下完了，下次早点来噢~Cocos2d-js 实战-横版回合制rpg游戏之城市篇（上）
视频太卡？试试切换线路
本课时介绍如何创建游戏开始场景，学完该课时您将学会如何创建场景和添加菜单
本课时介绍如何创建游戏多层地图
本课时介绍如何创建游戏主角
本课程介绍如何让主角在地图中跑起来，并且地图跟随
只有成为VIP会员才能提问&回复，快吧！如果你还没有账号你可以一个账号。
添加新技术问题
课程 [游戏开始场景创建]
中已存在问题
添加新技术问题
问题描述越详细，被解答的速度越快
有新回答时请邮件提醒我
着急，拜托快点
不急，慢慢解决
关联课程 [游戏开始场景创建]通过cocos-JS独立开发一款瓷砖式RPG游戏需要学习哪些知识和编程技术？ - 知乎25被浏览1287分享邀请回答2添加评论分享收藏感谢收起cocos run -p web
3. 用户交互由于RPG游戏要对主角进行移动的操控，这就需要你掌握如何根据event manager来获取事件（键盘方向键或触摸事件）并根据事件作出响应。处理用户交互的方式有很多种，键盘十字键，如果是移动端游戏，可以是固定式或活动式virtual pad。基础都需要你对事件进行监听，可以参考4. 简单碰撞检测在游戏场景中并不是所有地方都可以到达，在遇到物体时一般需要做碰撞处理，不让玩家穿过房子，树木等。一般情况下使用简单的四边形碰撞检测即可。其他方面诸如UI，战斗场景的开发和其他类型的游戏并无什么不同，要知道的是，上面这些，可以让你搭建一些基于瓷砖地图的场景，让你的角色动起来，在场景中正常得走动，这些都是最基本的。要做出一款好玩的RPG，技术上的复杂度可以非常高，是没办法通过一个简单的回答来完全说清楚的，不然我也可以去写3天精通游戏开发了。在设计游戏过程中，确定自己想做的内容和表现形式，再去研究技术该如何实现，我觉得是更好的进阶途径57 条评论分享收藏感谢收起}