Jackson-p / Mud

怀旧的win7和xp下的游戏--泥潭

Mud

PC项目地址

描述：

大体上是用纯js+canvas完成的小游戏，游戏主角是个蓝色的火柴人，可以上下左右移动跳跃，来躲避不断生成的攻击球，看看可以挺几秒，中间会随机出现道具：增加生命，或者清空当前生命球。

大题思路：

就是把所有的东西当成对象封装起来,用setInterval加以渲染以保证物体的位置和其画布位置同步

//这个是生成攻击球的例子
setInterval(function(){
    update();
    renderBall();
},50);
setInterval(function(){
    addBall();
},4000);

优化

球很多很多的时候（一般人也玩不到那个时候），会有卡顿于是看了下canvas性能优化

大体思路：

1、避免canvas整体重绘

2、缓存机制

不足：

1、写这个东西居然用了5层画布。。。，所有有关基础画布设置和DOM操作定义变量部分，和一些控制参数的部分都放到了setting.js里

var lifesfa = document.getElementById('life');
var lifes = lifesfa.children[1];
//上述两行为了改命
var t = 0;
var timer = document.getElementById('timer');
setInterval(function(){
    t+=1;
    timer.innerHTML =  "Time:" +t;
},1000)
var Maxscore = document.getElementById('red');
var storage = window.localStorage;
Maxscore.innerHTML ="最高分：" + storage.getItem('Maxscore');
//以上为基础dom操作
//这里增加一部分考虑，看可不可以通过requestAnimationFrame来做，研究下
var canvas = document.getElementById('myCanvas');
var role = document.getElementById('myRole');
var enemy = document.getElementById('myEnemy');
var ballc = document.getElementById('myBall');
var specc = document.getElementById('mySpecial');
var ctx = canvas.getContext('2d');
var ctr = role.getContext('2d'); //既然不打算用图片只能用两层画布了
var cte = enemy.getContext('2d');//第三层用来放泥潭和小怪物
var ctb = ballc.getContext('2d');//我是真的没有想用第四层，希望以后有好的解决方案
var cts = specc.getContext('2d');//好吧我已经不知羞耻了。。。

2、没有突破js一次性只能识别到键盘上一个按键的问题，因此跳跃之后才能按左右键进行协调（没能摆脱和4399一样的命运orz)

3、如果解决了上个问题，才能把red加上，素材都弄好了，有空打造个真正的泥潭出来。。。

ps：git clone 打开index.html即可运行（低版本的IE不支持）