你的位置：
javascript实现俄罗斯方块游戏的思路和方法
来源：脚本之家
更新时间：
收藏本页（Ctrl+D）
观摩一下《编程之美》：“程序虽然很难写，却很美妙。要想把程序写好，需要写好一定的基础知识，包括编程语言、数据结构与算法。程序写得好，需要缜密的逻辑思维能力和良好的梳理基础，而且熟悉编程环境和编程工具。”学了几年的计算机，你有没有爱上编程。话说，没有尝试自己写过一个游戏，算不上热爱编程。俄罗斯方块曾经造成的轰动与造成的经济价值可以说是游戏史上的一件大事，它看似简单但却变化无穷，令人上瘾。相信大多数同学，曾经为它痴迷得茶不思饭不想。游戏规则1、一个用于摆放小型正方形的平面虚拟场地，其标准大小：行宽为10，列高为20，以每个小正方形为单位。2、一组由4个小型正方形组成的规则图形，英文称为Tetromino，中文通称为方块共有7种，分别以S、Z、L、J、I、O、T这7个字母的形状来命名。I：一次最多消除四层J（左右）：最多消除三层，或消除二层L：最多消除三层，或消除二层O：消除一至二层S（左右）：最多二层，容易造成孔洞Z （左右）：最多二层，容易造成孔洞T：最多二层方块会从区域上方开始缓慢继续落下。玩家可以以90度为单位旋转方块，以格子为单位左右移动方块，让方块加速落下。方块移到区域最下方或是着地到其他方块上无法移动时，就会固定在该处，而新的方块出现在区域上方开始落下。当区域中某一列横向格子全部由方块填满，则该列会消失并成为玩家的得分。同时删除的列数越多，得分指数上升。分析与解法每块方块落下的过程中，我们可以做：1）旋转到合适的方向2）水平移动到某一列3）垂直下落到底部首先，需要用一个二维数组，area[18][10]表示18*10的游戏区域。其中，数组中值为0表示空，1表示有方块。方块一共7种，每种有4种方向。定义activeBlock[4]，在编译之前这个数组的值预定算好，在程序中直接使用。难点1）边界检查。//检查左边界,尝试着朝左边移动一个,看是否合法。function checkLeftBorder(){
for(var i=0; i&activeBlock. i++){
if(activeBlock[i].y==0){
if(!isCellValid(activeBlock[i].x, activeBlock[i].y-1)){
} } //同理，需要检测右边界和底边界2）旋转, 需要数理逻辑, 一个点相对另外一个点旋转90度的问题。 3）定时和监听键盘事件机制让游戏自动运行下去。//开始 function begin(e){
e.disabled =
status = 1;
tbl = document.getElementById("area");
if(!generateBlock()){
alert("Game over!");
status = 2;
timer = setInterval(moveDown,1000); } document.onkeydown=keyC程序过程1）用户点开始-&构造一个活动图形, 设置定时器。//当前活动的方块, 它可以左右下移动, 变型。当它触底后, 将会更新 var activeB //生产方块形状, 有7种基本形状。 function generateBlock(){
activeBlock =
activeBlock = new Array(4);
//随机产生0-6数组，代表7种形态。
var t = (Math.floor(Math.random()*20)+1)%7;
switch(t){
activeBlock[0] = {x:0, y:4};
activeBlock[1] = {x:1, y:4};
activeBlock[2] = {x:0, y:5};
activeBlock[3] = {x:1, y:5};
//省略部分代码..............................
activeBlock[0] = {x:0, y:5};
activeBlock[1] = {x:1, y:4};
activeBlock[2] = {x:1, y:5};
activeBlock[3] = {x:1, y:6};
//检查刚生产的四个小方格是否可以放在初始化的位置.
for(var i=0; i&4; i++){
if(!isCellValid(activeBlock[i].x, activeBlock[i].y)){
} }2）每次向下移动后, 都检查是否触底, 如果触底了, 则尝试消行。//消行 function deleteLine(){
var lines = 0;
for(var i=0; i&18; i++){
for(; j&10; j++){
if(area[i][j]==0){
if(j==10){
for(var k=i-1; k&=0; k--){
area[k+1] = area[k];
area[0] = generateBlankLine();
} }3）完了之后再构造一个活动图形, 再设置定时器。效果图有待优化1）设置不同形状方块的颜色。　　思路：在创建方块函数内，设定activeBlockColor颜色，七种不同形态方块颜色各异（除了修改generateBlock方法之外，还需要修改paintarea方法。因为一开始考虑不周全，消除一行后，重绘方块的同时将颜色统一，因此可以考虑移除表格n行，然后在顶部增添n行，以保证没消除方块的完整性）。2）当当前方块下落时，可以提前查看下一个方块。　　思路：将generateBlock方法拆分成两部分，一部分用于随机尝试下一个方块，一部分用于缓存当前所要描绘的方块。当当前方块碰到底部被固定后，下一方块开始描绘，同时又再次随机产生新方块。如此反复
【上一篇】
【下一篇】
教程网文章资讯频道声明
1、 所有来源标注为教程网或教程网文章的内容版权均为本站所有，若您需要引用、转载，请注明来源及原文链接即可，
如涉及大面积转载，请来信告知，获取授权。
2、 本站所提供的文章资讯等内容均为作者提供、网友推荐、互联网整理而来，仅供学习参考，如有侵犯您的版权，请及时联系我们，并提供原文出处等，本站将在
三个工作日内修正。
3、 若您的网站或机构从本站获取的一切资源进行商业使用，除来源为本站的资料需与本站协商外，其他资源请自行联系版权所有人。
4、 未经统一下载站允许，不得盗链、盗用本站资源；不得复制或仿造本网站，不得在非统一下载站所属的服务器上建立镜像，站长之家对其自行开发的或和他人共同开发的所有内容、技术手段和服务拥有全部知识产权，任何人不得侵害或破坏，也不得擅自使用。
JavaScript教程分类
All Rights Reserved.
本站资源均收集整理于互联网，其著作权归原作者所有，如果有侵犯您权利的资源，请来信告
知，我们将及时撤销相应资源。&!DOCTYPE&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&2048&/title&
&link rel=&stylesheet& type=&text/css& href=&css/2048.css& /&
&!-- &script type=&text/javascript& src=&/jquery-latest.js&&&/script& --&
&script type=&text/javascript& src=&js/2048.js&&&/script&
&div id=&div2048&&
&a id=&start&&tap to start :-)&/a&
@charset &utf-8&;
width: 500
height: 500
background-color: #b8af9e;
width: 500
height: 500
line-height: 500
text-align:
font-size: 30
background: #f2b179;
color: #FFFFFF;
#div2048 div.tile
margin: 20px 0px 0px 20
width: 100
height: 40
padding: 30px 0;
font-size: 40
line-height: 40
text-align:
#div2048 div.tile0{
background: #ccc0b2;
#div2048 div.tile2
color: #7c736a;
background: #eee4
#div2048 div.tile4
color: #7c736a;
background: #ece0c8;
#div2048 div.tile8
color: #fff7
background: #f2b179;
#div2048 div.tile16
color:#fff7
background:#f59563;
#div2048 div.tile32
color:#fff7
background:#f57c5f;
#div2048 div.tile64
color:#fff7
background:#f65d3b;
#div2048 div.tile128
color:#fff7
background:#edce71;
#div2048 div.tile256
color:#fff7
background:#edcc61;
#div2048 div.tile512
color:#fff7
background:#ecc850;
#div2048 div.tile1024
color:#fff7
background:#edc53f;
#div2048 div.tile2048
color:#fff7
background:#eec22e;
function game2048(container)
this.container =
this.tiles = new Array(16);
game2048.prototype = {
init: function(){
for(var i = 0, len = this.tiles. i & i++){
var tile = this.newTile(0);
tile.setAttribute('index', i);
this.container.appendChild(tile);
this.tiles[i] =
this.randomTile();
this.randomTile();
newTile: function(val){
var tile = document.createElement('div');
this.setTileVal(tile, val)
setTileVal: function(tile, val){
tile.className = 'tile tile' +
tile.setAttribute('val', val);
tile.innerHTML = val & 0 ? val : '';
randomTile: function(){
var zeroTiles = [];
for(var i = 0, len = this.tiles. i & i++){
if(this.tiles[i].getAttribute('val') == 0){
zeroTiles.push(this.tiles[i]);
var rTile = zeroTiles[Math.floor(Math.random() * zeroTiles.length)];
this.setTileVal(rTile, Math.random() & 0.8 ? 2 : 4);
move:function(direction){
switch(direction){
for(var i = 4, len = this.tiles. i & i++){
while(j &= 4){
this.merge(this.tiles[j - 4], this.tiles[j]);
for(var i = 11; i &= 0; i--){
while(j &= 11){
this.merge(this.tiles[j + 4], this.tiles[j]);
for(var i = 1, len = this.tiles. i & i++){
while(j % 4 != 0){
this.merge(this.tiles[j - 1], this.tiles[j]);
for(var i = 14; i &= 0; i--){
while(j % 4 != 3){
this.merge(this.tiles[j + 1], this.tiles[j]);
this.randomTile();
merge: function(prevTile, currTile){
var prevVal = prevTile.getAttribute('val');
var currVal = currTile.getAttribute('val');
if(currVal != 0){
if(prevVal == 0){
this.setTileVal(prevTile, currVal);
this.setTileVal(currTile, 0);
else if(prevVal == currVal){
this.setTileVal(prevTile, prevVal * 2);
this.setTileVal(currTile, 0);
equal: function(tile1, tile2){
return tile1.getAttribute('val') == tile2.getAttribute('val');
max: function(){
for(var i = 0, len = this.tiles. i & i++){
if(this.tiles[i].getAttribute('val') == 2048){
over: function(){
for(var i = 0, len = this.tiles. i & i++){
if(this.tiles[i].getAttribute('val') == 0){
if(i % 4 != 3){
if(this.equal(this.tiles[i], this.tiles[i + 1])){
if(i & 12){
if(this.equal(this.tiles[i], this.tiles[i + 4])){
clean: function(){
for(var i = 0, len = this.tiles. i & i++){
this.container.removeChild(this.tiles[i]);
this.tiles = new Array(16);
var game, startB
window.onload = function(){
var container = document.getElementById('div2048');
startBtn = document.getElementById('start');
startBtn.onclick = function(){
this.style.display = 'none';
game = game || new game2048(container);
game.init();
window.onkeydown = function(e){
var keynum,
if(window.event){
keynum = e.keyC
else if(e.which){
// Netscape/Firefox/Opera
keynum = e.
keychar = String.fromCharCode(keynum);
if(['W', 'S', 'A', 'D'].indexOf(keychar) & -1){
if(game.over()){
game.clean();
startBtn.style.display = 'block';
startBtn.innerHTML = 'game over, replay?';
game.move(keychar);
以上所诉就是本文的全部内容了，希望大家能够喜欢。
原生javascript代码写的2048游戏。建议在谷歌浏览器下跑。 2048.html
&!DOCTYPE& &html xmlns=&http://www.w3.org/1999/xhtml&& &head& &meta http-equiv=&Content-Type& content=&
没有技术含量，只是用来练习代码逻辑的。为了代码结构清晰，我把逻辑控制部分写在全局变量里，用户界面操作封装在UI对象里，大概就这样了。仅供参考。工作时候，我的编码风格有人吐槽太乱了，所以我想试着写一个不是那么乱的东西出来。。
&title&2048 DEMO&/title&
2048的python实现。修改自某网友的代码，解决了原网友版本的两个小bug：
1. 原版游戏每次只消除一次，而不是递归消除。如 [2 ,2 ,2 ,2] 左移动的话应该是 [4, 4, 0, 0] , 而不是[8 , 0 , 0 ,0] 2. 对游戏结束的侦测有bug，已经改正。 2048game.py
# -*- coding: utf-8 -*- &&&
接触 Python 不久，看到很多人写2048，自己也捣鼓了一个，主要是熟悉Python语法。 程序使用Python3 写的，代码150行左右，基于控制台，方向键使用输入字符模拟。 演示图片
# -*- coding:UTF-8 -*- #! /usr/bin/python3 import random v = [[0, 0, 0, 0], [0, 0, 0, 0], [0,
1、过年的时候在手机上下载了2048玩了几天，心血来潮决定用py写一个，刚开始的时候想用QT实现，发现依赖有点大。正好看到graphics.py是基于tkinter做的封装就拿来练手，并借用了CSDN一位朋友封装的model.py（2048逻辑部分） 2、由于是练手的所以不免有写的不好的地方请大家喷的轻点。 先看看演示图片
附上源码： 2048主程
#-*-coding:
学了一阵子的javascript，该做点东西，虽然东西还是东拼西凑，见笑。方向键控制坦克移动，回车键发射炸弹。其他的功能敌方坦克那些还没写。
&html& &head& &meta http-equiv=&Content-Type& content=&quot
　　飞扬的小鸟（Flappy Bird）无疑是2014年全世界最受关注的一款游戏。这款游戏是一位来自越南河内的独立游戏开发者阮哈东开发，形式简易但难度极高的休闲游戏，很容易让人上瘾。 　　这里给大家分享一篇这款游戏的 HTML5 版制作教程，借助Phaser 框架，只需65行 JavaScript 代码即可实现。
使用Chipmunk物理引擎制作简单的iPhone游戏
如何使用Chipmunk物理引擎制作简单的iPhone游戏
( 18:38:41)
标签： apple ios iphone 移动互联网 游戏 cocos2d it
如何使用Chipmunk物理引擎制作简单的iPhone游戏
原文在此：http://www.rayw
这篇教程教大家使用PS鼠绘制作质感游戏按钮，教程制作出来的按钮质感非常强，制作的难度也不大。推荐过来和飞特的朋友们一起分享学习了，我们先来看看最终的效果图吧：
&script type=&text/javascript&&&!-- function StringBuffer() { this._strings = new Array(); } StringBuffer.prototype.append = function(str) { this._strings.push(str); } StringBuffer.
想必大家都对钓鱼的小游戏不会陌生，在本节实例的学习中就将通过使用 Photoshop 和 ImageReady 这两款软件制作钓鱼小游戏的常态动画。如图 10-64 所示，为本实例的完成效果。
图 10-64 完成效果技术提示
在本实例的设计、制作流程中，动画所需的静态图像都已经在素材文件中准备好了。主要通过对“动画”和“图层”调板进行设置制作出钓鱼游戏的常态动画。如图 10-65 所示，为
/& 在本小节的实例学习中，将制作罗盘游戏中罗盘指针旋转的动画效果。如图 10-98 所示，为本实例的完成效果。
图 10-98 完成效果技术提示
在本实例的制作过程中将通过使用“动作”调板制作罗盘的指针图像，并创建远程切片制作出通过按钮控制指针旋转的动画效果。如图 10-99 所示，为本实例的制作流程。
图 10-99 制作流程 制作步骤
（ 1 ）启动 Photoshop ，
罗盘是在地面上确定方向的一种器械，给人古老而又神秘的感觉。在本节实例的学习中，就来制作楼盘游戏中颜色渐变部分的动画，如图 10-83 所示，为本实例的完成效果。
图 10-83 完成效果技术提示
罗盘小游戏中颜色渐变部分的动画，主要是制作按钮图像在画面中循环变色的动画效果。在制作图像颜色渐变的流程中，首先为图像设置不同的颜色，并将每个颜色的图像记作一帧动画，然后在这几帧动画之间添加过渡帧，制
功能模块： 　　程序设计： 　　　1.可选择游戏时间，显示倒计时　　　　　　　1.定义全局变量 　　　2.可选择英文字母出现个数　　　　　　　　　2.控制游戏时间函数 　　　3.统计得分　　　　　　　　　　　　　　　　3.动画效果 　　　4.菜单选项　　　　　　　　　　　　　　　　4.设定字母图片出现的时间 　　　　　　　　　　　　　　　　　　　　　　　　5.判断函数 　　　　　　　　　　　　　　
这篇教程AI封套扭曲工具制作超炫的游戏海报招贴画教程，教程制作出来AI封套扭曲工具制作超炫的游戏海报招贴画非常漂亮，推荐到脚本之家，喜欢的朋友一起来学习吧！ 具体来看下步骤吧：
教程结束，以上就是AI封套扭曲工具制作超炫的游戏海报招贴画教程，希望大家喜欢！
&html& &head& &meta http-equiv=&Content-Type& content=&text/ charset=gb2312&& &title& 24点游戏_脚本之家_www.jb51.net &/title& &style& body, td { f
1。善用DocumentFragment 之前有个打飞机的游戏。我是用如下方法添加子弹
for(var i=0;i&5;i++){ var bullet = new Bullet(); document.body.appendChild(bullet); }
问题就来了，我的目的是希望同时能出现5颗子弹，所以我循环将5个子弹对象添加到body，这样会导致一个结果：浏
制作主页是一项非常复杂的工作，跟创意合成有点类似。首先要根据客户的要求去找一些好的作品作为参考，找出一些灵感，然后搜集相关的素材，并按照自己的思路去慢慢溶图、渲染颜色，处理明暗及细节等。 最终效果
1、加上底色绘制平面色块作为物体形状，注意透视形状。
2、在平面上用画笔工具选取白色绘制亮色过度。
3、继续丰富亮色部分。
4、在前面的色块上面贴入上面的平
值得一提的是，当下Web开发者们追捧的 Node.js 使得 JavaScript 能够在更多环境下运行，甚至是网站的服务器端，使得这门语言再次受到大家的关注。今天，本文与大家分享25个好玩的 JavaScript 小游戏，感受一下 JavaScript 的魅力。
Bunny Hunt
Ajax Chinese Chess
Digg Attack
Invaders Fr
　　这篇文章收集了20个免费的 JavaScript 游戏引擎分享给开发者。这些游戏引擎能够帮助游戏开发人员更快速高效的开发出各种好玩的游戏。 　　使用 HTML5、CSS3 和 Javascript 可以帮助面向对象开发者开发拥有各种特性的游戏，比如：3D 动画效果，Canvas，数学，颜色，声音，WebGL 等等。最明显的优势在于使用 HTML5 开发的游戏能在任何现代化流行的设备上运行。 &
在本小节的实例学习中，将通过创建基于切片的翻转制作钓鱼小游戏的动画效果。如图 10-75 所示，为本实例的完成效果。
图 10-75 完成效果技术提示
在实例的设计、制作流程中，首先在“ Web
内容”中创建基于切片的翻转，然后在“图层”调板进行动画的设置。如图 10-76 所示，为本实例的制作流程。
图 10-76 制作概览 制作步骤
（ 1 ）启动 ImageReady ，打开上
向大家推荐一款原生JavaScript版连连看游戏， 源码下载，首页如下图所示：
首先看一下html的布局方式在index.html文件中：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/
这里是12个非常有创意的JavaScript小游戏，希望在给我们带来趣味的同时也能更进一步地了解更深层次的JavaScript语言，原来它可以这样的。 Browser Pong
Twitch Browser Ball Crystal Galazy Video & Picture Puzzle Apophis 2029 Bing-Bong Bomberman Bunny Hunt Real
　　JavaScript 早已不只是一门写写网页特效的脚本语言了，如今广泛用于网站的前端交互。值得一提的是，当下Web开发者们追捧的 Node.js 使得 JavaScript 能够在更多环境下运行，甚至是网站的服务器端，使得这门语言再次受到大家的关注。今天，本文与大家分享25个好玩的JavaScript 小游戏，感受一下 JavaScript 的魅力。 Bunny Hunt
九个让人难以置信的HTML5和JavaScript实验 让人眼花缭乱的 HTML5 和 JavaScript 效果 推荐18个基于 HTML 5 Canvas 开发的图表库 29款基于 HTML5 Canvas 开发的网页游戏 五大主流浏览器 CSS3 和 HTML5 兼容性大比拼
　　随着JavaScript结合HTML5开发越来越受欢迎，很多浏览器支持的新功能正
闲来无事，花了两天时间，用javascript 写了一个打豆豆的游戏，至于怎么玩的就不细说了，到网上搜一下就知道了，很简单。
下面是源码，发布出来供大家学习交流。 由于本程序没有用到一个图片，所以界面在ie下豆豆都是方形的比较扎眼，建议用chrome浏览器运行，或者firefox 演示地址：/app/dadoudou.php 不多说，上代码
演示地址： http://demo.jb51.net/js/mouse/index.html 打包下载地址 http://www.jb51.net/jiaoben/32434.html 这个是我无聊的时候写的，先看看效果(UI做得比较丑)：
说明：红色的点击得分100，蓝色的点击扣分100.
只是想用js来写个小游戏，顺便练练js的代码。 先看html部分： html
作者通过简单的步骤将一张普通的游戏截图打造成了流动着的瀑布动画，爱好《QQ自由幻想》和PS的朋友们一定要学习哦！
先看下效果：
本教程主要使用Photoshop设计金属颓废质感的网页登陆框，教程是作者的一个国外客户，教程不是很详细，但是给大家提供一些好的思路，喜欢的朋友一起来学习吧。
教程结束，以上就是Photoshop制作颓废质感的游戏网页登陆框，希望大家喜欢！
首先和大家宣布一个消息，Jscex的代码已经提交至Github上了，感兴趣的朋友下载来Dog Fooding一把，并欢迎提出反馈意见。Jscex受到F#计算表达式的启发，是一个面向JavaScript语言的monadic扩展，最常见的用途便是编写异步程序，尤其是逻辑复杂的异步程序。不过除此之外，使用这套异步库来编写动画或是游戏也是十分容易的事情。例如，一个人物的走动或是爆炸效果，其实可以视为一个贴
今天先预览一下今晚的成果，如下（挫了点，别扔砖头）：
今天主要设计了下选择器，就是进入游戏时展现游戏列表，然后用来选择游戏的一个白痴的功能。
选择器建立在昨天的游戏类基础上，针对昨天的代码我作了部分修改：
//5.游戏类：名称，逻辑方法，键盘方法，开始方法，开始关卡方法,结束方法 var Game = function(name, logicalFn, keyFn, s
这篇教程是向脚本之家的朋友介绍利用Photoshop制作黑白水墨风格的人物游戏签名方法。作者用到了较多的水墨素材图。制作的时候不需要太多的复杂处理，只需要把人物抠出来，调整好颜色，并融合到水墨素材里面，再加上一些装饰元素即可。制作虽然不难，难的是创意思维。 推荐过来，希望大家看完之后能有一定的启发! 最终效果
1、打开人物素材，解锁。 2、把人物部分抠出来，对人物进行磨皮处理。
3、新建一个
本例教程源于一个国外客户的真实案例，在此给大家分享一些我在制作时的一些思路，思路为重点。希望能对大家的设计有所帮助。主要思路：画草图，用纯色块填充草图，加材质做质感，最后整理调整。最终效果1、首先我们把登录框的草图画出来，下图是对方已经画好的，客户说了想要这种形状。如果客户没有指定的话那就要自己动手画了。2、草图完成后，接下来我的操作是使用钢笔工具勾勒出登录框各个部分的外形，然后再用纯色块填充。在
1、Mario（游戏地址：.ar/）
传说中的马里奥网页版，一比一实现了红白机时代超级马里奥中所有功能 与关卡，精细程度不逊原版游戏。依 赖库：无
2、Bunny Hunt（游戏地址：/experiment/BunnyHunt/）
猎兔，一款简
这次的游戏的编写难度比之前的都高很多。本次鄙人用了js的继承以及设计模式的工厂模式，也算是一个突破。。。 游戏的大致设计思路：1，玩家类Player：一个人能左右移动，以及上下移动的小人。拥有的基本方法：{左右移动 : 单纯的键盘左右移动， 向下移动 : 属于向下加速度移动，每次移动都会加一个重力加速度的值， 向上移动 : 其实是跟着方块一起向上移动， 匀速向上运动， 弹跳 : 就是玩
玩法说明：上下左右控制移动，空格发弹。 每打中一个敌机就加100分，每提升5000分，玩家的飞机的一次发弹数就加一，最多四，被敌机撞到或者让敌机飞到底部就算输。。。。
演示代码: http://demo.jb51.net/js/FlyBeat/index.html
游戏目前的功能还是比较简单的。。。。貌似就贴个源码不太好，所以这次还是写写思路。。。
游戏主要分为4个js文件，4个js文件分别
这个游戏主要设计到两点： 首先是胜负运算 由于石头剪刀布是循环性的 石头 杀 剪子 剪子 杀 布 布 杀 石头 石头 杀 剪子 。。。 根据以上特点找出规律，写出算法即可。 让电脑随机 这点比较容易，前面我有写过文章介绍，不明白的童鞋可以去看看。 随机刷屏 其实这个效果不是游戏的关键性，但为了看起来更加互动，好玩，我就给加上了。这里用到了
iPhone热门游戏背后的故事
从小时候的红白机到现在iPhone上玩游戏，游戏经历了不同平台的演变，因为技术的提升，如今iPhone的游戏相比以前互动性更高，在玩这些游戏同时，让我不禁想去了解这游戏背后的制作公司，他们是怎么做出这么好的游戏，我查看了一些资料，整理于此，希望能得到一些启示，关于三个游戏的故事。
想转html5游戏开，这是学习练手的东西，最开始是用面向过程的方式实现，后面用面向对象的方式实现(被坑了)…… 演示地址:/detail/ss8pkzrc html代码
&html& &head& &meta charset=&utf-8&/& &title&掷色子的游戏&/title&gt
如果有一定的JavaScript基础，制作浮动广告还是比较容易的。直接上代码了：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&2110人阅读
需用Construct 2工具
一、新建工程
打开Construct 2，可以看到很熟悉类似微软office风格的界面，点击左上角File文件按钮打开文件菜单，选择New新建工程。
二、插入对象
1、瓦片背景
首先我们来为咱们的游戏添加背景。使用Construct2里的Tiled Background对象（背景瓦片相信大家都很熟悉，RPG游戏制作大师系列的地图元素，通俗点，就是一个图片可以横向或纵向重复平铺，和网页制作里的CSS原理相似，能防止游戏在加载时因图片太大而减慢速度），下面官方提供了素材——背景纹理图，右击另存到你的计算机里。图片链接自官网，自动加了链接，图片自己处理下，或者去官网获取。
现在，在layout画布里双击，弹出插入对象对话框。在该对话框中双击Tiled Background对象。
这时，鼠标指针形状变成了十字形，你可以在布局的任何位置点击，我们在布局中间差不多位置点击，弹出Texture editor对话框，我们点击打开文件夹图标，把刚才保存的背景瓦片载入。
接下来单击对话框右上角X关闭对话框，如果提示保存图片，请保存！现在画布上出现了背景瓦片对象。选中它，在左边的Properties Bar属性面板里设置它的position位置为0,0（左上角），以及它的size大小为（画布的大小）。
背景创建完璧，你可以按CTRL+鼠标滚轮放大缩小，或者点击view菜单-zoom命令来查看整体效果，你也可以按住space空格键，或者按下鼠标中键，来平移画布，很类似PS的操作。你也可以按CTRL+0或者view菜单-zoom
to 100%命令来恢复画布1：1的视图模式。
这时，你可以点击run图标运行，浏览器（IE9哦或者谷歌，火狐最好也新版本）将自动打开并展示游戏，还不错哦！
三、添加层
接下来，我们来添加更多的对象。首先我们先去把背景瓦片对象锁定了，这样不会被我们选中，和PS,FL里的锁定一样。
画布有多个层组成，我们可以在不同的层放置不同的对象，可以通过调整层的上下顺序来调整对象的前后显示，层可以被隐藏或者锁定，平滚特效等。背景瓦片放置于最底层，其他对象如玩家，怪物，NPC等放置在上面的几层。
我们可以通过Layers tab来管理层，和Project bar工程面板在一个选项卡中。
在层面板中，我们可以看到背景层的序号为0，Construct2是从0开始计算，和编程类似，选中背景图层，点击pencil图标将背景层名字更改为Background。并点击Background图层的锁图标将锁定本图层。接着点击绿色的+号按钮添加一个新图层“Main”。
接下来请保持图层Main处于选中状态，接着我们将把对象置于该图层。
四、添加输入控制对象
回到画布中，同样双击插入另外一个对象，这次我们选择Mouse对象，我们需要鼠标输入控制。同样的添加Keyboard对象。
注意：这些对象不需要置于画布中，他们是隐藏的，自动在工程中工作，现在工程中的所有层都可以**鼠标和键盘输入控制了。
五、游戏对象
是时候来添加游戏对象了，如玩家角色，怪物角色，子弹，游戏特效等。下面是本例中要用的图片：
爆炸特效：
在CT2中，游戏中这些对象，我们将采用sprite（RPG中好些人称为精灵，在flash里成为元件）对象来置入。该对象用来显示图片（纹理，图像设计专业说法，在CT2里可以就认为图片），还可以移动，旋转或缩放。
接下来依次插入上面的几个对象，插入过程如下，和上面的操作一样，大致如下：
1、双击插入新对象
2、选择Sprite对象
3、当鼠标变成十字，在画布中点击
4、对话框装载指定图片
5、保存并关闭对话框
注意：如果你觉得这样的操作方法太慢，繁琐，你可以直接把图片拖入到画布中，和PS操作差不多，Construct2会自动为该图片创建Sprite对象。
移动子弹和爆炸对象到画布外，这样游戏一开始，我们看不到这些对象。
默认CT2会自动把我们的对象命名为Sprite,Sprite2,Sprite3,Sprite4，我们可以在他们各自的Properties bar属性面板里的Name属性里更改。依次更改为Player,Monster,Bullet,Explosion（玩家，怪物，子弹，爆炸特效）。
六、添加行为
Behaviors类似于flash中的行为（动作），是预先封装的功能函数。例如，我们添加一个Platform行为给一个对象，添加Solid行为给地板，游戏运行时，该对象就可以象platformer游戏（例如：超级玛丽）中的角色一样跳来跳去。你也可以通过事件来达到同样的效果，但是这需要较长的时间，而且该预置的行为已经很好，当然如果你一定添加点自己的想法，那么就折腾事件重新写你自己需要的吧。
Construct2具有以下行为：
8 Direction movement:这个行为可以让你实现给角色添加8方向移动（方向键）的功能。
Bullet movement:这个行为让对象朝着它当前的角度移动，比如，本例中玩家射出的子弹的移动行为，不要被这名字迷惑了，它不只适用于子弹，也可以应用于怪物等移动。在Contruct2里所有的移动行为都是通过添加速度向前行进。
Scroll to：这个行为可以让运行时画布随着对象移来移去（滚动）。这个行为很适合于角色。
Bound to layout：这个行为可以防止对象离开画布区域。这个行为对于角色来说也很重要。
Destroy outside layout:当对象离开画布区域时，就将其销毁。比如本例中的子弹，如果不销毁的话，虽然子弹离开画布区域了，但是依然暂用内存。所以我们需要及时销毁不再需要的对象。
Fade:这个行为可以给对象添加淡出效果，用于爆炸等特效的消失。
接下来我们就来给对象添加相应的行为。
1、我们给角色player添加8 direction movement行为：选中player，在properties bar属性面板里，找到Behaviors分类，点击Add/Edit弹出Behaviors行为对话框。
2、在对话框中，点击绿色+号-添加行为图标，在弹出的“Add behavior”对话框中双击8 direction movement。
接着以同样的方法给player添加Scroll To和Bound to layout行为，此时&player:Behaviors&对话框如下：
关闭行为对话框。点击运行查看游戏！此时我们已经可以移动角色，屏幕也跟随角色移动，而且通过设置Bound to layout行为后，角色也不能移除画布区域。
3、添加其他行为。
我们以同样的方法给其他对象添加相应的行为如下:
给Bullet对象添加Bullet movement和Destroy outside layout行为。
给Monster对象添加Bullet movement行为。
给Explosion对象添加Fade行为。Fade行为默认会销毁对象，所以不用担心对象有没有销毁。
此时，我们再运行查看游戏，会发现怪物一下子就飞出去了。我们来编辑下怪物的行为，选中Monster怪物对象。看到properties bar属性面板中，我们会发现属性栏里多出了其他一些属性，这些属性是添加了行为后才有的。
更改speed速度为80（单位：像素/秒）
同样的方法给Bullet子弹对象的速度更改为600，Explosion对象的Fade行为的Fade out time淡出时间为0.5秒。
添加更多怪物
按住CTRL，拖拽Monster对象复制几个实例。他们都是Monster对象类型的。
对象类型可认为是对象的类（学过编程的知道，没学也没事）。在事件系统中，我们主要处理的就是对象类型。例如：你创建了一个Bullet collides with Monster事件，将会检测子弹与所有基于Monster对象类型的实例的碰撞，而不需要单独为每个怪物添加碰撞事件。通过Sprites（精灵/元件），一个对象类型的实例将共享同一个图片（纹理材质）。这样游戏在加载的时候只需加载一次该图片即可。我们在以后的课程中再深入对象类型和实例。目前，就可以认为不同类型的敌人是不同类型的对象类型。游戏中运行时创建的怪物对象都是相应对象类型的实例。（学过编程的都知道，本不想翻译这段话的，想想还是翻了，不必太纠结这个）
使用Ctrl +拖拽 创建7到8个新的怪物实例（为了区分下，往下我们用实例来表述）。放置怪物的时候不要太靠近玩家。否则角色一下子就挂了！此时你的画布类似如下：
接下来我们将通过Construct2的可视化编程——事件系统，添加自定义功能函数。
首先，在画布区域上方的选项卡上切换到Event sheet1事件编辑器面板，一个列表的事件被成为Event sheet事件表。游戏的不同部分可以拥有不同的事件表，事件表同样可以&include&包含即导入（编程里的概念，不懂就无视吧）其他事件表，这样可以重复利用事件表，目前我们不需要这些功能。
Construct 2整个系统运作是基于事件系统，大多数显示器帧频为60帧/秒，为了匹配显示器达到平滑的显示效果，Construct 2也设置了差不多帧速率。所以事件表通常是一秒钟运行60次。每次都会更新屏幕相应发生变化的区域。事件表运行时的顺序为从上往下，所以靠上的事件先运行。
条件、动作、子事件
事件包含条件，测试某些条件是否满足，例如，is spacebar down?(检测空格键是否按下)。如果条件满足了，那么事件的动作将会运行，例如，Create a bullet object创建一个子弹实例。当动作运行后，任何子事件也会运行，这样可以测试更多条件，运行更多的动作和更多的子事件等。使用该系统，我们可以为游戏或程序创建更多负责的功能。本例中，我们不需要该功能。
简述如下：
Are all conditions met?& && && &&&//条件是否都满足？
---&yes:run all the event's actions.& && && & //是：运行所有事件的动作
---&no:go to next event(not including any sub-event)& && &//否：往下运行下个事件，这里没有运用（包含）子事件
我们来创建第一个事件
我们将使player（发射口）一直看向鼠标，这样我们点击发射子弹的时候，子弹将发往鼠标方向。如下：
记住：每次屏幕被重绘的时候，tick(一个内部循环中，每秒几帧屏幕重绘，百度一下吧，囧)将会运行（tick下的事件都会运行一次）。所以如果我们强制player每帧都朝向鼠标，那么player将一直朝向鼠标。
我们开始制作该事件。在event sheet的空白位置双击，将打开添加事件对话框：
不同的对象根据他们要做的行为拥有不同的条件和动作，在对话框中双击System对象，对话框中列出了所有System对象的条件：
双击Every tick条件插入到事件表中。对话框将关闭，Every tick事件被创建，但没有actions(动作)。如下：
接着我们添加一个动作来使角色看向鼠标。点击event右边的Add action链接，打开对话框如下：
对话框中列出了可以添加动作的对象，双击player对象，对话框列出了player对象可添加的动作如下：
选取Set angle towards position动作。该动作会自动计算角色到给定的X,Y坐标的角度。
接下来要指定X,Y坐标值（动作的参数，条件同样可以带有参数）。我们输入Mouse.X和Mouse.Y（也可以输入表达式如：Mouse.X+100，虽然用的并不多）
此时，你运行就可以看到效果了。
如果提示错误：Mouse is not any object name，确保你已添加了Mouse object鼠标对象!（按步骤做下来的，不会提示，官方的文档有注释，我也就翻一下呗）
你可能会担心如何记住所有可用的表达式。别担心，浮动在上边的object panel，默认处于半透明状态不会干扰你的注意力。移动鼠标到该面板上，单击，面板变完全可见。该面板起着字典的功能，可以帮你记住各类你可以使用的表达式。你可以双击表达式来插入，省的手动输入。
还有，点击对话框上的Done确定按钮。该动作就被添加了！如下：
第一个事件添加完毕！尝试运行游戏，角色在移动的时候一直朝下鼠标。
八、添加游戏功能
通过上边的学习，我们已经学会了添加事件，教程到这，已经很长了，我们会发现教程看起来很啰嗦，太细，做起来一下子就完了，所以接下来我们稍微简化下。记住添加条件或动作的步骤如下：
1、双击添加新事件，点击Add action链接添加一个动作。
2、在对话框中双击要添加条件/动作的对象
3、选取要添加的条件/动作
4、如果有需要的话，输入参数
接下来教程中以下面的格式来表述：
Add condition System-&Every tick
Add action Player-&Set angle towards position-&X:Mouse.X& &Y:Mouse.Y
让角色可以射击
当玩家点击的时候，可以发射子弹。这可以通过Spawn an object动作来实现，该动作在同样的位置和角度（相对于角色）创建新的对象实例。子弹的Bullet movement属性将会使它向前飞出。制作如下事件：
条件：Mouse-&On click-&Left clicked(the default)& && & //鼠标-&点击-&左击（默认）
动作：Player-&Spawn another object-&For Object, choose the Bullet& && && &//Play对象-&产生另外的对象-&对象，选择子弹
层，输入1（“Main”图层）,Image point（子弹的发射起点）保持默认为0。如下：
如果你运行game,你将看到子弹从角色图片的中心发出，并不是从枪口发出。我们来修改下，在工程或对象面板中右击player对象选择Edit animations编辑动画。
在弹出的图片编辑器中，选择Set origin and image points工具
看到image points对话框，对象的原点以红点显示。
这是对象的原点（如果你旋转对象，将绕着这个点），点击绿色的+号按钮添加一个点，该点以蓝点显示。我们在角色图片枪口位置处左击，将该点放置于枪口位置：
关闭图片编辑器，双击事件表中早前添加的Spawn an object动作，更改Image point为1.在面板中可以看到序号的，默认的原点为0，其他添加的一次1，2。。等。如下：
运行游戏。此时子弹已经修改为从枪口发射。此时，子弹没有做其他任何事。接下来我们来添加碰撞事件，用来消灭敌人。
添加事件如下：
条件：Bullet-&On collision with another object-&pick Monster.& && && & //子弹-&于其他对象碰撞-&选择Monster怪物。
动作：Monster-&Destroy& && && && && &//怪物-&消灭
动作：Bullet-&Spawn another object-&Explosion, layer 1& && && && && &&&//在图层1 碰撞的位置产生新对象-爆炸特效
动作：Bullet-&Destroy& && && && && && && & //子弹销毁
运行游戏，尝试射击一个怪物，我们可以看到碰撞发生，爆炸特效也产生了，杯具的是，有个大大的黑色边框，好难看！
不用担心，我们可以去掉黑框，在工程面板或者对象面板点击Explosion object爆炸特效对象。在它的属性面板里设置Effect属性为Additive（叠加，玩过PS的知道，黑色颜色值为0，叠加后就不起作用，就看不到了，具体的去百度下吧）。再次尝试游戏可以看到，完美了！
让怪物聪明一点（添加怪物智能AI，专业说法，囧，本例可没那么高深）
当下怪物只会向右移动。我们来让他们更有趣些。首先让他们产生在随机的位置。
条件：System-&On start of Layout& && && && && && &&&//系统-&画布启动时
动作：Monster-&Set angle-&random(360)& && && && & //怪物-&设置角度-&0-360随机度数
此时，怪物依然移出画布，再也看不到，接着我们再来修改，让怪物移动边缘处的时候，自动往回移动，并且添加智能，让怪物朝着玩家角色移动（自然是角色没挂的时候）。
条件：Monster-&Is outside layout& && && && && &//判断怪物是否要离开画布
动作：Monster-&Set angle toward position-&For X, Player.X - for Y,Player.Y& && && & //设置怪物朝向角色的坐标
再次运行游戏。此时你可以看到怪物在画布里朝着不同的方向移来移去，最终都会朝着角色围过来。这个智能的行为咱们不编程看不到代码（就算编程也太难，囧，要不也不找这软件了哈），将就着看吧，似乎不错了！
此我们的角色还是无敌的，怪物却是太脆落了，子弹一碰就挂了，接着我们通过instance variables实例变量来修改这些。
九、实例变量
Instance variables实例变量允许每个怪物存储它自身的生命值。一个变量简化了说就是一个可以改变的值。他们单独存储，分别带他们相应的实例。
我们来为怪物添加health实例变量。在工程或对象面板选择怪物monster（注意monster的意思就是怪物，本教程翻译的时候好多地方都是这样注释的，因为实际制作中我们是用英文的）。亦或，在画布中选取monster怪物对象。这样属性面板呈现的是怪物的相关属性。在properties bar属性面板的Instance variables分类下点击Add/edit：
弹出实例变量对话框，类似于早前的行为对话框。本对话框允许你为对象添加或修改实例变量。点击绿色+号按钮来添加新变量。
在弹出的对话框中输入变量名health，保持类型为Number（数字型），设置Initial value初始值为5。这使怪物拥有5个生命值。当他们被子弹射到时，生命值减1，直到为0，被消灭。
当我们点击OK确定。变量就出现在实例变量对话框中以及属性面板中，可以通过Add/Edit链接修改。
切换到事件表（event sheet记得英文哦，教程中有些地方就写中文了，软件还是英文的，软件是可以汉化，但是太费时间，等心情好再说）中，我们来更改怪物被消灭的事件。
找到事件Bullet-on collision with Monster.现在的动作是destroy monster,右击该动作，选择Replace。
弹出的对话框和新建动作的对话框一样，选择Monster-&Subtract from(in the Instance variables catrgory)-&Instance variable &health&,并输入值1。点击Done确定。该动作呈现如下：
现在我们射击怪物时，当子弹碰到怪物，怪物生命值减1，子弹爆炸消失，但我们得添加一个事件来检测怪物的生命为0时，让它消灭。添加如下事件：
条件：Monster-&Compare instance variable-&Health,Less or equal,0& && && &//校对实例变量值是否&=0 不要用=0，连射可导致怪物生命值负数。
动作：Monster-&Spawn another object-&Explosion, layer1& && && && && &//产生爆炸效果，你可以替换成怪物挂掉的效果
动作：Monster-&Destroy& && && & //怪物消灭
同样对怪物和玩家之间添加碰撞，以及角色的生命值。如下：
运行游戏，尝试射击。
显示分数并存档
我们来添加分数显示功能，让玩家知道猎取了多少怪物，获得了多少分数。我们需要另外一个变量，但此时我们熬添加一个全局变量global variable。假设我们的游戏有好几关，全局变量就可以累积分数。全局变量适用于整个游戏，只有一个之存储着。
右击事件表底部，并选择Add global variable。
输入分数变量名Score。其他字段默认即可，点击OK确定。变量将从0开始计数。
现在全局变量呈现在事件表中：
注意：local variable局部变量限制于自身所在事件的作用范围，现在我们不用考虑这个，本例不用。其实很多东西都是参考程序里的，不过无所谓了，无视吧！
接着我们来添加动作，在Monster:health less or equal 0事件里添加动作System-&Add to(under Global & local variables)-&Score, value 1.如下：
现在玩家就拥有分数了，每当怪物被杀掉，就可以增加1分，但现在我们运行游戏依然看不到分数，我们需要一个文本对象。
十、添加HUD元素
玩过游戏的都知道HUD，游戏界面最上面固定不动的界面元素，显示玩家生命值，分数等其他信息。接着我们来添加一个超级简单的HUD，只有一个文本对象text object。因为我们要让HUD界面的对象保持固定不动，而Main图层我们是需要跟随角色滚动的。所以新建一个图层HUD，设置parallax属性为0，这样该层就不再滚动。
在图层面板layers bar中新建一个层HUS。请确保该层在最顶上位置，并选中，然后在属性面板中设置Parallax属性值X,均Y为0,0。
在画布空白处双击插入对象，选择Text Object,放置于画布的左上角，我们的背景是黑灰系的，我们去更改字体大小，颜色等让文本看得很清楚。并通过调整杆（选中对象时，四方框上的正方形）拉伸文本足够宽来显示分数。如下：
切换到事件表中。我们来添加动作让分数每帧可以更新。点击Every tick事件，添加动作Text-&Set Text。
使用&文本连接操作符，我们可以转换数字为文本并和文本字符串连接。输入如下：
&Score:& & Score& && && && &&&//文本字符串 用双引号括起来，变量则不要
运行游戏，射击怪物，现在分数已可显示更新，保持位置不变。
教程接近尾声了，我们再添加一些功能并总结。
添加如下事件：
条件：System-&Every X seconds-&3& && && && &&&//添加系统事件每3秒启动
动作：system-&Create object-&Monster, layer 1, 1400(for X), random(1024)(for Y)& && && &&&//在图层1创建怪物实例，坐标可以自己指定，这里为画布最右边还过去点，已离开画布，因为我们画布的大小为，Y坐标为随机数0-1024
恭喜，你已使用Construct2创建了第一个HTML5游戏，你可以点击左上角文件菜单中的EXport导出命令导出游戏相关网页文件，放置于网站空间，也可以用网页编辑软件编辑生长的网页，添加广告等，或者置入现成网页。
在本节课程中，我们学习了一些最基本但很重要的知识点：插入对象，使用层、行为、事件等。希望能引起你对Construct2的兴趣，继续使用它来创建更多更好的游戏。
你可以在这里下载本例完成的工程 下载地址
作者添加了其他一些元素，比如&Game over&文本等，文件也有注释，不过是英文的，懂英文的小菜，不懂的也没事，学下吧，计算机英语常用的就这些单词。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：91631次
积分：2708
积分：2708
排名：第8305名
原创：189篇
转载：43篇
评论：15条
(5)(10)(41)(127)(31)(1)(3)(12)(3)}