1_移动小球

源码https://github.com/mzkmzk/Canvas/tree/v0.1_complete_ball_more/demo/shoot_game

尝鲜在线版http://canvas.404mzk.com/shoot_game/html/1_base.html

1. 定义Canvas

<canvas id="base_1"></canvas>

2. 初始化

初始化主要有

  1. 初始化画布
  2. 准备清除画布函数
  3. 注册键盘监听事件
var base_1 = document.getElementById('base_1');

//定义canvas的宽度,和定义背景为黑色
base_1.width = document.body.scrollWidth;
base_1.height = document.body.scrollHeight;
var ctx = base_1.getContext('2d');

/**
 * 清除画布
 */
function clear_base_1 (){
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, base_1.width, base_1.height); //还原掉上次的白色球
}

clear_base_1();

/**
 * 注册键盘监听事件
 */
KeyPress.init();

3. 小球数据结构

vae Lead = {
    /**
     * x坐标
     */
    x: 15,
    /**
     * y坐标
     */
    y: document.body.scrollHeight - 15,
    /**
     * 半径
     */
    radius: 10,
    /**
     * 加速度
     */
    ACCELERATED_VELOCITY: 0.09,
    /**
     * 初始速度
     */
    velocity: {'x':0,'y':0},
    /**
     * 最大速度
     */
    MAX_VELOCITY: 3,
    /**
     * 记录wasd是否被按
     */
    more_direction: [],
    ...
}

4. 移动逻辑

Canvas中更新状态是全局变化,就是我的小球要移动

  1. 必须把前一次的画布清除,即重绘背景
  2. 重新把小球定义到要移动的位置

canvas主要通过定时器更新画布

loop_game();
function loop_game() {
    Lead.draw_screen();
    window.setTimeout(loop_game, 1000/40);
}

这里主要是执行draw_screen();

var Lead = {
    //数据结构
    ...
    draw_screen: function(){
        clear_base_1();
        this.change_velocity();
        this.more();
        this.draw_ball();
    }
}

draw_screen要执行的操作有

  1. 清空画布
  2. 判断按键,计算小球速度

     var Lead = {
         ...
         change_velocity: function() {
           if (this.more_direction[65] === true) {
               this.more_left();
           }
           if (this.more_direction[68] === true) {
               this.more_right();
           }
           if (this.more_direction[83] === true) {
               this.more_up();
           }
           if (this.more_direction[87] === true) {
               this.more_down();
           }
       },
       more_left: function(){
           this.velocity['x'] -= this.ACCELERATED_VELOCITY;
       },
       more_right: function(){
           this.velocity['x'] += this.ACCELERATED_VELOCITY;
       },
       more_up: function(){
           this.velocity['y'] += this.ACCELERATED_VELOCITY;
       },
       more_down: function(){
           this.velocity['y'] -= this.ACCELERATED_VELOCITY;
       },
           ...
       }
    
  3. 根据小球速度,计算小球下次该出现的坐标

     vae Lead = {
       ...
        more: function() {
           this.x += this.velocity['x'];
           this.y += this.velocity['y'];
       },
       ...
     }
    
  4. 画出小球

     draw_ball: function(){
           ctx.beginPath();
           ctx.fillStyle = 'white';
           ctx.arc(this.x +this.radius, this.y+this.radius, 10, 0, Math.PI * 2, true);
           ctx.closePath();
           ctx.fill();
       },
    

5.键盘监听

var KeyPress = {
    init_key_up: function() {
        document.onkeyup = function(e) {
            e = e || window.event;
            Lead.more_direction[e.keyCode] = false;
        }
    },
    init_key_down: function() {
        document.onkeydown = function(e) {
            e = e || window.evnet;
            Lead.more_direction[e.keyCode] = true;
        }
    },
    init: function(){
        this.init_key_down();
        this.init_key_up();
    }
}

6 展示

移动的小球

© 404mzk all right reserved,powered by Gitbookhttp://blog.404mzk.com 该文件修订时间: 2016-12-12 22:55:35

results matching ""

    No results matching ""