您的位置: 主页>机器人编程>Javascript编程>《javascript-少儿编程》第15章用键盘控制动画之整
加盟酷吧机器人 培养孩子核心能力

《javascript-少儿编程》第15章用键盘控制动画之整

  已经回顾了所有的代码,这里给出完整的代码列表以方便参考。

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var width = canvas.width;

var height = canvas.height;

var circle = function (x, y, radius, fillCircle) {

ctx.beginPath();

ctx.arc(x, y, radius, 0, Math.PI * 2, false);

if (fillCircle) {

ctx.fill();

} else {

ctx.stroke();

}

};

// The Ball constructor

var Ball = function () {

this.x = width / 2;

this.y = height / 2;

this.xSpeed = 5;

this.ySpeed = 0;

};

// Update the ball's position based on its speed

Ball.prototype.move = function () {

this.x += this.xSpeed;

this.y += this.ySpeed;

if (this.x < 0) {

this.x = width;

} else if (this.x > width) {

this.x = 0;

} else if (this.y < 0) {

this.y = height;

} else if (this.y > height) {

this.y = 0;

} };

// Draw the ball at its current position

Ball.prototype.draw = function () {

circle(this.x, this.y, 10, true);

};

// Set the ball's direction based on a string

Ball.prototype.setDirection = function (direction) {

if (direction === "up") {

this.xSpeed = 0;

this.ySpeed = -5;

} else if (direction === "down") {

this.xSpeed = 0;

this.ySpeed = 5;

} else if (direction === "left") {

this.xSpeed = -5;

this.ySpeed = 0;

} else if (direction === "right") {

this.xSpeed = 5;

this.ySpeed = 0;

} else if (direction === "stop") {

this.xSpeed = 0;

this.ySpeed = 0;

}

};

// Create the ball object

var ball = new Ball();

// An object to convert keycodes into action names

var keyActions = {

32: "stop",

37: "left",

38: "up",

39: "right",

40: "down" };

// The keydown handler that will be called for every keypress

$("body").keydown(function (event) {

var direction = keyActions[event.keyCode];

ball.setDirection(direction);

});

// The animation function, called every 30 ms

setInterval(function () {

ctx.clearRect(0, 0, width, height);

ball.draw();

ball.move();

ctx.strokeRect(0, 0, width, height);

}, 30);

欧美思机器人教育加盟 赚钱好项目
上一篇:《javascript-少儿编程》第15章用键盘控制动画之运
下一篇:《javascript-少儿编程》第15章用键盘控制动画之实
您可能喜欢
回到顶部