JavaScript学习 (一)
来源：互联网 发布：win8系统修复软件 编辑：程序博客网 时间：2024/09/21 06:36
最近玩了一款手游，被游戏内容给吸引住，于是乎想做一款类似的游戏，题材不同，想了想用以前用过的cocos2dx，但是素材与UI的设计却很费时间，于是乎就找到了cocos creator，两者的区别在于，一个是数据驱动，一个是代码驱动，cocos creator相对来说操作方便，于是就接触到了Js。
Js的基本语法：http://docs.cocos.com/creator/manual/zh/scripting/javascript-primer.html
同时推荐看萧井陌的直播：https://search.bilibili.com/all?keyword=%E8%90%A7%E4%BA%95%E9%99%8C&page=1&order=totalrank
如变量的声明或者对象的声明，函数的声明，在上面都可以找到，学习Js也让我感觉到了，脚本语言的强大，与简便。
那么，为了上手Js，就写一个简单的小游戏来练习练习,在写脚本的过程中，不知道的东西去查，可以通过MDN+要查的东西，大概能查到，如MDN canvas或者MDN log，或者直接百度怎样在canvas放图片之类的。
（虽然就短短的几十行，却写了快一下午，也发现了自己分析代码的能力不强，写代码不仔细漏的漏少的少很多时间都浪费在这排错，也感觉到了脚本虽然简单，但是有一种类型有点用着用着就乱的感觉，在写的过程中也慢慢的熟悉了）
代码大概意思是：写一个板子，和一个球，当球碰到板子回反弹。在实现的过程中，较好的封装，让代码更方便于修改，如添加一些功能，事件之类的。通过event与相应的callback绑定(存储在一个对象容器中)，再通过eventlistener监听事件判断是否事件发生并相应的处理事件，在调度器或者timer中遍历事件容器，若事件处于发生状态，如下列，keydown为事件发生，则在listener中改变该事件状态，在调度器中调用。
（晚上顺便用C++写一遍。。）
<!DOCTYPE html><html><head> <title>Hello Wrold</title> <style media="screen"> canvas { border: 1px black solid } </style></head><body> <canvas id="m_canvas" width="400" height="300"></canvas> <script> var log = console.log.bind(console) var setImagePath = function (path) { var img = new Image() img.src = path return img } //Paddle var Paddle = function () { //图片文件放在html文件同一个文件夹 var img = setImagePath('paddle.png') paddle = { img: img, x: 100, y: 200, speed: 5, } paddle.moveleft = function () { paddle.x -= paddle.speed } paddle.moveright = function () { paddle.x += paddle.speed } paddle.clash=function(ball){ if (ball.y + ball.img.height > paddle.y) { if (ball.x > paddle.x && ball.x < paddle.x + paddle.img.width) { log('相撞') return true } } return false } return paddle } //Ball var Ball = function () { //图片文件放在html文件同一个文件夹 var img = setImagePath('ball.png') ball = { img: img, x: 100, y: 100, dx: 10, dy: 10, isfire:false, } ball.move = function () { if (ball.isfire) { if (ball.x < 0 || ball.x > 400) { ball.dx = -ball.dx } if (ball.y < 0 || ball.y > 300) { ball.dy = -ball.dy } ball.x+=ball.dx ball.y+=ball.dy } } return ball } //game var gameinit = function () { var gameManage = { action: {}, keydown: {}, } var canvas = document.querySelector('#m_canvas') var context = canvas.getContext('2d') //init canvas gameManage.canvas = canvas gameManage.ctx = context gameManage.drawImage = function (guaImage) { gameManage.ctx.drawImage(guaImage.img, guaImage.x, guaImage.y) } //register event gameManage.registerEvent = function (key, callback) { gameManage.action[key] = callback } //eventlistenr window.addEventListener('keydown', function (event) { log(event) gameManage.keydown[event.key] = true; }) window.addEventListener('keyup', function (event) { log(event) gameManage.keydown[event.key] = false; }) //timer setInterval(function () { // actions为获取对象的keys数组 var actions = Object.keys(gameManage.action) log(actions) for (var i = 0; i < actions.length; i++) { var key = actions[i] if (gameManage.keydown[key]) { // 如果按键被按下, 调用注册的 action gameManage.action[key]() } } // update gameManage.update() // clear gameManage.ctx.clearRect(0, 0, gameManage.canvas.width, gameManage.canvas.height) // draw gameManage.draw() }, 1000 / 30) return gameManage } //入口 var _main=function(){ var paddle=Paddle() var ball=Ball() var game=gameinit() //register Event game.registerEvent('a',function(){ paddle.moveleft() }) game.registerEvent('d',function(){ paddle.moveright() }) game.registerEvent('f',function(){ ball.isfire=true }) game.update=function(){ ball.move() if(paddle.clash(ball)){ ball.dy*=-1 } } //init some event game.draw=function(){ game.drawImage(paddle) game.drawImage(ball) } } _main() </script></body></html>C++版本（大概写法）：
至于怎么实现一个setinterval，我觉得弄一个Time类，随便写的。。不用在意细节。。大概想法
struct GameMenerge { //初始画面 void init() { } //事件绑定 map<std::string, std::function<void()>>eventContain; map<std::string, bool>actionType; //注册事件 void regsiterEvent(std::string name, std::function<void()>callback) { eventContain[name] = callback; } void Eventlistener(string state) { if (eventContain.find(state) != eventContain.end() ){ actionType[state] = true; } else { actionType[state] = false; } } //draw void clearCanvas() { } void draw() { } void Setinterval() { while (1) { } }};struct Sprite { int pos_x, pos_y; string imagePath;};struct Paddle :public Sprite{ void moveleft() { } void moveright() { }};struct Ball :public Sprite{ void move() { }};//##为可允许省略可变参数#define CCAllBACK(__selector__, __target__, ...) std::bind(&__selector__, __target__, ##__VA_ARGS__)//应该为Timer添加一个停止某个调度器，类似于加一个判断某Timer是否运行的key(Timer-id)-Value(bool)struct Timer { list<std::function<void()>>_TimerContain; void addsetInterval(std::function<void()>func) { _TimerContain.push_back(func); } void run() { for (auto i : _TimerContain) { if(isrun[Timer-id]) _TimerContain[Timer-id] } }};阅读全文
